Cómo hacer personalizaciones avanzadas con un tema para niños

Este tutorial no es para todos. No tiene que ser un desarrollador experimentado para seguir, pero necesita un interés real para obtener más información sobre WordPress y cómo funcionan los temas. Si no tiene miedo de trabajar con un pequeño código y ensuciarse las manos con algunos archivos con temas, ¡bienvenido a bordo! En esta guía, aprenderá cómo personalizar su sitio de WordPress de acuerdo con el contenido de su corazón usando un tema infantil, pero primero … hablemos exactamente por qué debe usar este extraño “tema infantil”.
Se esconde el contenido
¿Por qué usar un tema para niños?
Cómo crear un tema para el niño
Configuracion basica
Crea el archivo style.css
Crear las funciones del archivo.php
Personalización con el nuevo tema para el niño
Agregar y reemplazar estilos
Funciones de sobrescritura
Ignora las plantillas
Instalación del tema infantil
¿Qué herramientas debo usar?
Tus actualizaciones son seguras
¿Por qué usar un tema para niños? Repite después de mi:
Juro solemnemente que nunca edite un archivo de tema. Nuevos usuarios de WordPress que están interesados ​​en hacer personalizaciones de código a menudo editan los archivos en su tema. Este es un gran no. ¿Por qué? Una razón: cuando actualiza el tema, WordPress reemplazará el tema existente con la nueva versión del tema. Entonces, ¿por qué es importante? Imagine usar la versión 1.04 del tema Challenger. Movió el menú al archivo Header.php y agregó un nuevo CSS a style.css. Luego aparece la versión 1.05 y vea la notificación en el tablero. Cuando actualiza a V1.05, los archivos Header.php y Style.css serán reemplazados por los de V1.05 de Challenger. No contendrán los mismos cambios que ha realizado, por lo que su trabajo se perderá y no hay forma de recuperarlo. Esto puede ser bastante desalentador si tiene horas enfocadas en sus personalizaciones todo esto, si pone sus personalizaciones en un tema de Child Challenger, puede actualizar de manera segura a la versión 1.05 sin perder ninguna de las personalizaciones, ya que están almacenados en seguridad en el tema de los niños. Esto se volverá un poco más claro a medida que pasemos a un ejemplo real, así que hagamos un tema para el niño ahora. Cómo crear un tema para el niño Aunque no explicaré en detalle cómo funciona todo el código aquí, estas son las ideas y fragmentos básicos que debe comenzar. Configuración básica Comience creando una carpeta vacía en el escritorio. Puede nombrarlos como desee, pero la convención de nombre estándar es usar el nombre del tema de bajo caso, seguido de “niño” y reemplazo de espacios.
Por ejemplo, un tema infantil para el tema Challenger tendría una carpeta de “hijo provocativo”. Esta carpeta contendrá todos los archivos de archivo. Solo necesita un archivo para crear un tema secundario técnicamente válido, style.css. Cree el archivo style.css utilizando el editor de código de su elección, cree un nuevo archivo en el archivo de tema infantil y llámelo style.css. El archivo style.css es, por supuesto, donde agregará todos los CSS para personalizar su sitio. Para que WordPress reconozca el tema de su hijo como un tema válido, debe agregar un encabezado como este en la parte superior del estilo.css:/*
Nombre del tema: Challenger Child
Plantilla: Challenger
Autor: Temas del concurso
Versión: 1.0
Autor: https: //www.com..com
Descripción: Este es un tema infantil utilizado para personalizar el tema Challenger WordPress.
Licencia: GNU General Public License V2 o una versión posterior
Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html
*/ Puede copiar exactamente este encabezado y puede usarlo para los temas de sus propios hijos. Cambie el nombre del tema con cualquier tema que personalice.
La parte más importante es el valor de “plantilla”, que debe establecerse en el nombre del padre. En particular, el nombre utilizado para la carpeta que contiene el tema principal.
Con esto, ya puede activar el tema del niño a través del menú de aspecto y usarlo. Sin embargo, ¡su sitio estará completamente sin estilizado! Cuando se activa un tema infantil, WordPress ya no cobrará el archivo de parent Style.css y dependerá del tema del niño para hacerlo. Así es como puede cargar ambas hojas de estilo … Crear el archivo Functions.php en el editor de código, crear un segundo archivo en el niño y llamarlo functions.php. Luego agregue el siguiente código al archivo: <? PhpFunction my_theme_enqueue_styles () {

$ parent_;
wp_enqueue_style ($ style_parent, get_template_directory_uri (). ‘/style.css’);
wp_enqueue_style (‘Child-style’, get_stylesheet_directory_uri (). ‘/style.css’, array ($ parent_style), wp_get_theme ()-> get (‘versión’)
);
}
add_action (‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’); Esta característica le dice a WordPress que cargue el archivo style.css del tema principal y luego cargue el archivo style.css del tema secundario. La carga después de la hoja de estilo del tema secundario hace que sea más fácil anular los selectores CSS del tema principal.
Como se mencionó anteriormente, no cubriré este código de línea, pero puede encontrar una explicación más detallada de este fragmento en el códice de WordPress. ¡Personalización con el nuevo tema para el niño, esto es todo lo que tiene que hacer para crear un tema de niño funcional! Con la configuración del tema para los niños, hay tres formas en que puede personalizar su sitio. Agregue y reemplace los estilos Puede agregar cuántos CSS queremos en el archivo Style.css del tema infantil. Cuando encuentre selectores para usar en CSS, no verifique el archivo style.css del tema principal. Toda nuestra tarea usa un “preprocesador CSS”, ¡por lo que ni siquiera miramos ese archivo! En su lugar, siga este proceso más inteligente para encontrar selectores CSS y creo que tendrá mucho más éxito para personalizar el sitio. Actualizar las funciones con un tema principal bien codificado, puede anular cualquiera de las funciones que se encuentran en sus funciones.php. Por ejemplo, cada función de noticias de misión está empaquetada con una función function_existe (). Esto significa que puede copiar la función en el archivo Functions.php sobre la base del niño. Luego puede realizar todos los cambios deseados de la función allí. Ignorar las plantillas Una personalización común que requiere un tema infantil es reordinar los elementos. Por ejemplo, es posible que desee mover el título de publicación de acuerdo con la imagen presentada en lugar de antes.
Puede tomar cualquiera de los archivos de plantilla que se encuentran en el tema principal y puede colocar una copia en el niño. En cambio, se cargará la versión del tema infantil. Esto le permite agregar, reordinar y eliminar cualquier elemento que desee de cualquier parte del sitio. Instalación del tema infantil Una vez que esté satisfecho con sus ediciones, puede instalar el tema infantil en su sitio. Los temas de los niños se pueden cargar al igual que los temas habituales de WordPress, por lo que solo lleva uno o dos minutos activarlos en su sitio. Siga este tutorial para instalar el tema de su hijo: ¿Cómo instalar las herramientas temáticas de un niño? ¿Debería usar? Si eres completamente nuevo en todo esto, aquí hay algunas herramientas gratuitas que te ayudarán. En primer lugar, si no tiene un editor de código, consulte el código de Visual Studio. Es simple, pero flexible. También es completamente gratuito y se hace mucho software profesional. Es lo que uso para crear temas aquí en temas. En segundo lugar, crear un sitio local de WordPress (fuera de línea) es una excelente manera de probar el código sin afectar su sitio real. Aunque he usado y recomendado MAMP en el pasado, Local By Flywheel es tan fácil y fácil de usar, me gusta. Es lo que uso para desarrollar el tema y también es gratuito.