¿Empezando con los temas secundarios de WordPress?

En este tutorial, aprenderá cómo crear un tema secundario de WordPress. Si eres nuevo en WordPress y no sabes qué es un tema hijo de WordPress, te lo explicaré todo.

Los temas de WordPress son una colección de archivos PHP, JavaScript y CSS. En palabras simples, con los temas de WordPress, puede cambiar la apariencia de su blog. Los temas de WordPress pueden ser muy poderosos.

Los temas premium de WordPress ofrecen muchas características y funcionalidades avanzadas. Miles de temas de WordPress gratuitos y premium están disponibles.

Puede crear un tema de WordPress desde cero o puede crear un tema de WordPress basado en otro tema. Cada versión de WordPress viene con temas de WordPress preinstalados y si no le gusta el tema de WordPress preinstalado, puede instalar otro tema de WordPress o puede crear un tema secundario.

¿Por qué temas secundarios de WordPress?

Crear un tema secundario de WordPress significa que toma un tema existente y crea su propio tema basado en él. El tema secundario hereda la mayoría de las características del tema original, conocido como tema principal.

El tema infantil ahorra mucho trabajo y tiempo. Crear un tema de WordPress desde cero lleva mucho tiempo y, a veces, se requiere un conocimiento avanzado de HTML, CSS, PHP. Con los temas secundarios, puedes hacer muchas modificaciones.

Si no está satisfecho con la personalización, las opciones y las funciones que ofrece el tema de WordPress que está utilizando, puede crear un tema secundario. Incluso si desea realizar un cambio en su tema de WordPress, debe crear un tema secundario o usar el complemento del editor CSS.

Puede editar sus archivos de temas de WordPress existentes directamente, pero luego, cuando realice una actualización, perderá todas sus personalizaciones. Es por eso que necesitas un tema hijo.

Qué puedes hacer con los temas secundarios de WordPress

Con los temas secundarios de WordPress, puede agregar tantas funciones como desee. Tu decides. Si desea cambiar el tamaño de fuente o el color de los encabezados o enlaces, puede hacerlo muy fácilmente con CSS.

Puede agregar nuevos menús de navegación, registrar nuevas barras laterales, crear páginas personalizadas para productos o agregar soporte para fuentes web personalizadas.

Lo que necesitarás:

Ahora que sabe qué es un tema secundario de WordPress y por qué debe crear temas secundarios, es hora de aprender cómo crear un tema secundario de WordPress.

No es obligatorio, pero se recomienda configurar una instalación local de WordPress para fines de desarrollo y aprendizaje. Con la instalación local de WordPress, puede probar rápida y fácilmente sus nuevos complementos y temas.

Hay muchas maneras de instalar WordPress localmente. Si es un usuario de MAC, puede usar MAMP, los usuarios de Windows pueden usar el instalador de WordPress XAMPP, WAMP o Bitnami.

• Cómo instalar WordPress con el servidor WAMP
• Cómo instalar WordPress con MAMP
• Cómo instalar WordPress con Bitnami Stack

Si es un principiante absoluto, puede descargar e instalar la pila de Bitnami WordPress para crear un sitio web de WordPress totalmente funcional en su MAC o PC.

Personalmente, prefiero el servidor WAMP para el desarrollo local. No es difícil instalar WordPress en WAMP, puede leer tutoriales o ver videos para aprender cómo instalar WordPress usando WAMP, XAMPP o MAMP.

También necesitará un editor de código para editar archivos de temas. Sublimetext, Brackets, Atom son algunos editores de código populares.

¿Cómo crear un tema hijo de WordPress?

Una vez que su sitio local de WordPress esté listo, podemos comenzar a crear nuestro tema secundario. Si está utilizando el servidor WAMP, vaya a su directorio de instalación de WAMP> WWW> WordPress> wp-content> carpeta de temas.

En la carpeta de temas de WordPress, cree una nueva carpeta y asígnele el nombre veintiséis niños o cualquier cosa que desee, por ejemplo, InstantShift. Vamos a utilizar el tema veintiséis como tema principal. Significa que nuestro tema hijo se basará en el tema TwentySixteen.

Para cada tema hijo, necesitamos dos archivos.

• functions.php
• style.css

Dentro de su carpeta de temas de veintiséis hijos, cree estos dos archivos. Ahora abra sus archivos en el editor de texto, para un acceso rápido puede arrastrar su carpeta de veintiséis hijos en la barra lateral del editor de texto. Abra el archivo style.css y agregue el siguiente código.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Se requiere el marcado anterior para un tema secundario. Sin una hoja de estilo con el marcado necesario, WordPress no podrá reconocer su tema hijo.

Creo que puedes entenderlo todo. No hay nada que explicar. El nombre del tema de mi hijo es InstantShift, pero puedes nombrar a tu hijo como quieras. Lo más importante es Plantilla: veintiséis. Este es el nombre de nuestro tema principal. Asegúrate de escribirlo bien.

Si está utilizando cualquier otro tema como tema principal, simplemente cambie Plantilla: veintiséis con Plantilla: nombre-del-tema-principal.

En el encabezado de la hoja de estilo también podemos agregar más información, pero no es obligatorio. Ahora inicie sesión en su panel de WordPress. Ve a Apariencia > Temas. Debería ver el tema InstantShift sin ninguna captura de pantalla, porque no hemos agregado ninguna captura de pantalla para nuestro tema secundario.

Pase el mouse sobre el tema InstantShift y haga clic en el botón Detalles del tema. Aquí está la captura de pantalla de mi tema hijo.

Si puede ver esta pantalla, significa que su tema hijo está listo. Ahora podemos comenzar a personalizar nuestro tema. Activa este nuevo tema y visita la parte frontal de tu blog. Verás todo su contenido sin ningún estilo.

No te preocupes. Es normal. No podemos ver ningún estilo porque no hemos incluido el archivo de hoja de estilo de temas principales. asegurémonos de que la hoja de estilo de nuestro tema hijo esté funcionando. En el archivo style.css de su tema hijo, agregue el siguiente código.

body{
     background-color: #E7F5FB;
}

guarde su archivo style.css, vuelva a cargar la página principal de su sitio local de WordPress y debería ver un color de fondo azul claro.

Registro de la hoja de estilo del tema principal

No queremos crear todos los estilos desde cero. Solo agregaremos algunos estilos nuevos con el archivo style.css del tema secundario. Ahora agreguemos el archivo stye.css del tema principal en nuestro tema secundario.

Abra el archivo functions.php y agregue el siguiente código en el archivo functions.php del tema secundario.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Ahora, si vuelve a cargar su sitio local de WordPress, verá el tema normal con todos los estilos de TwentySixteen.

Eso es todo. Has creado con éxito tu primer tema hijo. También ha agregado un nuevo color de fondo para el cuerpo.

Pero no creamos nuestro tema hijo para simplemente cambiar el fondo por el cuerpo. Comencemos a personalizar nuestro tema.

Anulación de estilos de temas principales

Encabezado de personalización:

De forma predeterminada, el encabezado del tema Twenty Sixteen tiene mucho relleno. Cambiemos el relleno y agreguemos el nuevo color de fondo para el encabezado del sitio. Agregue el siguiente código en el archivo style.css de su tema hijo, guarde su archivo y vuelva a cargar su interfaz de su sitio para ver los cambios.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Aquí puede ver la captura de pantalla del encabezado del sitio antes y después de agregar nuestros nuevos estilos.

Personalización de la navegación principal

Ahora cambiemos el color de fondo de los elementos del menú de navegación principal. Me gusta usar las herramientas de desarrollo de Chrome para editar mis estilos CSS.

Después de editar páginas web con las herramientas de desarrollo de Chrome, puede copiar el nuevo código de las herramientas de desarrollo de Chrome y pegarlo en el archivo style.css de su tema secundario.

Abra el archivo style.css del tema de su hijo y agregue el siguiente código.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Aquí puedes ver la captura de pantalla de nuestra nueva cabecera. Hemos personalizado muy fácilmente nuestro tema con un tema infantil.

Ultimas palabras

Ahora ya sabe cómo puede crear temas secundarios de WordPress. Es muy simple y fácil. Con la comprensión básica de HTML y CSS, puede cambiar completamente el diseño de su sitio.

También puede agregar nuevos menús de navegación, áreas de widgets, soporte para nuevas fuentes we, etc. con el tema secundario. Pero no podemos abarcar todo en un solo artículo.

Si desea aprender a desarrollar temas de WordPress, debe comenzar con los temas secundarios de WordPress. Aprenda los conceptos básicos de la personalización del tema.