Zerif Lite es uno de los temas para WordPress más usados en el último año y medio. Gran parte de su éxito se debe a una combinación entre buen diseño, funcionalidad y simplicidad para configurar. Es, además, compatible con WPML y WooCommerce, y su equipo de desarrolladores y soporte se encuentra activamente involucrado en constantes mejoras.

Como todo tema gratuito tiene ciertas limitaciones, pero desde la documentación oficial de ThemeIsle ofrecen una completa base de conocimiento con códigos personalizados para lograr algunas modificaciones que son solicitadas con mucha frecuencia por los usuarios.

En esta serie de entradas que voy a archivar en la categoría Zerif Lite, presentaré cada uno de esos tutoriales traducidos al español (y algunos actualizados, ya que hubo varios cambios de código en las últimas versiones), comenzando con cómo añadir una sección nueva en la página frontal.

Este tutorial aplica únicamente al tema Zerif Lite.

¿Cómo agregar una nueva sección personalizada?

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:      http://themeisle.com/themes/zerif-lite/
Description:    Tema hijo de Zerif Lite, por ThemeIsle.
Author:         Caribdis Diseño Web
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).

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:

Vamos a colocar la sección nueva justo a continuación de la sección “Características” (Our focus o Nuestro enfoque).

Copie el archivo front-page.php de la carpeta del tema padre, péguelo en la carpeta raíz del tema hijo y edítelo de la siguiente manera:

Al final de esta línea:

/* 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ñada 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 quiera insertar la nueva sección, busque el código encabezado por el título de la sección correspondiente. Por ejemplo, si quiero la nueva sección a continuación de Testimonios, pegaré el código de /* SECCIÓN NUEVA */ justo al final del código encabezado por /* TESTIMONIALS */ y justo antes del código encabezado por /* RIBBON WITH RIGHT SIDE BUTTON */.

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 deberá abrir el archivo functions.php del tema hijo y añadir lo siguiente, antes del cierre de la etiqueta php ?>:

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

Veremos que aquí ahora tendremos la sección correspondiente en el Personalizador y el área de widgets creada para nuestra nueva sección:

Podrá editar desde aquí el título y el subtítulo de la nueva sección

Podrá editar desde aquí el título y el subtítulo de la nueva sección

Aquí podrá añadir widgets, que se repartirán en cuatro columnas

Aquí podrá añadir widgets, que se repartirán en cuatro columnas

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, incluiremos todas las variables correspondientes al archivo new_section.php tal como están denominadas en functions.php. Como tomamos de referencia el archivo our_focus.php, en este caso, donde estaba presente ourfocus usaremos newsection.

También debemos hacer referencia a la nueva sección de widgets creada en functions.php. El código completo del archivo new_section.php de la carpeta /sections/ del tema hijo quedaría de la siguiente manera:

<section class="focus" id="nuevaseccion">
<div class="container">
    <!-- SECTION HEADER -->
    <div class="section-header">
        <!-- SECTION TITLE -->
        <?php
          global $wp_customize; 
          $zerif_newsection_title = get_theme_mod('zerif_newsection_title',__('NUEVA SECCIÓN','zerif-lite')); 
          if( !empty($zerif_newsection_title) ): 
          echo '<h2 class="dark-text">'.wp_kses_post( $zerif_newsection_title ).'</h2>'; 
          elseif ( isset( $wp_customize ) ):
          echo '<h2 class="dark-text zerif_hidden_if_not_customizer"></h2>';
          endif;
          $zerif_newsection_subtitle = get_theme_mod('zerif_newsection_subtitle',__('Subtítulo de la nueva sección.','zerif-lite'));
          if( !empty($zerif_newsection_subtitle) ):
          echo '<div class="section-legend">'.wp_kses_post( $zerif_newsection_subtitle ).'</div>';
          elseif ( isset( $wp_customize ) ): 
          echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
          endif;
        ?>
    </div>
    <div class="row">
            <?php
            if ( is_active_sidebar( 'new-section-sidebar' ) ) :
                dynamic_sidebar( 'new-section-sidebar' );
            else:
            echo 'Añada algunos widgets aquí.';
            endif;
            ?>
    </div>
</div> <!-- / END CONTAINER -->
</section>  <!-- / END NUEVA SECCION -->
Así es como quedará nuestra nueva sección, justo a continuación de la sección "Características", con cuatro widgets

Así es como quedará nuestra nueva sección, justo a continuación de la sección “Características”, con cuatro widgets

Tenga en cuenta que los widgets que añada a esta sección se repartirán en cuatro columnas, y que no podrá usar los widgets destinados a otras secciones, tales como Testimonios, Enfoque o Quiénes somos. En caso de necesitar tres, dos o una única columna, deberá 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.

Recuerde también que este es un tutorial genérico, centrado en el procedimiento de añadir una nueva sección lista para widgets. Las personalizaciones que tengan que ver con el diseño deberán manejarse con estilos CSS.

Por último, dejo a disposición el tema hijo, con los archivos modificados tal como se explica en este tutorial: descargar.

Dudas o preguntas serán bienvenidas en los comentarios. 🙂

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)