Cómo crear un tema hijo de WordPress

¿Está buscando crear un tema hijo en WordPress? Una vez que aprenda los conceptos básicos de WordPress , probablemente desee aprender a personalizar su sitio de WordPress. Creemos que los temas secundarios son un excelente punto de partida para cualquiera que busque personalizar temas de WordPress. En este artículo, le mostraremos cómo crear un tema hijo en WordPress.

Un sencillo tema hijo de WordPress basado en Twenty Thirteen

¿Por qué necesita crear un tema hijo?

Los temas hijos se consideran la mejor manera de personalizar sus temas de WordPress. Un tema hijo hereda todas las características y la apariencia de su tema padre. Puede personalizarlo sin afectar el tema principal. Esto le permite actualizar fácilmente el tema principal sin preocuparse por perder sus cambios.

Puede obtener más información sobre los temas secundarios en nuestro artículo ¿Qué es un tema secundario de WordPress? Pros, contras y más .

Requisitos

Se requiere un conocimiento básico de CSS / HTML para que pueda realizar sus propios cambios. Ciertamente, algún conocimiento de PHP ayudaría. Si eres bueno copiando y pegando fragmentos de código de otras fuentes, eso también funcionaría.

Le recomendamos que practique en su entorno de desarrollo local . Puede mover un sitio de WordPress en vivo al servidor local para realizar pruebas o utilizar contenido ficticio para el desarrollo de temas .

Empezando

Cualquier buen tema de WordPress se puede utilizar como tema principal. Sin embargo, hay muchos tipos diferentes de temas y es posible que algunos no sean los más fáciles de trabajar. Por el bien de este tutorial, usaremos Twenty Thirteen , que es uno de los temas predeterminados de WordPress.

Creando su primer tema hijo

Primero debe abrir /wp-content/themes/en su carpeta de instalación de WordPress y crear una nueva carpeta para su hijo. Puede nombrar esta carpeta como desee. Para este tutorial lo nombraremos wpbdemo.

Creación de un nuevo tema hijo de WordPress

Abra un editor de texto como el Bloc de notas y pegue este código:

/*
 Theme Name:   TWP Child Theme
 Theme URI:    https://www.trucoswp.com/
 Description:  A Twenty Thirteen child theme
 Author:       TrucosWP
 Author URI:   https://www.trucoswp.com
 Template:     twentythirteen
 Version:      1.0.0
*/
@import url("../twentythirteen/style.css");

Ahora guarde este archivo como style.cssen la carpeta del tema secundario que acaba de crear.

La mayoría de las cosas en este archivo se explican por sí mismas. A lo que realmente quieres prestar atención es a la template: twentythirteen .

Esto le dice a WordPress que nuestro tema es un tema hijo y que el nombre del directorio de nuestro tema principal es veintitrés. El nombre de la carpeta principal distingue entre mayúsculas y minúsculas. Si proporcionamos a WordPress Plantilla: TwentyThirteen, entonces no funcionará.

La última línea de este código importa la hoja de estilo de nuestro tema principal al tema secundario.

Este es el requisito mínimo para crear un tema hijo. Ahora puede ir a Apariencia »Temas donde verá WPB Child Theme. Debe hacer clic en el botón Activar para comenzar a usar el tema hijo en su sitio.

Activando su tema hijo de WordPress

Dado que aún no ha cambiado nada en su tema secundario, su sitio utilizará todas las funciones y apariencia de su tema principal.

Personalización del tema de su hijo

Cada tema de WordPress tiene un archivo style.css en su directorio principal. En su mayoría, esta es la hoja de estilo principal de su tema donde va todo el CSS. Sin embargo, es posible que algunos temas solo contengan la información del encabezado del tema. Estos temas suelen tener archivos CSS ubicados en un directorio separado.

Para esta sección, necesitará un poco de conocimiento sobre CSS .

Google Chrome y Firefox vienen con herramientas de inspección integradas. Estas herramientas le permiten ver el HTML y CSS detrás de cualquier elemento de una página web.

Si desea ver el CSS utilizado para el menú de navegación, simplemente lleve el mouse al menú de navegación y haga clic con el botón derecho para seleccionar Inspeccionar elemento.

Uso de la herramienta Inspeccionar elemento en Google Chrome

Esto dividirá la pantalla de su navegador en dos partes. En la parte inferior de la pantalla, verá el HTML y CSS de la página.

Inspector de Chrome que muestra reglas de estilo HTML y CSS renderizadas

A medida que mueve el mouse en diferentes líneas HTML, el inspector de Chrome las resaltará en la ventana superior. Como puede ver, tenemos el menú de navegación seleccionado en la captura de pantalla anterior.

También le mostrará las reglas CSS relacionadas con el elemento resaltado en la ventana de la derecha.

Puede intentar editar el CSS allí mismo para ver cómo quedaría. Intentemos cambiar el color de fondo de .navbar#e8e5ce.

Jugando con CSS en Chrome Inspector

Verá que el color de fondo de la barra de navegación cambiará. Si le gusta esto, puede copiar esta regla CSS y pegarla en el archivo style.css de su tema secundario.

.navbar {
background-color: #e8e5ce;
}

Guarde los cambios que realizó en el archivo style.css y luego obtenga una vista previa de su sitio.

Repita el proceso para cualquier cosa que desee cambiar en la hoja de estilo de su tema. Aquí está la hoja de estilo completa que hemos creado para el tema hijo. Siéntete libre de experimentar y modificarlo.

/*
Theme Name:   TWP Child Theme
Theme URI:    https://www.trucoswp.com/
Description:  A Twenty Thirteen child theme
Author:       TrucosWP
Author URI:   https://www.trucoswp.com
Template:     twentythirteen
Version:      1.0.0
*/
@import url("../twentythirteen/style.css");
.site-title {
padding: 30px 0 30px;
}
.site-header .home-link {
min-height: 0px;
}
.navbar {
background-color: #e8e5ce;
}
.widget {
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
}
.site-footer .sidebar-container {
background-color:#533F2A
}
Diseño de veinte trece

Cada tema de WordPress tiene un diseño diferente. Veamos el diseño del tema Twenty Thirteen. Tiene encabezado, menús de navegación, bucle de contenido, área de widget de pie de página, área de widget secundario y pie de página.

Cada una de estas secciones es manejada por diferentes archivos en la carpeta veintitrés. Estos archivos se denominan plantillas.

La mayoría de las veces, estas plantillas llevan el nombre del área para la que se utilizan. Por ejemplo, la sección de pie de página generalmente se maneja mediante el archivo footer.php, las áreas de encabezado y navegación se manejan mediante el archivo header.php. Algunas áreas, como el área de contenido, son manejadas por varios archivos llamados plantillas de contenido.

Lo primero que debe hacer es seleccionar el archivo de tema que desea modificar y luego copiarlo en su tema hijo.

Por ejemplo, desea eliminar el enlace ‘impulsado por WordPress’ del área del pie de página y agregar un aviso de derechos de autor allí. Simplemente copie el archivo footer.php en su tema hijo y luego ábralo en un editor de texto sin formato como el bloc de notas. Descubra las líneas que desea eliminar y reemplácelas por las suyas. Me gusta esto:

<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'main' ); ?>
<div class="site-info">
<p>&copy; Copyright <?php echo date("Y"); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

En este código, hemos reemplazado Twenty Thirteen créditos con un aviso de derechos de autor.

La resolución de problemas es mucho más fácil al crear temas secundarios. Por ejemplo, si eliminó accidentalmente algo que su tema principal requería, simplemente puede eliminar el archivo de su tema secundario y comenzar de nuevo.

Agregar nueva funcionalidad al tema secundario

Encontrará muchos tutoriales de WordPress que le pedirán que copie y pegue un fragmento de código en el archivo functions.php de su tema .

Agregar fragmentos de código en el archivo functions.php de un tema principal significa que sus cambios se sobrescribirán siempre que haya una nueva actualización para el tema principal. Es por eso que siempre se recomienda usar un tema hijo y agregar todos los fragmentos de código personalizados en el archivo functions.php del tema hijo.

Creemos un nuevo archivo en la carpeta de su tema hijo y asígnele el nombre functions.php. En este ejemplo, vamos a agregar un pequeño fragmento de código que cambiará la imagen de encabezado predeterminada en nuestra propia imagen personalizada.

Ya hemos creado una imagen de encabezado y una miniatura editando la imagen de encabezado predeterminada de Twenty Thirteen. A continuación, lo subimos a nuestro tema hijo dentro de la carpeta / images / headers /.

Después de eso, debemos decirle a WordPress que use esta imagen como la imagen de encabezado predeterminada para nuestro tema. Podemos hacerlo agregando este fragmento de código en el archivo functions.php de nuestro tema hijo:

<?php
function wpbdemo_custom_header_setup() {
add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );
register_default_headers( array(
'caramel' => array(
'url'           => '%2$s/images/headers/circle-wpb.png',
'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
),
) );
}
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>
Ahora, si visita Apariencia »Encabezado , podrá ver la imagen que agregamos como imagen predeterminada.
Cambiar el encabezado del tema en su tema infantil de WordPress

Puede agregar cualquier fragmento de código personalizado que necesite en el archivo functions.php de su tema hijo. Consulte estos más de 25 trucos extremadamente útiles para el archivo de funciones de WordPress .

Solución de problemas

Como principiantes, se espera que cometa errores al trabajar en el tema de su primer hijo. Simplemente no te rindas demasiado rápido. Consulte nuestra lista de errores de WordPress más comunes para encontrar una solución.

El error más común que vería es probablemente el error de sintaxis que generalmente ocurre cuando se le escapa algo en el código. Aquí hay una guía rápida que explica cómo encontrar y corregir el error de sintaxis en WordPress .

Resultado final

Un sencillo tema hijo de WordPress basado en Twenty Thirteen

Otros temas infantiles basados ​​en Twenty Thirteen

Aquí hay algunos otros temas secundarios de WordPress basados ​​en Twenty Thirteen. Échales un vistazo y observa cómo estos desarrolladores de temas personalizaron Twenty Thirteen.

Holi

Holi: un tema hijo de WordPress basado en Twenty Thirteen

Cherry blossom

Flor de cerezo - Tema de veinte trece niños

2013 blue

2013 azul

Flat portfolio

Cartera plana

Esperamos que este artículo le haya ayudado a aprender a crear un tema hijo de WordPress.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *