Manual Básico del Framework Genesis para wordpress.

 

¿Qué es Framework y porque usar Genesis?

Aunque esta entrada la tengo dentro de la categoría de Theme de wordpress, en realidad, Genesis es un framework que funciona y se instala como theme para wordpress como una plantilla padre, la cual,  nunca trabajaremos con ella sino con sus temas hijos (child themes). Un framework es una capa, por llamarlo así, que contiene unos complementos, funciones y extensiones que por defecto wordpress no tiene, en resumen, el framework genesis lo que busca es poder optimizar el funcionamiento de wordpress sin necesidad de instalar themes que sobrecarguen con plugins y opciones que seguramente no necesitemos y que afecten al funcionamiento de nuestra página web.

Seguramente con el esquema que nos muestran los desarrolladores (Studiopress) en su página web lo veamos más claro.

Que es el framework genesis

¿Cómo instalo el framework genesis?

Para poder instalar el framework Genesis, lo debéis comprar y descargar es la página oficial de StudioPress este viene con un tema básico (child theme). Esto como mínimo, ya que tenemos muchas más opciones de child theme que son compatibles con Genesis  y que nos ayudaran a mejorar el aspecto visual de este framework, sus funciones y complementos.

Una vez descargado el archivo genesisx.x.x.zip (las x corresponden a la versión) lo instalamos en nuestro wordpress como si fuese un theme cualquiera desde Apariencia–>Temas.

Ahora cargamos el otro archivo genesis-sample.zip que es una copia exacta del anterior pero que nos servirá para hacer todas las modificaciones que queramos sin miedo a perderlas en el momento que necesitemos una actualización. Si hemos adquirido otro child theme más completo, pues instalamos ese y listo.

¿Cómo importar la demo de un theme de Genesis?

Si queremos que el theme que hemos elegido de Genesis sea igual que el que vemos en la demo necesitamos hacer unos pasos: 

  1. pulsamos en  sobre Herramientas–>importar–>Wordpress nos envía a una página donde tenemos que instalar este plugin de importación. Pulsamos en Instalar Ahora. una vez usado podemos desinstalarlo de la zona de plugins. Por último pulsamos en Activar plugin y empezar importación.
  2. Ahora pulsamos en Seleccionar archivo y buscamos el archivo xxxxxx.xml (Donde xxxxx es el nombre que recibe el archivo por parte del desarrollador)
  3. ¿Donde esta este archivo?
    Este archivo lo encontraremos en la carpeta XML que tendremos una vez descomprimimos el archivo del theme adquirido en nuestro Pc.
  4. Pulsamos en Subir archivo e importar nos indica que seleccionemos un usuario o creemos uno y que si queremos importar los archivos adjuntos (imágenes etc..) marcamos la casilla y pulsamos en Enviar 
    Si nos dice Todo hecho. ¡Pasalo bien! pues eso, a disfrutar.

Nota: Si el Theme tiene algunos plugins; como el de contacto, woocommerce u otro, tendrás que instalarlos para que sea la visualización exacta.

Nota 2: Para poder ver la página de inicio que muestra el theme en la demo, tendremos que ir a Ajustes–>lectura y en el apartado de Página frontal muestra  pulsaremos en una página estática y la página inicial y la página estática.

Nota 3: Crear el Menu

Configuraciones Básicas del Framework Genesis.

framework-genesis-basico

Cuando empezamos a trabajar con el framework Genesis nos dará la impresión que las configuraciones no son muy intuitivas, y más si estamos acostumbrados a trabajar con algún otro theme de los que os he comentado anteriormente que instalan una gran cantidad de plugin y opciones para que el usuario lo tenga fácil a la hora de configurarlo, esto sobrecargan el código de wordpress haciendo que nuestra página web cargue lenta y ya sabemos que esto no le gusta a Google o a cualquier otro buscador.

La idea de este Curso-Post es ir paso a paso con las configuraciones mas importantes y ver todas las opciones que nos ofrece el framework genesis.

Lo primero que debemos tener en cuenta es que la configuración de la maquetación de las página se hace desde los widgets, curioso, ya que hasta el momento lo habíamos hecho todo desde la misma página. Por ejemplo: todo los bloques de la home si los queremos cumplimentar lo haremos desde la zona de son widgets que automáticamente se crean dependiendo del child theme que hayamos instalado.

– ¿Donde elegir la configuración de las pagina o entradas por defecto?

Aunque la configuración de las páginas o entradas se puede cambiar desde estas, no esta de más configurar una plantillas por defecto. Esto lo haremos desde Genesis–>Default Layout lo único que tenemos que hacer es marcar nuestra elección y guardar los cambios desde Save Setting

– ¿Cómo poner un widget en la cabecera, al lado del logo?

Para poder colocar un menú, widget, imagen o cualquier texto en Html al lado de donde nos aparece el Titulo del Sitio y la descripción corta, las cuales podemos modificar en Ajustes –>Generales, nos dirigimos a Apariencia –>temas, aquí nos encontraremos un widget llamado Header Right,que funciona como cualquier otro widget, solo tenemos que añadir lo que deseemos y listo. En este caso vamos a poner un menú.

Paso 1.

Personalizacion de header rigth en el framework genesis

Visualización final.

configuracion-del-header-right-framework-genesis

– ¿Como activar un menu de navegación justo debajo de la cabecera del framework genesis?

Nos dirigimos a Ajustes–>Menús, seleccionamos el menú que queremos que aparezca  en la parte de abajo de la cabecera y seleccionamos Primary Navigation Menu, tambien podemos crear otro menu y ubicarlo justo debajo como un submenu marcando Secondary Navigation Menu.

Colocar menú principal

como-poner-menu-principal-framework-genesis

Colocar menú secundario

como-seleccionar-el-menu-secundario-framework-genesis

Resultado Final

resultado-menu-princiap-menu-secundario-genesis-framework

– ¿Cómo traducimos el framework genesis al castellano (Español)?

Nos descargamos el plugin Genesis Translation lo instalamos y listo, framework traducido.

– ¿Cómo Poner una imagen de logo en framework genesis base?

Primero tenemos que ir al menú de genesis en wordpress y pulsamos en Opciones del tema seleccionamos la zona de Header y seleccionamos la opción Logo en imagen. 

Ahora por ftp subimos la nueva imagen que se llamara logo.png y que reemplazara la que tiene el framework genesis por defecto en:

wp-content/themes/genesis-sample*/images/logo.png

* o como se llame el child theme

– ¿Que son los Hooks de framework genesis?

Los hooks son unos ganchos que están dispersos por wordpress los cuales los usamos para añadir o sustituir contenido como; texto, código imágenes, etc, en alguna zona de nuestra web.

Existen 2 tipos de hooks, los action hook que añaden contenido y los filter hook que sustituyen o filtran contenido.

La mejor forma de ver la ubicación y el nombre de estos hooks en nuestra página web es instalando el plugin Genesis Visual Hook Guideuna vez descargado e instalado veremos que en la página web, ubicado en la zona superior derecha de nuestra pantalla, aparecerá un menu llamado G Hook Guide el cual se compone de tres submenu:

  • Action Hooks: pulsando en el, nos muestra los en la página webs hooks en donde podemos añadir contenido.
  • Filter Hooks: pulsando en el, nos muestra los en la página webs hooks en donde podemos sustituir o quitar contenido.
  • Markup, pulsando en el, nos muestra el nombre de las Clases de Css (Class) que utiliza cada elemento de la página web.
  • Clear: pulsan en el, limpiamos la pantalla de los elementos de cualquiera de las anteriores acciones.

– ¿Que son los action hook y los filter hook?

Ya sabemos que los action hook nos deja añadir código y los filter hook nos permite quitar o sustituir el código ya existente. Pues bien, observemos en las gráficas cuales son cada uno para que empecemos a familiarizarnos con ellos.

Que son los action hook del framework genesis
que-son-los-Filter-hook-framework-genesis

Veamos un ejemplo (Si no sabéis código no os preocupéis, más adelante veremos como conseguir este código con un plugin que nos asiste para estos casos) de como insertar un action hook:

– Queremos mostrar un titulo justo debajo de los artículos en la página de inicio.

1. Buscamos la zona donde queremos introducir este título.

Para esto, activamos la visualización de los action Hook de nuestro plugin Genesis Visual Hook Guide, ahora vemos donde queremos poner ese título. Su hook se llama genesis_after_entry.

action-hook-genesis-framework

2. Ahora para poder insertar este código de forma sencilla, descargamos e instalamos el plugin Simple Hooks, lo seleccionamos, y en su panel de opciones buscamos algo relacionado con entry y luego localizamos una zona donde ponga genesis_after_entry e introducimos este código. Muy importante marca la opción de Execute PHP on this HooK, ya que el código que estamos introduciendo es PHP

 

<?php if (is_home() ){ echo ‘<center><b>Mis Primeras Líneas de codigo</b></center>’; } ?>

codigo en action hook framework genesis   Tambien se pueden ejecutar Shortcodes que podamos tener de algún plugin, lo único que debemos hacer es marcar la casilla Execute Shortcodes on this hook y poner el código.

– Otro ejemplo, ahora pondremos un filter hook.

Vamos a modificar el Titulo de las entradas de los post.

1. Como en el ejemplo anterior, seleccionamos G hook Guide pero ahora pulsamos en Filter hook, vemos que  donde ponía Hello World! ahora ha cambiado y nos muestra genesis_post_title_text, pues ya tenemos lo que queremos cambiar, ahora nos dirigimos al plugin ubicado en Genesis–>simple hooks y buscamos ese filter hook algo que tenga que ver con Title, en este caso dentro del Document Hooks tenemos genesis_title, aquí es donde ponemos el siguiente código.  

<?php

add_filter( ‘genesis_post_title_text’, ‘modificar_titulo’, 10, 3); function modificar_titulo(){ return ‘<h1>Este es mi nuevo Título</h1>’; }

?>

  Donde genesis_post_title_text es lo que nos muestra el plugin G hook Guide una vez activado el filter hooks y donde modificar_titulo es una variable que no hemos inventado para que ejecute la función (function)

codigo con filter hooks

 

– ¿Que son los Snippets de administración del framework genesis?

Los Snippets de administración son pequeños trozos de código que nos sirven para activar funcionabilidades o comportamientos dependiendo de nuestras necesidades. Descargar archivo functions.php con los mejores snippets de administración y más utilizados en el framework genesis. Las lineas de código que veremos a continuación nos permiten mostrar o quitar algunas funciones , esto es importante por si queremos que los usuraios de nuestro theme no tengan acceso en algunas funciones de configuración del framework genesis o jugar con las condicionales para que las páginas tengan el aspecto que queramos. Es importante saber que estas lineas de código se deben añadir en el archivo function.php de la instalación de wordpress y que están comentadas, es decir, que si quieres que realicen su función tenemos que eliminar las barras //    /* ————————————————— SNIPPETS DE ADMINISTRACION DEL FRAMEWORK GENESIS //* ————————————————— FORZAR LAYOUT /* El Layaout es la estructura de como se puede ver nuestras páginas o Post. Ej: un sidebar y contenido, 2 sidebar y un contenido en medio, etc*/ //add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_content_sidebar’ ); //add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_sidebar_content’ ); //add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_content_sidebar_sidebar’ ); //add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_sidebar_sidebar_content’ ); //add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_sidebar_content_sidebar’ ); //add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ ); //* ————————————————— ELIMINAR LOS LAYOUT DE FORMA DEFINITIVA //genesis_unregister_layout( ‘content-sidebar’ ); //genesis_unregister_layout( ‘sidebar-content’ ); //genesis_unregister_layout( ‘content-sidebar-sidebar’ ); //genesis_unregister_layout( ‘sidebar-sidebar-content’ ); //genesis_unregister_layout( ‘sidebar-content-sidebar’ ); //genesis_unregister_layout( ‘full-width-content’ ); //* ————————————————— QUITAR LOS LAYOUTS DE LAS LA OPCION DE LAS PLANTILLAS POR POST //remove_theme_support( ‘genesis-inpost-layouts’ ); //* ————————————————— QUITAR SEO DE LOS POST //remove_action( ‘admin_menu’, ‘genesis_add_inpost_seo_box’ ); //* ————————————————— QUITAR SEO //remove_theme_support( ‘genesis-seo-settings-menu’ ); //* ————————————————— QUITAR EL MENÚ DE GENESIS //remove_theme_support( ‘genesis-admin-menu’ ); //* ————————————————— QUITAR LOS WIDGETS QUE VIENE POR DEFECTO //add_action( ‘widgets_init’, ‘quitar_widgets’, 20 ); //function quitar_widgets() { // unregister_widget( ‘Genesis_Featured_Page’ ); // unregister_widget( ‘Genesis_Featured_Post’ ); // unregister_widget( ‘Genesis_User_Profile_Widget’ ); //} //* ————————————————— QUITAR LINK DEL MENÚ SI NO ES EL ADMINISTRADOR //* Muy Interesante si queremos que un usuario que no es administrador pueda tocar las opciones de configuración del framework genesis //if ( !current_user_can( ‘manage_options’ ) ) { // remove_theme_support( ‘genesis-admin-menu’ ); //}  

– Opciones de código para reprogramar el Loop.

Los Post están compuestos por varias partes como el título, la meta información (fecha, nombre del autor comentarios, etc…), la imagen destacada, el contenido, y la meta información del pie. todo esto lo podemos quitar o modificar en función de lo que queramos mostrar y usar condicionales para mostratlo solo en dondequeramos (la home, entradas, categorías, etc). Las lineas de código que veremos a continuación las tenemos que pegar en el archivo function php y descomentar (Quitando las barras //) las que vamos a utilizar. Estas lineas de código son e complemento perfecto para el plugin Genesis Grid que nos permite maquetar la visualización de los post en nuestra web. Descargar el archivo function.php sobre la reprogramación de post. //* ——————OPCIONES PARA RE-PROGRAMAR EL LOOP DE LAS ENTRADAS DE LOS POST Y LAS PAGINAS //* ————————————————— ANTES DEL POST //* Quitar la información “meta” //remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 12 ); //* Quitar la información “meta” en la home //add_action( ‘genesis_before_entry’, ‘quitar_informacion_antes’ ); function quitar_informacion_antes() { if ( is_home() ) { remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 12 ); } } //* Personalizar la información “meta” //add_filter( ‘genesis_post_info’, ‘filtro_informacion’ ); function filtro_informacion($post_info) { $post_info = ‘[post_date] by [post_author_posts_link] [post_comments] [post_edit]’; return $post_info; } //* Quitar el título //remove_action( ‘genesis_entry_header’, ‘genesis_do_post_title’ ); //* ————————————————— DENTRO DEL POST //* Quitar contenido del post //remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’ ); //* Quitar la imagen destacada //remove_action( ‘genesis_entry_content’, ‘genesis_do_post_image’, 8 ); //* ————————————————— DESPUÉS DEL POST //* Añadir navegación de posts //add_action( ‘genesis_entry_footer’, ‘genesis_prev_next_post_nav’ ); //* Quitar la información después del post //remove_action( ‘genesis_entry_footer’, ‘genesis_post_meta’ ); //* Quitar la información después del post en la home //add_action( ‘genesis_before_entry’, ‘quitar_informacion’ ); function quitar_informacion() { if ( is_home() ) { remove_action( ‘genesis_entry_footer’, ‘genesis_post_meta’ ); } } //* Modificar la información después del post //add_filter( ‘genesis_post_meta’, ‘modificar_informacion_pie_entrada’ ); function modificar_informacion_pie_entrada($post_meta) { $post_meta = ‘[post_categories] [post_tags]’; return $post_meta; }

 – Plugin Genesis Extender, el super plugin para el framework genesis que nos da multiples de opciones.

Este plugin es muy recomndable para las personas que no saben mucho de código y necesitan personalizar el Framework genesis más allá de las opciones que nos brinda por defecto, aunque es de pago vale la pena.  

¿Te he ayudado a solucionar tu problema?

¿Te gustaría ayudarme a seguir con mi trabajo?
Si pulsas en el anuncio que verás abajo, aunque no te interese,estás aportando con aproximadamente 0,05€ que me pagará Google. A ti no te costará nada realizar ese pequeño clic. Parece poco pero me ayuda mucho a poder seguir escribiendo artículos de buena calidad y a pagar mis cosillas…

¡¡¡Muchas Gracias!!!

5 Comentarios

  1. Paco Castro 20 enero, 2015 en 11:07- Responder

    Muy interesante tu blog.
    He visto que utilizas la plantilla Avada para tu blog. No es así?
    Estoy trabajando con dicha plantilla pero no logro aumentar el tamaño final desde las opciones del tema.
    Veo que tu la has ampliado. Lo has hecho con CSS?
    Muchas gracias

    • Joaquin 23 enero, 2015 en 18:28- Responder

      Hola Paco,

      si, actualmente el Blog lo tengo montado con avada pero con respecto a tu pregunta, no entiendo a que te refieres con aumentar el tamaño final dame un poco mas de pistas…

      Un saludo

  2. Alexis 28 marzo, 2016 en 16:25- Responder

    Gracias por tu post. me ayudó a solucionar una cosa con mi blog.

    • Joaquin 28 marzo, 2016 en 19:01- Responder

      De nada Alexis, me alegra mucho que te haya ayudado.

      Un saludo,

      Joaquín

  3. Manu 18 octubre, 2016 en 8:11- Responder

    Hola Joaquín,

    Me diste el tip para hacer algo que quería con mi blog con genesis ¡gracias!

    Quería preguntarte también, por favor, si sabes cómo colocar el título de un post debajo del contenido.

    Gracias.

    Un saludo.

Déjenos su comentario