1. ¿Qué es Genesis?
  2. Plantillas hijas
  3. Modificaciones sencillas
  4. Frontpage
    1. Remove all actions
  5. Widgets
  6. No mostrar la maquetación de las páginas en los resultados de búsqueda.
  7. Convertir una botonera no-responsive en responsive

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

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 mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?