En este artículo veremos cómo se configura un theme de Framework Genesis para WordPress.
¿Qué es Framework Genesis de StudioPress?
Un framework es un súper theme que proporciona una serie de funciones para que la gestión de tu plantilla (instalación, configuración y modificaciones) sea lo más fácil posible. Pero no solo es cuestión de facilidad; Genesis implementa un sistema de plantillas para WordPress muy eficaz a nivel de rendimiento, entre otras cosas.
Entonces, Framework Genesis para WordPress es el sistema de plantillas de StudioPress que permite una configuración sencilla de los themes sin necesidad de modificar el código. Los themes de Genesis proporcionan un alto rendimiento en velocidad, seguridad y SEO.
A efectos prácticos, se debe adquirir el sistema base denominado «Genesis» e instalarlo como cualquier otro theme de WordPress (no hace falta activarlo). A continuación, debes instalar un theme «hijo» y activarlo.
El framework Genesis para WordPress te proporciona un entorno sencillo, seguro, rápido y bien preparado para el SEO
Razones para elegir el Framework Genesis para WordPress
Hay muchas razones por las que debes elegir un buen sistema de plantillas para tu blog de WordPress.
¿Por qué es recomendable usar el sistema de themes de Genesis de StudioPress? He aquí las más importantes:
- Código optimizado para SEO.
- Código HTML 5 y responsive (adaptado a dispositivos móviles).
- Personalización mediante un panel de control añadido en el escritorio de WordPress.
- Soporte y actualizaciones garantizadas.
- Muchos plugins integrados.
En consecuencia, Genesis te da la posibilidad de implementar una plantilla elegante y atractiva, segura, rápida y preparada para el SEO.
Cómo se instala un theme de Framework Genesis para WordPress
Uno de los sitios que instalé en 2016 fue El blog de la Dra. Amalia Arce. Ese blog está construido con el Framework Genesis para WordPress y el theme hijo Outreach.
Veamos, a continuación, los detalles de la instalación del theme hijo «Outreach» de Framework Genesis para WordPress.
Y, como hemos visto, para instalar el theme Outreach (por ejemplo) hay que realizar lo siguiente.
- Instalar el theme Genesis (theme base).
- Instalar el theme Outreach (theme hijo) y activarlo.
[Tweet «Me gusta este post sobre el Framework Genesis de StudioPress»]
Una vez instalado el theme Genesis, la instalación de un theme hijo (por ejemplo Outreach Pro) se realiza como la de cualquier theme de WordPress.
Seguiremos después las instrucciones específicas del theme.
Plugins adicionales
Para una completa configuración del theme Outreach Pro, es preciso instalar además los siguientes plugins:
Además de los plugins citados anteriormente, para una configuración avanzada, hay que instalar los plugins siguientes:
- Simple Edits: para personalizar los metadatos de los posts y el footer.
- Genesis Simple Hooks: para añadir el código de la propiedad de Analytics (1) y sustituir el favicon de Genesis por el del blog, por ejemplo.
- Genesis Translations: para traducir el theme automáticamente.
¿Para qué sirven los plugins «Simple Edits» y «Simple Hooks» en Framework Genesis? Lo vemos seguidamente.
Simple edits
En la configuración de este plugin («Genesis > Simple Edits») se personaliza la línea que aparecerá debajo del título de los posts, en «Entry Meta (above content)». Los valores que se configuren aquí tienen preferencia sobre los de la plantilla por defecto.
Genesis Simple Hooks
Para configurar excepciones y personalizar el código de la plantilla se puede ir a «Genesis > Simple Hooks». Por ejemplo, así se introduce el código de Analytics como se ha indicado en (1). O también el Favicon (2).
Generalmente, un theme de Genesis se estructura con una «home» y la página del blog. En la home se muestra la información que quieras destacar a modo de «landing page». Genesis te proporciona una serie de áreas en la zona «Apariencia > Widgets» para que puedas irlas rellenando con los widgets que aparecen por defecto o con aquellos que se crean al instalar plugins.
Por ejemplo, suele proporcionarse un área para la columna lateral o sidebar. Yo la suelo configurar de la siguiente forma.
El Sidebar en un theme de Framework Genesis para WordPress
A continuación, te propongo una estructura óptima para la columna lateral, citando los plugins necesarios.
- Traductor con el plugin Google Website Translator by Prisna.net.
- Buscador de posts con el widget nativo.
- Nube de etiquetas con el widget nativo.
- Posts más vistos con el widget del plugin Most Popular Posts.
- Entradas recientes con el widget nativo.
- Archivo anual con el widget del plugin Annual Archive.
Configuración de Outreach Pro de Framework Genesis para WordPress
Y ahora entramos de lleno en la configuración del theme Outreach Pro.
Como ya te he adelantado, el sistema de configuración de plantillas en WordPress es muy simple y fácil de usar. Tras instalar el theme, cada plantilla ofrece un conjunto de áreas para rellenar en la parte derecha de «Apariencia > Widgets».
Las áreas corresponden a sitios concretos de la plantilla del blog: la cabecera, el sidebar, el pie de página, etc.
Solo hay que mover widgets a dichas áreas para establecer los elementos de los que constará el blog en su plantilla.
¿Dónde se encuentran dichos widgets? De partida, encontrarás una serie de widgets aportados por el theme instalado.
Y otros, solo los verás tras instalar el plugin correspondiente.
Los widgets, dentro de cada área de la derecha se pueden mover de sitio, simplemente arrastrándolos. Pero las áreas son inamovibles y no son visibles en la plantilla hasta que no añades el primer widget dentro de ellas.
Además de los widgets, el resto de opciones de configuración se encuentran en «Apariencia > Personalizar», un asistente muy cómodo y fácil de usar que permite cambiar todos los aspectos de la plantilla.
Así, para configurar los widgets se puede ir a «Apariencia > Widget) -lo que yo recomiendo- o a «Apariencia > Personalizar > Widgets».
Opciones del tema
Genesis ofrece la página «Genesis > Opciones del tema» para configurar algunas partes, como, por ejemplo, añadir el código de Google Analytics (como ya hemos visto) o el cambio del esquema de color.
Para una configuración avanzada, por ejemplo modificar el código HTML o PHP, se usa la opción «Genesis > Simple Edits>» y «Genesis > Simple Hooks».
A continuación, vamos a ver cómo se configuró la plantilla Outreach Pro para el blog «Diario de una mamá pediatra.
Esquema de color
Hay que ir a «Genesis > Opciones del tema» y hacer clic en el desplegable «Estilo de color» para seleccionar un esquema de color para el blog.
Migas de pan
También en «Genesis > Opciones del tema», apartado «Barra de navegación», elegir en qué lugares se mostrarán las migas de pan.
Archivos de contenido
Seguimos en «Genesis > Opciones del tema», ahora en el apartado «Archivos de contenido» para decidir cómo se visualizarán las entradas en la home del blog.
- Elige “Entry excerpt” para mostrar solo el resumen en la home.
- Activar la casilla «¿Incluir la imagen destacada?».
- Elige «Numérico» en «Entry Pagination».
- El tamaño de la imagen destacada déjalo a 150×150.
- Alinea la imagen destacada a la izquierda, seleccionando «Izquierda» en «Image Alignment:».
Cómo configurar el texto de la cabecera
La cabecera puede llevar un texto o una imagen.
Para poner el título del texto, acude a «Ajustes > Generales» y escribirlo en el campo «Título del sitio».
El theme Outreach Pro de Framework Genesis para WordPress de StudioPress no permite mostrar el subtítulo del blog («Descripción corta»).
Personalización de la imagen de cabecera
Para añadir una imagen, acude a «Apariencia > Cabecera». Haz clic en «Añadir nueva imagen» y sigue las instrucciones para subir la imagen a la biblioteca de medios e incluirla en la plantilla.
La imagen debe poseer las dimensiones 340 × 100 pixels.
Preferiblemente el archivo de la imagen debe ser JPG porque con PNG cambia un poco el color del fondo.
Cambio del color de fondo
Acude a «Apariencia > Personalizar» y elige la opción «Colores» en la columna de la izquierda.
Cambio de la imagen de fondo
En lugar de un color para el fondo, puedes añadir también una imagen. Ve a «Apariencia > Personalizar» y elige la opción «Imagen de fondo» en la columna de la izquierda.
Cómo configurar los menús de navegación
Los menús de navegación se pueden configurar yendo a «Apariencia > Personalizar» y después eligiendo la opción «Menús>.
También puedes ir a «Apariencia > Menús».
Iconos sociales en el encabezado derecho
Hay que instalar el plugin Simple Social Icons e ir al widget «Encabezado derecho».
Los widgets se encuentran en «Apariencia > Widgets».
Arrastra desde la zona de widgets de la izquierda el elemento «Simple social icons» dentro de la caja «Encabezado derecho». Haz clic en la flechita a la derecha del título del widget y configura según preferencias.
- Title: blank
- Icon Size: 36px
- Icon Border Radius: 3px
- Alignment: Align Right
- Icon Font Color: #333333
- Icon Font Hover Color: #ffffff
- Background Color: #ffffff
- Background Hover Color: #333333
Cómo añadir y configurar el slider de la home
La división del sitio en Home y Blog se realiza simplemente añadiendo cualquier widget a la caja «Home Top».
Instala el plugin «Genesis – Responsive Slider» y después arrastra el widget del mismo nombre, desde la parte de la izquierda, dentro de la caja «Home Top».
Para configurar el slider, ve a «Settings Slider page» haciendo clic en el enlace dentro del widget.
- Type of content: post
- Choose a term to determine what slides to include: «Destacada» (1)
- Number of Slides to Show: 3
- Order by: date
- Maximum Slider Width (in pixels): 1140
- Maximum Slider Height (in pixels): 460
- More Text: «Sigue leyendo»
- Limit Content to 100 Characters
- Slider Excerpt Width (in percentage): 35
- Excerpt Location (vertical): Bottom
- Excerpt Location (horizontal): Left
Asegúrate de hacer clic siempre en el botón «Save settings» para guardar los cambios.
Las imágenes destacadas para mostrar en el slider no deben llevar acentos ni caracteres especiales (exceptuando al guión).
(1) Todos los posts que lleven la categoría «Destacada» además de la suya, saldrán en el slider, ordenadas por fecha y con el límite impuesto en «Number de slides to show».
Cómo añadir la segunda franja con los últimos posts en la Home
Se usa la caja «Home – Bottom» en «Apariencias > Widgets».
Arrastra el widget «Entrada destacada» desde la izquierda dentro de la caja «Home – Bottom», cuatro veces y configura cada uno de ellos de la siguiente forma.
La única diferencia entre los 4 widgets es que hay que ir aumentando una unidad en el parámetro «Número de artículos a compensar», empezando desde 0 y siguiendo con 1, 2 y 3.
Configuración de la barra lateral primaria (sidebar)
La configuración del sidebar se realiza añadiendo widgets desde la parte izquierda dentro de la caja «Barra lateral primaria».
En el caso que nos ocupa, se añaden los siguientes widgets:
- Buscador (nativo)
- Prisna GWT traductor (a partir de plugin)
- Annual Archive (a partir de plugin)
- Nube de etiquetas (nativo)
- WordPress Popular Posts (a partir de plugin)
- Entradas recientes (nativo)
«A partir de plugin» significa que tras instalar el plugin correspondiente aparecerá un nuevo widget en el área de la izquierda; pudiéndose arrastrar a cualquiera de las cajas de la derecha.
«Nativo» significa que no hace falta instalar ningún plugin al respecto. El widget correspondiente se encontrará disponible desde el área de la izquierda en «Apariencia > Widgets».
Cómo añadir la tercera franja con dos páginas de información
Hay que mover el widget de «Página destacada» a las cajas «Sub footer – left» y «Sub footer – right».
La configuración del widget «Página destacada de la izquierda» es:
Y la de la derecha:
Cómo configurar los 4 pies página
Se lleva a cabo, moviendo widgets a las cajas «Pie de página 1», «Pie de página 2», «Pie de página 3» y «Pie de página 4».
Los widgets utilizados de izquierda a derecha son:
Página destacada:
Página destacada:
Genesis eNews Extended (a partir de plugin):
En el campo «Acción de formulario (Form Action)» poner la URL obtenida del código del formulario personalizado creado en Mailrelay.
En «Campo de Email:» poner el nombre del campo de email.
Y, finalmente, rellena el campo «Email de entrada su texto:» con el valor «E-mail» y en el campo «Texto de botón:» pon «IR» ((ver capítulo «Newsletter»).
Página destacada:
Cómo crear la página del blog
Para que el sitio tenga Home y Blog, hay que crear una nueva página en blanco cuyo título sea «Blog» y seleccionando la plantilla «blog», a la derecha en el editor de páginas.
Como ya se ha visto, la Home se activa simplemente moviendo un widget al área «Home – Top»; por ejemplo, el slider.
Área para añadir elementos al final de cada entrada
Se puede emplear el área especial «Después de la entrada» para añadir elementos al final de cada entrada. Por ejemplo, se podría añadir el formulario de Mailrelay para captar suscriptores o cualquier otro widget que no esté en el sidebar y que sirva para retener a los visitantes.
El elemento «Posts relacionados», sin embargo, lo inserta automáticamente el plugin «Yet Another Related Posts».
Reflexiones finales
A mí me resulta muy sencillo y práctico construir blogs mediante el sistema de plantillas del Framework Genesis para WordPress.
No es una infraestructura gratuita pero hay que pensar en la cantidad de tiempo que te ahorras y no te vas a encontrar ningún problema.
Puedes personalizar tu blog completamente a tu gusto, tanto en colores como en estructura, añadiendo cualquier elemento que eches en falta. Mediante plugins, rellenando widgets de texto o de otro tipo y adaptando las áreas de widgets como prefieras.
Si eres un usuario avanzado, puedes realizar operaciones en el código, mediante el plugin Genesis Simple Hooks.
Además de eso, Framework Genesis para WordPress te garantiza un theme correctamente codificado, a nivel de seguridad, rendimiento y SEO.
Por lo tanto, ¿qué más se puede pedir?
Estaré atento a tus comentarios, ideas y sugerencias sobre este tema.
SiteGround es el hosting de Blogpocket ¡pruébalo!:
Deja una respuesta