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í..
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.
2. Agregue el archivo para el área del widget de WordPress (en el pie de página o donde prefiera)
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 ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText 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
//Importe los estilos principales de la manera correcta y agregue otras hojas de estilo si es necesario.
función veinte_fifteen_child_styles() {
wp_enqueue_style('estilo padre', get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts', 'veinte_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 Activar 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.
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.
¡Su widget de pie de página de WordPress está listo!
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.
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.
y muchos más ...