Crear Temas hijos en WordPress. Su Importancia


Origen: Temas hijos «Codex de WordPress

¿Por qué utilizar un tema para niños?

Hay algunas razones por las que se desea utilizar un tema menor:

  • Si modifica un tema directamente y se actualiza, a continuación, sus modificaciones se pueden perder. Mediante el uso de un tema hijo se asegurará de que sus modificaciones se conservan.
  • Usando un tema niño puede acelerar el tiempo de desarrollo.
  • El uso de un tema de niño es una gran manera de aprender sobre el desarrollo de temas de WordPress.

Cómo crear un tema para niños

Cómo crear un tema para niños a partir de un tema de origen no modificado

estructura de directorio temático infantil

Un tema infantil consta de al menos un directorio (el directorio del tema infantil) y dos archivos (style.css y functions.php), que necesitará para crear:

  • El directorio de temas niño
  • style.css
  • functions.php

El primer paso para crear un tema infantil es crear el directorio del tema infantil, que será colocado en wp-content / themes . Se recomienda (aunque no es necesario, especialmente si va a crear un tema para uso público) que el nombre de su directorio de temas niño se anexa con ‘-child’. Usted también querrá asegurarse de que no hay espacios en el nombre de directorio del tema infantil, que pueden dar lugar a errores. En la imagen anterior que hemos llamado nuestro tema niño-niño twentyfifteen ‘, lo que indica que el tema de los padres es el tema Twenty Quince.

El siguiente paso es la creación de estilos de su tema de niño (style.css). La hoja de estilo debe comenzar con la siguiente (la cabecera de estilo ):

/*
 Nombre Tema: Veinte Quince Niño
 Tema URI: http://example.com/twenty-fifteen-child/
 Descripción: Tema Veinte Quince Niño
 Autor: John Doe
 Autor URI: http://example.com
 Plantilla: twentyfifteen
 Versión: 1.0.0
 Licencia: Licencia Pública General de GNU v2 o posterior
 Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html
 Etiquetas: luz, oscuro, dos columnas, la barra lateral derecha, sensibles al diseño, accesibilidad listo
 Texto Dominio: Veintidós de quince niños
*/

Un par de cosas a tener en cuenta:

  • Tendrá que sustituir el texto de ejemplo, con los detalles pertinentes a su tema.
  • La plantilla de la línea se corresponde con el nombre del directorio del tema de los padres. El tema de los padres en nuestro ejemplo es el tema Twenty Quince, por lo que la plantilla se twentyfifteen . Usted puede estar trabajando con un tema diferente, por lo que ajustar en consecuencia.

El paso final es poner en cola las hojas de estilo y el tema de los padres del niño. Tenga en cuenta que el método anterior fue la importación de la hoja de estilo usando el tema de los padres @ importación: esto ya no es la mejor práctica, ya que aumenta la cantidad de tiempo que tarda en cargar las hojas de estilo. El método correcto de la hoja de estilo enqueuing tema de los padres consiste en añadir una acción wp_enqueue_scripts y utilizar wp_enqueue_style () en functions.php de tu tema niño. Por lo tanto, tendrá que crear un functions.php en su directorio de temas niño. La primera línea de functions.php de tu tema niño será una etiqueta de apertura de PHP ( <? Php ), después de lo cual se puede poner en cola sus padres y temáticos niño de estilo. La siguiente función de ejemplo sólo funcionará si su tema de Padres usa sólo un style.css principal para mantener la totalidad de la CSS. Si el tema niño tiene más de un archivo .css (por ejemplo. Ie.css, style.css, main.css), entonces usted tendrá que asegurarse de mantener todas las dependencias del tema de Padres.

<? Php
add_action ( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
my_theme_enqueue_styles function () {
    wp_enqueue_style ( 'padre-estilo', get_template_directory_uri () '/style.css'.);

}
?>

Si su niño style.css tema contiene el código CSS real (como lo hace normalmente), que tendrá que poner en cola también. Configuración ‘padre-estilo’ como una dependencia se asegurará de que las cargas tema de niño de hojas de estilo después de ella. Incluyendo el número de versión el tema del niño asegura que se puede reventar caché también para el tema de los niños. (Ver una discusión más detallada sobre la pila de cambio .) El ejemplo completo (recomendado) se convierte en:

<? Php
my_theme_enqueue_styles function () {

    $ Parent_style = 'padre-estilo'; // Este es 'twentyfifteen de estilo' para el tema Twenty Quince.

    wp_enqueue_style ($ parent_style, get_template_directory_uri () '/style.css'.);
    wp_enqueue_style ( 'al estilo del niño,
        get_stylesheet_directory_uri (). '/style.css',
        array ($ parent_style),
        wp_get_theme () -> get ( 'Versión')
    );
}
add_action ( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

donde parent-stylees el mismo $handleutilizado en el tema de los padres cuando se registra su hoja de estilo. Por ejemplo, si se twentyfifteen el tema principal, mirando en su functions.php por su wp_enqueue_style()llamada, puede ver la etiqueta que utiliza existe 'twentyfifteen-style'. En su código niño, reemplazar la instancia de 'parent-style'la 'twentyfifteen-style', así:

$ Parent_style = 'twentyfifteen estilo';

Si no se utiliza la etiqueta apropiada resultará en un archivo CSS sin necesidad de ser cargado dos veces. Esto por lo general no afecta a la apariencia del sitio, pero es ineficiente y extiende el tiempo de carga de la página.

Su tema de niño ya está listo para su activación. Acceder al panel de administración de su sitio, y vaya a Paneles de Administración > Apariencia > Temas . Debe ver a su hijo aparece el tema y listo para su activación. (Si la instalación de WordPress es multi-sitio habilitado, entonces puede que tenga que cambiar a tu panel de administración de red para habilitar el tema (dentro de los temas de la pantalla Network Admin pestaña). A continuación, puede volver a su panel de administración de WordPress específica de sitio para activar el tema de los niños.)

Nota: Es posible que tenga que volver a guardar su menú (Apariencia> Menús, o Apariencia> Personalizar> Menú) y opciones de temas (incluyendo fondo y cabecera imágenes) después de activar el tema de los niños.

Cómo crear un tema para niños a partir de un tema existente Modificado

Es mucho más fácil si se crea un tema niño desde el principio. Sin embargo, si ya ha editado los archivos de temas directamente sin crear un tema hijo, es importante obtener todas sus modificaciones en un tema de niño para que la actualización de los padres no borra los cambios. Las siguientes instrucciones son para usar el configurador de niños del tema del plugin. Leer a través de todos los pasos hasta que entienda el proceso antes de comenzar.

  1. Hacer una copia de seguridad de su tema de la matriz personalizada a través de FTP, SSH o el administrador de archivos Los servidores de Internet. Lo necesitará si las cosas no salen bien y hay que volver.
  2. Crear un tema menor al padre / Tab niño, pero no active todavía. Asegúrese de verificar el “Copiar el tema de Padres menús, widgets y otras opciones” cuadro. (Parece que el autor está usando un plugin llamado “configurador de niños del tema”. Tienes que instalarlo primero en seguir a lo largo.)
  3. Ir a la pestaña Archivos y seleccione cualquier plantilla de padres que haya cambiado de la lista de “Plantillas de Padres” y haga clic en “copia seleccionados a niños del tema.” WordPress tirará automáticamente las plantillas del nuevo directorio cuando se activa (pero no lo activa por el momento).
  4. Ahora la parte difícil – mover los estilos modificados con el tema del niño. La mejor manera de hacerlo es descargar el archivo “style.css” modificado del padre y ejecutar un DIFF contra el archivo original de los padres “style.css” y mover los bloques selectores a un archivo separado. Puede utilizar Notepad ++, TextWrangler o cualquier editor de texto avanzado para encontrar las diferencias entre dos archivos.
    Si usted no tiene un editor de texto avanzado, abra la hoja de estilo modificado y copiar manualmente / pegar todos los bloques selectores que haya cambiado a un archivo de texto separado.
  5. Una vez que tenga todos los selectores cambiado en un archivo, copiar toda la cosa en el cuadro de área de texto “crudo CSS” en la parte inferior de la pestaña / selector de consultas. Haga clic en el botón “Guardar” a la izquierda del cuadro de área de texto (no el que está en la parte superior).
  6. Probar el nuevo tema del niño usando la vista previa en vivo. Ir a Apariencia> Temas y haga clic en “vista previa en vivo” en el icono de temas infantiles. Debe mostrar todas sus modificaciones correctamente. Si no es así, repita el paso 3-5 hasta que todo está funcionando.
  7. Vuelva a instalar el tema de los padres a una versión fresca, limpia y repita el paso 6. Si se observa algo malo, puede que tenga que investigar dónde se ha perdido copiar algo. Si es necesario, volver al tema de los padres de copia de seguridad y volver a empezar.
  8. Una vez que todo se ve bien, ir a Apariencia> Temas y activar su nuevo tema niño. A continuación, puede realizar cambios en el tema de los niños sin tocar el padre.

Si prefiere crear un tema niño de un tema de los padres modificado sin necesidad de utilizar un plugin, consulte “¿Qué pasa si ya he hecho cambios en mi tema original?”

archivos de plantilla

Si desea cambiar algo más que la hoja de estilo, su tema niño puede anular cualquier archivo en el tema de los padres: basta con incluir un archivo del mismo nombre en el directorio de temas de niños, y se anulará el archivo equivalente en el directorio del tema principal cuando su sitio carga. Por ejemplo, si desea cambiar el código PHP para el encabezado del sitio, se puede incluir un header.php en el directorio del tema de los niños, y que archivo se utilizará en lugar de header.php del tema de los padres.

También puede incluir archivos en el tema de los niños que no están incluidos en el tema de los padres. Por ejemplo, es posible que desee crear una plantilla más específica que se encuentra en su tema principal, tales como una plantilla para un archivo de página o categoría específica. Ver la Jerarquía Plantilla para obtener más información acerca de cómo decide qué WordPress plantilla a utilizar.

usando functions.php

A diferencia de style.css , el functions.php de un tema niño no anula su contraparte de los padres. En su lugar, se carga, además de functions.php de los padres . (Específicamente, es justo cargada antes de archivo de los padres.)

De esa manera, el functions.php de un tema infantil proporciona un método inteligente, sin problemas de modificar la funcionalidad de un tema de los padres. Digamos que usted desea agregar una función de PHP a su tema. La forma más rápida sería la de abrir su functions.php archivo y poner la función allí. Pero eso no es inteligente: La próxima vez que su tema se actualiza, su función va a desaparecer. Pero hay una forma alternativa, que es la forma inteligente: puede crear un tema infantil, añadir un functions.phparchivo en él, y añadir su función a ese archivo. La función va a hacer exactamente el mismo trabajo desde allí también, con la ventaja de que no se verá afectado por las futuras actualizaciones del tema de los padres. No copie el contenido completo de functions.php del tema de los padres en functions.php en el tema de los niños.

La estructura de functions.php es simple: una etiqueta de PHP abertura en la parte superior, y debajo de ella, sus bits de PHP. En ella se puede poner tantas o tan pocas funciones como desee. El ejemplo siguiente muestra un elemental functions.php archivo que hace una cosa sencilla: Añade un enlace favicon al headelemento de páginas HTML.

<Tag PHP php // Apertura - nada debe ser antes de esto, ni siquiera un espacio en blanco

// función personalizada que incluye
función my_favicon_link () {
    echo '<link rel = tipo "icono de acceso directo" = "image / x-icon" href = "/ favicon.ico" />'. "\norte";
}
add_action ( 'wp_head', 'my_favicon_link');

TIP PARA DESARROLLADORES temáticos. El hecho de que de un tema infantil functions.php se carga por primera vez significa que usted puede hacer las funciones de usuario de su tema enchufable -es decir, reemplazable por un niño theme- declarándolos condicionalmente. P.ej:

if (! function_exists ( 'theme_special_nav')) {
    función theme_special_nav () {
        // Hacer algo.
    }
}

De ese modo, un tema niño puede reemplazar una función de PHP de los padres simplemente declarando de antemano.

Hacer referencia / Inclusión de archivos en su tema Niño

Cuando es necesario incluir los archivos que residen dentro de la estructura de directorio de su tema de niño, que va a utilizar get_stylesheet_directory () . Debido a style.css de la plantilla padre es reemplazado por style.css del tema de su hijo y su style.css reside en la raíz del subdirectorio de su tema niño, get_stylesheet_directory () apunta al directorio de su tema de niño (no el directorio del tema de los padres).

He aquí un ejemplo, el uso require_once, que muestra cómo se puede utilizar get_stylesheet_directory al hacer referencia a un archivo almacenado dentro de la estructura de directorio de su tema de niño.

require_once (get_stylesheet_directory () '/my_included_file.php'.);

Otra información útil

Pon utilizando formatos

Un tema secundario hereda formatos de correos como se define por el tema de los padres. Cuando la creación de temas infantiles, tenga en cuenta que el uso de add_theme_support ( ‘post-formatos’) será reemplazar los formatos definidos por el tema de los padres, no añadir a la misma.

apoyo RTL

Para apoyar idiomas RTL, añadir rtl.css archivo en el tema de los niños, que contiene:

/*
Nombre del tema: Veinte Catorce Niño
Plantilla: twentyfourteen
*/

rtl.css sólo se carga con WordPress si is_rtl () devuelve verdadero.

Se recomienda agregar el archivo rtl.css a su tema niño, incluso si el tema de los padres tiene ningún archivo rtl.css.

internacionalización

Temas niño, al igual que otras extensiones, pueden ser traducidos a otros idiomas mediante el uso de gettext funciones. Para una visión general, consulte Translating WordPress y I18n para WordPress Desarrolladores .

Internacionalizar un tema hijo siga estos pasos:

  • Añadir un directorio idiomas.
    • Algo así como my-theme/languages/.
  • Añadir archivos de idioma.
    • Sus nombres de archivo tienen que ser he_IL.pohe_IL.mo(dependiendo de su idioma), a diferencia de los ficheros del plugin que son domain-he_IL.xx.
  • Cargar un textdomain.
    • Utilice load_child_theme_textdomain () en functions.php durante la acción after_setup_theme.
    • El dominio texto definido en load_child_theme_textdomain () se debe utilizar para traducir todas las cadenas en el tema infantil.
  • Utilice funciones GetText para añadir soporte de i18n para sus cadenas.

Ejemplo: textdomain

<? Php
/**
 * Configuración textdomain de mi tema del niño.
 *
 * Declarar textdomain para este tema niño.
 * Las traducciones se pueden presentar en el / idiomas / directorio.
 */
función my_child_theme_setup () {
    load_child_theme_textdomain ( 'mi-niño-tema', get_stylesheet_directory () '' / idiomas.);
}
add_action ( 'after_setup_theme', 'my_child_theme_setup');
?>

Ejemplo: gettext funciones

<? Php
esc_html_e ( 'Código es Poesía', 'mi-niño-tema');
?>

En resumen, todas las cadenas que utilizan “mi-niño-tema” textdomain serán traducible. Los archivos de traducción deben residir en “/ / lenguas” directorio.

recursos

Tenga en cuenta que algunos de estos recursos recomiendan el uso de @ importación de hoja de estilo de su tema de niño como el método de importación de la hoja de estilo tema de los padres. Utilice el wp_enqueue_script () método descrito anteriormente.

Anuncios

Acerca de UniSoft-AleBo

La tecnología a tu alcance Asesorías Científico - Metodológicas http://plc.site11.com
Esta entrada fue publicada en Capacitación, Consumo, Diseño Web, Softwares, Web 2.0. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s