Presentación del marco temático de Génesis

Category: Temas 6 0

En este artículo, les presentaré el Theme Framework creado por StudioPress: Genesis. Para tener la misma interfaz, asegúrese de descargar la extensión Genesis Translations que traduce la mayor parte de la interfaz.

¿Qué es un marco temático?

Definición oficial

En el campo de TI, un framework puede ser traducido como un framework de aplicación, una base de aplicación o una estructura de software. Se trata de diferentes componentes que servirán de base para una arquitectura final.

El caso de Génesis

Dentro de un tema de WordPress, el marco podría ser ilustrado por la lógica entre un tema de Padre y un tema de Hijo. Este segundo será elegido como tema principal y depende del primero que siempre debe ser instalado simultáneamente. Esta configuración permite que el padre se actualice sin tener que sobrescribir todo lo que habríamos modificado en el hijo.

El Genesis Framework, creado por StudioPress y Nathan Rice, se basa en el mismo principio. Es un tema para padres que implica el uso de un tema infantil en paralelo. Puede ser actualizado directamente desde el back office de su sitio WordPress. Veremos que en comparación con un tema clásico, Génesis añade una multitud de herramientas y características que le permiten configurar rápidamente un tema infantil personalizado. De forma predeterminada, cuando se incluye con el Marco un tema infantil listo para usar, una muestra de génesis.

Los puntos principales de Génesis

Historia de Génesis

Genesis fue iniciado por Brian Gardner y lanzado en febrero de 2010. El principal desarrollador del proyecto es Nathan Rice. Estos dos jugadores ya son bien conocidos en la comunidad de WordPress, lo que facilitó su lanzamiento. Brian fue uno de los primeros desarrolladores en los Estados Unidos en crear temas “Premium”.

Hoy, siete años después, el proyecto Génesis sigue estando muy vivo. StudioPress es ahora parte del grupo Rainmaker Digital y acaba de lanzar una plataforma de alojamiento llave en mano. Así en el sitio oficial se nos propone crear un sitio o comprar un tema.

Qué recordar

Aquí están los puntos importantes que podrían motivarte a empezar con este motor temático. Algunos de ellos se desarrollarán más adelante en este artículo.

Actualizar

Como he mencionado, la actualización es automática desde el principio. No hay que instalar ningún número de licencia ni herramientas especiales para que el tema sea funcional.

Todos ilimitados

En la misma línea que en el punto anterior, se puede utilizar Génesis indefinidamente tanto en el tiempo como en el número de proyectos. Compré mi licencia en julio de 2010 y no he pagado nada desde entonces. El precio público es de $59.95 e incluye una base temática para crear tus proyectos futuros.

100% en estándares de WordPress

Además de ser completamente GPL, Genesis hace el mejor uso de las características de WordPress. Si existe alguno de ellos, no se añadirá ninguna sobreimpresión. Veremos por ejemplo que la lógica del framework se basa en la API (Programming Interface) de las extensiones. Al igual que en WordPress, se ha trabajado mucho en la accesibilidad del framework.

Configuración simplificada

Por este lado, no hay sorpresas desagradables después de la activación del tema. Una sola página de ajustes que se simplifica voluntariamente. Veremos más tarde por qué.

Seguridad

Este es un punto importante tan pronto como se lleva a cabo un proyecto a medida. Tenga en cuenta que todo el código de Genesis es auditado por Mark Jaquith, el principal experto en seguridad de WordPress. También verá en la sección de desarrolladores que el enfoque utilizado para las modificaciones reduce en gran medida los errores de codificación.

SEO

Genesis está optimizado para SEO. De forma nativa, se integran los campos dedicados. Contrariamente a lo que oigo a menudo, me parece lógico pensar en SEO al mismo tiempo que en la estructura HTML. Y para que entienda el espíritu que impulsa al equipo detrás de este framework, si activa una extensión SEO conocida, el módulo SEO se desactiva automáticamente. Esto no se detiene ahí porque el desarrollador principal ha creado una extensión SEO Data Transporter que le permite exportar datos SEO de Génesis a otra extensión. Por último, pero no menos importante, la optimización SEO incluye una estructura que soporta Microformatos y Microdatos. También puede añadir su propia configuración y ajustar completamente estos formatos de acuerdo a sus necesidades.

Comunidad

Dado que este marco de trabajo es ampliamente utilizado en el mundo, se derivan varias ventajas de él. Primero, hay muchas extensiones dedicadas o compatibles. Entonces, muchos artículos están disponibles en la web. Los invito a visitar esta etiqueta en mi sitio de Genesis Framework. Finalmente, hay varias casas temáticas que ofrecen una variedad de opciones. Me extenderé sobre la mayoría de estos puntos en las siguientes secciones.

Génesis para administradores

Genesis ofrece múltiples herramientas u opciones para el administrador del sitio. Estos pueden ser fácilmente ocultados por los desarrolladores del tema personalizado.

Herramientas integradas

Génesis añade automáticamente algunas herramientas muy útiles, que son pocas en número, pero esenciales. Veremos que al igual que WordPress, el framework puede ser fácilmente extendido a través de extensiones o funciones cuando usted se sienta más cómodo con el código. Les presento a continuación las principales.

Diseño

Las opciones de modelos se integran de forma nativa en Genesis. Primero en los ajustes generales de Génesis. Luego, en cada contenido individual o de archivo. Cada vez, puede mostrar o no las dos barras laterales, a la derecha, a la izquierda o a cada lado.

Ruta de la miga de pan

Un rastro de migas de pan está incluido en el Génesis. En la configuración general, puede ocultarlo o no dependiendo de los tipos de contenido. Cuando se añade contenido personalizado (Portofio, producto……….), el camino de la miga de pan se adapta.

Visualización de archivos

Con el mismo espíritu, se proponen ajustes para todos los archivos de su sitio. Por archivo entendemos los enlaces a los contenidos de una categoría, una etiqueta, una fecha o incluso un autor.

Opciones de WordPress

Todos los temas tradicionales de WordPress están integrados y disponibles en el modo de visualización del Personalizador de su tema: encabezados, imagen de fondo, áreas de widgets y opciones añadidas por Genesis.

Widgets

Genesis incluye dos widgets esenciales: Artículo en la primera página y Página en la primera página. Estas dos utilidades le permiten mostrar fácilmente una página o una serie de artículos controlando los elementos que aparecerán:

  • La imagen de la portada en un formato determinado.
  • El título del contenido.
  • La parte del contenido que se mostrará: extracto, contenido completo o número de caracteres.

En la captura de pantalla, aquí hay una visión general de la configuración del widget a la izquierda y su representación a la derecha.

Gran variedad de temas

StudioPress ofrece muchos temas infantiles para Génesis. Al comprar el marco una vez, los temas para niños siempre serán más baratos. Será de unos 30€/40€ cada uno. También tiene un sitio dedicado GenesisThemes.ca que enumera todos los temas infantiles que existen en varias editoriales:

En mi sitio, mantengo una lista dedicada con recursos sobre el marco de trabajo de Génesis

Personalización del aspecto

Tres extensiones le permiten modificar la apariencia de su tema sin tener que tocar el código:

  • Pro Palette Design: esta extensión de pago añade un nuevo menú en su back office para modificar directamente el aspecto de su sitio.
  • Genesis Extender:: Esta extensión funciona de la misma manera que la anterior.
  • CSS Hero: esta extensión de pago te permite modificar CSS directamente desde tu navegador. Es compatible con la mayoría de los temas infantiles creados por StudioPress. Es una especie de superInpector con menús más intuitivos. El CSS se guardará automáticamente en la carpeta de su sitio.

Extensiones

Hay muchas extensiones gratuitas disponibles para Genesis. Y todas las extensiones conocidas probarán rápidamente la compatibilidad con Genesis. Y cuando se produce un problema, se implementa rápidamente una extensión. Este fue el caso de BuddyPress o Woocommerce, que tiene una extensión dedicada: Genesis Connect para WooCommerce.

Usted puede explorar el mismo enlace a mi sitio para una selección de recursos sobre el marco de Génesis.

Genesis para desarrolladores

Tema de muestra de Genesis

Como mencioné anteriormente, con Génesis se proporciona un tema básico de muestra de génesis. Es deliberadamente bastante neutral y responde completamente por defecto. Es una muy buena base para construir cualquier tema personalizado. También puede crear su propia base de datos de temas en el futuro. Tenga en cuenta que también es posible encontrar varios temas libres que utilizan configuraciones más avanzadas. He aquí una modesta selección:

  • Tema básico basado en Bootstrap.
  • Tema básico con un soporte Gulp.
  • Tema básico con SASS y Grunt integrado.

Estructura HTML

Desde la estructura HTML optimizada para SEO, pasando por las clases CSS siempre idénticas, hasta las numerosas funciones disponibles. Todo se hace para facilitar la implementación de temas a medida. Y para eso, la muestra de génesis dada con Génesis es más que suficiente.

Como hemos visto brevemente, HTML es totalmente modificable con ganchos que se jugarán por orden, añadiendo partes, modificando la estructura. Etc……………………………………………………………………………………………………………… En el lado de CSS, tener la misma estructura con sus clases siempre ahorra mucho tiempo cuando se trata de configurar CSS personalizados. Las funciones de utilidad también le permiten añadir structural.wrap al contenido de su elección.

Construido como una extensión

Genesis se basa en la API de extensión de WordPress. Este es el punto que es más perturbador al principio para los creadores de temas que están acostumbrados a trabajar con modelos más “clásicos”.

En el nivel de jerarquía de plantillas, Génesis funciona como cualquier otro tema tradicional. Por otro lado, cuando se abre un modelo de Génesis, se nota que aparte de la función genesis(), casi no hay código dentro. Esta función es crucial, ya que en segundo plano mostrará todo el contenido necesario según el contexto dado por el modelo de jerarquía. Así, un archivo para la categoría Blog se llamará category-blog.php. La función hará el resto del trabajo.

Para modificar la plantilla, utilizaremos ganchos para añadir, mover, eliminar o eliminar contenido. Las extensiones conocidas (WooCommerce, BuddyPress, bbPress) funcionan exactamente de la misma manera. Es por eso que Genesis es inmediatamente más familiar para cualquier desarrollador de extensiones. La principal ventaja de este enfoque es que es posible modificar enormemente el comportamiento del framework sin tener que modificar el código fuente original. Es un enfoque más seguro y sostenible en el tiempo.

Entre las extensiones esenciales con Genesis, mencionaré Genesis Visual Hook Guide que permite mostrar a los Administradores del sitio todas las Zonas de gancho disponibles en la oficina principal. Así que, como veremos, puedes añadir fácilmente nuevo contenido donde quieras. Aquí hay una captura de lo que muestra la extensión:

Añadir acción

Con las funciones add_action de WordPress, podrá añadir, eliminar o mover elementos de su plantilla HTML. En los temas hijo de Génesis creados por StudioPress, incluida la muestra de génesis, se incluye una plantilla llamada page_landing. Es un modelo interesante para ver cómo se configura una plantilla y cómo se pueden eliminar partes esenciales de la página como el título del sitio, los menús, las áreas de widgets…. Veremos a continuación una aplicación más concreta.

Añadir filtro

Con las funciones add_filter de WordPress, usted modificará las partes existentes. Por ejemplo, si quiere cambiar lo que se muestra en la información del artículo bajo el título o cambiar la estructura completa del título del sitio. Tenga en cuenta que para las partes principales del sitio, existe una extensión: Genesis Simple Edits. Añade opciones directamente en el menú Génesis de su oficina.

Soporte personalizado

Una vez que haya comprado Genesis, tendrá acceso a muchos recursos en línea y asistencia personalizada por correo electrónico con un billete dedicado. A diferencia de la mayoría de los temas premium, éste es ilimitado en el tiempo. Sin embargo, el único inconveniente es que será en inglés.

Algunos ejemplos

Antes de seguir adelante, recomiendo que instale la Guía visual del gancho de Génesis y que muestre las extensiones de la plantilla actual.

Añadir un visual antes del título

Aquí, me centraré en la plantilla single.php que se utiliza para mostrar un artículo por sí solo. Mi objetivo será mostrar la imagen en la primera página cuando exista justo antes del título del artículo. Cuando se trata de añadir contenido a la estructura, siempre tendremos que pasar por los ganchos y aquí con la acción add_action.

<php> </ i&gt. // Mostrar la imagen en la primera página antes del título add_action(genesis_entry_header,resto_image_une, 9); function resto_image_une() { // para ver si la imagen de la portada existe // Si no, el guión se detiene si (! has_post_thumbnail()) { regresar; } // Datos de imagen imagen_id = get_post_thumbnail_id(); // Visualizar la imagen printf(;a >%s</a>, wp_get_attachment_url( $image_id), wp_get_attachment_image( $image_id,grande)); } genesis();

En el código, se deben seguir los siguientes pasos:

  • Creación del modelo single.php configurando la función genesis() para la visualización estándar de todo el contenido.
  • Compruebe si mi modelo funciona con Reveal Current Template. Si coloco el cursor sobre el nombre single.php, veo dónde se encuentra este archivo.
  • Localice el área en este modelo con la guía visual del gancho Genesis.
  • Haga un gancho en esta área add_action mostrando contenido temporal. Las prioridades nos permitirán encontrar la ubicación correcta dentro de la estructura. Aquí, puse 9 antes del título.
  • Añado una condición al principio de mi función para comprobar si este artículo tiene una imagen de titular. De lo contrario, el retorno detiene la ejecución del script.
  • Utilice la función WordPress wp_get_attachment_image para mostrar la imagen en la página principal.

Añada un campo ACF bajo el contenido principal.

En una plantilla de página, añadiré un campo almacenado usando ACF en una plantilla de página específica que nombre Página con un segundo editor. Esta plantilla añade un cuadro de diálogo en la parte inferior de la página para añadir un segundo editor. Por lo tanto, se utilizará un campo ACF WYSIWYG.

Como en el ejercicio anterior, sigo los mismos pasos. Mi campo de archivo se llama editor_bas_page. El código final se dará:

<php> </ i&gt. // Nombre de la plantilla: Página con un segundo editor // Gancho para colocar este nuevo contenido después del editor principal de la página add_action(genesis_entry_content,gn_contenu_extra); function gn_contenu_extra(){ echo Nuevo contenido después del artículo; printf(;div get_field(editor_bas_page)); } // Función Génesis obligatoria en todos los modelos genesis();

Aquí están los detalles del código:

  • Creación de la plantilla de página.
  • Elección del gancho donde me coloco.
  • Pantalla de título duro con h3.
  • Visualización del campo ACF WYSIWYG después del título.

Añadir un filtro para imponer el ancho completo

Aquí, crearé una plantilla de página para usar con un Constructor de Páginas de Origen de Sitio.

<php> </ i&gt. // Nombre de la plantilla: Plantilla de página con la página del constructor // Suprimir el título de la página remove_action(genesis_entry_header,genesis_do_post_title); // Imponer el modelo a todo lo ancho add_filter(genesis_site_layout,__genesis_return_full_width_content); genesis();

En Génesis hay varias funciones disponibles para elegir el diseño. En este tutorial personal sobre las opciones de diseño de Génesis, doy varios ajustes y enfoques.

El matiz reside en el gancho utilizado genesis_pre_get_option_layout o genesis_layout. La primera ofrece un diseño que puede ser modificado por el administrador en las opciones de diseño de back office. El segundo realmente requerirá el diseño de la plantilla.

Otros ejemplos

Siguiendo la etiqueta del Marco de Génesis o viendo esta colección de funciones en Génesis, se proponen otras pistas. También puede leer el código de Génesis, que está totalmente documentado. Aquí hay algunos sitios donde puede encontrar recursos interesantes:

  • Archivo de fragmentos de código – Bill Erickson. El sitio de Bill debe ser explorado….
  • Genesis Quick Tips – Bill Erickson. Colección de códigos muy útiles.
  • Genesis Framework de StudioPress en el sitio web de Carrie Dils.
  • Genesis Framework de StudioPress. Muchos recursos, pero ahora el sitio está reservado sólo para los miembros.
  • Fragmentos de código de Génesis – Brian Gardner. Extractos de los códigos básicos de Brian.

5.006

Related Articles