Genesis Framework

¿Qué es Genesis?

Esquema genesis

¿Por qué usarlo?

  • Porque está muy optimizado para el SEO.
  • Porque está muy optimizado para reducir los tiempos de carga de la página.
  • Es fácil de administrar.
  • Es fácil de actualizar.
  • Todos los themes son responsive.
  • Buena relación calidad/precio.
  • Tiene una gran comunidad detrás.

Génesis es muy potente y rápido, pero no incorpora ningún plugin de maquetación visual.

Descarga e instalación

http://www.studiopress.com/

Este framework funciona como una plantilla, por tanto, lo instalaremos como tal.

Esta plantilla será el tema padre y en principio nunca vamos a trabajar con ella, sino con las plantillas hijo que instalaremos a posteriori.

Plantillas hijas

Tienes toda la funcionalidad de Genesis framework.

No se actualizan, con lo que no perdemos los cambios que les hagamos.

Podemos hacer modificaciones en una plantilla hija, pero no el Genesis Framework.

Ejercicio – instalamos la plantilla padre y las 2 hijas

Dejamos activa la plantilla hija sample.

Menu Genesis

  • Information
    Notify pablomonteserin@pablomonteserin.com when updates are available.
  • Default Layout
  • Allow Comments
    Genesis permite configurar dónde podemos ver los comentarios. Sin genesis puede ser necesario instalar plugin.

Modificaciones sencillas

A partir de ahora, modificaremos la plantilla Genesis Sample.

Todas estas modificaciones deben realizarse en el fichero wp-content/themes/mytheme/functions.php.

Posiciones para actions

Genesis Snippets: http://my.studiopress.com/snippets/

Cada vez que que quiero eliminar una posición buscaré en google:
remove [posición que me indica el plugin]

Algunas modificaciones sencillas

Eliminar el título de la páginaremove_action( 'genesis_site_title', 'genesis_seo_site_title' );
Cambiar el footerremove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', function(){
    echo '<h5 style="color:red">FIN</h5>';
});
Eliminar el footerremove_action('genesis_footer', 'genesis_do_footer');
remove_action('genesis_footer', 'genesis_footer_markup_open', 5);
remove_action('genesis_footer', 'genesis_footer_markup_close', 15);
Recolocar el area de Widgets del footerremove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_footer', 'genesis_footer_widget_areas' );
Poner foto después de cabeceraadd_action( 'genesis_header_right', function(){
    echo '<img src="'.get_bloginfo( 'stylesheet_directory' ).'/images/foto.png"/>';
});
Reposicionar el menú primarioremove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 12 );
Eliminar autor, fecha, comentarios del postadd_filter('genesis_post_info', function() {
    // $post_info = '[post_date] [post_comments] [post_edit]';
    $post_info = ''; //Puedo cambiar la línea anterior por esta otra
    return $post_info;
});
Eliminar categorías, tags categorías, tags:remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
Cambiar el favicon
add_filter( 'genesis_pre_load_favicon', function() {
  return get_stylesheet_directory_uri().'/miCara.jpg';
});
Eliminar zona de widgets en una página concreta
 add_action( 'genesis_before', function(){
    if( is_front_page() ){
        remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
    }
 });
Personalizar el texto de los botones de read moreadd_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
    return '<a class="more-link" href="' . get_permalink() . '">'.get_the_title().'Your Read More Link Text</a>';
}

front-page.php

Si tenemos una plantilla front-page.php y le indicamos a Wordpress que cargue una página estática en lugar de un blog, irá a buscar directamente dicho archivo.

Si queremos evitar este comportamiento, le pondremos otro nombre.

<?php
/**
 * Template Name: cursos Template
 *
 * @package WordPress
 * @subpackage monteserin
 * @since monteserin 1.0
 */

...

genesis();
?>

Remove all actions

remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
remove_action( 'genesis_header', 'genesis_do_nav', 12 );
remove_action( 'genesis_meta', 'child_stylesheet_cdn' );
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
remove_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );
remove_action('genesis_header', 'cursos_nav');
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

Widgets

functions.php//Registrar zona de widget
add_action( 'widgets_init', function(){
    genesis_register_sidebar( array(
    'id'            =>'zona-bajo-cabecera',
    'name'      =>__('Bajo Cabecera','monteserin'),
    'description'   =>__('Este es el widget que aparecerá debajo de tu cabecera','monteserin'),
    )); 
});

add_action('genesis_before_header',function() {
    genesis_widget_area ('zona-bajo-cabecera', array(
        'before' => '<div class="headercontainer"><div class="headerinnercontent">',
        'after' => '</div></div>',
        ));
},1);

Añadir clases a los elementos de la plantilla

add_filter( 'genesis_attr_title-area', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' col-4';
    return $attributes;
});

Elementos disponibles para añadir clases:

genesis_attr_head
genesis_attr_body
genesis_attr_site-header
genesis_attr_site-title
genesis_attr_site-description
genesis_attr_header-widget-area
genesis_attr_breadcrumb
genesis_attr_breadcrumb-link-wrap
genesis_attr_search-form
genesis_attr_nav-primary
genesis_attr_nav-secondary
genesis_attr_nav-header
genesis_attr_nav-link-wrap
genesis_attr_nav-link
genesis_attr_structural-wrap
genesis_attr_content
genesis_attr_taxonomy-archive-description
genesis_attr_author-archive-description
genesis_attr_cpt-archive-description
genesis_attr_date-archive-description
genesis_attr_blog-template-description
genesis_attr_posts-page-description
genesis_attr_entry
genesis_attr_entry-image
genesis_attr_entry-image-widget
genesis_attr_entry-image-grid-loop
genesis_attr_entry-author
genesis_attr_entry-author-link
genesis_attr_entry-author-name
genesis_attr_entry-time
genesis_attr_entry-modified-time
genesis_attr_entry-title
genesis_attr_entry-content
genesis_attr_entry-meta-before-content
genesis_attr_entry-meta-after-content
genesis_attr_archive-pagination
genesis_attr_entry-pagination
genesis_attr_adjacent-entry-pagination
genesis_attr_comments-pagination
genesis_attr_entry-comments
genesis_attr_comment
genesis_attr_comment-author
genesis_attr_comment-author-link
genesis_attr_comment-time
genesis_attr_comment-time-link
genesis_attr_comment-content
genesis_attr_author-box
genesis_attr_sidebar-primary
genesis_attr_sidebar-secondary
genesis_attr_site-footer
genesis_attr_site-inner
genesis_attr_content-sidebar-wrap
genesis_attr_nav-footer
genesis_attr_jumbotron-header
genesis_attr_widget

Añadir bootstrap a la plantilla de Genesis

functions.phpadd_filter( 'genesis_attr_site-inner', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' fluid-container';
	  return $attributes;
  } );
  
  add_filter( 'genesis_attr_site-header', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' justify-content-between position-relative row';
	  return $attributes;
  } );

  add_filter( 'genesis_attr_title-area', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' col-4';
	  return $attributes;
  } );
  
  add_filter( 'genesis_attr_nav-primary', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' col-lg-8 collapse navbar-collapse';
	$attributes['id']= 'navbarSupportedContent';
	  return $attributes;
  } );

  add_filter( 'genesis_attr_site-footer', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' ppppppppppppp';
	  return $attributes;
  } );


  add_filter( 'genesis_attr_footer-widgets', function( $attributes ) {
	$attributes['class'] = $attributes['class']. ' container-fluid';
	  return $attributes;
  } );


  add_action( 'genesis_before_header', function(){echo '<div  class="fluid-container navbar navbar-expand-lg navbar-light bg-light"><div class="container"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	  <span class="navbar-toggler-icon"></span>
	</button>';});
  add_action( 'genesis_after_header', function(){echo '</div></div>';});

  function be_primary_menu_args( $args ) {
	if( 'primary' == $args['theme_location'] ) {
	  $args['depth'] = 1;
	}
	$args['menu_class'].= ' navbar-nav';
	//var_dump($args);
	return $args;
  }
  add_filter( 'wp_nav_menu_args', 'be_primary_menu_args' );
genesis.scss.site-header {
  padding: 7px;
  width: 100%;

  .navbar-collapse {
  
    .menu-primary {
      justify-content: flex-end;

      a {
        display: block;
        text-align: right;
        color: black;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.2);
      }
      @include media-breakpoint-up(lg) {
        position: static;
        width: 100%;
      }
    }
  }
}

.navbar-toggler {
  position: absolute;
  top: 20px;
  right: 35px;
  z-index: 100;
}

.footer-widgets {
  background: $black;
  padding: 20px;
  .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;

    @include media-breakpoint-up(xs) {
      max-width: 540px;
    }

    @include media-breakpoint-up(md) {
      max-width: 720px;
      
      .footer-widgets-2{
        text-align: center;
      }

      .footer-widgets-3{
        text-align: right;
      }
    }

    @include media-breakpoint-up(lg) {
      max-width: 960px;
    }

    @include media-breakpoint-up(xl) {
      max-width: 1140px;
    }

    a {
      color: white;
      text-decoration: none;
    }
  }
}

Mostrar los resultados de búsqueda incluyendo sólo texto, no diseño o fotos

functions.phpadd_action( 'genesis_before_loop', 'sk_excerpts_search_page' );
function sk_excerpts_search_page() {
  if ( is_search() ) {
        add_filter( 'genesis_pre_get_option_content_archive', 'sk_show_excerpts' );
    }
}

function sk_show_excerpts() {
    return 'excerpts';
}

Convertir una botonera no-responsive en responsive

functions.php<?php
add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );
function load_custom_scripts() {
    wp_enqueue_script( 'news-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_style( 'dashicons' );
}
 responsive-menu.js
jQuery(function( $ ){

    $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

    $(".responsive-menu-icon").click(function(){
        $(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
    });

    $(window).resize(function(){
        if(window.innerWidth > 600) {
            $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
            $(".responsive-menu > .menu-item").removeClass("menu-open");
        }
    });

    $(".responsive-menu > .menu-item").click(function(event){
        if (event.target !== this)
        return;
            $(this).find(".sub-menu:first").slideToggle(function() {
            $(this).parent().toggleClass("menu-open");
        });
    });

});
style.css
.responsive-menu-icon {
/*border-bottom: 1px solid #e3e3e3;*/
float:right; /*Quitar este estilo si quiero que la hamburguesa esté centrada*/
cursor: pointer;
display: none;
margin-bottom: -1px;
text-align: center;
}
.site-header .responsive-menu-icon {
border-bottom: none;
}
.responsive-menu-icon::before {
color: #000;
content: "\f333";
display: inline-block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
}
.nav-primary .responsive-menu-icon::before {
color: #fff;
}
@media only screen and (max-width: 600px) {
/* Estos estilos situarán la hamburguesa en la esquina superior derecha
.nav-primary {
position: absolute;
top:0;
right: 0
}
*/
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}
.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}
.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}
.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}
.genesis-nav-menu.responsive-menu li.current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
background: none;
border: none;
color: #000;
display: block;
line-height: 1;
padding: 20px;
text-transform: none;
}
.nav-primary .genesis-nav-menu.responsive-menu li.current-menu-item > a,
.nav-primary .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
.nav-primary .genesis-nav-menu.responsive-menu li a,
.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
color: #fff;
}
.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}
.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}
.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f132";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 18px 20px;
right: 0;
text-align: right;
z-index: 9999;
}
.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
color: #fff;
}
.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f460";
}
.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.05);
border: none;
left: auto;
opacity: 1;
position: relative;
-moz-transition:    opacity .4s ease-in-out;
-ms-transition:     opacity .4s ease-in-out;
-o-transition:      opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition:         opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}
.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
margin: 0;
}
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 20px;
position: relative;
text-transform: none;
width: 100%;
}
}

Problemas con el blog de Genesis

El blog de Genesis no muestra los excerpts ni los títulos de las entradas. Esto ocurre en algunos temas antiguos y en Genesis Sample. La solución más sencilla consiste en renombrear el fichero home.php del child-theme y llamarlo front-page.php

<

Algunos plugins propios para génesis

  • Genesis login modal box. Debemos especificar la página a la que iremos cuando nos delogueemos, o de lo contrario tendremos un error. Para ello iremos a Genesis -> Login modal box -> Plugin settings -> / Si queremos añadir los enlaces de registro y recuperar contraseña, editaremos el siguiente fichero:
    /wp-content/plugins/wpstudio-login-modal-box/inc/glmb-frontend.php echo '<div class="login">'; $args = array( 'echo' => true, 'redirect' => $login_url, 'form_id' => 'login', 'label_username' => __( 'Username' ), 'label_password' => __( 'Password' ), 'label_remember' => __( 'Remember Me' ), 'label_log_in' => __( 'Log In' ), 'id_username' => 'log', 'id_password' => 'pwd', 'id_remember' => 'rememberme', 'id_submit' => 'wp-submit', 'remember' => true, 'value_username' => '', 'value_remember' => false ); wp_login_form( $args );  //Añadimos el siguiente código echo '<div>'; echo '<br>'; echo '<br>'; echo '<a href="' . wp_lostpassword_url() . '">Olvidé mi contraseña</a>'; echo '<br>'; echo '<a href="#">Registrarme</a>'; echo '</div>'; echo '</div>';
  • genesis sidebar: otra forma de hacer visible uno o varios widgets en páginas concretas.
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!