Este tutorial no es para todos.<\/p>\n
No necesita ser un desarrollador experimentado para seguir, pero s\u00ed necesita un inter\u00e9s genuino en aprender m\u00e1s sobre WordPress y c\u00f3mo funcionan los temas.<\/p>\n
Si no tiene miedo de trabajar con un poco de c\u00f3digo y ensuciarse las manos con algunos archivos de tema, \u00a1bienvenido a bordo!<\/p>\n
En esta gu\u00eda, aprender\u00e1 c\u00f3mo personalizar su sitio de WordPress al contenido de su coraz\u00f3n utilizando un tema infantil, pero primero …<\/p>\n
Cubramos exactamente por qu\u00e9 deber\u00eda usar esta cosa extra\u00f1a llamada "tema hijo".<\/p>\n
Repite despu\u00e9s de mi:<\/p>\n
Juro solemnemente que nunca editar\u00e9 un archivo de tema.<\/p>\n
Los nuevos usuarios de WordPress que est\u00e1n interesados \u200b\u200ben realizar personalizaciones con c\u00f3digo a menudo editan directamente los archivos en su tema. Este es un gran no-no.<\/p>\n
\u00bfPor qu\u00e9?<\/p>\n
Una raz\u00f3n: cuando actualice su tema, WordPress anular\u00e1 su tema existente con la nueva versi\u00f3n del tema.<\/p>\n
Entonces, \u00bfpor qu\u00e9 importa eso?<\/p>\n
Imagina que est\u00e1s usando la versi\u00f3n 1.04 del tema Challenger<\/a>. Movi\u00f3 el men\u00fa en el archivo header.php y agreg\u00f3 algo de CSS nuevo a style.css. Luego sale la versi\u00f3n 1.05 y ve la notificaci\u00f3n en su tablero.<\/p>\n Cuando actualice a v1.05, los archivos header.php y style.css ser\u00e1n reemplazados por los de la v1.05 de Challenger. No contendr\u00e1n las mismas ediciones que realiz\u00f3, por lo que su trabajo se perder\u00e1 y no habr\u00e1 forma de recuperarlo. Esto puede ser bastante desalentador si dedica horas a sus personalizaciones.<\/p>\n Sin embargo, si coloca sus personalizaciones en un tema secundario de Challenger, puede actualizar de manera segura a la versi\u00f3n 1.05 sin perder ninguna de sus personalizaciones porque est\u00e1n almacenadas de manera segura en el tema secundario.<\/p>\n Esto se volver\u00e1 un poco m\u00e1s claro a medida que pasemos a un ejemplo real, as\u00ed que sigamos adelante y creemos un tema hijo ahora.<\/p>\n Si bien no voy a explicar en detalle c\u00f3mo funciona todo el c\u00f3digo aqu\u00ed, estas son las ideas b\u00e1sicas y los fragmentos que necesita para comenzar.<\/p>\n Comience creando una carpeta vac\u00eda en su escritorio. Puede nombrarlo como desee, pero la convenci\u00f3n de nomenclatura est\u00e1ndar es usar el nombre del tema en min\u00fasculas seguido de "hijo" y reemplazando los espacios con guiones.<\/p>\n Por ejemplo, un tema hijo para el tema Challenger tendr\u00eda un nombre de carpeta "Challenger-child". Esta carpeta contendr\u00e1 todos los archivos del tema hijo.<\/p>\n Solo necesita un archivo para crear un tema hijo t\u00e9cnicamente v\u00e1lido, style.css.<\/p>\n Con el editor de c\u00f3digo de su elecci\u00f3n, cree un nuevo archivo dentro de la carpeta del tema secundario y as\u00edgnele el nombre style.css.<\/p>\n El archivo style.css es, por supuesto, donde agregar\u00e1 todo su CSS para personalizar su sitio. Para que WordPress reconozca su tema hijo como un tema v\u00e1lido, debe agregar un encabezado de hoja de estilo como este en la parte superior de style.css:<\/p>\n Puede copiar este encabezado exacto y usarlo para sus propios temas secundarios. Simplemente cambie el nombre del tema con cualquier tema que est\u00e9 personalizando.<\/p>\n La parte m\u00e1s importante es el valor de "Plantilla", que debe establecerse en el nombre del tema principal. En particular, el nombre utilizado para la carpeta que contiene el tema principal.<\/p>\n Con esto en su lugar, ya puede activar el tema hijo a trav\u00e9s del men\u00fa Apariencia y usarlo. Sin embargo, \u00a1su sitio estar\u00e1 completamente sin estilo!<\/p>\n Cuando se activa un tema secundario, WordPress ya no cargar\u00e1 el archivo style.css del tema principal y, en cambio, depender\u00e1 de su tema secundario para hacerlo.<\/p>\n As\u00ed es como puede cargar ambas hojas de estilo …<\/p>\n En su editor de c\u00f3digo, cree un segundo archivo en el tema hijo y as\u00edgnele el nombre functions.php.<\/p>\n A continuaci\u00f3n, agregue el siguiente c\u00f3digo al archivo:<\/p>\n Esta funci\u00f3n le dice a WordPress que cargue el archivo style.css del tema principal y luego cargue el archivo style.css del tema secundario. Cargar la hoja de estilo del tema secundario despu\u00e9s hace que sea m\u00e1s f\u00e1cil anular los selectores CSS del tema principal.<\/p>\n Como mencion\u00e9 anteriormente, no voy a cubrir este c\u00f3digo l\u00ednea por l\u00ednea, pero puede encontrar una explicaci\u00f3n m\u00e1s detallada de este fragmento en el Codex de WordPress<\/a>.<\/p>\n \u00a1Eso es todo lo que necesita hacer para crear un tema hijo funcional!<\/p>\n Con la configuraci\u00f3n del tema hijo, hay tres formas de personalizar su sitio con \u00e9l.<\/p>\n Puede agregar tanto CSS nuevo como desee en el archivo style.css del tema secundario.<\/p>\n Cuando busque selectores para usar en su CSS, no verifique el archivo style.css del tema principal. Todos nuestros temas usan un \u00abpreprocesador CSS", \u00a1as\u00ed que ni siquiera miramos ese archivo! En su lugar, siga este proceso m\u00e1s inteligente para encontrar selectores de CSS<\/a>, y creo que tendr\u00e1 mucho m\u00e1s \u00e9xito personalizando su sitio.<\/p>\n Con un tema principal bien codificado, puede anular cualquiera de las funciones que se encuentran en su archivo functions.php.<\/p>\n Por ejemplo, todas las funciones de Mission News<\/a> est\u00e1n envueltas con un Una personalizaci\u00f3n com\u00fan que requiere un tema hijo es la reordenaci\u00f3n de elementos. Por ejemplo, es posible que desee mover el t\u00edtulo de la publicaci\u00f3n despu\u00e9s de la Imagen destacada en lugar de antes.<\/p>\n Puede tomar cualquiera de los archivos de plantilla que se encuentran en el tema principal y colocar una copia en su tema secundario. En su lugar, se cargar\u00e1 la versi\u00f3n del tema hijo. Esto le permite agregar, reordenar y eliminar cualquier elemento que desee en cualquier parte del sitio.<\/p>\n Una vez que est\u00e9 satisfecho con sus ediciones, puede instalar el tema hijo en su sitio.<\/p>\n Los temas secundarios se pueden cargar como los temas normales de WordPress, por lo que solo se necesitan uno o dos minutos para activarlos en su sitio. Siga este tutorial para instalar el tema de su hijo:<\/p>\n C\u00f3mo instalar un tema hijo de WordPress<\/a><\/p>\n Si eres totalmente nuevo en todo esto, aqu\u00ed tienes un par de herramientas gratuitas para ayudarte.<\/p>\n Primero, si no tiene un editor de c\u00f3digo, consulte Visual Studio Code<\/a>. Es simple pero flexible. Tambi\u00e9n es totalmente gratuito y se crea una gran cantidad de software profesional con \u00e9l. Es lo que uso para crear temas aqu\u00ed en Compete Themes.<\/p>\n En segundo lugar, crear un sitio de WordPress local (sin conexi\u00f3n) es una excelente manera de probar el c\u00f3digo sin afectar su sitio web real en vivo. Si bien he usado y recomendado MAMP<\/a> en el pasado, Local by Flywheel<\/a> es tan f\u00e1cil y simple de usar que me encanta. Es lo que uso para el desarrollo de temas y tambi\u00e9n es gratis.<\/p>\n Volviendo al ejemplo anterior …<\/p>\n Al actualizar el tema Challenger (o cualquier tema), se reemplaza todo el directorio "Challenger", lo que no afectar\u00e1 al tema secundario porque ahora tiene su propio directorio en la carpeta "Challenger-child".<\/p>\n Con su tema secundario en su lugar, puede realizar de forma segura las personalizaciones que desee y mantener actualizado su tema principal.<\/p>\n Si es nuevo en CSS y PHP, puede que le lleve alg\u00fan tiempo obtener sus personalizaciones de la manera que desee, pero con un tema hijo, tiene una base excelente para trabajar. Recuerde seguir estos pasos<\/a> para encontrar selectores de CSS para usar, y cualquier personalizaci\u00f3n de estilo que realice ser\u00e1 bastante simple.<\/p>\nC\u00f3mo crear un tema hijo<\/h2>\n
Configuraci\u00f3n b\u00e1sica<\/h3>\n
Crea el archivo style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nCrea el archivo functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nPersonalizaci\u00f3n con su nuevo tema hijo<\/h2>\n
Agregar y anular estilos<\/h3>\n
Funciones de anulaci\u00f3n<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>cheque. Esto significa que puede copiar la funci\u00f3n en el archivo functions.php de su tema hijo. Luego, puede realizar las ediciones que desee en la funci\u00f3n all\u00ed.<\/p>\nAnular plantillas<\/h3>\n
Instalaci\u00f3n del tema hijo<\/h3>\n
Tus actualizaciones est\u00e1n seguras<\/h2>\n