Crear tema hijo en WordPress Tutorial paso a paso

En esta publicación, aprenderá cómo crear un tema secundario en WordPress paso a paso, todos los conceptos básicos de los temas secundarios de WordPress.

Aprenderá cómo importar estilos CSS de tema principal, cómo anular estilos de tema principal y por qué debe crear temas secundarios de WordPress.

Para saber por qué los temas secundarios de WordPress son importantes, debe leer nuestra Guía para principiantes de desarrollo de temas principales y secundarios de WordPress.

¿Qué puedes hacer con los temas secundarios de WordPress?

Con los temas secundarios de WordPress, puede personalizar muy fácilmente su tema de WordPress activo predeterminado. No necesita conocimientos avanzados de HTML, CSS, PHP o JavaScript para crear temas secundarios.

Una comprensión básica o buena de HTML, CSS y PHP podría ser muy útil.

Lectura adicional: Cómo elegir un tema de WordPress gratuito o premium perfecto

Puede usar un tema secundario de WordPress para modificar su sitio con CSS, agregar nuevas áreas de widgets, menús de navegación adicionales, editar archivos personalizados para crear nuevas páginas con un estilo personalizado.

Con los temas secundarios, también puede reordenar los elementos del sitio, agregar contenido/elementos nuevos y cambiar cualquier funcionalidad.

Por qué deberías crear un tema hijo de WordPress

La razón por la que existen los temas secundarios es para que pueda personalizar un tema "principal" (su existente/activo) sin perder sus cambios y modificaciones cuando actualiza el tema principal.

Por ejemplo, si ha modificado directamente el archivo single.php, sus personalizaciones funcionarán bien al principio.

Sin embargo, cuando actualice su tema a una versión más nueva de su tema modificado, perderá todos sus cambios y no habrá forma de restaurar su personalización.

Que necesitas

Puede crear un tema secundario rápidamente y cargarlo en su servidor, pero se recomienda instalar WordPress localmente en su PC.

Con la instalación local de WordPress, puede crear y probar rápidamente su tema. No necesita una conexión a Internet todo el tiempo.

Con el sitio local de WordPress, puede cometer errores sin afectar su sitio en vivo y es mucho más rápido y mejor.

Hay muchas formas de instalar WordPress localmente en Windows, MAC o Linux. Lea este tutorial para aprender a instalar WordPress en una PC local con la pila Bitnami WordPress.

Ya hemos publicado un tutorial paso a paso para principiantes.

Cómo instalar WordPress en el servidor WAMP en Windows 8

Cómo instalar WordPress en Windows 8 usando Bitnami Stack

¿Cómo crear un tema hijo en WordPress guía paso a paso?

Para cada tema hijo en WordPress, se requieren dos archivos.

• funciones.php
• estilo.css

En el archivo style.css, podemos agregar información sobre nuestro tema secundario, por ejemplo, nombre del tema, descripción del tema, nombre del autor, detalles del tema principal, etiquetas, etc.

También necesitamos un archivo functions.php para registrar la hoja de estilo del tema padre e hijo. Con el archivo functions.php también podemos agregar nuevas funciones, registrar nuevos menús de navegación, áreas de widgets, etc.

Entonces, comencemos a crear su primer tema hijo. En este tema secundario, no vamos a agregar nuevas áreas de widgets, menús de navegación, etc. Usaremos nuestro tema secundario para realizar algunos cambios CSS simples. Anularemos los estilos CSS predeterminados.

Puede usar cualquier tema de WordPress como tema principal. Para este tutorial, voy a crear un tema secundario para el tema TwentySixteen.

Cree una nueva carpeta y guárdela como veintiséis niños o puede nombrarla como desee, por ejemplo, diseño.

Cree dos archivos nuevos y guárdelos como archivos functions.php y style.css en nuestra carpeta de temas secundarios. El nombre de la carpeta de mi tema hijo es designbomb.

Ahora agregue la siguiente información en el archivo style.css de su tema hijo y guarde su archivo.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Ahora inicie sesión en su panel de WordPress. Vaya a Apariencia > Temas > Agregar nuevo y cargue este nuevo tema secundario. Verá un nuevo tema sin ninguna captura de pantalla. Pase el mouse sobre el tema y haga clic en el botón Detalles del tema.

Verá los siguientes detalles para su nuevo tema secundario.

En la captura de pantalla anterior, puede ver toda la información básica sobre nuestro tema secundario. Nombre de nuestro tema secundario, quién es el autor de este tema, descripción del tema secundario y también puede ver Este es un tema secundario de Twenty Sixteen. mensaje.

hemos agregado Plantilla: veintiséis en el archivo style.css de nuestro tema hijo. Esta línea le dice a WordPress que veintiséis es el tema principal.

Si está utilizando cualquier otro tema, reemplace TwentySixteen con el nombre de su tema principal.

Ahora active su nuevo tema secundario y vuelva a cargar su página principal. Debería ver todo el contenido sin ningún estilo. No te preocupes, eso es normal. Esto se debe a que no hemos incluido el archivo style.css de nuestro tema principal y secundario.

Después de activar el nuevo tema secundario, vaya a Apariencia > Editor y seleccione el archivo functions.php (Funciones de tema), agregue el siguiente código en el archivo functions.php y haga clic en el botón Actualizar archivo para guardar los cambios.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Ahora visite la parte frontal de su sitio de WordPress y vuelva a cargar su página. Debería ver el sitio normal con todos los estilos de TwentySixteen.

Modificación de estilos existentes

Significa que nuestro tema secundario está listo. Es hora de personalizar nuestro tema principal con nuevos estilos CSS. Ahora, en Apariencia > Editor, seleccione el archivo style.css. Vamos a añadir algunos estilos nuevos.

Agregue el siguiente estilo en el archivo style.css de su tema hijo y guarde su archivo.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

Vuelva a cargar la parte frontal de su sitio y abra cualquier página. Hemos modificado los estilos predeterminados para el elemento de menú actual. Vea la captura de pantalla a continuación.

Para el elemento de menú actual, he agregado un nuevo color de fondo, radio de borde, color y sombra de cuadro. Fue muy simple y fácil cambiar estilos con las herramientas de Chrome Dev.

Eso es todo

Ahora ya sabes cómo crear un tema hijo. ¿No fue tan simple y fácil? Con los temas secundarios de WordPress, puede personalizar casi todos los archivos de su tema principal, pero no se recomienda modificar todos los archivos de su tema principal.

Utilice siempre temas secundarios para agregar funciones, características o páginas personalizadas necesarias.

Descargar el tema hijo de Diseños