Advertisement
  1. Code
  2. WordPress

Cómo Funcionan Realmente los Frameworks

by
Difficulty:AdvancedLength:MediumLanguages:
This post is part of a series called How Theme Frameworks Actually Work.
Deciding How to Develop Your WordPress Theme Framework

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los Frameworks de los temas pueden ser extremadamente potentes y tener un gran alcance. Para que lo entiendan los usuarios de WordPress no técnicos, hacen posible crear un sitio único que parezca que utiliza un tema a medida, y puede ayudar a los desarrolladores de WordPress a aplicar el principio DRY (no te repitas a ti mismo) y les ofrece la capacidad de crear rápidamente sitios personalizados.

Si has estado usando un framework de terceros durante algún tiempo y te has sentido frustrado con código inflado o por la falta de flexibilidad, o deseas tener un control total sobre el código, entonces el mejor enfoque para ti sería que construyeses tu propio framework para tu tema.

En esta serie, aprenderás a crear un framework propio para tu tema WordPress que puedas usar para construir sitios web para ti mismo o para tus clientes, e incluso podrías hacerlo público y disponible para otros usuarios. Trabajarás a través de las fases involucradas en la creación del tema principal que forma la base de tu framework, añadiendo funciones extra, hooks y mucho más. También aprenderás a casar provecho de los estos en tus temas hijo o "child themes" y en los plugins y a hacer público código para la gente.

Pero antes de comenzar, necesitas saber cómo funcionan los frameworks de un tema y lo que los diferencia de un tema padre estándar.

Llevo tiempo desarrollando dos frameworks de temas para usarlos en dos categorías distintas del sitio de un cliente, desarrollando y mejorando éstos con el tiempo, también he trabajado con algunos frameworks de temas de terceros. Según mi experiencia el framework de un tema tiene varias características principales:

  • Consiste en un tema padre diseñado para ser utilizado por temas hijo. En algunos casos el tema padre podría funcionar también como un tema independiente, pero en otros el tema padre sólo funciona junto con temas hijo - el WordPress Codex los define como 'Base/Starter Themes' y 'Code Libraries', respectivamente.
  • Incluye ganchos y funciones que se pueden aprovechar por niño themes y plugins. Su tema es la base de un ecosistema va a trabajar con, y que incluye los plugins que se enganche en su marco.
  • Diseñado para llegar a usuarios no codificante, incluirá páginas de opciones de tema que permiten a los usuarios personalizar el tema según sus necesidades. Estos pueden ser extensos, incorporando el diseño, la maquetación de las páginas, las funciones, contenido y mucho más. En algunos casos, la funcionalidad viene proporcionada a través del personalizador del tema.
  • Puede incluir varias áreas de widget para que los usuarios no técnicos pueden agregar contenido o código a través de widgets (incluyendo widgets añadidos por plugins que se escribe específicamente para el marco).
  • También puede incluir funcionalidad de biblioteca de secuencia de comandos, como un slider jQuery lightbox. Dependiendo de sus necesidades y las de sus usuarios, podría incorporar éstos en el marco o proporcionar plugins con el código que en su marco.
  • Es extensible, con ganchos que le permite extender su funcionalidad mediante niño temas o plugins.

Los primeros dos de los puntos anteriores son las más fundamentales - sin un tema de los padres, no tienes un marco temático. Y un tema de padres sin los ganchos y funciones es sólo un tema de la matriz básica, no es realmente un marco.

Eso es lo que tema de marcos son, pero ¿cómo funcionan? Echemos un vistazo a los elementos de un marco de tema:

  • El tema de los padres y temas de niño opcional
  • Ganchos de acción y filtro
  • Funciones
  • Opciones del tema
  • Widgets
  • Scripts
  • Posibilidad de ampliación

El Tema Padre e Hijo

El componente principal del framework de un tema es el tema padre. Éste se puede diseñar de dos maneras:

  • Como tema de inicio, que puede funcionar por cuenta propia, tal vez con personalizándolo a través de la sección de opciones del tema o del personalizador del tema. Estos ejemplos de Atahualpa y temático. Ambos sirven como temas independientes sin el uso de temas de niño.
  • Como base para añadir a por un tema de niño, sin que el tema no efectivamente un sitio Web. Los ejemplos incluyen núcleo híbrido y Génesis. Estos incluyen el código básico que normalmente se encontraría en un tema junto con una variedad de ganchos y las funciones que se pueden aprovechar por temas de niño y también por los plugins. Todo esto está compuesta por una API para el marco.

Como una de las características claves de los marcos del tema es el principio seco, su tema principal es que puedan hacer uso de partes de la plantilla e incluir archivos siempre que sea posible, lo que significa que acceder al mismo código en varios lugares en tu tema. Esto también facilita reemplazar código de tus temas de niño, como simplemente crear un plantilla de repuesto o incluir archivo.

No voy a explicar el concepto de temas padre y temas hijo aquí, ya que está cubierto en este otro tutorial sobre child themes. Muchos frameworks vienen acompañados de una gama de temas, mientras que con otros necesitas desarrollar tus propios temas.

Si estás desarrollando tu propio tema, te recomiendo que crees al menos un tema de hijo de 'inicio' para evitar repetir el trabajo que requeriría la creación de uno para cada proyecto: podrías decidir crear múltiples temas hijo como base para diferentes tipos de proyectos, por ejemplo temas hijo para blogs y otros para sitios web con funciones distintas a las de un blog.

Hooks para Acciones y Filtros

Un framework de tema incluirá una variedad de hooks para que los temas hijo y los plugins lo enlacen cuando quieran añadir código personalizado o cambiar la forma el la que el tema se comporta:

  • Los hooks para las acciones aparecerán en varios lugares del código, lo que te permitirá añadir código a tus archivos de plantilla a través de funciones escritas dentro del código del framework que podrían ser reemplazadas por los temas hijo, o a través de funciones que se agreguen a tus temas hijo o plugins. Mi propio framework hace uso extensivo de hooks de acciones, proporcionándolos en todos los archivos de plantilla para permitir a los usuarios colocar contenido como áreas de widgets, datos de contacto, botones de llamada a la acción (CTAs) y código específico dondequiera que les sea necesario.
  • Filtros pueden utilizarse para cambiar una página con un tema infantil o un plugin determinado comportamiento, por ejemplo personalización lazos, que modifica el contenido estático y mucho más. Cualquier texto estático (o el código llamado desde fuera de su sitio) debe estar envueltos en un filtro, por lo que puede ser alterado por temas de niño si es necesario.

Vale la pena tomar tiempo para considerar qué ganchos que desee incluir en una etapa temprana, para que usted sepa qué contenidos incluir mediante un gancho y lo de código en los archivos de la plantilla directamente. Veremos en la siguiente parte de esta serie.

Funciones

Su marco también es probable que incluya una gama de funciones. Algunos de estos se enganchará en la acción y los enlaces de filtros de que ya definidos mientras que otras funciones tales como etiquetas de plantilla que temas del niño pueden hacer usan.

Si usted tiene cualquier funciones personalizadas que usa en un número de sitios de cliente, merece la pena agregarlos a su marco. No tienes que activar todas las funciones: usted puede activar una función del tema de la matriz utilizando una función de add_action() en el sitio del niño.

Opciones del Tema

Pantallas de opciones del tema son una adición útil a cualquier tema complejo, pero serán especialmente útiles para marcos tema diseñados para usuarios no técnicos. Los marcos de los temas todos incluyen múltiples pantallas de opciones del tema en su propia sección del admin, con opciones que incluyen características encendido y apagado, que modifica la disposición, añadir contenido y alterar elementos de diseño tales como colores, imágenes de fondo, fuentes y las imágenes de cabecera.

Podría optar a usar el personalizador de tema para muchas de sus opciones, que tiene la ventaja de permitir que los usuarios ver los cambios como que hacen. Yo he tomado este enfoque para el marco Edupress tema que desarrollé para sitios web de la escuela con Mark Wilkinson.

Áreas de Widget

Si elige agregar una serie de áreas de widget dependerá de la audiencia para su marco: Si a usted o un pequeño equipo de desarrolladores trabajando con el tema, no puede añadir cualquier área widget más allá de las áreas lateral y pie de página estándar.

Pero si el marco va a utilizar por los usuarios no técnicos, puede darles mucha más flexibilidad al registrar múltiples áreas de widget en varias localizaciones en tu tema. Así como la normal sidebar y pie de página, usted puede también registrar áreas de widget en el encabezado, antes o después del contenido y a continuación el pie de página.

El marco del tema que uso para mis sitios de cliente incluye cuatro áreas de widget en el footer: el tema comprueba cuál de estos poblados y añade CSS clases por consiguiente de modo que las áreas pobladas widget cada toma la anchura apropiada de la página.

Sus áreas de widget pueden codificarse directamente en los archivos de plantilla o puedes decidir (como yo) añadirlos mediante ganchos de acción en los sitios relevantes en su sitio. Esto significa que pueden ser reemplazados en temas de niños, áreas de widget alternativa o código personalizado.

Scripts

Si scripts es probable ser utilizado por un número de sitios en su marco, o si sus usuarios será técnicos y desea proporcionar opciones extra, podría decidir incluir ciertos scripts en su marco, como un script slider o lightbox. Esto puede ahorrar a los usuarios tener que instalar plugins adicionales, pero tiene la desventaja de hincha código si estas secuencias de comandos no son necesarios.

Nuevamente esto dependerá de su audiencia y sus necesidades anticipadas: si es a usted trabajar con el marco, recomiendo plugins en desarrollo (o identificación) con estos scripts y utilizarlas cuando sea necesario.

Si se incluyen secuencias de comandos vale como una opción de activación y desactivación de la pantalla de opciones del tema.

Posibilidad de Ampliación

Si el marco va a ser útil para una variedad de sitios ahora y en el futuro quiere que sea extensible. El tema principal que forma la base del marco es sólo el corazón de un ecosistema que usted y los usuarios de tu tema va aprovechar para añadir opciones extra y poder a sus sitios. Esto incluye:

  • Niño temas o temas de arranque - la lista de estos bien puede crecer con el tiempo, especialmente si estás liberando tu tema al público
  • Plugins diseñado para trabajar específicamente con su marco, a menudo activado mediante ganchos del marco específico.

También puedes incluir documentación para otros desarrolladores que quieran trabajar con tu framework: la mayoría de los framework de temas cuentan con extensa documentación que los desarrolladores pueden usar para personalizar sus sitios construidos sobre el framework o para crear temas de hijo o plugins para su uso por parte de otros usuarios del mismo framework.

Resumen

Los frameworks de temas son una herramienta potente dentro del arsenal de un desarrollador de WordPress. Como hemos visto, son vitales para miles de propietarios de webs que no dispongan de conocimientos técnicos y que los usan para crear sitios personalizados de WordPress. Pero también son una gran herramienta para cualquier desarrollador que vaya a crear múltiples sitios web, ya sea para uso personal o para clientes.

Los frameworks para temas tienen una serie de características que les dan ese poder: son ampliables y flexibles y consiguen que te sea fácil a ti o a tus usuarios crear sitios personalizados a través de temas hijo y acceder a las funciones y hooks proporcionados por tu framework.

Habiendo visto cómo funciona un framework de tema, en la siguiente parte de esta serie identificarás lo que el framework debe hacer y para quién tiene que funcionar, lo cual te ayudará a decidir el enfoque de desarrollo más adecuado.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.