Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Cómo configurar un theme de Framework Genesis para WordPress

Share to social media

COMO-CONFIGURAR-GENESIS Cómo configurar un theme de Framework Genesis para WordPress

En este artículo veremos cómo se configura un theme de Framework Genesis para WordPress.

genesis-infografia Cómo configurar 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.

Para más detalles sobre la instalación de themes de WordPress, lee La guía del recién llegado: themes de WordPress.

Cómo se instala un theme de Framework Genesis para WordPress

blog-dra-amalia-arce Cómo configurar 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.
(1) Añadir el código de Analytic en el apartado «genesis_before Hook» en «This hook executes immediately after the opening <body> tag.»

¿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).

(2) Para que no salga el favicon por defecto de Genesis, hay que ve ir a “Genesis > Simple Hooks” y en el apartado “WorPress Hooks”, asegu?rate de que la casilla “Unhook genesis_load_favicon() function from this hook?”, que encontrara?s dentro del espacio dedicado a “wp_head Hook”, se encuentre activada. Guarda los cambios haciendo clic en el boto?n “Save changes”. Después, acude a “Genesis > Opciones del tema” e incluye la sentencia “” dentro del espacio donde dice “Header script”, en el apartado “Scripts de Encabezado y Pie de Pa?gina”. Para terminar, haz clic en “Guardar Opciones”.

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.

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.

Esta es la forma habitual de configurar una plantilla de Genesis. En alguno casos, el autor de proporcionará un mecanismo para instalar automáticamente los plugins necesarios o, incluso, la creación de todos los widgets a través del plugin Import/Export Widgets. Consulta la documentación del theme en concreto antes de empezar a configurar un theme de Genesis.

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

outreach-1-1 Cómo configurar un theme de Framework Genesis para WordPress

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

outreach-2-1 Cómo configurar un theme de Framework Genesis para WordPress

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

outreach-3-1 Cómo configurar un theme de Framework Genesis para WordPress

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

outreach-4-1 Cómo configurar un theme de Framework Genesis para WordPress

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

outreach-5-1 Cómo configurar un theme de Framework Genesis para WordPress

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».

outreach-7-1 Cómo configurar un theme de Framework Genesis para WordPress

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:
  • Background Color:
  • 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».

outreach-8-1 Cómo configurar un theme de Framework Genesis para WordPress

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.

outreach-12-1 Cómo configurar un theme de Framework Genesis para WordPress

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:

outreach-13-1 Cómo configurar un theme de Framework Genesis para WordPress

Y la de la derecha:
outreach-14-1 Cómo configurar un theme de Framework Genesis para WordPress

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:

outreach-15-1 Cómo configurar un theme de Framework Genesis para WordPress

Página destacada:

outreach-16-1 Cómo configurar un theme de Framework Genesis para WordPress

Genesis eNews Extended (a partir de plugin):

outreach-17-1 Cómo configurar un theme de Framework Genesis para WordPress

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:

outreach-18-1 Cómo configurar un theme de Framework Genesis para WordPress

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.

outreach-19-1 Cómo configurar un theme de Framework Genesis para WordPress

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.

¿Estás buscando hosting?
SiteGround es el hosting de Blogpocket ¡pruébalo!:SITEGROUND-EL-HOSTING-QUE-ME-GUSTA Cómo configurar un theme de Framework Genesis para WordPress
Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=48213) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

5 respuestas a «Cómo configurar un theme de Framework Genesis para WordPress»

  1. Carlos

    Hola Antonio, he leído detenidamente el post, que he encontrado muy bueno y sobretodo útil. Estoy a punto de adquirir un tema de studiopress, y dudo entre el Daily Dish Pro Theme y el Metro pro. Uno de los aspectos que mas me preocupa es si en estos temas es posible que el logo del blog (o sea el título o cabecera que yo quiera ponerle) ocupe todo el ancho de la página. ¿Sabes si es posible? Gracias y felicidades por el blog y la info!

    1. Hola Carlos, me parece que con la personalización estándar, no es posible. Por lo menos en los themes que yo he manejado. Desconoczco esos que citas. En general, en Genesis, no es posible poner el logo en todo el ancho. Un saludo :))

    2. Jesus

      Buenas , he comprado génesis y el daily, sabes como se personaliza con el tema puesto? Me sale personalizar desde cero y es un caos ,gracias

      1. Si has comprado el theme en studiopress.com tienes acceso a la documentación para personalizarlo. Un saludo.

  2. Carlos

    Ok Antonio, gracias por tu rapida respuesta, saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido