Una guía básica para la personalización de temas de WordPress

¡Los temas son geniales! No necesita construir y mantener miles de líneas de código, alguien más ya lo ha hecho por usted. Los temas hacen que su sitio web se vea genial y brindan las características únicas que necesita. Los temas premium como los que ofrecemos le brindan mucha flexibilidad en el diseño, las integraciones y la navegación.

Dicho esto, todos los temas son plantillas. Intentan ser útiles para la mayor cantidad de personas posible, pero no pueden atender cada pequeño detalle. Aquí es donde entra en juego la personalización del tema. Al usar un tema secundario, puede agregar pequeños fragmentos (o grandes fragmentos) de código a su tema sin perder la opción de actualizar.

En este artículo, analizaré algunas modificaciones comunes que quizás desee realizar y cómo puede realizarlas. Me centraré principalmente en cómo averiguar qué hacer, que es más importante que el código real utilizado. Usaré Divi como ejemplo, pero los métodos aquí se pueden aplicar a cualquier tema. ¡Saltamos!

Crear un tema hijo

El primer paso debe ser crear un tema hijo. Si alguna vez planea hacer alguna personalización, siempre debe comenzar creando un tema secundario tan pronto como comience.

Los temas secundarios son temas que dependen de la presencia de un tema principal. Toman prestada la mayor funcionalidad posible del tema principal. Su trabajo es sobrescribir fragmentos y piezas de funcionalidad donde sea necesario.

Para crear un tema secundario, cree una nueva carpeta en su wp-content/themesdirectorio. Puedes nombrarlo como quieras, estoy nombrando el mío divi-child. Cree dos archivos en esta carpeta: style.cssy functions.php. En la hoja de estilo, pegue el siguiente código:

/*
Theme Name: My Divi Child Theme
Theme URI: http://mydomain.com/
Version: 1.0
Description: A customized version of Divi which adds a number of tiny features I need.
Author: Your Name
Author URI: http://www.yourwebsite.com
Template: Divi
*/

El siguiente paso es asegurarse de que los estilos del tema principal se utilicen en el tema secundario. En el pasado, era común incluir esto dentro de la hoja de estilo. Este no es el método recomendado, debe poner en cola la hoja de estilo principal en el archivo de funciones, así es como se hace:

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );
function my_enqueue_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Si visita la sección Apariencia en el administrador, debería ver su nuevo tema en la lista. Ahora puede activarlo y visitar el front-end. El resultado debe ser exactamente el mismo que el tema principal. En esta etapa, todo lo maneja el tema principal, todos los archivos, todas las vistas, todos los estilos provienen de allí.

Una introducción rápida sobre temas secundarios

Si nunca ha usado un tema infantil antes, aquí hay una guía rápida sobre cómo usarlos. Cuando usa un tema secundario, toda la funcionalidad se hereda del tema principal. Esto significa que, a menos que especifique lo contrario en los temas secundarios, todos los elementos se tomarán del tema principal.

Hay tres métodos que puede usar para modificar la funcionalidad del tema principal:

Sobrescribir un archivo completo
Crear estilos adicionales
usar ganchos

Sobrescribir archivos completos suele ser el método elegido si desea realizar cambios estructurales, como mover el título debajo de la imagen destacada. La creación de estilos adicionales es el camino a seguir si necesita hacer algunos cambios simples de CSS para que el tema cumpla con sus órdenes. Esto podría incluir cualquier cosa, desde modificar la posición de la barra lateral hasta volver a colorear elementos.

Deben utilizarse ganchos siempre que sea posible, ya que proporcionan la forma más modular de realizar cambios. Si no está familiarizado con los ganchos, no se preocupe por esto por ahora. Los ganchos pueden cambiar la funcionalidad, como la longitud de los extractos, la salida de la imagen y muchas otras funciones predeterminadas de WordPress.

Hay una excepción a estas reglas, el archivo de funciones. El archivo de funciones del hijo no sobrescribe el del padre. El archivo de funciones secundarias se carga primero, seguido del archivo de funciones principales.

Ejemplos de personalización de temas

Armados con el conocimiento anterior, hagamos algunas modificaciones a Divi. Haré todo lo posible para asegurarme de explicar el proceso de pensamiento que usé para descubrir cómo modificar algo. El código real utilizado es menos importante pero, por supuesto, también lo mostraré.

Posicionamiento de la barra lateral

Divi le permite cambiar la ubicación de la barra lateral en cualquier página, incluidas las páginas de WooCommerce, pero no hay una configuración integrada para modificar la posición de la barra lateral en la página de blog predeterminada. Este es en realidad el primer paso para modificar la funcionalidad: asegúrese de que no haya una forma integrada de hacerlo.

Como soy consciente de lo propenso a errores que soy, utilicé otro método para asegurarme de que esto necesita una modificación del tema secundario. Supuse que el tema usaría una clase aplicada al contenedor de la barra lateral para modificar la ubicación. Con las herramientas de desarrollo de Chrome , observé el elemento de la barra lateral ( #sidebar). No tiene clases de posicionamiento, pero encontré la solución en la barra lateral de herramientas para desarrolladores que muestra las reglas CSS aplicadas a este elemento:

Las reglas de posicionamiento de la barra lateral en Chrome Developer Tools

La clase et_right_sidebarse agrega al elemento del cuerpo. Si echa un vistazo a una página donde la barra lateral se coloca a la izquierda, puede ver que se et_left_sidebarutiliza. Esto es perfecto porque se puede modificar sin necesidad de modificar ningún archivo de plantilla.

Las clases agregadas al cuerpo se pueden controlar a través del body_classgancho. Puede ver el tema agregando sus propias clases desde functions.phplas líneas 1313 a 1346 en el momento de escribir este artículo. La et_divi_sidebar_class()función está enganchada en el body_classgancho.

Lo que tenemos que hacer para modificar este comportamiento es enganchar nuestra propia función en este gancho. Abra el archivo de funciones en su tema hijo, creemos nuestra función enganchada.

add_filter( 'body_class', 'divi_child_body_classes', 20 );
function divi_child_body_classes() {
 
}

Queremos agregar la clase para la barra lateral situada a la izquierda si el tema muestra la página principal del blog. Esto se puede hacer con la is_home()función que devuelve verdadero cada vez que se muestra el índice principal del blog.

Por si acaso, nos aseguraremos de que se elimine la posible clase de la barra lateral derecha y luego agregaremos la nuestra. Así es cómo:

add_filter( 'body_class', 'divi_child_body_classes', 20 );
function divi_child_body_classes( $classes ) {
 
    if( is_home() ) { 
        $key = array_search( 'et_right_sidebar', $classes );
        if( !empty( $key ) ) {
            unset( $classes[$key] );
        }
 
        $classes[] = 'et_left_sidebar';
    }
 
    return $classes;
}

Esta función es excelente porque demuestra la necesidad de prioridades en los ganchos. Si no agrega 20 como prioridad, esta función no funcionará. ¿Recuerdas que discutimos que el archivo de funciones del padre se carga después del hijo? Si no agrega una prioridad, su función se realizará primero, seguida por la del padre, lo que conducirá a que se agreguen clases duplicadas.

Sustitución del título y la imagen destacada

Veamos un ejemplo en el que necesitaremos modificar un archivo. Una sola página de publicación en Divi muestra el título, los metadatos y la imagen destacada uno debajo del otro. ¿Qué tal mostrar la imagen destacada en la parte superior?

Para lograr esto, necesitaremos copiar el single.phparchivo del tema principal al tema secundario. A partir de este momento, el single.phparchivo dentro del tema secundario será responsable de la página de publicación única, no del tema principal.

Primero, busquemos los elementos que necesitamos. El título se muestra en la línea 11 usando la the_title()función, los metadatos se muestran usando la et_divi_post_meta()función en la línea 16. La miniatura necesita un poco más de código, la línea final que la muestra está en la línea 38.

La forma en que resolví este problema es cortar la línea 11 y la línea 16 y pegarla justo antes del div con la clase de .entry-content. Así es como se ve:

<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php
    if ( ! post_password_required() ) :
    // Other code here
?>
<h1><?php the_title(); ?></h1>
<?php et_divi_post_meta() ?>
 
<div class="entry-content">

Esto ahora está bien estructurado, todo lo que tenemos que hacer es agregar un pequeño margen a la imagen para espaciarla un poco. Pensé que sería prudente usar el mismo margen que usa el tema. Para resolver esto, miré el código fuente, específicamente el margen inferior del metaelemento.

El código fuente de la imagen, el título y los metadatos.

Al final, quitaré el margen del metaelemento y lo agregaré al elemento del título:

.post > h1 {
    margin-top:6px;
}
 
.et_pb_post .post-meta {
    margin-bottom:0px;
}

En caso de que te estés preguntando por qué usé .post > h1en lugar de .post h1eso tiene que ver con la herencia. Si usamos la versión posterior, todos los encabezados de nivel 1 dentro de la publicación tendrán un margen superior de 6px. Para evitar que h1los elementos en el contenido de la publicación hereden estas reglas, me aseguro de que solo h1los elementos que son descendientes directos del elemento principal de la publicación tengan el nuevo margen.

La imagen en la parte superior con el título y los metadatos en la parte inferior

Cambio de estilos de títulos de widgets

Estilos de títulos de widgets

Veamos un cambio de CSS puro para completar nuestro conocimiento de modificación de temas. La captura de pantalla de la izquierda muestra el estilo del título original en la parte inferior, nuestro estilo modificado en la parte superior.

Para hacer este cambio modifiqué el color de fondo, el borde, el relleno, el tamaño y estilo de fuente y el margen. Usé negro con una opacidad en lugar de tonos específicos para asegurarme de que se vea bien independientemente del color de fondo.

Tenga en cuenta que cada tipo de widget tiene una clase específica que puede usar para diseñarlos de manera diferente. Por ejemplo, para diseñar solo el título del widget de comentarios recientes de manera diferente, puede usar .widget_recent_comments h4.widgetitle. A continuación, he diseñado todos los títulos de los widgets de la misma manera:

h4.widgettitle {
background: rgba(0,0,0,0.02);
border-left: 4px solid rgba(0,0,0,0.1);
padding: 7px 0 7px 11px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 11px;
}

Descripción general

Hemos repasado los tres métodos básicos de personalización de temas: uso de ganchos, sobrescritura de archivos y modificación de reglas de estilo. Tenga en cuenta que los anzuelos son los más flexibles y modulares del lote, ¡cuando sea posible use anzuelos!

Como autores de temas, debe utilizarlos generosamente. Dado que Divi usa el gancho incorporado, body_classfue muy fácil modificar el tema para hacer nuestra oferta.

Con suerte, ahora puede agregar y eliminar fragmentos de su tema existente. Si tiene alguna pregunta o tiene problemas para modificar su tema, ¡háganoslo saber!

Imagen en miniatura del artículo de Dacian G / shutterstock.com