Cómo crear un tema secundario de WordPress (2021)

Sabes como hacer un tema infantil de WordPress ?

Por supuesto, su tema se verá adecuado para su sitio web, pero en algunos puntos, deberá editarlos. Hacer cambios en el tema hijo es una opción preferible para editar su sitio. Además, aprender sobre el tema hijo es una de las cosas básicas de WordPress que debe saber. Puede comenzar a aprender sobre WordPress aquí.

Pasemos por el proceso para crear un tema hijo de WordPress.

¿Por qué debería utilizar temas infantiles para WordPress?

En WordPress, un tema hijo adquiere todas las características, funcionalidades y otras del tema principal. Por otro lado, es posible editar el tema hijo sin cambiar el principal. Acortará el tiempo y el esfuerzo de editar el sitio por usted. Además, las actualizaciones de su tema de WordPress se mantienen más seguras y estables. Cuando personaliza el hijo, todos los cambios y personalizaciones en el padre permanecerán igual. Los usuarios también pueden usar este tema hijo en otros sitios web de WordPress.

Avisos antes de crear un tema infantil

Para hacer un WordPress con tema hijo , se requiere habilidad de codificación, ya que trabajará con HTML y CSS. Saber qué cambiar es muy importante. Además, necesitará un conocimiento básico de PHP, al menos copiar / pegar los fragmentos de código de otras fuentes.

Le recomendamos sinceramente que practique en el entorno de desarrollo. Este es un lugar donde puede hacerlo sin tener miedo de estropear su sitio principal. Es como matar 2 pájaros de un tiro: uno lo mueve al campo de prueba y el otro se usa como desarrollo del tema.

Una cosa más, el tema principal debe adaptarse a la apariencia y las funcionalidades a sus propósitos. De hecho, cuantos menos cambios realice, mejor será su sitio.

En las partes siguientes, usaremos el tema LearnPress como ejemplo para una mejor ilustración del tema de creación de niños de WordPress .

Construyendo el tema del primer hijo

Tienes 2 opciones al crear temas para niños en WordPress. Puede utilizar la forma manual para familiarizarse con todos los archivos. De lo contrario, la aplicación de un complemento funcionará con archivos y carpetas complicados.

Ahora, comenzaremos con la personalización.

Usando código

Para comenzar, abrirá / wp-content / themes / en la instalación de WordPress y creará una nueva carpeta para su tema hijo. Nómbralo como quieras.

Luego, debe crear los primeros 2 archivos para su tema hijo. Abra un editor de texto y pegue el siguiente código en el documento vacío:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Puede cambiar la información según lo planee y guardar este archivo en su archivo style.css en la carpeta del tema secundario reciente. Bueno, acaba de crear la hoja de estilo principal del tema hijo.

A continuación, se hará un archivo ^2º importar las hojas de estilo del tema de los padres. Cree un nuevo documento en su editor de texto y copie este código:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Cuando usa LearnPress como tema principal, este código comenzará a funcionar. Por lo tanto, la mayoría de los temas funcionarán así. Guarde este archivo y se convertirá en la carpeta functions.php de su tema hijo.

Después de esos pasos, tendrá un tema secundario básico. En "Apariencia", elija "Temas" y "Activar". Por lo tanto, su sitio comenzará a utilizar el tema hijo. Si necesita personalizarlo, pase a la siguiente parte.

Usar complementos

Le sugerimos que utilice el complemento Configurador de temas para niños. Dado que no requiere codificación, puede realizar cambios y personalizaciones fácilmente.

Primero, instale el complemento en su sitio. Para obtener más guías sobre la instalación de complementos, haga clic aquí.

Al activarlo, vaya a "Herramientas" -> "Temas secundarios" y elija LearnPress en el tema principal que pregunta la ventana emergente. Elija "Analizar" para comprobar la compatibilidad para ser un tema principal. A continuación, deberá nombrar la carpeta del tema hijo para guardar archivos y dónde guardarlos. En la configuración predeterminada, elija "Haga clic para editar los atributos del tema secundario". Luego, cumplirá con la información del tema hijo.

Al crear un tema secundario manualmente, su tema secundario no heredará los menús y herramientas del tema principal. Para resolverlo, use el Configurador de temas secundarios. Por último, elija "Crear nuevo tema secundario" para terminar. En este paso, su tema hijo tendrá functions.php y style.css para futuros desarrollos. Aparentemente, recuerde obtener una vista previa del complemento de su hijo. Luego, seleccione "Activar y publicar" para publicar su tema hijo.

Ahora, comenzaremos a personalizar el tema de su hijo.

Personalización del tema infantil de WordPress

Crearemos WordPress con un tema hijo un poco diferente al tema padre agregando código al archivo "style.css".

Copiar código del inspector de Firefox / Chrome

Puede utilizar los widgets Inspector de Chrome y Firefox para descubrir el código CSS necesario. Además, puede utilizar estas herramientas para acceder a los elementos CSS y HTML de todos los sitios.

Para ver un archivo CSS de una publicación o un sitio, haga clic con el botón derecho y seleccione "Inspeccionar". Su pantalla se dividirá en dos mitades y podrá ver el CSS y HTML de la página. Cuando mueva el mouse sobre las líneas HTML, la herramienta del inspector lo mostrará en la ventana superior. También hace las reglas de CSS.

Habrá un cambio de color temporal en la espalda. Para hacerlo permanente, copie esta línea de reglas CSS y péguela en el archivo style.css del tema secundario:

 1 body { 2 background-color: #fdf8ef; 3 )

Guarde los cambios y obtenga una vista previa del sitio. Además, puede volver a ejecutarlo para cualquier elemento de la hoja de estilo del tema. Bueno, aquí te damos una hoja de estilo completa para un tema infantil:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Copie el código del archivo style.css del tema principal

Como puede ver, es posible copiar desde el archivo padre theme'style.css y pegarlo en el tema hijo y personalizarlo.

Por ejemplo, el código para el color de fondo de la página es:

 1 background-color: var(--global--color-background);

'–Global – color-background' es una variable utilizada en los distintos lugares del tema. Tendrá que cambiar el valor de la variable si necesita cambiar el color en esos lugares al mismo tiempo. Vaya a / wp-content / themes / learnpress en la carpeta de instalación de WordPress y abra el archivo style.css en el editor de texto para buscar el lugar de –global – color-background. Esa variable se puede cambiar con otra variable. Puede encontrar una gran cantidad de variables de color en el archivo style.css del tema principal. Después de seleccionar las opciones de color adecuadas, copie y pegue esa línea de código en el archivo style.css del tema secundario y reemplace las antiguas por las nuevas elegidas para su tendencia de color. Luego, los colores se dividirán en función de los esquemas de color planificados. Este proceso hará que sus esquemas de color sean consistentes y se editen rápidamente.

Personalizar los archivos de plantilla

En un tema, las áreas de manejo de archivos en un sitio web se denominan plantillas. Las plantillas generalmente reciben el nombre de la sección que manejan. Por lo tanto, algunas secciones importantes son administradas por varios archivos o plantillas de contenido.

Para personalizar una plantilla, busque ese archivo en el tema principal y cópielo en el tema secundario. Luego, ábralo en el editor de texto y comience a modificarlo.

Le mostraremos un tutorial para este proceso con el archivo footer.php. Cópielo en la carpeta del tema hijo y ábralo en un editor de texto sin formato. Por ejemplo, eliminemos el enlace "Orgullosamente impulsado por WordPress" en el pie de página y agreguemos un aviso de derechos de autor. Para comenzar, elimine todo entre las etiquetas <div class = ”powered-by”>.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Luego, pegará el código que encontrará debajo de esas etiquetas en el ejemplo siguiente.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Elija "Guardar cambios" y cuando regrese al sitio, verá el nuevo aviso de derechos de autor.

Agregar funcionalidades a su tema hijo de WordPress

Para cambiar o agregar una función a su sitio, deberá buscar el archivo functions.php. Este archivo usa código PHP para ejecutar este proceso.

Por lo general, se le guiará para copiar y pegar fragmentos de código en el archivo function.php, pero se eliminarán cuando actualice PHP o su tema. Por lo tanto, le sugerimos que utilice un tema hijo para agregar los fragmentos de código. Bueno, pasemos al proceso de agregar widgets. Agregue el fragmento de código al archivo functions.php del tema hijo.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Guarde y navegue hasta "Apariencia" -> "Widgets" para ver la nueva herramienta. Además, puede buscar más información sobre cómo agregar un área de funciones. Puede agregar muchas características agregando fragmentos de código al archivo functions.php de su sitio.

Eso es todo sobre cómo crear un tema hijo en WordPress . Pasemos a la parte del error de reparación.

Corrección de errores

Puede resolver cualquier problema al crear un tema hijo en cualquier momento. Por lo tanto, no debes rendirte fácilmente.

Los problemas de sintaxis pueden deberse a que faltan algunos en el proceso de codificación. Además, es el error más popular que pueden encontrar todos los usuarios. Además, si las cosas no salen bien, siempre puedes borrarlo y empezar de nuevo.

Cómo crear un tema secundario de WordPress: Conclusión

Esperamos que pueda adquirir conocimientos sobre cómo crear un tema hijo a través de nuestro artículo. ¡Gracias por tus lecturas!

Leer más: Cómo corregir el error HTTP 500 WordPress (2021)