Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 2)

  1. 1. Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 1)
  2. 2. Actualmente leyendo: Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 2)
  3. 3. Una introducción a la anatomía de un tema de WordPress

En la primera parte de este tutorial, cubrimos los conceptos básicos para convertir una plantilla HTML en un tema de WordPress. Si eres un poco curioso, 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ás familiarizarte 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 totalmente 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 aparecer después de cortar la plantilla en archivos PHP. No se preocupe en absoluto, así es como es PHP. Por ejemplo, si tuviera un logotipo en la sección de encabezado así …

your_logo_alt_text

… necesitarás 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 imágenes 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:

your_logo_alt_text

La función get_template_directory_uri () devuelve la url para el directorio de su tema. Entonces, si agrega su logotipo en una carpeta de imágenes, entonces el código tomará ese logotipo.

¿Notaste alguna diferencia? Obviamente, este código solo arreglará su logotipo. Para arreglar otras imágenes, deberá reescribir sus códigos de manera similar. Cosas fáciles de guisantes.

Pasemos a JavaScript. Si su sitio web HTML utilizaba JavaScript, cree una carpeta llamada js y coloca tus guiones allí. Puede llamarlos en el archivo header.php usando el siguiente código:

El código anterior usa ejemplo.js como una ilustracion. No olvides reemplazar esa parte con el nombre de tu archivo JavaScript.

Por supuesto, si está creando un tema para otra persona, 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 plantilla.

Usaremos una analogía. Si un visitante hace clic en un 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 category-2.php
  • Si category-2.php no está disponible, WordPress buscará un archivo genérico de plantilla de categoría como category.php
  • Si este archivo de plantilla tampoco está disponible, WordPress buscará una plantilla genérica de archivo como archive.php
  • Si la plantilla genérica de archivo 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 satisfacer sus necesidades. Otros archivos de plantilla incluyen:

home.php o index.phpSe usa para representar el índice de publicaciones del blog
front-page.phpSe usa para representar páginas estáticas o publicaciones más recientes tal como se configura en las pantallas de la página frontal
single.phpSe usa para representar una sola página de publicación
single- {post-type} .phpSe usa para representar tipos de publicaciones personalizadas, p. si post-type fuera un producto, WordPress usaría single-product.php
page.phpSe usa para representar páginas estáticas
category.php o archive.phpSe usa para representar el índice del archivo de categoría
author.phpSe usa para representar al autor
date.phpSe usa para representar la fecha
search.phpSe usa para representar resultados de búsqueda
404.phpSe usa para representar la página de error 404 del servidor

Esta es solo una lista corta, 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 plantillas es leyendo el extenso Desarrollo del tema biblioteca en WordPress. Alternativamente, puedes leer el más corto Sección de Plantillas en WordPress Codex.

Etiquetas de plantilla

Al ver 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 el tema 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 has hecho, aquí está el código:

La declaración DOCTYPE le da significado a su código HTML. Con eso fuera del camino, modifiquemos la etiqueta HTML de apertura. Incluiremos un atributo lang utilizando el etiqueta language_attributes al igual que:

El código anterior generará lo siguiente:

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 colocar enlaces a su URL de pingback y RSS en su cabeza. En su header.php, agregue el siguiente código:

¿Te diste cuenta de cómo empleamos el etiqueta de información del blog incluir la fuente RSS (‘rss2_url” y el pingback (“pingback_url”)? Antes de guardar su archivo header.php, agregue también el siguiente código:

La etiqueta wp_head anterior incluirá hojas de estilo y archivos JavaScript requeridos por sus complementos. Si deja de lado este pequeño fragmento de código, sus complementos podrían no funcionar como se desea. Con eso fuera del camino, agreguemos títulos de páginas a nuestro tema de WordPress usando, una vez más, la etiqueta bloginfo. En su archivo header.php, agregue el siguiente código:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

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 tu blog. Ahora que su tema de WordPress tiene títulos de página, ¿qué tal si creamos una captura de pantalla para nuestro tema, reempaquetamos el tema y tomamos un descanso??

Crear 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. Parecí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 tu 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 cómo crear un tema de WordPress a partir de HTML estático. En un futuro próximo, te presentaré otros aspectos de la temática de WordPress, pero mientras tanto, he preparado los siguientes recursos solo para ti:

Feliz creando!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map