diseño

por lo general, es casi imposible encontrar el tema perfecto; siempre hay algunas modificaciones que deben hacerse. Entonces, ¿por qué no tomar un buen tema predeterminado de WordPress, como Twenty Fifteen, y hacerlo suyo para que se vea y funcione de la manera que desee? Crear un tema infantil te ahorrará mucho tiempo y dolores de cabeza en el futuro (confía en mí).

Puedo hablar de primera mano., «Heredé» un sitio de WordPress donde el desarrollador acababa de hackear el tema principal, y todavía recuerdo lo frustrante que era que en realidad no podía actualizar el tema por miedo a que invalidara las personalizaciones que le daban al sitio su funcionalidad. No sabía lo que era el código original y lo que era personalizado, así que allí se sentó, sin posibilidad de actualizaciones.

la historia tiene un final feliz, sin embargo. Yo era más nuevo en WordPress en ese momento, por lo que me enseñó desde el principio que alterar un tema para padres no era una buena idea., Cuando finalmente se rediseñó el sitio, el primer elemento del negocio fue tomar las personalizaciones y ponerlas en un tema secundario.

un tema hijo le permite trabajar en un lugar separado sin que su trabajo sea sobrescrito por una futura actualización del tema principal. Técnicamente hablando, cuando se crea un tema secundario, se crea un conjunto separado de archivos que se pueden utilizar para personalizar el tema sin afectar al tema principal original. Si realiza cambios en los archivos de un tema principal, esos cambios se sobrescribirán la próxima vez que actualice el tema., Esto es un gran problema porque las actualizaciones pueden incluir modificaciones de características, correcciones de errores y medidas de seguridad importantes. Es crucial mantener el tema principal actualizado y usar un tema secundario para cualquier personalización.

child theme basics

Child themes son temas separados que creas que dependen de un tema principal para su funcionalidad básica. Cuando se utiliza un tema hijo, WordPress sabe hacer referencia a él y buscar cualquier funcionalidad que se incluye., Esto es genial porque le permite modificar solo las partes del tema de los padres que necesita cambiar, lo que hace que esta sea una manera muy eficiente de agregar personalizaciones a su sitio de WordPress.

para profundizar un poco más, así es como funcionan los temas secundarios a nivel de archivo. WordPress comprueba si un archivo necesario está incluido en el tema hijo. Si está incluido, ese archivo de tema hijo se carga. Si no hay uno en el tema hijo, se carga el archivo en el tema padre. La única excepción a esto son las funciones.archivo php, en el que se cargan las versiones padre e hijo., Por lo general, hay información crucial en las funciones.archivo php. Si WordPress solo cargó la versión del tema hijo (a menos que copies todo), el sitio no funcionaría bien. Afortunadamente, WordPress carga ambos archivos, por lo que no tiene que preocuparse por copiar todas las funciones.archivo php en su tema hijo.

Recuerde, siempre puede desactivar el tema de su hijo y volver al original Si es necesario. Sin embargo, es una calle de sentido único; no puede apagar el padre y confiar en el tema hijo.

si estás agregando personalizaciones a un tema de WordPress, es mejor usar un tema infantil., Listo para crear su propio? Ahora vamos a ir a través del proceso, paso a paso.

crear un tema secundario

crear uno no es tan complejo como puede parecer. De hecho, técnicamente todo lo que necesita son solo dos archivos: un archivo style.css y un archivo functions.php. La mayoría de los temas secundarios tienen más que eso, pero técnicamente hablando, esos son los dos únicos requeridos.

para crear un tema hijo, debe tener instalado WordPress junto con un tema padre que le gustaría usar.

Recuerde: nunca debe hacer cambios en un sitio en vivo., Nuestra aplicación gratuita de Desarrollo local, Local, le ayudará a simplificar su flujo de trabajo y experimentar con seguridad con su sitio. Pruébalo hoy!

crear un directorio de temas

primero, ve a tu directorio de temas y crea una carpeta para tu nuevo tema. Dale un nombre reconocible. Para este ejemplo, nombraré mi tema child-example para que sea fácil de encontrar.

hacer que la hoja de estilos del tema hijo

el siguiente paso, muy crucial, es crear la hoja de estilos del tema hijo., Cree un archivo style.css. Tenga en cuenta que tiene que llamarse style.css para que las cosas funcionen bien.

a continuación, deberá incluir información sobre su tema.

Copia y pega esto en el style.css file:

Esto puede parecer mucho, pero realmente sólo hay dos que son necesarias, que son Theme Name y Template. El Theme Name le dice a WordPress El nombre del tema hijo., El Template le dice a WordPress qué tema debe considerar como el tema principal, lo cual es muy importante.

la Mayoría de los otros son bastante auto-explicativo, pero hay un par que puede ser que necesite un poco más aclaración. El Text Domain y Tags podría ser un poco confuso. El Text Domain se utiliza para traducir cadenas con fines de internacionalización., Esto es único para su tema y debe ser utilizado siempre que utilice funciones de traducción. Hay mucha más información en el códice y se puede encontrar en el tema de I18n para desarrolladores de WordPress. La sección Tags es una lista de etiquetas que son específicas del tema de WordPress. Para este ejemplo, miré los veinte quince padres style.css, agarré las etiquetas de allí y las puse en el tema hijo.

utilizar estilos primarios

recuerde cómo WordPress busca los archivos de tema hijo primero?, En este momento, el tema hijo Funciona, pero no se ve muy pulido porque aún no ha hecho ningún estilo. Si lo activas y recargas la página, se verá un poco desordenada. Probablemente va a ser algo como esto:

Vamos a arreglar esto, así que cae de nuevo en el tema principal y habrá al menos algunos el estilo aplicado. Todavía usarás tu tema infantil para tu estilo personalizado, pero primero, vamos a mostrar el estilo de los padres.,

para asegurarnos de cargar la hoja de estilos del archivo Padre, necesitaremos encolarlo en el tema hijo. Necesitará un archivo functions.php en el tema hijo para colocar el siguiente fragmento.

hacer una personalización CSS

Ahora que se muestran los estilos padre, cambiemos algunos de los CSS para la personalización del tema hijo. Para este ejemplo, el estilo de un elemento de fondo para el contenido de la página es una buena manera de ver el tema hijo en acción., Se le ha dado un estilo blanco en el CSS del tema principal, pero vamos a cambiarlo a azul en el tema hijo. Recuerde, los estilos principales se cargan primero, y sus personalizaciones se cargarán después, así que eso será lo que veremos.

Si eres un usuario de Chrome, las herramientas para desarrolladores son muy útiles para ver el estilo y experimentar en el navegador. Vaya a ver >desarrollador > ver fuente y seleccionar elementos de página. Los estilos se mostrarán a la derecha. Inspeccioné el artículo que tenía una clase .hentry que tiene un fondo blanco., Pegué un valor hexadecimal para probarlo primero en el navegador.

Para realizar este cambio, abrir el archivo CSS en el niño tema y agregar la información de CSS.

Como puede ver, los cambios de estilo puede ser fácilmente hecho en el tema infantil.,

Modificar la funcionalidad del tema de su hijo

ajustar el estilo es bastante fácil, pero qué pasa con otras cosas como el encabezado, pie de página, barra lateral, etc.? Digamos que hay algunas modificaciones para hacer en el pie de página. Copie y pegue el pie de página del tema padre en el hijo. El archivo footer.php se puede abrir en el editor de texto de su elección y modificarlo. He decidido eliminar la línea» orgullosamente alimentado por WordPress», así que eliminé esto del archivo en mi tema hijo., Este es ahora el archivo que WordPress cargará primero, por lo que la línea de texto no se mostrará.

Crear un child theme es un buen hábito para llegar a la hora de la creación de temas de WordPress. Con solo unos sencillos pasos, son fáciles de crear y mantener. Mantener las personalizaciones separadas de los temas principales es bueno tanto para fines de organización como para mantener todo actualizado, lo que ahorrará muchos dolores de cabeza en el futuro.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *