Cómo crear un tema hijo en WordPress
Los desarrolladores de WordPress agregaron la capacidad de crear temas secundarios para que pueda crear subtemas basados en las características de un tema principal.
¿Por qué deberías usar WordPress Child Themes?
Un tema secundario le permite modificar un tema principal tanto (o tan poco) como desee. Luego puede cambiar el tema secundario sin afectar el tema principal o cualquier otro proyecto que lo use como un ancla para sus propios temas secundarios.
Se pueden agregar archivos y tipos de archivos personalizados adicionales según sea necesario, pero se recomiendan esos archivos para que el tema funcione correctamente.
Usando los archivos relevantes .css y .php, puede modificar todo, desde los parámetros de estilo y diseño, hasta la codificación real y los scripts que utiliza el tema secundario, incluso si esos scripts no están presentes en el directorio del tema principal.
Piense en el tema de su hijo como una superposición sobre el tema principal. Cuando un visitante carga su sitio web, WordPress primero carga el tema secundario y luego hereda los estilos y funciones que faltan del tema principal. Como resultado, la mayoría de la codificación en segundo plano aún se extrae del directorio principal, pero se modifica de acuerdo con los parámetros del tema secundario antes de que el contenido se muestre en la página.
Lo que necesitarás
Antes de comenzar esta guía, necesitará lo siguiente:
Acceso al área de administración de WordPress
Acceso al administrador de archivos o FTP
Crear un tema secundario en WordPress
Crear un tema secundario no es más complicado que el trabajo que ya ha estado haciendo con un solo tema maestro.
Creará un directorio para el tema secundario en el directorio wp-content / themes . Es mejor mantener una buena organización del directorio agregando -child al final del nombre del tema principal. También puede agregar el nombre del proyecto específico si lo prefiere.
Vea ejemplo desde aqui
Recuerde no incluir espacios en el nombre del archivo porque pueden causar errores. Para crear un nuevo directorio, puede usar el cliente FTP o el Administrador de archivos.
El siguiente ejemplo utiliza el Administrador de archivos para crear un tema secundario basado en el tema twentyseventeen (que esta por defecto en wordpress), por lo que la ruta completa a la carpeta de temas secundarios será wp-content / themes / twentyseventeen-child .
Asigne un nombre a su nuevo tema y cambie todos los demás valores para que coincidan con su tema y nombre de dominio. El campo más importante es el campo Plantilla porque le dice a WordPress en qué tema principal se basa su tema secundario. Una vez que haya terminado, haga clic en Guardar .
Agregue un nuevo archivo functions.php en la misma carpeta, pero no copie / pegue el código del archivo del tema principal, ya que debe permanecer separado de cualquier modificación que realice en el tema secundario. En su lugar, cree un archivo en blanco o agregue las nuevas funciones .php requeridas para su tema secundario.Ver código y descarga
style.css: Hoja de estilos del child theme
functions.php: Funciones del child theme
En el tema hijo puedes sobreescribir cualquier otro archivo del tema padre, siempre que mantengan el mismo nombre y se encuentren en la misma ruta. En la siguiente imagen de ejemplo hemos sobreescrito el archivo footer.php y el archivo /template-parts/header/site-branding.php
Desde el área de administración de WordPress, vaya a Apariencia -> Temas para ver su tema hijo recién creado y haga clic en Activar .
Visite su sitio web y verá su tema con algunos problemas obvios (como se muestra a continuación). No entre en pánico, porque el archivo functions.php todavía no está cargando el CSS del tema principal.
Desde el área de administración de WordPress, navegue hasta Apariencia -> Editor y elija functions.php .
WordPress tiene una función para cargar el CSS de los temas principales. Copie y pegue el siguiente código en el archivo functions.php del tema secundario
Haga clic en Actualizar en la parte inferior de la página para guardar sus cambios.
Visite su sitio web nuevamente. Notará que el CSS está cargado y su tema secundario se ve exactamente igual que el tema principal.
Como puede ver, la creación del tema secundario de WordPress es bastante simple si desglosa el proceso en pasos separados.
Por ejemplo, para cambiar el color de fondo del tema secundario de WordPress, agregue la siguiente regla CSS al archivo style.css :
Vea a continuación cómo esto cambiaría el aspecto de su sitio de WordPress. Siga un proceso similar para cualquier otro elemento que desee cambiar.
Lo mismo ocurre con cualquier otro elemento que desee cambiar.
Para anular el original, su nueva plantilla debe tener el mismo nombre de archivo y estar en la misma ubicación que el original. Es una buena idea hacer una copia del archivo de plantilla del tema principal y trabajar a partir de eso para agregar o eliminar su propio código.
Los archivos de la plantilla principal se almacenan en la carpeta principal del tema. La plantilla para ver una sola publicación es single.php y la plantilla para páginas es page.php .
Twentyseventeen también divide sus plantillas en ‘partes de plantilla’ que se incluyen en la plantilla principal usando la función get_template_part de WordPress (), para encontrar el archivo relevante, simplemente puede buscar en las plantillas principales con la frase ‘template-parts’ para encontrar esas funciones. En el archivo de plantilla principal page.php de twentseventeen, la línea 27 dice:
get_template_part( 'template-parts/page/content', 'page' );
template-parts / page / – es la ruta de la carpeta, por lo tanto, la ruta completa es wp-content / themes / twentyseventeen / template-parts / page /content . Se refiere a los caracteres en el nombre del archivo antes de la página del guión ; se refiere al nombre del archivo después del guión.
Juntos se forman – wp-content / themes / twentyseventeen / template-parts / page / content-page.php
Conclusión
Los temas secundarios de WordPress ofrecen una forma poderosa de crear un proyecto completamente nuevo basado en los parámetros de un tema maestro sin afectar los archivos del tema maestro, y viceversa. Con un poco de codificación simple y administración de directorios, puede modificar el tema secundario tan poco o tanto como desee, proporcionando una amplia gama de posibilidades para su diseño.
Vea ejemplo y archivos fuente desde aqui
Cómo crear un tema secundario en WordPress
Un tema secundario le permite usar y modificar un tema principal y luego guardar el tema secundario por separado sin afectar el tema principal. En este tutorial de WP , aprenderá cómo crear y personalizar un tema secundario de WordPress.¿Por qué deberías usar WordPress Child Themes?
Un tema secundario le permite modificar un tema principal tanto (o tan poco) como desee. Luego puede cambiar el tema secundario sin afectar el tema principal o cualquier otro proyecto que lo use como un ancla para sus propios temas secundarios.
Cómo funcionan los temas infantiles de WordPress
Un tema secundario reside en un directorio separado del tema principal, y cada directorio secundario debe incluir sus propios archivos style.css y functions.php.Se pueden agregar archivos y tipos de archivos personalizados adicionales según sea necesario, pero se recomiendan esos archivos para que el tema funcione correctamente.
Usando los archivos relevantes .css y .php, puede modificar todo, desde los parámetros de estilo y diseño, hasta la codificación real y los scripts que utiliza el tema secundario, incluso si esos scripts no están presentes en el directorio del tema principal.
Piense en el tema de su hijo como una superposición sobre el tema principal. Cuando un visitante carga su sitio web, WordPress primero carga el tema secundario y luego hereda los estilos y funciones que faltan del tema principal. Como resultado, la mayoría de la codificación en segundo plano aún se extrae del directorio principal, pero se modifica de acuerdo con los parámetros del tema secundario antes de que el contenido se muestre en la página.
Lo que necesitarás
Antes de comenzar esta guía, necesitará lo siguiente:
Acceso al área de administración de WordPress
Acceso al administrador de archivos o FTP
Crear un tema secundario en WordPress
Crear un tema secundario no es más complicado que el trabajo que ya ha estado haciendo con un solo tema maestro.
Creará un directorio para el tema secundario en el directorio wp-content / themes . Es mejor mantener una buena organización del directorio agregando -child al final del nombre del tema principal. También puede agregar el nombre del proyecto específico si lo prefiere.
Vea ejemplo desde aqui
Recuerde no incluir espacios en el nombre del archivo porque pueden causar errores. Para crear un nuevo directorio, puede usar el cliente FTP o el Administrador de archivos.
El siguiente ejemplo utiliza el Administrador de archivos para crear un tema secundario basado en el tema twentyseventeen (que esta por defecto en wordpress), por lo que la ruta completa a la carpeta de temas secundarios será wp-content / themes / twentyseventeen-child .
Asigne un nombre a su nuevo tema y cambie todos los demás valores para que coincidan con su tema y nombre de dominio. El campo más importante es el campo Plantilla porque le dice a WordPress en qué tema principal se basa su tema secundario. Una vez que haya terminado, haga clic en Guardar .
Agregue un nuevo archivo functions.php en la misma carpeta, pero no copie / pegue el código del archivo del tema principal, ya que debe permanecer separado de cualquier modificación que realice en el tema secundario. En su lugar, cree un archivo en blanco o agregue las nuevas funciones .php requeridas para su tema secundario.Ver código y descarga
Personaliza el tema hijo y conoce sus archivos
screenshot.png: Imagen de perfil del child themestyle.css: Hoja de estilos del child theme
functions.php: Funciones del child theme
En el tema hijo puedes sobreescribir cualquier otro archivo del tema padre, siempre que mantengan el mismo nombre y se encuentren en la misma ruta. En la siguiente imagen de ejemplo hemos sobreescrito el archivo footer.php y el archivo /template-parts/header/site-branding.php
Visite su sitio web y verá su tema con algunos problemas obvios (como se muestra a continuación). No entre en pánico, porque el archivo functions.php todavía no está cargando el CSS del tema principal.
Desde el área de administración de WordPress, navegue hasta Apariencia -> Editor y elija functions.php .
WordPress tiene una función para cargar el CSS de los temas principales. Copie y pegue el siguiente código en el archivo functions.php del tema secundario
Haga clic en Actualizar en la parte inferior de la página para guardar sus cambios.
Visite su sitio web nuevamente. Notará que el CSS está cargado y su tema secundario se ve exactamente igual que el tema principal.
Como puede ver, la creación del tema secundario de WordPress es bastante simple si desglosa el proceso en pasos separados.
Personalizar un tema secundario de WordPress
Lo más probable es que desee personalizar el aspecto del tema de su hijo. Es por eso que lo creaste en primer lugar, ¿verdad?Personalizando la apariencia del tema de tu hijo
Para personalizar el aspecto de su tema, debe editar el archivo .css del tema secundario . También necesita una comprensión básica de las reglas CSS y saber cómo inspeccionar elementos utilizando su navegador. Al hacer clic con el botón derecho en cualquier cosa que desee cambiar y luego seleccionar ‘Inspeccionar elemento’ , puede buscar las clases asignadas para ese elemento y el CSS predeterminado adjunto.Por ejemplo, para cambiar el color de fondo del tema secundario de WordPress, agregue la siguiente regla CSS al archivo style.css :
Vea a continuación cómo esto cambiaría el aspecto de su sitio de WordPress. Siga un proceso similar para cualquier otro elemento que desee cambiar.
Lo mismo ocurre con cualquier otro elemento que desee cambiar.
Cambiar el diseño de publicaciones y páginas
Al igual que el CSS personalizado anula el estilo del tema principal, los archivos de plantilla le permiten crear sus propios diseños anulando el diseño predeterminado.Para anular el original, su nueva plantilla debe tener el mismo nombre de archivo y estar en la misma ubicación que el original. Es una buena idea hacer una copia del archivo de plantilla del tema principal y trabajar a partir de eso para agregar o eliminar su propio código.
Los archivos de la plantilla principal se almacenan en la carpeta principal del tema. La plantilla para ver una sola publicación es single.php y la plantilla para páginas es page.php .
Twentyseventeen también divide sus plantillas en ‘partes de plantilla’ que se incluyen en la plantilla principal usando la función get_template_part de WordPress (), para encontrar el archivo relevante, simplemente puede buscar en las plantillas principales con la frase ‘template-parts’ para encontrar esas funciones. En el archivo de plantilla principal page.php de twentseventeen, la línea 27 dice:
get_template_part( 'template-parts/page/content', 'page' );
template-parts / page / – es la ruta de la carpeta, por lo tanto, la ruta completa es wp-content / themes / twentyseventeen / template-parts / page /content . Se refiere a los caracteres en el nombre del archivo antes de la página del guión ; se refiere al nombre del archivo después del guión.
Juntos se forman – wp-content / themes / twentyseventeen / template-parts / page / content-page.php
Agregar y quitar funciones
Otra gran ventaja de usar un tema secundario es la capacidad de tener un archivo functions.php separado que, al igual que Plugins , se usa para agregar (o eliminar) ciertas características. Al tener functions.php en un tema secundario separado, puede estar seguro de que las modificaciones no desaparecerán después de una actualización del tema.Si esto es muy complicado para usted siempre puede usar este plugin que le ayudara a crearlo.Conclusión
Los temas secundarios de WordPress ofrecen una forma poderosa de crear un proyecto completamente nuevo basado en los parámetros de un tema maestro sin afectar los archivos del tema maestro, y viceversa. Con un poco de codificación simple y administración de directorios, puede modificar el tema secundario tan poco o tanto como desee, proporcionando una amplia gama de posibilidades para su diseño.
Vea ejemplo y archivos fuente desde aqui