Crear y personalizar un tema infantil de WordPress
Publicado: 2020-09-29Si desea realizar cambios en su tema de WordPress, probablemente haya escuchado que una buena manera de hacerlo es crear y personalizar un tema secundario de WordPress . Pero, ¿sabes qué es un child theme y por qué es bueno usarlos? Si no, estás en el lugar correcto.
Tema hijo de WordPress
Tener un tema hijo implica que también hay un tema padre. Una relación padre-hijo es algo de lo que ha oído hablar si sabe un poco de codificación. Cuando se trata de WordPress, específicamente, tenemos una relación padre-hijo en los tipos de publicaciones personalizadas, por ejemplo. La clase de un niño o un tema es algo que tiene las características de su padre pero puede tener más características añadidas, lo que lo hará diferente de su padre. Cuando se habla en términos de temas, se instala un tema secundario junto con el tiempo principal. Un tema hijo nos permite cambiar los temas padres, pero de forma segura, sin editar directamente el tema padre . Básicamente, un tema hijo tendrá la mayor parte de su diseño configurando lo mismo que el tema principal. Pero, si le hace algunos cambios, estos cambios anularán la configuración inicial.
Razones para usar un tema hijo
En caso de que se esté preguntando por qué no hacer cambios directamente en el tema principal, lo explicaremos ahora mismo. La razón principal por la que no es una buena idea hacer esto es por las actualizaciones de temas. Para que su sitio web funcione correctamente, debe aplicar actualizaciones . Sin embargo, si personaliza el tema principal, perderá todos los cambios cada vez que actualice su tema, ya que los cambios se sobrescribirán.
Cómo funcionan los temas secundarios de WordPress
Un tema secundario se almacena en un directorio separado del tema principal. Cada vez tiene sus propios archivos style.css y functions.php. Si bien debe tener al menos dos archivos en el directorio del tema secundario, para que funcione correctamente, también puede agregar otros archivos. Los dos archivos mínimos pueden ayudarlo a modificar el estilo, la codificación y los scripts, y los parámetros de diseño. Cuando un usuario visita su sitio web, WordPress carga el tema secundario y luego completa los estilos y funciones faltantes utilizando parte del tema principal. Esto le permite obtener lo mejor de su tema secundario y personalizarlo, sin sacrificar la funcionalidad principal del tema principal.
Cómo crear un tema hijo
Hay varias formas de crear un tema hijo. Puede hacerlo manualmente, usando un cliente FTP o un directorio de archivos, o puede crear un tema secundario usando un complemento o un generador en línea.
A mano
Para crear manualmente un tema secundario, deberá utilizar un cliente FTP o un administrador de archivos. Además, tenga en cuenta que aquí crearemos un archivo style.css basado en el tema Twenty Seventeen.
- A través de un cliente FTP o un administrador de archivos, acceda a su carpeta public_html > wp-content > themes
- Aquí, debe crear una nueva carpeta. Las convenciones dicen que debe nombrar esta carpeta con el nombre del tema principal, pero agregue -child como sufijo. Aquí, el nombre de la nueva carpeta será veintisiete niños.
- Cree un archivo style.css dentro de la carpeta y agréguele este código:
/* Theme Name: Twenty Twenty Child Theme URL: http://yourdomain.com Description: Twenty Twenty Child Theme Author: Your Name Author URL: http://yourdomain.com Template: twentytwenty Version: 1.0.0 Text Domain: twentytwenty-child */- Ajuste los valores según sea necesario. Preste especial atención a la línea Plantilla, ya que le dice a WordPress con qué tema principal está relacionado su tema secundario. Cuando haya terminado, guarde los cambios y cierre.
- Usando un editor de texto, cree otro archivo llamado functions.php, pero no copie el código del tema principal. Copie y pegue este código allí en el archivo en blanco:
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>- Después de guardar y cerrar este archivo, visite su sitio web y vaya a Apariencia>Tema. Active el tema secundario y notará que se parece al tema principal.
Usar un complemento de tema secundario
Usar un complemento de tema secundario podría ser más fácil e intuitivo. Estos son algunos de los complementos que puede usar Child Theme Generator, Child Theme Configurator o Child Theme Wizard, por ejemplo. Tenga en cuenta que el uso de complementos también requiere algunos conocimientos. Por ejemplo, es posible que deba deshabilitar un complemento sin acceder a su área de administración, ya que podría llegar un momento en que no tendrá este acceso. Y se necesita algo de habilidad para hacer esto. Sin embargo, en general, los complementos suelen ser fáciles de usar, así que no tenga miedo de usarlos.
Usar un generador en línea
El uso de un generador de temas secundarios en línea hace que este proceso sea aún más fácil. Solo necesita ir a https://childtheme-generator.com y seguir los pasos. Cuando cree y descargue el tema, vaya a Apariencia>Tema y cargue y active su tema secundario.
Cómo personalizar el tema infantil
Para personalizar su tema hijo, necesita saber cómo inspeccionar elementos en la página web y comprender las reglas básicas de CSS. Para personalizar su tema secundario, desde el tema secundario activo, vaya a Personalizar>CSS adicional.
Cambiar color de fondo
El fondo correcto juega un papel importante en la apariencia del sitio web. Si bien puede agregar una imagen de fondo en WordPress, aquí solo hablaremos sobre cómo cambiar el color de fondo de su tema secundario. Para ello, añade esta regla CSS:
.sitio-contenido-contener {
color de fondo: #DEF0F5;
posición: relativa;
}
Tenga en cuenta que puede cambiar el valor después del color de fondo. Este valor específico es un valor de azul claro.
Cambiar el color de la barra lateral
Esta es la regla CSS que debes insertar para cambiar el color de la barra lateral:
.widget {
fondo: #B9EBFA;
relleno: 25px;
Personalice los tipos de fuente, el tamaño y el color
Para cambiar el tipo de fuente, el tamaño y el color de su tema secundario de WordPress, inserte el código a continuación. Tenga en cuenta que la etiqueta p representa el texto del párrafo.
pag {
color turquesa;
}
pag {
familia tipográfica: Georgia;
tamaño de fuente: 18px;
}
También puede cambiar el texto de otras partes, como el título y el encabezado, pero debe inspeccionar los elementos, ubicar el enlace de estilo CSS, copiarlo y cambiar los valores según sea necesario.
Conclusión
Si desea personalizar un tema, sin cambiar directamente su código, los temas secundarios son una excelente manera de hacerlo. Con esta guía, podrá crear y personalizar un tema secundario de WordPress y usarlo para muchas tareas diferentes . La mejor parte es que no perderá sus cambios después de actualizar el tema principal.