En la primera parte de este tutorial, cubrimos los conceptos básicos para convertir una plantilla HTML en un tema de WordPress. Si tiene un poco de curiosidad, aprendimos algunas cosas sobre cómo dividir plantillas HTML en archivos PHP, volver a unirlas, diseñar y nombrar temas de WordPress. Realmente, aprendimos mucho y querrá familiarizarse con los conceptos que cubrimos en nuestro primer tutorial para disfrutar de esta segunda porción. En la publicación de hoy, llevaremos las cosas un poco más arriba. Cubriremos algunas áreas más para que pueda crear un tema de WordPress completamente funcional. Así que sin más preámbulos, aquí vamos.
Configurar imágenes y archivos JavaScript
Si tenía imágenes en su plantilla HTML original (index.html), probablemente notó que dejaron de mostrarse después de dividir la plantilla en archivos PHP. No se preocupe en absoluto, así es PHP. Por ejemplo, si tuvieras un logo en la sección de tu encabezado así …
<img alt="your_logo_alt_text" src="images/logo.jpg" />
… Tendrás que jugar un poco con el código. El código que revelaré en un momento ayudará a los navegadores a encontrar su logotipo (o cualquier otra imagen) en su imagenes carpeta, que es (o debería ser) una subcarpeta del directorio principal de su tema. Entonces, para mostrar su logotipo en la sección de encabezado, abra el archivo header.php y reemplace el código anterior con lo siguiente:
<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />
La función get_template_directory_uri () devuelve la URL de su directorio de temas. Entonces, si agrega su logotipo en una carpeta de imágenes, el código tomará ese logotipo.
¿Notas alguna diferencia? Obviamente, este fragmento de código solo arreglará su logotipo. Para corregir otras imágenes, deberá volver a escribir sus códigos de manera similar. Cosas fáciles y sencillas.
Pasemos a JavaScript. Si su sitio web HTML utiliza JavaScript, cree una carpeta llamada js y coloque sus guiones allí. Puede llamarlos en el archivo header.php usando el siguiente código:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>
El código anterior utiliza ejemplo.js como una ilustracion. No olvide reemplazar esa parte con el nombre de su archivo JavaScript.
Por supuesto, si está creando un tema para otra persona, entonces debería cargar sus archivos js con wp_enqueue_scripts. Consulte las publicaciones de AJ sobre cómo agregar JavaScript a los temas de WordPress para obtener más información y consejos.
Archivos de plantilla
En la primera parte de este tutorial, mencionamos cuatro archivos de plantilla básicos, a saber index.php, header.php, sidebar.php y footer.php. Los archivos de plantilla controlan cómo se mostrará su sitio web en la web. Las plantillas obtienen información de la base de datos MySQL de WordPress y la traducen al código HTML que se muestra en los navegadores web. En otras palabras, los archivos de plantilla son los componentes básicos de los temas de WordPress. Para comprender mejor las plantillas, profundicemos en un concepto conocido como jerarquía de plantillas.
Usaremos una analogía. Si un visitante hace clic en el enlace de una categoría (es decir, un enlace a una categoría) como http://www.yoursite.com/blog/category/your-category/, WordPress utiliza la jerarquía de plantillas para generar el archivo (y el contenido) correcto como explicado a continuación:
- En primer lugar, WordPress buscará un archivo de plantilla que coincida con el ID de categoría.
- Si el ID de la categoría es, por ejemplo, 2, WordPress buscará un archivo de plantilla llamado categoría-2.php
- Si category-2.php no está disponible, WordPress buscará un archivo de plantilla de categoría genérica como category.php
- Si este archivo de plantilla tampoco está disponible, WordPress buscará una plantilla de archivo genérica como archive.php
- Si la plantilla de archivo genérico no existe, WordPress recurrirá al archivo de plantilla principal, index.php
Así es como funcionan las plantillas de WordPress, y puede usar estos archivos para personalizar su tema de WordPress para que se adapte a sus necesidades. Otros archivos de plantilla incluyen:
home.php o index.php | Se utiliza para representar el índice de publicaciones del blog. |
front-page.php | Se utiliza para representar páginas estáticas o publicaciones más recientes según lo establecido en las pantallas de la página principal |
single.php | Se utiliza para representar una sola página de publicación. |
single- {post-type} .php | Se usa para representar tipos de publicaciones personalizadas, por ejemplo, si el tipo de publicación fuera un producto, WordPress usaría single-product.php |
page.php | Se utiliza para representar páginas estáticas. |
category.php o archive.php | Se utiliza para representar el índice de archivo de categoría |
author.php | Se usa para representar al autor |
date.php | Se usa para representar la fecha |
search.php | Se utiliza para representar los resultados de la búsqueda. |
404.php | Se utiliza para representar la página de error 404 del servidor |
Esta es solo una breve lista, hay muchas otras Plantillas de WordPress. El tema de las plantillas es muy importante y la mejor manera de aprender a jugar con archivos de plantilla es leyendo el extenso Desarrollo del tema biblioteca en WordPress. Alternativamente, puede leer el más corto Sección de plantillas en WordPress Codex.
Etiquetas de plantilla
Dado que acabamos de presentar los archivos de plantilla, es justo mencionar una o dos cosas sobre las etiquetas de plantilla y el papel que desempeñan en la tematización de WordPress. Según WordPress.org, «… las etiquetas de plantilla se utilizan dentro de la plantilla de su blog para mostrar información de forma dinámica o personalizar su blog, proporcionando las herramientas para hacerlo tan individual e interesante como usted».
En nuestro tutorial anterior, conoció algunas etiquetas de plantilla como get_header, get_sidebar, get_footer y bloginfo. En la siguiente sección, agregaremos algunas etiquetas de plantilla a nuestro tema de WordPress recién creado. Supongo que ya ha incluido la declaración DOCTYPE en su archivo header.php. Si no lo ha hecho, aquí está el código:
<!DOCTYPE HTML>
La declaración DOCTYPE da significado a su código HTML. Con eso fuera del camino, modifiquemos la etiqueta HTML de apertura. Incluiremos un atributo lang usando el etiqueta language_attributes al igual que:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
El código anterior generará lo siguiente:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
Con la declaración DOCTYPE y la etiqueta language_attribute en su lugar, la estructura de su tema es legítima y los navegadores entenderán su código. Si está creando un tema para un blog, es importante que coloque enlaces a su URL pingback y al feed RSS en su cabeza. En su header.php, agregue el siguiente código:
<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />
¿Notó cómo empleamos el etiqueta de bloginfo para incluir la fuente RSS (‘rss2_url’) y pingback (‘pingback_url’)? Antes de guardar su archivo header.php, agregue también el siguiente código:
<?php wp_head(); ?>
La etiqueta wp_head anterior extraerá hojas de estilo y archivos JavaScript requeridos por sus complementos. Si omite este pequeño fragmento de código, es posible que sus complementos no funcionen como desea. Con eso fuera del camino, agreguemos títulos de página a nuestro tema de WordPress usando, una vez más, la etiqueta bloginfo. En su archivo header.php, agregue el siguiente código:
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
La primera etiqueta wp_title agregará el título de su página o publicación y la segunda etiqueta bloginfo (‘nombre’) agregará el nombre de su blog. Ahora que su tema de WordPress tiene títulos de página, ¿qué tal si creamos una captura de pantalla para nuestro tema, volvemos a empaquetar el tema y descansamos?
Creación de una captura de pantalla para su tema
Cuando cargó su tema de prueba por primera vez, debe haber notado que le faltaba una captura de pantalla en el Panel de temas de WordPress. Se veía monótono, especialmente si tenía otros temas con capturas de pantalla coloridas. Pero no se preocupe, crear una captura de pantalla para su tema es muy fácil. Simplemente cree una imagen con su editor de imágenes favorito (por ejemplo, Adobe Photoshop) o tome una captura de pantalla de su tema. Asegúrese de que su imagen tenga 600 píxeles de ancho y 450 píxeles de alto. Guarda la imagen como screenshot.png en su carpeta de temas. Guarde todos los cambios, comprima su carpeta de temas en un archivo ZIP. Sube el tema y actívalo para ver tus nuevos cambios 😉
Conclusión
Quiero creer que este segundo tutorial le ofreció una visión más profunda de la creación de un tema de WordPress a partir de HTML estático. En un futuro cercano, le presentaré otros aspectos de la temática de WordPress, pero mientras tanto, he preparado los siguientes recursos solo para usted:
- Plantillas – WordPress Codex
- Etiquetas de plantilla – Códice de WordPress
- Cree su propio tema de WordPress a partir de una plantilla HTML – SitePoint
- Creación de un tema de WordPress a partir de HTML estático – WPtuts +
¡Feliz creación!