Si te encanta tu tema actual, pero quieres modificar sus características y aspecto, la forma correcta de hacerlo es personalizando su tema infantil. Este tutorial explicará por qué esta práctica es necesaria y lo guiará a través del proceso para que pueda crear y editar un tema secundario de WordPress independientemente de sus habilidades técnicas.
cree y personalice fácilmente temas con el alojamiento WordPress de Hostinger!,
Comience aquí
por qué debe usar temas secundarios de WordPress
dado que un tema secundario hereda las características de un tema maestro o padre, puede personalizar su código sin romper la funcionalidad del original. De esta manera, si un tema recibe una actualización, todos los cambios realizados no se sobrescribirán.
otra razón para usar un tema hijo es que ofrece una solución a prueba de fallos si alguna vez arruinas tus ediciones. Además, le permite realizar un seguimiento eficiente de las partes que ha cambiado ya que los archivos de un tema hijo están separados de sus padres.,
cómo funcionan los temas secundarios de WordPress
como se mencionó brevemente anteriormente, un tema secundario se almacena en un directorio separado del tema principal, cada uno con su propio estilo.css y funciones.archivos php. Puede agregar otros archivos según sea necesario, pero esos dos son el mínimo requerido para que un tema hijo funcione correctamente.
utilizando el correspondiente .css y .archivos php, puede modificar todo, desde el estilo, los parámetros de diseño hasta la codificación real y los scripts utilizados por un tema hijo, incluso si los atributos no están presentes en su tema padre.
Piense en ello como una superposición., Cuando un visitante carga su sitio web, WordPress primero carga el subtema y luego llena los estilos y funciones que faltan utilizando partes del tema principal. Como resultado, obtendrá lo mejor de su diseño personalizado sin sacrificar la funcionalidad principal del tema.
crear un tema hijo en WordPress
las siguientes instrucciones utilizan Twenty Seventeen como base. Puedes usar otro tema si lo prefieres. También vamos a usar el Administrador de archivos de Hostinger para agregar y editar los archivos, aunque FTP también funciona.,
ahora, sin más preámbulos, aquí está cómo crear un tema hijo en WordPress:
- acceda a su hPanel y haga clic en Administrador de archivos.
- Vaya a public_html -> wp-content -> carpeta de temas.
- Crear una Nueva Carpeta haciendo clic en su icono en el menú superior. Introduzca el nombre del tema de su hijo y haga clic en Crear. Se recomienda utilizar el nombre del tema principal seguido de un sufijo secundario. En este ejemplo, llamamos a la carpeta twentyseventeen-child.,
importante: Reemplace los espacios en una carpeta o el nombre de un archivo con guiones ( – ) para evitar errores.
- dentro de la carpeta, cree un estilo.archivo css. Rellene su contenido con el siguiente código:
/* Theme Name: Twenty Seventeen Child Theme URL: http://yourdomain.comDescription: Twenty Seventeen Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen-child */
- cambie todos los valores en consecuencia. El campo más importante es la plantilla porque le dice a WordPress en qué tema principal se basa su tema hijo. Una vez hecho esto, haz clic en Guardar y cerrar.
- Crear otro archivo llamado functions.,php en la misma carpeta, pero no lo llene con el código del archivo del tema padre porque necesita permanecer separado. En su lugar, copie y pegue el código a continuación en el archivo en blanco y guárdelo:
<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?> - visite su sitio web y acceda a Apariencia -> tema. Active el tema hijo que acaba de crear, y notará que se ve igual que el tema padre.
Como puedes ver, crear un tema Hijo de WordPress no es más complicado que trabajar con un tema maestro!,
personalizar su tema infantil
para personalizar su tema infantil, necesita una comprensión básica de las reglas CSS y conocimientos sobre cómo inspeccionar elementos para poder identificar su código CSS y la clase a la que están asignados.
ahora, echemos un vistazo a los conceptos básicos para personalizar uno. Para realizar esto, haga clic en Personalizar -> CSS adicional de su tema hijo activo.,
cambiar el Color de fondo
Inserte la siguiente regla CSS si desea cambiar el color de fondo de su tema Hijo de WordPress:
.site-content-contain { background-color: #DEF0F5; position: relative;}
el valor junto a background-color: corresponde al código hexadecimal del color que elija., En este ejemplo, dado que lo estamos cambiando de blanco a azul claro, el resultado se ve así:
cambiar el Color de la barra lateral
Puede crear una visualización agradable de sus widgets agregando un poco de color a la barra lateral con el siguiente código CSS:
.widget {background: #B9EBFA;padding: 25px;}
de nuevo, no olvide editar el código de color en consecuencia. Debe obtener un resultado como este:
cambiar los tipos de fuente, tamaños y colores
para cambiar el tipo de fuente, el tamaño y el color de su tema Hijo de WordPress, inserte el siguiente código:
p {color: teal;}p {font-family: Georgia;font-size: 18px;}
la etiqueta p significa párrafo., Como puede ver a continuación, la regla anterior cambió el aspecto de las fuentes del párrafo en función de los valores especificados.
para cambiar la fuente de otras partes de texto, como el título o el encabezado, inspeccione los elementos para ver sus parámetros CSS primero. Por el bien de la ilustración, vamos a tratar de cambiar el color de la fuente del título.
- Primero, haga clic derecho en el texto y seleccione Inspeccionar. Busque el enlace de estilo CSS y ábralo en una nueva pestaña.
- encuentre la parte exacta que está buscando usando CTRL + F y copie el código a la pestaña CSS adicional. Cambie los valores en consecuencia.,
Puede hacer lo mismo con cualquier otro elemento que desee cambiar.
cambiar el diseño de publicaciones y páginas
Al igual que la forma en que el CSS personalizado de un tema Hijo de WordPress anula el estilo de su tema padre, los archivos de plantilla le permiten crear sus propios diseños revocando los predeterminados.
Su nueva plantilla debe tener el mismo nombre de archivo y estar en las carpetas que corresponden al original. Es una buena idea copiar el archivo de plantilla maestra a su directorio de tema Hijo de WordPress y trabajar desde eso.
los archivos de plantilla principales están en la carpeta principal del tema., Por ejemplo, la plantilla para ver una sola publicación es única.php, y la plantilla para pages es page.php.
Twenty Seventeen también divide sus plantillas en partes de plantilla a las que se hace referencia en la plantilla principal usando la función de WordPress get_template_part(). Por ejemplo, si desea editar la página.php, puede comenzar localizando las partes de la plantilla para ver si esos son los bits que necesita editar. En nuestro archivo de ejemplo, la línea 28 dice:
get_template_part( 'template-parts/page/content', 'page' );
¿Cómo leemos esto? template-parts / page / es la ruta de la carpeta., Mientras tanto, » contenido «se refiere al carácter en el nombre del archivo antes del guion y» página » está después del guion.
juntos forman la ruta completa de wp-content / themes/twentyseventeen/template-parts/page / content-page.php.
siguiendo la estructura, si desea cambiar el diseño de content-page.php, necesita copiarlo a su carpeta de tema hijo y colocarlo en esta ubicación: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.
y eso es todo, feliz edición!,
agregar y eliminar características
otra ventaja significativa de crear un tema Hijo de WordPress es la capacidad de tener funciones separadas.archivo php, que, al igual que los plugins, se utiliza para agregar (o eliminar) ciertas características utilizando código PHP.
por ejemplo, las siguientes líneas deshabilitarán la función de clic derecho en su tema:
conclusión
Los temas secundarios de WordPress ofrecen una forma poderosa de crear un proyecto completamente nuevo basado en las características del tema maestro existente sin romper su función principal., Con un poco de codificación simple y administración de directorios, puede modificar el tema hijo tan poco o tanto como desee, proporcionando una amplia gama de posibilidades para su diseño.