[Cómo] Agregar un área de widgets a cualquier tema de WordPress (2021)

El tema predeterminado de WordPress en 2014 fue Veinte Quince, una plantilla con una barra lateral fija a la izquierda que se convierte en un encabezado en la vista móvil, un área de pie de página mínima, excelente tipografía y un área de imagen destacada agradable. Desde entonces, hemos visto el lanzamiento de TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen y el actual tema gratuito defualt. Veinte Veinte.

Estos temas son increíbles, pasan por un proceso completo para llegar a ser elegidos como el tema predeterminado de WordPress, sin embargo, podemos entender que los usuarios aún quieren personalizarlo y hacerlo suyo. 

Dado que estos temas suelen ofrecer algunas limitaciones, como una sola barra lateral (que se llama área lista para widgets en WordPress), le mostraremos cómo agregar un widget al pie de página o cómo modificar el código de cualquier tema para agregar más áreas de widgets. un tema. 

Agregar un área de widgets al pie de página de TwentyFifteen a TwentyTwenty no es diferente de agregar un área de widgets en la mayoría de los temas de WordPress.

Si está interesado en ver otros temas de WordPress, le recomendamos que consulte otros temas populares como Divi de Elegant Themes. Echa un vistazo a nuestra revisión completa aquí..

Contenido[Mostrar]

pie de página del área del widget de wordpress y otras posiciones

Crear un tema hijo de WordPress

Al personalizar los archivos de plantilla de un tema de WordPress para crear un área de widgets, es una buena práctica crear un niño tema.

El concepto de un tema hijo es bastante sencillo: no queremos romper la posibilidad de actualizar el tema a cualquier versión recién lanzada.

Al crear personalizaciones para un tema hijo, sus modificaciones se agregarán al tema hijo en lugar de al tema original. Cuando salga una versión actualizada del tema original, podrá actualizar su copia del tema original y dejar los cambios intactos en el tema hijo.

Si está buscando obtener más consejos y trucos relacionados con WordPress, visite el resto de la sección sobre CollectiveRay.

1. Cree el directorio y los archivos del tema secundario 

Como primer paso, cree una carpeta dentro del wp-content> temas carpeta. Llame a la carpeta veinticinco hijos, veintitrés hijos. Sin embargo, es importante que el tema hijo siga la convención de nomenclatura del padre.

Entonces, si el padre se llama veinticinco, el niño debe ser llamado veinticinco hijos. Del mismo modo, si el tema que está personalizando se llama veinte Veinte, el tema hijo debe llamarse tfue a los veinte hijos.

Una vez que haya creado el tema hijo, debe crear dos archivos adicionales.

El archivo que se utilizará para realizar cambios en los estilos CSS debe llamarse style.css. También necesitamos el  functions.php archivo para el tema hijo, donde podemos agregar ciertas características requeridas.

Estos dos archivos van dentro de la carpeta de veinticinco hijos o la carpeta respectiva que ha creado para el tema hijo.

estructura del directorio del tema hijo de wordpress

Debido a que el área del widget se agregará al pie de página del tema, debe tener un archivo para el código del pie de página.

La forma más segura de codificar un archivo de plantilla de WordPress es comenzar desde una plantilla lista para usar, luego agregar lo que desea y / o eliminar lo que no desea.

En este caso, tome el footer.php desde el tema Twenty Fifteen, o el tema Twenty Twenty o como se llame el tema que está personalizando y péguelo en su tema hijo.

3. Agregue código a los archivos del tema secundario para crear el widget.

En este momento, solo tenemos archivos vacíos, por lo que, tal como está, el tema hijo no puede hacer nada.

Para que podamos efectuar cambios, un tema secundario que funcione necesita algunos comentarios en la parte superior de style.css. Abierto style.css en su editor de código favorito y agregue este fragmento de código. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

La parte realmente importante aquí está en el plantilla así que en el ejemplo anterior, es Plantilla: veinticinco. Esto instruye a WordPress sobre el nombre del tema principal.

Asegúrese de que el nombre sea exactamente el mismo que el nombre de la carpeta del tema principal (el uso de mayúsculas y minúsculas, o los espacios, guiones, guiones bajos, etc. son importantes: todo debe coincidir exactamente con el nombre de la carpeta del tema principal).

A continuación, abrir functions.php  y agregue el siguiente código.

 

Si bien este paso no es estrictamente obligatorio, es muy recomendable porque con este código el tema hijo heredará la apariencia de su padre.

Así que escribamos una función que se enganche en el gancho de acción wp_enqueue_scripts (). Dentro de la función tu En cola la hoja de estilo del tema principal usando el Función wp_enqueue_style ()

Esto asegura que el tema hijo hereda los estilos de su padre mientras anula cualquier regla de estilo específica en su propia style.css archivo.

 

<?php 
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

¡Su tema hijo está casi terminado!

Acceder al Temas panel en su instalación de WordPress y debería ver su tema Twenty Fifteen Child listo para usar. Hacer clic Activación y visite su sitio. Debería verse exactamente igual que el tema principal.

Agregar el área de widgets

Ahora necesitamos agregar el código para definir el área del widget de pie de página. Aquí está el fragmento que entra en functions.php

/ ** * Registrar el área del widget de pie de página. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar * / function twentyfifteen_child_widgets_init () {register_sidebar (array ('name' => __ ('Footer Widgets', 'twenty -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Agregue widgets aquí para que aparezcan en su área de pie de página. ',' twenty-quince-niño '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'twentyfifteen_child_widgets_init');

El código anterior agrega una función que registra una barra lateral con el ID de sidebar-2 (el tema Twenty Fifteen ya tiene una barra lateral con el ID de sidebar-1), y luego conecta esta función a la gancho de acción widgets_init ().

A continuación, sigamos adelante y agreguemos la nueva barra lateral al pie de página. Abierto footer.php en un editor de código e ingrese este fragmento justo debajo de esta línea de código: <footer id="colophon" class="site-footer" role="contentinfo">.

 
 
  
 
 
 

El código anterior primero verifica si sidebar-2 tiene widgets, si es así, muestra la barra lateral dentro de un div con la clase "widget-area". 

Lo siguiente que debe hacer es dirigirse al panel Widgets de su back-end de WordPress, ubicar la barra lateral Footer Widgets y agregarle algunos widgets. Guarde los widgets a medida que los agrega y verifique el resultado.

Widget de pie de página de Wordpress
Widgets de pie de página en el tema Twenty Fifteen

Lo anterior muestra un par de widgets en la barra lateral del pie de página de Twenty Fifteen Child y puede ver que el texto estaba demasiado cerca de la parte superior del contenedor y el margen inferior de los widgets era demasiado alto. Este pequeño fragmento en style.css mejorará la apariencia considerablemente. 

.site-footer .widget {margen: 0; acolchado: 10% 20% 0; } .site-footer .widget: last-child {margin-bottom: 10%; }	

Aquí hay otro ejemplo de cómo agregar otra barra lateral:

si (is_active_sidebar ('sidebar-2') 
|| is_active_sidebar ('sidebar-3')):
?>
">

if (is_active_sidebar ('sidebar-2')) {?>


<?php }
if (is_active_sidebar ('sidebar-3')) {?>


</div>



El código que necesita usar dependerá del tema que esté usando en realidad.

En esta publicación, hemos visto cómo agregar una nueva área de widgets al pie de página del tema Twenty Fifteen WordPress. Aunque colocamos el área de widgets en el pie de página del tema, puede usar esta lógica para agregar áreas de widgets prácticamente en todas partes de un tema siguiendo pasos similares.

Descargue la lista de 101 trucos de WordPress que todo bloguero debe conocer

101 trucos de WordPress

Haga clic aquí para descargar ahora

Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...