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:

  1. HTML – Un nivel intermedio será suficiente para nuestro objetivo.
  2. 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.
  3. 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.

  1. 10 temas en blanco para desarrollar plantillas de WordPress (SpeckyBoy)
  2. Starkers, tema minimalista y con un maquetado básico para empezar a desarrollar plantillas. (Starkers Theme)
  3. 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:

Estructura plantilla 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í

Síguenos!
12 Comments

Comentar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

|
Facebook11k
Twitter7k