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

¿Sabes cómo hacer un tema infantil de WordPress ?

Por supuesto, su tema se verá adecuado para su sitio web, pero en algunos puntos, deberá editarlos. Realizar cambios en el tema secundario 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 debes saber. Puedes empezar a aprender sobre WordPress aquí.

Veamos el proceso para crear un tema hijo de WordPress.

¿Por qué debería usar temas secundarios para WordPress?

En WordPress, un tema hijo adquiere todas las características, funcionalidades y demás del tema padre. Por otro lado, es posible editar el tema secundario 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 secundario en otros sitios web de WordPress.

Avisos antes de hacer un tema hijo

Para hacer un tema infantil de WordPress , se requiere habilidad de codificación ya que trabajará con HTML y CSS. Saber qué cambiar es significativamente 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 de temas.

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

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

Construyendo el tema First Child

Tienes 2 opciones al crear temas infantiles de WordPress. Puede usar 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 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 secundario. Nómbralo como quieras.

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

 1 Theme Name: LP 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 a medida que planifica y guardar este archivo en su archivo style.css en la carpeta del tema secundario reciente. Bueno, acabas de crear la hoja de estilo principal del tema hijo.

A continuación, creará un ^segundo archivo para importar las hojas de estilo del tema principal. Haz un nuevo documento en tu editor de texto y copia 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 use 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 infantil básico. En la “Apariencia”, elige “Temas” y “Activar”. Por lo tanto, su sitio comenzará a utilizar el tema secundario. Si necesita personalizar, pase a la siguiente parte.

Uso de complementos

Le sugerimos que pueda usar el complemento Child Theme Configurator. 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 activar, vaya a "Herramientas" -> "Temas secundarios" y elija LearnPress en la ventana emergente de pregunta del tema principal. Elija "Analizar" para verificar la compatibilidad para ser un tema principal. A continuación, deberá nombrar la carpeta del tema secundario 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 las herramientas del tema principal. Para solucionarlo, utilice el Configurador de temas secundarios. Por último, elija "Crear nuevo tema secundario" para finalizar. En este paso, su tema hijo tendrá functions.php y style.css para futuros desarrollos. Aparentemente, recuerde obtener una vista previa de su complemento secundario. Luego, seleccione "Activar y publicar" para publicar su tema hijo.

Ahora, comenzaremos a personalizar su tema hijo.

Personalización del tema infantil de WordPress

Crearemos un tema secundario de WordPress un poco diferente al tema principal agregando código al archivo "style.css".

Copie el código del Inspector de Firefox/Chrome

Puede usar los widgets Inspector de Chrome y Firefox para descubrir el código CSS necesario. Además, puede usar 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 derecho y elija "Inspeccionar". Su pantalla se dividirá en 2 mitades y podrá ver el CSS y HTML de la página. Cuando mueves el mouse sobre las líneas HTML, la herramienta de inspección te mostrará en la ventana superior. También hace las reglas de CSS.

Habrá un cambio de color temporal en la parte posterior. Para que sea permanente, copie esta línea de regla 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, puedes relanzar esto para cualquier elemento en la hoja de estilo del tema. Bueno, te damos una hoja de estilo completa para un tema hijo aquí:

 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 el archivo style.css del tema principal y pegarlo en el tema secundario 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 varios 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 del fondo de color global. 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 con 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.

Personalización de 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 secundario y ábralo en un editor de texto sin formato. Por ejemplo, eliminemos el enlace "Proudly powered by WordPress" en el pie de página y agreguemos un aviso de derechos de autor. Para comenzar, elimine todas 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 encuentra debajo de esas etiquetas en el ejemplo a continuación.

 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 secundario de WordPress

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

Por lo general, se le indica que copie y pegue 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 use un tema secundario 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 secundario.

 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 funcional. Puede agregar muchas funciones agregando fragmentos de código al archivo functions.php de su sitio.

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

Corrección de errores

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

Los problemas de sintaxis pueden ser causados ​​por alguna falta en el proceso de codificación. Además, es el error más popular que todos los usuarios pueden encontrar. Además, si las cosas no salen bien, siempre puedes borrarlo y empezar de nuevo.

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

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

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