Tutorial de temas de WordPress para principiantes – Parte 7: Configuración del tema e imágenes destacadas

Esta lección del tutorial del tema de WordPress para principiantes continúa agregando el código básico requerido para la configuración del tema. Aprendemos a agregar soportes de temas y, como resultado, se activa la funcionalidad de imagen destacada de WordPress. En esta lección también corregiremos el título de la portada aplicando nuestro primer filtro.

Trabajaremos principalmente en functions.phpel archivo que agregamos en la lección anterior. Al final, agregaremos código para generar imágenes destacadas dentro de nuestras plantillas.

Configuración del tema

Todos los temas necesitan algún código para configurarlo diciéndole a WordPress que active ciertas funciones. Esto incluye la activación de menús, widgets, traducción, etc. Esto se hace comúnmente en una "función de configuración de tema", generalmente enganchada a un gancho convenientemente llamado after_setup_theme. Para algunas cosas específicas, necesitamos usar el gancho de inicialización de WordPress llamado init.

Escribiendo el código de configuración del tema necesario paraafter_setup_theme

Configuremos una "función de tema de configuración" de este tipo en nuestro functions.php, conectado a after_setup_theme:

add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
 
}

Dentro de esta función, agregaremos un montón de funciones de configuración comunes y útiles para los temas de WordPress. Coloque todas las siguientes piezas de código dentro de su función de configuración.

Primero, debemos definir un ancho máximo de imágenes e incrustaciones (como videos). Esto asegura que cuando los autores inserten imágenes grandes en las publicaciones, las imágenes se mantengan dentro de un cierto ancho. Lo configuré en 840 píxeles (porque quiero espacio para la barra lateral), pero puedes ajustarlo a tu gusto.

$GLOBALS['content_width'] = 840;

También debemos informar a WordPress que el tema es traducible y dónde puede buscar archivos de traducción. Voy a entrar en detalle en la traducción del tema de WordPress en el siguiente paso de esta serie de tutoriales de temas.

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Tenga en cuenta el uso de una nueva función para obtener su directorio de temas, get_stylesheet_directory(). Esto es muy similar a get_stylesheet_directory_uri()lo que encontramos en el último paso, pero aquí necesitamos la ruta relativa, no la URL.

Luego, debemos agregar algunos "soportes de temas", que activan la funcionalidad de WordPress que no está activada de forma predeterminada.

¡Eso fue un montón de add_theme_supportllamadas! Como su nombre lo indica, add_theme_supportle dice a WordPress que active funciones que no están activadas de forma predeterminada. Por ejemplo, imágenes destacadas ("post-thumbnails"), soporte para etiquetas HTML5 y la función de logotipo personalizado de WordPress en el Personalizador (¡ajuste la imagen del logotipo deseada si lo desea!).

Hay muchas más funciones interesantes, por lo que le animo a leer la documentación de add_theme_support. Por ejemplo, hay uno bastante nuevo title-tag, que maneja la etiqueta del título. Lo omití en este tutorial porque ya agregamos la etiqueta de título header.phpmanualmente.

Tenga en cuenta que si agrega soporte para title-tag, debe eliminar la etiqueta de título de su archivo de encabezado para evitar que se dupliquen las etiquetas de título.

Finalmente agregamos algunos add_theme_supportpara el nuevo Gutenberg en WordPress. Agregaremos soporte para secciones anchas, activando la funcionalidad de estilos de bloque y soporte para incrustaciones receptivas:

add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');

El resultado final

Aquí está la función de configuración final en nuestro functions.php:

¡Después de guardar, ahora debería poder agregar imágenes destacadas a las publicaciones en el administrador! Agreguemos una corrección de tema más en nuestro functions.phpantes de agregar imágenes destacadas a nuestras plantillas; ¿ Recuerdas que wp_titlepor header.phpdefecto no podemos hacer eco de nada en la página principal? Arreglemos eso.

Agregar un filtro awp_title

Agreguemos nuestra primera función de modificación de filtro adecuada, usando add_filter(). El filtro al que nos conectaremos tiene el mismo nombre que la función que usamos para WordPress para obtener dinámicamente el título de la página; wp_title. Lo que arreglaremos es asegurarnos de que el título no esté vacío en la página principal, que es el predeterminado en WordPress. Cuando esté en la página principal, queremos que se complete con el nombre del sitio de WordPress.

¡ Recuerde devolver siempre la variable filtrada en sus funciones de filtro! Todos los filtros modifican una variable, y si no devuelve nada, la variable queda indefinida. Esto puede causar muchos problemas. Para obtener más información sobre los filtros, echa un vistazo a mi publicación que explica todo sobre los ganchos y los filtros.

Saber cuándo personalizar el título

Solo queremos personalizar la variable de título si estamos en la página principal. Para todas las demás páginas, queremos dejarlo solo (simplemente devuélvalo tal como está). Pero, ¿cómo sabemos cuándo estamos en la primera plana?

Podemos aprovechar las etiquetas condicionales de WordPress, que son un montón de funciones útiles que devuelven verdadero o falso en función de una condición. Estos se usan más comúnmente para preguntar si estamos en una determinada página o plantilla. Simplemente podemos preguntar "¿Estamos en la portada?". Si este método devuelve verdadero, solo entonces modificaremos la variable de título.

Vale la pena señalar que hay dos etiquetas condicionales para la página principal, a saber, is_home()y is_front_page().Estas difieren según su configuración de "Lectura", ya sea que su página principal muestre o no las últimas publicaciones o esté configurada en una página fija. Si sigue este tutorial con una nueva instalación de WordPress con la configuración predeterminada, utiliza is_front_page().

Obtener el nombre del sitio de WordPress

Ahora sabemos qué filtro usar y cómo asegurarnos de que solo cambiamos el título si estamos en el lugar correcto. Pero, ¿cuál debería ser el título? Por lo general, el título de la página principal sería el nombre de su sitio de WordPress. Pero, ¿cómo obtenemos esa información?

Para recuperar información sobre la instalación actual de WordPress usamos la bloginfo()función. Como parámetro, solicitamos devolver el nombre del sitio, lo que se hace configurando el parámetro en ‘ name‘. Y debido a que este es un filtro y necesitamos devolverlo, no repetirlo, usamos su método hermano get_bloginfo(). La llamada bloginfo()siempre generará un eco de salida.

add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
    if (is_front_page()) {
        return get_bloginfo('name');
    }
    return $title;
}

Si actualiza su página principal, ¡debería ver que el nombre de su sitio aparece en la <title>etiqueta (y en la pestaña del navegador)! Nuestro filtro afecta solo a la página principal, por lo que cualquier otra página, como una publicación única, debería devolver lo mismo que antes; el título de la publicación.

Salida de imágenes destacadas en archivos de plantilla

Anteriormente, cuando configuramos los soportes de temas, agregamos soporte para imágenes destacadas. Con esto activado, ahora podemos generar estas imágenes en nuestras plantillas. ¡Hagámoslo ahora!

Ábrete index.phpy encuentra un lugar para ellos dentro del bucle. Elegí colocarlo después del título, pero tú decides dónde los quieres. Utiliza la función the_post_thumbnail()para generar la imagen. Se recomienda verificar primero si la publicación incluso tiene una imagen destacada, lo cual hacemos usando has_post_thumbnail().

Si su publicación no tiene una imagen destacada, no verá nada después del título. Sin embargo, si configura una imagen destacada en una de sus publicaciones, the_post_thumbnail()generará una <img>etiqueta con la imagen elegida. Esta función acepta algunos parámetros adicionales. Por ejemplo, puede definir qué tamaño de imagen desea usar y controlar los atributos agregados a la imagen. Como de costumbre, le animo a que eche un vistazo rápido a la documentación y la ajuste a su gusto.

Documentación sobre los métodos utilizados

• añadir_acción
• cargar_tema_textodominio
• get_stylesheet_directory
• add_theme_support
• Añadir filtro
• es_primer_pagina
• get_bloginfo
• has_post_miniatura
• la_post_miniatura