Como crear un tema de WordPress (Parte 1)
|Desarrollar una plantilla o “theme de WordPress” puede resultar muy difícil so no se tienen los conocimientos necesarios. Sin embargo, una vez que se sabe lo principal que es la estructura de una de estas plantillas resulta mucho más fácil e incluso podemos mejorar nuestro diseño con CSS.
Para saber crear una plantilla de WordPress necesitaremos unos conocimientos base:
- HTML – Un nivel intermedio será suficiente para nuestro objetivo.
- CSS – Al principio no se requiere mucho, sin embargo si queremos hacer algo de verdad bueno necesitaremos conocimientos avanzados sobre la creación de hojas de estilos.
- PHP – No se necesita mucho conocimiento, si se sabe lo básico de éste lenguaje de programación será suficiente.
Simplificando el trabajo con Frameworks
Todo proyecto de desarrollo se puede empezar desde cero, sin embargo y para simplificar el trabajo podemos utilizar frameworks o en este caso plantillas en blanco que nos ahorrarán tiempo al momento de crear la plantilla base. Antes de empezar vamos a ver algunos enlaces que nos proporcionan éste tipo de frameworks.
- 10 temas en blanco para desarrollar plantillas de WordPress (SpeckyBoy)
- Starkers, tema minimalista y con un maquetado básico para empezar a desarrollar plantillas. (Starkers Theme)
- Plantilla con los nuevos elementos HTML 5 aplicados (WhiteBoard Framework).
Estructura de una plantilla de WordPress
Conocer la estructura de las plantillas es importante a la hora de diseñar, pues así sabremos que parte del diseño contiene un área especifica; por tal razón en el siguiente listado vamos a hacer un listado de los archivos básicos que debe contener una plantilla de WordPress:
- header.php – Esta es la cabecera del sitio.
- index.php – Todo lo que se muestra en la página principal.
- sidebar.php – Barra lateral del sitio.
- footer.php – Pie de página.
- single.php – Post individuales.
- page.php – Páginas individuales de WordPress.
- comments.php – Plantilla donde se muestran los comentarios hechos a los artículos.
- search.php – Página donde se muestran los resultados de las búsquedas.
- searchform.php – Este es el formulario de búsqueda.
- archive.php – Muestra posts por fechas.
- functions.php – Aquí se guardan todas las funciones adicionales que queramos añadir a la plantilla.
- 404.php – Página de error 404.
- style.css – Archivo que contiene todos los estilos CSS de la plantilla.
Modificar la hoja de estilos de WordPress
Como primera instancia debemos ordenar nuestra hoja de estilos para así saber en que estamos trabajando. Al momento de editar el style.css del WhiteBoard veremos varias cosas que están entre comentarios, casi ninguna sirve excepto la parte que trae los datos básicos del tema:
Theme Name: Whiteboard
Theme URI: http://whiteboardframework.com/
Author: Bold Perspective
Author URI: http://boldperspective.com/
Description: The Whiteboard Famework for WordPress is built to speed up the process of developing a WordPress theme.
Version: 3.0.4
Cuando nosotros accedemos al panel de administración de WordPress e instalamos un nuevo tema, veremos que nos muestra el nombre del mismo, quien es el autor y una breve descripción, pues bien, esa parte la podemos editar desde la hoja de estilos modificando el código que hemos puesto anteriormente.
http://www.youtube.com/watch?v=qzX1-9zDLLw
Sí deseas ver el vídeotutorial en Blip.tv puedes hacerlo haciendo click aquí
Qué ganas de que suban la segunda parte! es el mejor tutorial que he visto hasta ahora!
Que onda con la segunfa parte?? Ya no saldra?
Gracias por sus comentarios amigos. En breve tendrán las segunda parte, estamos trabajando en ello… =)
Muy de acuerdo contigo, Flavia.
Saludos
Ya está disponible la segunda parte del tutorial sobre como crear temas para WordPress:
https://expertoblog.com/como-crear-un-tema-para-wordpress-parte-2/
Un saludo.
Woo!! Estoy aprendiendo y mirando por todas partes y esto es lo que queria entender, como esta organizado una pagina de wordpress todos ensenan como hacer cosas pero ninguno habla de la organzicion que wordpress le da a las paginas, basico me parece asi se use un pnatilla, saber donde esta uno parado Excelente, Lo felicito y gracias.
Nos alegramos de que te haya sido útil Elsa!
Gracias por esta informacion, hasta ahora es el mejor tutorial que he visto, quisiera saber una cosa por ejemplo yo estoy creando un sitio web, escojo una plantilla o temple, yo puedo modificarlo con el netbeans 7 en aplicacion php, ya que es gratis o no tendria que utilizar cs5 ni otro porgrama que requiera licencia, y si ustedes saben como modificarlo con este programa de ante mano muchas gracias y los felicito por el tiempo que se gastaron que vale oro.
Loco muy bueno el tuto me gustaria saber como puedo hacer con wordpress un tema pero en forma de pagina web no que paresca un blog sino algo clasico y que se vea profesional se que es mucho pedir pero seria bueno experimentar si quieres nos ponemos en contacto. saludos y buena suerte
Buena onda el tutorial, pero me parece que si muestras como editar el archivo CSS no deberias mostrar la modificacion del autor, URL, descripcion, si no ir directo al grano. Quien este viendo este curso debe tener conocimientos intermedios de CSS HTML PHP si no en caso de encontrarse con algun problema con el sitio ya montado y funcionando no va a saber que hacer.
Estoy cada minuto mas interesado en el vídeo tutorial.
Gracias!
Alguien sabe donde estan definidas las funciones como la get_header().