Como anticipamos hace unas semanas, algunos de los tutoriales dedicados al tema gratuito Zerif Lite, de ThemeIsle, han quedado desactualizados para la nueva versión que se descarga del repositorio de WordPress. Aunque varios ya han sido ajustados para que apliquen en lo posible a ambas versiones, este que es el más complicado había quedado pendiente y requería una nueva entrada, por su extensión.

En este tutorial, vamos a aprender a crear una sección personalizada nueva para la página frontal, que llamaremos “Sección nueva”.

Podrá cambiar esta denominación al título que mejor se ajuste a sus necesidades, pero para estas instrucciones, simplemente recrearemos la sección “Características” que ya existe, y la colocaremos a continuación.

Paso 1:

En primer lugar, por favor asegúrese de que está usando un tema hijo de Zerif. Si ya tiene creado el tema hijo, salte al Paso 2.

La manera recomendada de crear un tema hijo para este tema es la siguiente:

Cree una carpeta en /wp-content/themes/ denominada /zerif-child/. Cree un archivo nuevo en un editor de texto (por ejemplo, Notepad++), con el nombre functions.php. Copie el siguiente código en este archivo y guárdelo en la carpeta /zerif-child/:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 99);
function child_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ));
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}
?>

Cree otro archivo nuevo en la carpeta /zerif-child/ con el nombre style.css y pegue el siguiente código:

/*
Theme Name:     Zerif Hijo
Theme URI:      https://wordpress.org/themes/zerif-lite/
Description:    Tema hijo de Zerif Lite, por ThemeIsle.
Author:         Caribdis.Net
Author URI:     https://caribdis.net/ 
Template:       zerif-lite
Version:        1.0
License:        GNU General Public License v2
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
*/

Podrá editar el nombre del tema, la descripción, el autor, la versión y las URI de acuerdo con sus necesidades. Solo asegúrese de que Template coincide con el nombre de la carpeta del tema padre.

Por último, cree un archivo en la carpeta /zerif-child/ con el nombre custom.css (que se usará en caso de aplicar estilos personalizados).

Y como nunca está de más recordarlo, una vez creado, activar el tema hijo.

Paso 2:

Segundo, en la carpeta del tema hijo, cree una carpeta con el nombre /sections/. En esa carpeta, cree un archivo nuevo con el nombre new_section.php. Este será el archivo que mostrará el contenido para esta sección. Como ya mencionamos, para este ejemplo simplemente tomaremos como referencia la sección “Características”, por lo cual usaremos el mismo código HTML del archivo our_focus.php del tema padre. Por el momento, lo dejaremos como está.

Paso 3:

Aquí tendremos que añadir la sección nueva en la página frontal. Duplicaremos la sección “Nuestro enfoque”.

Copiamos el archivo content-frontpage.php a la carpeta del tema hijo y lo editamos de la siguiente manera:

Al final de esta porción de código:

    /* OUR FOCUS SECTION */
    $zerif_ourfocus_show = get_theme_mod('zerif_ourfocus_show');
    if( isset($zerif_ourfocus_show) && $zerif_ourfocus_show != 1 ):
    zerif_before_our_focus_trigger();
        get_template_part( 'sections/our_focus' );
    zerif_after_our_focus_trigger();
    endif;

Añadimos esto:

    /* SECCIÓN NUEVA */
    $zerif_newsection_show = get_theme_mod('zerif_newsection_show');
    if( isset($zerif_newsection_show) && $zerif_newsection_show != 1 ):
    get_template_part( 'sections/new_section' );
    endif;

De acuerdo con la posición donde queremos insertar la nueva sección, buscaremos el código encabezado por el título de la sección correspondiente. Por ejemplo, si queremos la nueva sección antes de Quiénes somos, pegaremos el código de /* SECCIÓN NUEVA */ justo al final del código encabezado por /* RIBBON WITH BOTTOM BUTTON */ y justo antes del código encabezado por /* ABOUT US */.

Paso 4:

En este punto, no se ve nada diferente, porque no hemos añadido la nueva sección al Personalizador. Este es el siguiente paso.

Ahora tendremos que abrir el archivo functions.php del tema hijo y añadir lo siguiente, antes del cierre de la etiqueta php ?> (si lo hubiere):

/*******************************************/
/*************  NUEVA SECCIÓN  *************/
/*******************************************/
function caribdis_customizer( $wp_customize ) {
        $wp_customize->add_panel( 'panel_newsection', array(
            'priority' => 32,
            'capability' => 'edit_theme_options',
            'theme_supports' => '',
            'title' => __( 'Nueva Sección', 'zerif-lite' )
        ));
        $wp_customize->add_section( 'zerif_newsection_section' , array(
            'title'       => __( 'Contenido', 'zerif-lite' ),
            'priority'    => 1,
            'panel'       => 'panel_newsection',
            'description' => __( 'El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.', 'zerif-lite' )
        ));
        /* show/hide */
        $wp_customize->add_setting( 'zerif_newsection_show', array('sanitize_callback' => 'caribdis_sanitize_customizer'));
        $wp_customize->add_control(
            'zerif_newsection_show',
            array(
            'type' => 'checkbox',
            'label' => __('¿Ocultar nueva sección?','zerif-lite'),
            'section' => 'zerif_newsection_section',
            'priority'    => 1,
            )
        );
        /* new_section title */
        $wp_customize->add_setting( 'zerif_newsection_title', array('sanitize_callback' => 'caribdis_sanitize_customizer','default' => __('NUEVA SECCIÓN','zerif-lite')));
                
        $wp_customize->add_control( 'zerif_newsection_title', array(
            'label'    => __( 'Title', 'zerif-lite' ),
            'section'  => 'zerif_newsection_section',
            'settings' => 'zerif_newsection_title',
            'priority'    => 2,
        ));
        /* new_section subtitle */
        $wp_customize->add_setting( 'zerif_newsection_subtitle', array('sanitize_callback' => 'caribdis_sanitize_customizer','default' => __('Escriba la descripción de esta sección aquí.','zerif-lite')));
        $wp_customize->add_control( 'zerif_newsection_subtitle', array(
            'label'    => __( 'Subtítulo de la nueva sección', 'zerif-lite' ),
            'section'  => 'zerif_newsection_section',
            'settings' => 'zerif_newsection_subtitle',
            'priority'    => 3,
        ));
    }
    
add_action( 'customize_register', 'caribdis_customizer' );

function caribdis_sanitize_customizer( $input ) {
    return wp_kses_post( force_balance_tags( $input ) );
}

function caribdis_sanitize_checkbox( $input ) {
    if ( $input == 1 ) {
        return 1;
    } else {
        return '';
    }
}

function new_section_widgets() {
    register_sidebar( array(
        'name' => __( 'Barra lateral de nueva sección', 'zerif-lite' ),
        'id' => 'new-section-sidebar',
        'description' => __( 'Widgets para la nueva sección', 'zerif-lite' ),
        'before_widget' => '<div class="col-lg-3"><aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside></div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}

add_action( 'widgets_init', 'new_section_widgets' );

function zerif_newsection_header_title_function() {
    $zerif_newsection_title_default = get_theme_mod( 'zerif_newsection_title' );
    if( ! empty ( $zerif_newsection_title_default ) ) {
        $zerif_newsection_title = get_theme_mod( 'zerif_newsection_title_2', $zerif_newsection_title_default );
    } elseif ( current_user_can( 'edit_theme_options' ) ) {
        $zerif_newsection_title = get_theme_mod ( 'zerif_newsection_title_2', sprintf( '<a href="%1$s" class="zerif-default-links">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=zerif_newsection_title' ) ), __( 'Nueva sección','zerif-lite' ) ) );
    } else {
        $zerif_newsection_title = get_theme_mod ( 'zerif_newsection_title_2' );
    }
    if( !empty($zerif_newsection_title) ):
        echo '<h2 class="dark-text">'.wp_kses_post( $zerif_newsection_title ).'</h2>';
    elseif ( is_customize_preview() ):
        echo '<h2 class="dark-text zerif_hidden_if_not_customizer"></h2>';
    endif;
}

function zerif_newsection_header_subtitle_function() {
    if ( current_user_can( 'edit_theme_options' ) ) {
        $zerif_newsection_subtitle = get_theme_mod( 'zerif_newsection_subtitle', sprintf( __( 'Change this subtitle in %s','zerif-lite' ), sprintf( '<a href="%1$s" class="zerif-default-links">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=zerif_newsection_subtitle' ) ), __( 'Sección Nueva','zerif-lite' ) ) ) );
    } else {
        $zerif_newsection_subtitle = get_theme_mod( 'zerif_newsection_subtitle' );
    }
    if( !empty($zerif_newsection_subtitle) ):
        echo '<div class="section-legend">'.wp_kses_post( $zerif_newsection_subtitle ).'</div>';
    elseif ( is_customize_preview() ):
        echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
    endif;
}

add_action( 'zerif_newsection_header_title', 'zerif_newsection_header_title_function' );
add_action( 'zerif_newsection_header_subtitle', 'zerif_newsection_header_subtitle_function' );
    
function zerif_newsection_header_title_trigger() {
    do_action( 'zerif_newsection_header_title' );
}

function zerif_newsection_header_subtitle_trigger() {
    do_action( 'zerif_newsection_header_subtitle' );
}

Ahora sí veremos la nueva sección en el Personalizador:

Zerif Lite - Nueva sección en el Personalizador

Paso 5:

El paso final es hacer la conexión entre la nueva sección en el archivo functions.php y el archivo new_section.php creado antes.

Para hacer esto, reemplazaremos todo el contenido del archivo new_section.php por el siguiente código:

<section class="focus" id="nuevaseccion">
    <div class="container">
        <!-- SECTION HEADER -->
        <div class="section-header">
            <!-- SECTION TITLE AND SUBTITLE -->
            <?php
            /* Title */
            zerif_newsection_header_title_trigger();
            /* Subtitle */
            zerif_newsection_header_subtitle_trigger();
            ?>
        </div>
        <div class="row">
                <?php
                if ( is_active_sidebar( 'new-section-sidebar' ) ) {
                    dynamic_sidebar( 'new-section-sidebar' );
                } else echo 'Añada algunos widgets aquí';
                ?>
        </div>
    </div> <!-- / END CONTAINER -->
</section>  <!-- / END NEW SECTION -->

Con este último paso, podremos ver el área de widgets para la nueva sección en el Personalizador:

Los widgets que coloquemos en esta sección se repartirán en cuatro columnas.

Zerif - Widgets en la nueva sección

Para tener en cuenta: con esta configuración no se podrán usar los widgets destinados a otras secciones de Zerif, tales como Testimonios, Enfoque o Quiénes somos.

En caso de necesitar tres, dos o una única columna, tendremos que buscar la siguiente línea de código en el archivo functions.php:

'before_widget' => '<div class="col-lg-3"><aside id="%1$s" class="widget %2$s">',

Y reemplazar el valor de la clase "col-lg-3" por: "col-lg-4" para tres columnas; "col-lg-6" para dos columnas, y "col-lg-12" para una columna.

Por otro lado, es posible usar los widgets de Zerif – Nuestro enfoque, y solo tendremos que modificar las siguientes líneas:

'before_widget' => '<div class="col-lg-3"><aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside></div>',

Por:

'before_widget' => '<span id="%1$s">',
'after_widget' => '</span>',

Zerif - Widgets de "Nuestro enfoque" en la nueva sección

Para concluir, dejo a disposición el tema hijo, con los archivos modificados tal como se explica en este tutorial: descargar. (Instalar desde Apariencia > Temas > Añadir nuevo > Subir tema).

Nota importante: este tutorial, así como el .zip del tema hijo funcionarán únicamente en una instalación “limpia” de Zerif Lite. Esto es, si se ha añadido desde el administrador de WordPress a partir de la versión 1.8.5.9 en adelante.

Si se está usando una versión actualizada desde 1.8.5.8 o inferiores, se deberá añadir además el archivo front-page.php a la carpeta del tema hijo con el siguiente contenido:

<?php get_header();
    if( zerif_check_if_old_version_of_theme() ) {
        get_template_part( 'content','frontpage' );
    } else {
        if( ! zerif_check_if_old_version_of_theme() ) {
            $blog_header_title = get_theme_mod( 'zerif_blog_header_title', esc_html__( 'Blog', 'zerif-lite' ) );
            $blog_header_subtitle = get_theme_mod( 'zerif_blog_header_subtitle', esc_html__( 'Zerif supports a custom frontpage', 'zerif-lite' ) );
            if ( ! empty( $blog_header_title ) || ! empty( $blog_header_subtitle ) ) { ?>
                <div class="blog-header-wrap">
                    <div class="blog-header-content-wrap">
                        <?php if ( ! empty( $blog_header_title ) ) { ?>
                            <h1 class="intro-text"><?php echo esc_html( $blog_header_title ); ?></h1>
                        <?php }
                        if ( ! empty( $blog_header_subtitle ) ) { ?>
                            <p class="blog-header-subtitle"><?php echo esc_html( $blog_header_subtitle ); ?></p>
                        <?php } ?>
                    </div>
                </div>
                <?php
            }
        }
        ?>
            <div class="clear"></div>
            </header> <!-- / END HOME SECTION  -->
            <?php zerif_after_header_trigger(); ?>
            <div id="content" class="site-content blog-site-content">
                <div class="container">
                    <div class="content-left-wrap col-md-9">
                        <div id="primary" class="content-area">
                            <main id="main" class="site-main" itemscope itemtype="http://schema.org/Blog">
                                <?php
                                if ( have_posts() ) :
                                    while ( have_posts() ) : the_post();
                                        get_template_part( 'content', get_post_format() );
                                    endwhile;
                                    echo get_the_posts_navigation( array( 'next_text' => sprintf( __( 'Newer posts %s','zerif-lite' ), '<span class="meta-nav">&rarr;</span>' ), 'prev_text' => sprintf( __( '%s Older posts', 'zerif-lite' ) , '<span class="meta-nav">&larr;</span>' ) ) );
                                else :
                                    get_template_part( 'content', 'none' );
                                endif;
                                ?>
                            </main><!-- #main -->
                        </div><!-- #primary -->
                    </div><!-- .content-left-wrap -->
                    <?php zerif_sidebar_trigger(); ?>
                </div><!-- .container -->
            <?php
    }
get_footer(); ?>

El archivo está incluido en el .zip como _front-page.php; renombrarlo a front-page.php de ser necesario.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)