Cómo funcionan realmente los marcos temáticos

Los marcos temáticos pueden ser extremadamente poderosos. Para usuarios no técnicos de WordPress, hacen posible crear un sitio único que parece que está ejecutando un tema a medida, y para los desarrolladores de WordPress pueden ayudarlo a aplicar el principio DRY (Don't Repeat Yourself) y le brindan la posibilidad de construir sitios personalizados rápido.

Si ha estado utilizando un marco de terceros por un tiempo y se ha sentido frustrado con el código abultado o la falta de flexibilidad, o simplemente desea tener un control completo sobre su código, entonces construir su propio marco de tema podría ser el mejor enfoque..

En esta serie, aprenderá cómo crear su propio marco temático de WordPress que puede usar para crear sitios para usted o sus clientes, o incluso para liberar a otros usuarios. Usted trabajará a través de las etapas involucradas en la creación del tema principal que forma la base de su marco, agregando funciones adicionales, enlaces y más. También aprenderá cómo aprovechar estos temas y complementos de su hijo y cómo lanzar su código al público.

Pero antes de comenzar, necesita saber cómo funcionan los marcos de los temas y qué los hace diferentes a un tema principal estándar.

He dedicado tiempo a desarrollar dos marcos temáticos para usar en dos categorías del sitio del cliente, a desarrollarlos y mejorarlos con el tiempo, y también he trabajado con algunos de los marcos temáticos de terceros. En mi experiencia, un marco temático tiene algunas características principales:

• Consiste en un tema principal diseñado para ser usado con temas secundarios. En algunos casos, el tema principal también puede funcionar como un tema independiente, pero en otros, el tema principal solo funciona en conjunto con los temas secundarios; el Códice de WordPress los define como 'Temas básicos / de inicio' y 'Bibliotecas de códigos', respectivamente.
• Incluye enlaces y funciones que pueden ser aprovechados por temas y complementos secundarios. Su marco temático es la base de todo un ecosistema con el que trabajará, y eso incluye los complementos que se engancharán en su marco..
• Si está diseñado para ser accedido por usuarios no codificados, incluirá páginas de opciones de temas que les permitirán personalizar el tema de acuerdo con sus necesidades. Estos pueden ser extensos, incorporando diseño, diseño, funciones, contenido y más. En algunos casos, la funcionalidad puede proporcionarse a través del Personalizador de temas.
• Puede incluir múltiples áreas de widgets para que los usuarios no técnicos puedan agregar contenido o código a través de los widgets (incluidos los widgets agregados por los complementos que escribe específicamente para el marco).
• También puede incluir la funcionalidad de la biblioteca de secuencias de comandos, como un control deslizante de jQuery o lightbox. Dependiendo de sus necesidades y las de sus usuarios, puede incorporarlas en el marco o proporcionar complementos con el código que se engancha a su marco..
• Es extensible, con enlaces que le permiten extender su funcionalidad a través de temas secundarios o complementos.

Los primeros dos de los puntos anteriores son los más fundamentales: sin un tema principal, no tiene un marco temático. Y un tema principal sin esos enganches y funciones es solo un tema básico, no un marco..

Así que eso es lo que son los marcos temáticos, pero ¿cómo funcionan? Echemos un vistazo a los elementos de un marco temático:

• El tema principal y los temas secundarios opcionales.
• Ganchos de acción y filtro.
• Funciones
• Opciones de tema
• Widgets
• Guiones
• Extensibilidad

Los temas de padres e hijos

El componente principal de un marco temático es el tema principal. Esto puede ser diseñado de una de dos maneras:

• Como un tema de inicio, que puede funcionar por sí solo, tal vez con la personalización a través de una pantalla de opciones de tema o el personalizador de tema. Ejemplos de estos incluyen Atahualpa y Temático. Ambos se pueden usar como temas independientes sin el uso de temas secundarios.
• Como una base a ser agregada por un tema secundario, sin el cual el tema no potenciará efectivamente un sitio. Los ejemplos incluyen Hybrid Core y Genesis. Estos incluirán el código básico que normalmente encontraría en un tema junto con una variedad de enlaces y funciones que pueden ser aprovechados por temas secundarios, y también por complementos. Todo esto comprende una API para el framework..

Como una de las características clave de los marcos temáticos es el principio DRY, es probable que su tema principal utilice partes de plantilla e incluya archivos siempre que sea posible, lo que significa que puede acceder al mismo código en varias ubicaciones de su tema. Esto también hace que sea más fácil anular el código en sus temas secundarios, ya que simplemente crea una parte de plantilla de reemplazo o incluye un archivo.

No voy a explicar el concepto de temas para padres e hijos aquí, como se explica en este tutorial sobre temas para niños. Muchos marcos temáticos vienen con una variedad de temas infantiles para apoyarlos, mientras que con otros, usted necesita desarrollar su propio. 

Si está desarrollando el suyo, le recomendaría crear al menos un tema secundario 'inicial' para evitar repetir el trabajo involucrado en la configuración de cada proyecto: puede decidir crear múltiples temas secundarios como base para diferentes tipos de proyectos. , por ejemplo, temas infantiles para blogs y sitios que no son blogs.

Ganchos de acción y filtro

Un marco de temas incluirá una variedad de enlaces para que los temas secundarios y los complementos se enganchen al agregar código personalizado o al cambiar la forma en que se comporta el tema:

• Los ganchos de acción aparecerán en varios lugares del código, permitiéndole agregar código a sus archivos de plantilla a través de funciones codificadas en el marco que pueden ser anuladas por temas secundarios, o mediante funciones que usted agrega a sus temas o complementos secundarios. Mi propio marco temático hace un uso extensivo de los ganchos de acción, proporcionándolos en todos los archivos de plantilla para permitir a los usuarios colocar contenido como áreas de widgets, detalles de contacto, botones de llamada a la acción y código específico del sitio donde sea necesario..
• Los enganches de filtro se pueden usar para cambiar el comportamiento de un sitio que usa un tema secundario o un complemento en particular, por ejemplo, personalizando los bucles, modificando el contenido estático y más. Cualquier texto estático (o código llamado desde fuera de su sitio) debe incluirse en un filtro, para que pueda ser modificado por temas secundarios si es necesario..

Vale la pena tomarse un tiempo para considerar qué ganchos desea incluir en una etapa temprana, para que sepa qué contenido incluir a través de un gancho y qué codificar en sus archivos de plantilla directamente. Lo verás en la siguiente parte de esta serie..

Funciones

Su marco también es probable que incluya una serie de funciones. Algunos de estos se engancharán en la acción y filtrarán los enganches que ya ha definido, mientras que otros serán funciones tales como etiquetas de plantilla que los temas secundarios pueden utilizar.. 

Si tiene alguna función personalizada que use en varios sitios de clientes, vale la pena agregarlas a su marco. No tiene que activar todas sus funciones: puede activar una función desde el tema principal usando una add_action () funciona en el sitio de su hijo.

Opciones de tema

Las pantallas de opciones de temas son una adición útil a cualquier tema complejo, pero serán particularmente útiles para los marcos de temas diseñados para usuarios no técnicos. Todos los marcos temáticos principales incluyen múltiples pantallas de opciones de temas en su propia sección de administración, con opciones que incluyen activar y desactivar las funciones, modificar el diseño, agregar contenido y modificar elementos de diseño como colores, imágenes de fondo, fuentes e imágenes de encabezados.

Puede elegir usar el personalizador de temas para muchas de sus opciones, lo que tiene la ventaja de permitir que los usuarios vean sus cambios a medida que los hacen. He tomado este enfoque para el marco temático de Edupress, que desarrollé para los sitios web de las escuelas con Mark Wilkinson.

Áreas Widget

Si elige agregar un rango de áreas de widgets dependerá de la audiencia para su marco: si solo usted o un pequeño equipo de desarrolladores trabajarán con el tema, es posible que no agregue ninguna área de widgets por encima de la barra lateral y el pie de página. áreas.

Pero si su marco será utilizado por usuarios no técnicos, puede darles mucha más flexibilidad al registrar múltiples áreas de widgets en varias ubicaciones de su tema. Además de la barra lateral y el pie de página normales, también puede registrar áreas de widgets en el encabezado, antes y / o después del contenido y debajo del pie de página..

El marco del tema que uso para mis sitios de clientes incluye cuatro áreas de widgets en el pie de página: el tema verifica cuáles de éstas se rellenan y agrega clases de CSS según corresponda, de modo que las áreas de widgets rellenadas ocuparán el ancho apropiado de la página.

Sus áreas de widgets pueden codificarse directamente en sus archivos de plantilla o usted puede decidir (como yo lo hago) agregarlos a través de enlaces de acción en los lugares relevantes de su sitio. Esto significa que se pueden anular en temas secundarios, ya sea por áreas de widgets alternativos o por código personalizado.

Guiones

Si es probable que una secuencia de comandos determinada sea utilizada por una cantidad de sitios creados en su marco, o si sus usuarios no serán técnicos y usted desea proporcionar opciones adicionales, puede optar por incluir ciertas secuencias de comandos en su marco, como deslizante o lightbox script. Esto puede hacer que los usuarios no tengan que instalar complementos adicionales, pero tienen la desventaja de que el código aumenta si estos scripts no son necesarios..

Una vez más, esto dependerá de su audiencia y de sus necesidades anticipadas: si solo trabaja con el marco, recomendaría desarrollar (o identificar) complementos con estos scripts y usarlos cuando lo necesite..

Si incluye scripts, vale la pena incluir una opción de activación y desactivación en la pantalla de opciones de su tema..

Extensibilidad

Si su marco va a ser útil para una variedad de sitios ahora y en el futuro desea que sea extensible. El tema principal que forma el núcleo del marco es solo el corazón de un ecosistema en el que usted y los usuarios de su tema aprovecharán para agregar opciones adicionales y poder a sus sitios. Esto incluirá:

• Temas secundarios o temas iniciales: la lista de estos puede crecer con el tiempo, especialmente si está lanzando su tema al público.
• Complementos diseñados para trabajar específicamente con su marco, a menudo activados a través de enlaces específicos del marco.

También puede incluir documentación para otros desarrolladores que deseen trabajar con su marco: la mayoría de los marcos temáticos principales vienen con una extensa documentación que los desarrolladores pueden usar para personalizar sus sitios creados en el marco o para crear temas secundarios o complementos para otros usuarios de la plataforma. marco para acceder.

Resumen

Los marcos temáticos son una herramienta poderosa en el arsenal del desarrollador de WordPress. Como hemos visto, son vitales para miles de propietarios de sitios no técnicos que los utilizan para crear sitios personalizados de WordPress. Pero también son una gran herramienta para cualquier desarrollador que creará múltiples sitios, ya sea para uso personal o para clientes. 

Los marcos temáticos tienen una serie de características que les dan ese poder: son extensibles y flexibles, y le facilitan a usted o sus usuarios crear sitios personalizados utilizando temas secundarios y accediendo a las funciones y enlaces que proporciona su marco..

Habiendo examinado cómo funcionan los marcos temáticos, en la siguiente parte de esta serie identificará qué debe hacer su marco y para quién necesita trabajar, lo que lo ayudará a decidir cuál es el enfoque de desarrollo más apropiado..