Curso de Genesis - Pablo Monteserín

En este video comparo los pros y contras de las plantillas Genesis con otras muchas plantillas de pago.

El video es una respuesta al siguiente correo:

Este es un tema que la verdad me tiene la mente vuelta un ocho. He leído de muchos blogger que lo mejor en estos casos es usar Génesis, pero otro blogger (que me pareció mas sincero) dijo que si no dominas mucho el diseño no te metas con Génesis ya que por ser una plataforma un poco mas avanzada resulta difícil su dominio para novatos como yo.

Por qué escojo la plantilla Genesis

Genesis en una gran herramienta si no le tienes miedo al código. No es que sean plantillas difícil de usar, de hecho, si te desenvuelves con cierta soltura con el código, serán mucho más fáciles de modificar que otras plantillas de Theme Forest. El problema que tienen las plantillas de Genesis es también su mayor virtud. La administración de la plantilla se hace, mayormente, utilizando código de programación. Esto hace que la plantilla sea mucho más ligera (nunca ví ninguna de más de 1mb) y que cargue más rápido (la información de la plantilla se coge directamente del código fuente, en lugar de tener que hacer consultas adicionales a la base de datos para capturar las instrucciones salvadas mediante el asistente visual)

Otro punto positivo de las plantillas Genesis es, paradógicamente, su falta de funcionalidades. ¿Por qué este es un punto positivo?. Porque si las funcionalidades (testimonios, calendarios, slider, etc.) están incrustadas en la plantilla. Si un día queremos cambiar de plantilla… perderemos todas estas funcionalidedes!. Sin embargo, si la plantilla no tiene esas funcionalidedes, las habremos insertado mediante el uso de plugins, y por tanto, al cambiar la plantilla, los plugins instalados permanecerán.

Ventajas de Genesis Framework

Está muy optimizado para el SEO.
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.

¿Qué plantilla de Genesis escojo?

Dentro del ecosistema de plantillas Genesis hay una gran variedad de opciones. Pêrsonalmente, yo siempre utilizo La plantilla Genesis Sample. Es una plantilla con un diseño muy neutro en blanco y negro, pero en mi caso es la mejor opción ya que una vez instalada, la modificaré para implementar el diseño que necesite.

Para poder usar la plantilla Genesis Sample, debo tener antes Genesis FrameWork instalado. Eso es indispensable cuando queremos usar cualquier plantilla de Genesis.

La razón por la que para usar Genesis tenemos que tener dos plantillas instaladas (la plantilla seleccionada y Genesis Framewoek) es que cada vez que instalamos una plantilla su código fuente se sobreescribe, perdiendo los cambios que pudiesemos haber hecho. Por ello, mientras que Genesis Framework renovará su código en cada actualización, la otra plantilla no se actualizará nunca, y de esta forma no perderemos los cambios que hagamos en su código fuente.

Plantillas Hijas o Genesis Child Themes

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

Menú 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 en el child theme de Genesis

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ágina

remove_action( 'genesis_site_title', 'genesis_seo_site_title' );

Cambiar el footer

remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', function(){
    echo '<h5 style="color:red">FIN</h5>';
});

Eliminar el footer

remove_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 área de Widgets del footer

remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_footer', 'genesis_footer_widget_areas' );

Poner foto después de cabecera

add_action( 'genesis_header_right', function(){
    echo '<img src="'.get_bloginfo( 'stylesheet_directory' ).'/images/foto.png"/>';
});

Reposicionar el menú primario

remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 12 );

Eliminar autor, fecha, comentarios del post

add_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 more

add_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

A continuación verás un listado de hooks de Genesis que puedes utilizar para modificar el contenido de una web que utilice esta plantilla.

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' );

Programación de Widgets para WordPress

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%;
    }

}

Accede a tu cuenta

Por qué escojo la plantilla Genesis

Ventajas de Genesis Framework

¿Qué plantilla de Genesis escojo?

Plantillas Hijas o Genesis Child Themes

Ejercicio – instalamos la plantilla padre y las 2 hijas

Menú Genesis

Modificaciones sencillas en el child theme de Genesis

Posiciones para actions

Algunas modificaciones sencillas

front-page.php

Remove all actions

Programación de Widgets para WordPress

Añadir clases a los elementos de la plantilla

Elementos disponibles para añadir clases:

Añadir Bootstrap a la plantilla de Genesis

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

Convertir una botonera no-responsive en responsive

Footer