Cómo crear un tema de WordPress a partir de HTML (Pt 2)

Cómo crear un tema de WordPress a partir de HTML (Pt 2)

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, hemos aprendido algunas cosas sobre cómo dividir plantillas HTML en archivos PHP, reensamblarlas, diseñar y nombrar temas de WordPress. Realmente, hemos aprendido mucho y querrá familiarizarse con los conceptos que cubrimos en nuestro primer tutorial para disfrutar de esta segunda parte. En la publicación de hoy, vamos a dar un paso más. Cubriremos algunas áreas más para que pueda crear un tema de WordPress completamente funcional. Entonces, sin más preámbulos, aquí estamos.

Configuración de imágenes y archivos de 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 tu sección de encabezado como este …

<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 fotos 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 a una carpeta de imágenes, el código tomará ese logotipo.

¿Has notado alguna diferencia? Obviamente, este fragmento de código solo corregirá su logotipo. Para corregir otras imágenes, deberá volver a escribir sus códigos de la misma manera. Consejos fáciles de guisantes.

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 usa ejemplo.js para ilustrar. No olvide reemplazar esta parte con el nombre de su archivo JavaScript.

Por supuesto, si está creando un tema para otra persona, realmente debería cargar sus archivos js con wp_enqueue_scripts. Consulte los artículos 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 su base de datos WordPress MySQL 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 los modelos, profundicemos en un concepto llamado jerarquía del modelo.

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 se explica a continuación:

  • Primero, WordPress buscará un archivo de plantilla que coincida con el ID de categoría
  • Si el ID de 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 optará por un archivo de plantilla de categoría genérica como category.php
  • Si este archivo de plantilla no está disponible también, 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 de acuerdo con sus necesidades. Otros archivos de plantilla incluyen:

home.php o index.php Se usa para hacer un índice de publicaciones de blog
front-page.php Se utiliza para crear páginas estáticas o últimos artículos como se define en las vistas de la página de inicio
single.php Se utiliza para representar una sola página de artículo.
single- {post-type} .php Se utiliza para personalizar los tipos de publicaciones, por ejemplo, si el tipo de publicación es un producto que WordPress usaría single-product.php
page.php Se usa para hacer que las páginas sean estáticas
category.php o archive.php Se utiliza para mostrar el índice de archivos de categorías.
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 usa para representar la página de error del servidor 404

Esta es solo una breve lista, hay muchas más Plantillas de WordPress. El tema de los modelos es un tema importante, y la mejor manera de aprender a jugar con archivos de modelos es leer el 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 cubrir los archivos de plantilla, es justo mencionar una o dos cosas sobre las etiquetas de plantilla y el papel que desempeñan en la temática de WordPress. Según WordPress.org, “… las etiquetas de plantilla se utilizan en 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, encontró 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, cambiemos la etiqueta HTML de apertura. Incluiremos un atributo lang usando el Etiqueta Language_attributes asi 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 a su fuente 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" />

¿Notaste cómo usamos 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á las hojas de estilo y los archivos JavaScript requeridos por sus complementos. Si omite este pequeño fragmento de código, es posible que sus complementos no funcionen como usted desea. Dicho esto, agreguemos títulos de página a nuestro tema de WordPress usando, nuevamente, 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 baliza wp_title agregará el título de su página o su mensaje y la segunda etiqueta de bloginfo (‘nombre’) agregará el nombre de su blog. Ahora que su tema de WordPress tiene títulos de página, ¿qué tal crear una captura de pantalla para nuestro tema, volver a empaquetar el tema y descansar?

Crea una captura de pantalla para tu tema

Cuando descargó por primera vez su tema de prueba, debe haber notado que faltaba una captura de pantalla en el panel de temas de WordPress. Se veía aburrido, 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. Guardar la imagen como screenshot.png en su carpeta de temas. Guarde todos los cambios, comprima su carpeta de temas en un archivo ZIP. Descarga el tema y actívalo para ver tus nuevos cambios 😉

Conclusión

Quiero creer que este segundo tutorial le dio una visión más profunda de cómo crear 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:

¡Feliz creación!

Deja un comentario

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

Ir arriba