Creando un tema de WordPress a partir de HTML estático: Subir tu tema a WordPress

En las dos primeras partes de esta serie, aprendiste a preparar HTML estático para WordPress y a dividir tu archivo HTML en un conjunto de archivos de plantilla.

Ahora tienes los comienzos de un tema, pero desafortunadamente tus archivos no funcionarán como un tema todavía.

Para que cualquier tema funcione, necesitas decirle a WordPress sobre el tema, y lo haces en la hoja de estilos. En este tutorial, lo harás.

A continuación, subirás tu nuevo tema a una instalación de WordPress y lo probarás. Además, crearás una captura de pantalla de tu tema para que sea más fácil trabajar con él en el administrador de WordPress.

Lo que necesitarás

Como a partir de ahora trabajarás con WordPress, necesitarás algunas herramientas más para este tutorial:

• Tu editor de código de elección
• Un navegador para probar tu trabajo
• Software de imagen para guardar tu captura de pantalla en las dimensiones correctas
• Una instalación de WordPress, ya sea local o remota
• Si trabajas localmente, necesitarás MAMP, WAMP o LAMP para permitir que WordPress funcione
• Si trabajas de forma remota, necesitarás acceso FTP a tu sitio más una cuenta de administrador en tu instalación de WordPress.

1. Configurar el tema en la hoja de estilo

Antes de subir el tema, debes editar tu hoja de estilo. Abre el archivo style.css en tu carpeta de plantillas.

En la parte superior del archivo agrega lo siguiente:

1

2

/*

3

Theme Name: WordPress Theme Building from HTML - Part 3

4

Theme URI: https://rachelmccollin.co.uk

5

Author: Rachel McCollin

6

Author URI: http://rachelmccollin.co.uk

7

Description: The theme to accompany the wptutsplus series on creating a WordPress theme from static HTML. This theme accompanies Part 3 of the series.

8

Version: 3.0

9

License: GNU General Public License v2 or later

10

License URI: http://www.gnu.org/licenses/gpl-2.0.html

11

*/

Los detalles de lo que añadas serán específicos para ti y tu tema, pero deben seguir la misma estructura.

Guarda tu hoja de estilo y ciérrala.

2. Llamar la hoja de estilo desde el archivo de encabezado

Por el momento, tu archivo header.php tiene un enlace a la hoja de estilo que es estático y no funcionará en WordPress. Tienes que cambiar eso antes de subir el tema.

Abre el archivo header.php y encuentra la línea que dice:

1

2

	<link href="style.css" rel="stylesheet" media="all" type="text/css" />

Reemplázalo por lo siguiente:

1

2

	<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" media="all" type="text/css" />

Esto incluye la función <?php bloginfo('stylesheet_url' ); ?> que le dice a WordPress dónde encontrar la hoja de estilo.

Ahora guarda el archivo y ciérralo.

3. Crear una captura de pantalla

Lo último que hay que hacer antes de subir el tema es crear una captura de pantalla. Las capturas de pantalla para el administrador de WordPress deben ser de 600px de ancho por 450px de alto.

Toma una captura de pantalla de tu navegador con el método que prefieras y ábrela en tu editor de imágenes preferido. Estoy usando Photoshop.

Recorta la imagen para que su relación de aspecto sea de 12:9 y luego guárdala como un archivo PNG de 600px de ancho por 450px de alto. Nómbralo screenshot.png y guárdalo en tu carpeta de temas.

4. Subir tu tema a WordPress

El siguiente paso es subir tu tema a WordPress.

Puedes subir tu tema de una de dos maneras:

1. Usando FTP (o directamente si trabajas localmente), copia tu carpeta de temas a la carpeta wp_content en tu instalación de WordPress
2. Crea un archivo zip que contenga tu carpeta y súbelo a través de la pantalla de administración de Themes (Temas), haciendo clic en Add New (Añadir Nuevo) -> Upload (Subir).

Ahora, cuando visites la pantalla de administración de Temas, tu tema debería estar visible:

Selecciona el tema para activarlo. Esto se mostrará en el administrador de Temas:

5. Probando tu tema

Ahora es el momento de comprobar que tu tema funciona. Simplemente visita la página principal de tu sitio para ver lo que se muestra.

Mi sitio actualmente se ve así:

Notarás que las imágenes no se muestran ahora mismo, eso es porque sus atributos href son estáticos, por lo que WordPress no puede encontrarlas. Si te faltan imágenes en el contenido no tienes que preocuparte, estas serán mostradas automáticamente por WordPress a través del bucle, que añadirás en la siguiente parte.

Sin embargo, si tienes imágenes en tus plantillas, ya sea como fondos o en el contenido, logotipos por ejemplo, tendrás que modificar tu código para decirle a WordPress dónde encontrarlas.

6. Actualización de los enlaces de imágenes en los archivos de plantillas

Esta sección solo se aplica si utiliza imágenes en tus archivos de plantilla. Estos no se añaden a través del bucle, así que tendrás que editar tu archivo de plantilla directamente para decirle a WordPress dónde encontrarlos.

Por ejemplo, digamos que tienes un logo en tu encabezado. Esto podría visualizarse utilizando lo siguiente:

1

2

<img alt="" src="images/logo.jpg" />

El atributo href le dice al navegador que encuentre la imagen en la carpeta de imágenes del sitio, ya que el sitio original era estático, esto era simplemente relativo a la página que se estaba viendo. En WordPress funciona de manera diferente: tu carpeta images (imágenes) es una subcarpeta de tu carpeta de temas y tienes que decirle a WordPress que vaya allí para encontrar la imagen.

En tu archivo header.php, edita el código para que se lea:

1

2

<img alt="" src="<?php bloginfo( 'stylesheet_url' ); ?>/images/logo.jpg" />

Obviamente el nombre de archivo específico que estás usando será diferente, pero esto te da la idea. Habrás notado que la función que he usado aquí es la misma que se usó antes para llamar a la hoja de estilos del archivo de encabezado.

Ahora guarda tu archivo y actualiza tu navegador. Cualquier imagen en tus archivos de plantilla debe ser mostrada ahora.

Resumen

Ahora tienes un tema de trabajo (casi). Has configurado tu hoja de estilo para que WordPress reconozca el tema, lo vincule correctamente desde el encabezado y cambie cualquier enlace de imagen en tus archivos de plantilla.

En el próximo tutorial te mostraré cómo añadir un bucle a tu tema, que WordPress utilizará para mostrar el contenido de tus publicaciones y páginas.

Recursos

• MAMP (para Mac)
• WAMP (para Windows)
• LAMP (para Unix)
• WordPress (descargar)
• Instalando WordPress (desde el Codex)
• Instalando WordPress localmente con MAMP (del Codex)
• Desarrollo de temas (de Codex, incluye el código de tu hoja de estilo más una guía de capturas de pantalla)