Una guía para el desarrollo de temas de WordPress Child

Hay una serie de razones por las que los desarrolladores de WordPress están empezando a usar temas secundarios. Le brindan la oportunidad de personalizar un diseño único sobre otro tema existente. Esto es perfecto para los principiantes que quieren jugar con la creación de sus propios temas..

Además, muchos diseños premium lanzarán nuevas actualizaciones a lo largo del tiempo. Si está realizando cambios en los archivos de temas principales, estos se sobrescribirán al realizar una actualización, pero los temas secundarios están separados y ordenados de forma ordenada. Esto significa que puede construir temas premium existentes y ahorrar mucho tiempo en el proceso.

En esta guía, quiero presentar los conceptos básicos de la creación de un tema infantil de WordPress y por qué es una buena idea..

Empezando

Los temas infantiles no son tan difíciles como pueden parecer. Los beneficios de trabajar con un tema principal significa que no necesita escribir todo el HTML / CSS desde cero. Un tema secundario utilizará automáticamente cualquier archivo de plantilla que incluya, como barra lateral.php o footer.php. Pero si faltan, entonces su tema hijo extraerá los mismos archivos de su padre..

Esta funcionalidad ofrece una enorme libertad para personalizar las plantillas ya existentes. También es ideal para retocar áreas alrededor de su sitio web para eventos especiales, como agregar patrones de diseño para Navidad o Año Nuevo.

Sus archivos requeridos

Solo necesita una hoja de estilo .css para configurar un tema secundario en WordPress. También necesita crear un nuevo directorio en el / wp-content / temas carpeta que albergará el tema de su hijo. Pon atención que tu no son creando esta carpeta dentro del tema principal, pero junto con ella en el mismo directorio de temas.

Los desarrolladores a menudo incluirán un functions.php y screenshot.png en la misma carpeta que su nuevo archivo CSS. La captura de pantalla se muestra en el panel de administración de WordPress y el archivo de tema de funciones se puede usar para miles de cambios en el servidor..

Pero por ahora deberíamos centrarnos en la hoja de estilo principal. Esto se llama comúnmente style.css e incluye un encabezado de comentario con información meta clave. Esto es importante porque su tema solo se mostrará como un niño si incluye el nombre del directorio del padre. A continuación se muestra un comentario de encabezado de ejemplo:

 / * Nombre del tema: Twenty Eleven Child URI tema: http: //example.com/ Descripción: Tema infantil para el diseño de Twenty Eleven Autor: Jake Rocheleau URI de autor: http: //www.hongkiat.com/blog/ Plantilla: twentyeleven Versión: 0.1 * /

El valor para modelo debe ser el nombre del directorio para el tema principal acompañado. Aparte de eso, todas las demás etiquetas deben ser familiares para la temática estándar de WordPress.

Aunque se utilizarán todas las plantillas de PHP principales, el style.css original de los padres no Se importará automáticamente. Si desea eliminar los estilos originales, deberá incluirlos en la parte superior del documento style.css de su hijo. A continuación se muestra un ejemplo que incluye el tema WP Twenty Eleven.

 @import url ("... /twentyeleven/style.css");

Configuración de nuevos estilos

Aplicar reglas CSS a su tema es tan fácil como editar el original. Si sabe qué elementos necesita orientar, use los mismos selectores en su propio tema secundario.

Podríamos hacer una demostración con algunos cambios realmente sencillos en los enlaces y párrafos. He usado código del tema original de Twenty Eleven para apuntar a los diferentes elementos. A veces es necesario usar un selector más específico para anular el diseño anterior.

 cuerpo relleno: 0 1.4em;  #page margen: 1.667em auto; ancho máximo: 900px;  a color: # 5281df; texto-decoración: ninguno; Familia tipográfica: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: underline;

En estos cambios, he reducido el tamaño general del cuerpo y también he eliminado algunos rellenos de los bordes. Todos estos selectores se pueden encontrar listados en el documento .css original. Es notable que también estoy cambiando algunas propiedades para todos los enlaces de anclaje que incluyen una pila de fuentes diferente y una opción de color diferente.

Las cosas importantes

CSS tiene una declaración especial para marcar la prioridad sobre otros estilos. La sintaxis se muestra como !importante comenzando con el signo de exclamación y terminando al final de su propiedad CSS. Esto es necesario si tiene estilos en cascada de un tema principal que están anulando sus propias reglas personalizadas.

 a color: # 5281df! important; texto-decoración: ninguno; Familia tipográfica: Calibri, Tahoma, Arial, sans-serif;

Anteriormente he copiado mis cambios originales y editado el color del texto de anclaje con una cláusula importante. Esto tendrá prioridad sobre todos los demás estilos de la misma profundidad de selector. Elementos más definidos (tales como #access li: hover> a) normalmente mantendrán sus propios estilos a menos que el color Todavía fue heredado de nuestro selector original. En este caso, nuestro tema principal no configura una propiedad de la familia de fuentes en los enlaces de anclaje, por lo que no nos encontramos con ningún problema de herencia..

Si tiene problemas para hacer que sus cambios se mantengan, intente abrir una de estas marcas importantes al final de su declaración de propiedad. Esta no es una solución perfecta para cada problema de herencia, pero es útil con mucha más frecuencia de lo que piensas.

Funciones de clonación.php

A diferencia de la hoja de estilo principal, su tema secundario importará las funciones de sus padres automáticamente. Esto significa que no necesita copiar sobre el código PHP para mantenerlo activo en su nuevo tema. Sin embargo, si desea redefinir algunas de las funciones, puede crear otras funciones.php y escribir su nuevo código con cualquier cambio..

Como ejemplo, he creado una función que analiza algunos archivos JavaScript cuando se inicia la plantilla. Esto eliminará cualquier versión anterior de los scripts jQuery y SWFObject, mientras agrega simultáneamente las versiones más recientes a wp_head zona.

 // archivos js en cola para la función de carga mytheme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js);

Debo señalar que si está importando código de las funciones parent.php, tendrá que usar un nombre de función diferente. De lo contrario, PHP dará un error fatal y tendrá que enviar un FTP al servidor para corregir el error..

Trabajar con archivos de temas

La categoría más amplia de temática es crear diseños personalizados y tipos de página. Por defecto, su tema secundario heredará todos los archivos de temas de sus padres. Pero tiene la opción de crear nuevos archivos de temas secundarios y WP los registrará como la plantilla 'primaria'.

Por ejemplo archive.php y index.php se utilizan para mostrar los archivos de publicación y la pantalla de la página de inicio, respectivamente. Si hay cambios que le gustaría realizar y que requieren ediciones al HTML, entonces sería más seguro clonar los archivos principales y editarlos en el directorio de temas del niño..

Plantillas de página personalizadas

Mientras hablamos de archivos de plantillas, también quiero presentar una parte de la funcionalidad de WordPress con la que muchos no están familiarizados. Puede crear plantillas de páginas y publicaciones que se podrán seleccionar desde el panel de administración al crear contenido nuevo. Incluso si el tema principal no tiene el nuevo archivo de plantilla personalizada, WordPress seguirá utilizando el elemento secundario en lugar de un page.php o single.php.

Primero crea un nuevo archivo llamado page-offer.php. Este sera un “oferta especial” Página promocional cuyo tema es diferente a todos los demás. Aquí puede copiar el código de su página original o incluso crear el tema completamente desde cero. El único código que necesitamos para informar a WordPress sobre esta nueva plantilla es una configuración de comentarios en PHP.

Otra alternativa a este método es crear páginas personalizadas con el nombre del número de identificación único. Así que en lugar de cargar el predeterminado archive.php para las páginas de autor puede crear un archivo como autor-ID.php donde ID es el número de identificación único de WordPress del usuario. Aunque este sistema es más exigente ya que necesitaría crear un nuevo archivo de plantilla para cada uno de los autores en su sitio.

Se vuelve más útil si puede combinar estas dos técnicas con otros archivos de plantilla. En particular, las categorías y etiquetas funcionan bien usando sus propios archivos de temas. Además, si vincula los archivos adjuntos en su contenido, querrá considerar los diferentes diseños de plantillas posibles para cada tipo de mimo. Incluí la siguiente jerarquía de plantillas para un archivo adjunto de imagen JPEG simple:

imagen.php
jpeg.php
image_jpeg.php
attachment.php

Herramientas útiles de WordPress

WordPress tiene un sistema de complementos versátil que puede administrar una gran cantidad de personalizaciones. Dado que los temas secundarios son tan nuevos, todavía no hay un ataque total de lanzamientos de terceros. Sin embargo, hay un par de herramientas que puede revisar para hacer su tiempo de desarrollo un poco más corto.

Una mención obvia es el complemento One-Click Child Theme creado y probado para la última versión de WordPress 3.x. Añade un enlace de menú en tu administrador. “Temas” sección para construir automáticamente un niño utilizando su tema actualmente activo. Esto es fantástico si no quieres meterte con FTP y estás buscando nuevas ideas..

Si planea editar estos archivos dentro del panel de administración, también disfrutará de un resaltado de sintaxis más claro. Esto no se ofrece en WordPress de forma predeterminada, pero puede instalar el Editor de código avanzado para algunas funciones mejoradas. Esto hace que el vadeo a través de bloques de código PHP y HTML / CSS sea mucho más manejable.

Recursos adicionales

Junto con todos los consejos de esta guía, quiero compartir un conjunto de enlaces importantes para desarrolladores de temas. Ya hay tantos artículos geniales y temas infantiles gratuitos que puedes consultar para profundizar en este tema. Agregué una maravillosa colección de estos recursos a continuación:

8 temas de Twenty Eleven para niños gratis
WordPress Online Codex »Temas infantiles
Cómo construir un tema infantil de WordPress usando ganchos y filtros
Algunas palabras sobre temas infantiles
Cómo crear, modificar y usar temas secundarios en WordPress

Conclusión

Espero que el proceso de creación de temas infantiles de WordPress sea más claro para usted después de leer este artículo. He intentado explicar cómo los temas secundarios pueden heredar plantillas CSS y PHP de un padre. Además, es muy sencillo manipular archivos específicos y crear tus propios temas únicos.