Zerif Lite: agregar una sección (tutorial actualizado para la versión de WP.org)

73 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 7 de mayo de 2017

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.

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

73 Comentarios

  1. jose javier

    Hola te felicito por el gran trabajo que realizas tengo como 100 preguntas pero tratrate de resumir

    consegui agregar la nueva seccion pero hay alguna forma de que quede con imagenes y texto encima como el rectangulo verde con el boton de contactanos de la demo?

    para agregar mas secciones solo es copiar el codigo de functions y pegarlo tantas veces se requiera?

    en estas nuevas secciones se pueden poner sliders codigos html videos de youtube lo que se ocupe?

    lo que quiero hacer es que la web resultante no se parezca en nada a la demo excepto el header y el footer mil gracias desde ya

    • Caribdis Diseño Web

      Hola, José.

      Quizá quieras echarle un vistazo a la entrada que publiqué hoy. Usar Elementor te simplificará el proceso de editar y crear nuevas secciones.

      Saludos.

  2. Sol Baires

    Hola, me gustaría incluir en la nueva sección del zerif-child 2 fotos (una al lado de la otra) a modo de botones que redirijan a páginas dentro de la web.
    Recomendás algún widget en especial o debería hacerlo de forma manual (y cómo?)

    Gracias!!

    • Caribdis Diseño Web

      Hola, Sol.

      Podés usar el widget Imagen que incluye WordPress. 🙂

      Saludos.

      • Sol Baires

        Gracias por la respuesta rápida! Quería agregarle además RollOver effects a las imágenes y que sean responsive.

        ¿Se puede hacer con el widget ‘Imagen’ y tocar algo de código o es preferible bajarme algún plug-in?

        • Caribdis Diseño Web

          Hola, Sol.

          Se puede hacer de las dos maneras. Con código CSS personalizado tendrías que usar la ID que hayas asignado a la nueva sección. Ejemplo:

          #nuevaseccion img:hover {
              /* CÓDIGO */
          }
          

          Con un plugin que genere shortcodes (este parece bastante completo), no olvides agregar el filtro para ejecutar códigos abreviados en widgets de Texto/HTML.

          Saludos.

  3. Dycra

    Genial Contenido y grandes tutoriales. Muchas gracias.

    Tengo una duda, estoy intentando modificar la sección “our focus” y quiero que los links de las imágenes se abran en un target=”_blank”. Para ello estoy modificando la líneas en functions.php pero es como si no reconociese el cambio, directamente me sigue abriendo en el mismo tab.

    Estas son las líneas que estoy tocando ¿qué hago mal? lo añado entre “<a" y "href"
    echo '<a href=”‘ . esc_url( $instance[‘link’] ) . ‘” rel=”nofollow”>’;

    Gracias de antemano por tu ayuda

    • Caribdis Diseño Web

      Hola, Dycra.

      Gracias por tu comentario.

      Fijate en esta respuesta.

      Saludos.

  4. luismiguelsec

    buen dia, quisiera saber como se hace para crear mas de una nueva seccion, ya cree una pero no puedo con la otra.

    • Caribdis Diseño Web

      Hola, Luismiguelsec.

      Los pasos son los mismos, pero hay que dar un nombre único a cada variable y crear otro archivo php en la carpeta /sections/ para esa sección.

      Saludos.

      • Giovanna

        Hola, Buenas, Cuando dices dar un nombre único a cada variable, a qué variables te refieres y de cuál archivo?

        • Caribdis Diseño Web

          Hola, Giovanna.

          Significa que todos los newsection que veas en el código deberán ser reemplazados por newsection2 (o el nombre que sea), en todos los archivos en donde aparezcan. Ejemplo: 'panel_newsection' tendrá que ser 'panel_newsection2', 'zerif_newsection_header_subtitle' tendrá que ser 'zerif_newsection2_header_subtitle', etc.

          Saludos.

          • Edu

            Hola,

            Yo quiero añadir mas de una seccion, cuando cambio el nombre de las variables panel_newsection por panel_newsection2 del archivo functions.php luego no me carga la pagina. No se que estoy haciendo mal? estas variables tambien hay que renombrarlas “new_section”?

            Gracias

          • Caribdis Diseño Web

            Hola, Edu.

            En functions.php tenés que duplicar el código usado para la primera sección y luego en ese código duplicado reemplazar todos los nombres.

            Saludos.

  5. Luis Rossi

    Saludos.
    ¡Muy buena tu pagina y la info que compartes!

    ¿Puedo agregar esa nueva sección para un portafolio que se integre perfectamente al sitio? ¿Cómo lo haría?

    • Caribdis Diseño Web

      Hola, Luis.

      Gracias por tu comentario.

      Podés usar como referencia las instrucciones que se detallan en Insertar un código abreviado en una nueva sección de este tutorial.

      Básicamente cualquier plugin de portfolios que genere un código abreviado sirve.

      Saludos.

  6. juan

    hola

    se puede mover un panel de una posicion a otra por ejemplo el de agregar la nueva seccion se queda en un lugar si quisiera moverla mas abajo se puede mover el panel

    y otra se puede ocultar los paneles que no me sirvan o secciones o campos

    saludos

    • Caribdis Diseño Web

      Hola, Juan.

      Para mover el panel de la nueva sección usá un número más alto en la línea 'priority' => 32,.

      Y en cuanto a la otra duda, fijate en esta respuesta.

      Saludos.

  7. Sergio

    Hola Ana. Está muy bien tus tutoriales, Mi duda es si se puede cambiar el orden de las secciones, ya que quiero alterar el orden que viene por defecto.

    Además a esto, he visto lo de añadir los logos a la sección “Quienes somos”. Lo he intentado con el CSS Adicional y no me ha salido.

    Por último, me pregunto si hay alguna forma de cambiar el color del footer.

    Muchas gracias y siento haberte hecho tantas preguntas.

    • Caribdis Diseño Web

      Hola, Sergio.

      Gracias por tu comentario.

      Es posible cambiar el orden con un tema hijo (Zerif Pro sí permite cambiar el orden de las secciones desde el Personalizador). Tendrías que copiar el archivo content-front-page.php y mover las porciones de código que correspondan a las secciones al lugar donde quieras que aparezcan. Todas están comentadas para identificarlas fácilmente. Por ejemplo, cortás el código correspondiente a /* LATEST NEWS */ y lo pegás antes de /* OUR FOCUS SECTION */.

      Los logos de clientes se agregan como widgets, fijate que hay una sección específica para eso (Área de clientes).

      Y para cambiar el color de fondo del pie de página, fijate en esta respuesta.

      Saludos.

  8. Jesús

    Hola, cómo podría hacer para agregar un vídeo en la sección about-us.
    Me gustaría que justo después del texto de la parte izquierda se viera un vídeo, pero no consigo que aparezca ni embebiéndolo, ni por iframe, ni copiando el enlace… no sé como hacer, ¿podrías ayudarme?
    Gracias!

    • Caribdis Diseño Web

      Hola, Jesús.

      Fijate en esta respuesta.

      Saludos.

  9. Marilian

    Saludos Ana,

    He seguido el tutoríal y todo fue bien hasta el paso 4, sigo el paso 5 pero no logro ver el área de widgets para la nueva sección en el Personalizador, que puede estar pasando?

    En última instancia descargue tu .zip, instale y tampoco veo cambios…

    Gracias por la ayuda,

    • Caribdis Diseño Web

      Hola, Marilian.

      Fijate que hay una aclaración al final. Seguramente el tema fue actualizado de la versión suspendida. Para que puedas ver la nueva sección tenés que incluir también el archivo front-page.php en la carpeta del tema hijo.

      Saludos.

      • jimmy valle

        acabo de hacer eso y no me sale la opcion de los widgets.
        he hecho lo siguiente:
        he descomprimido el zip y he renombrado el archivo_front-page.php por el nombre front-page.php…… y asi lo he vuelto a zippear con el mismo nombre del zip y lo subi a wp y nada, no funka, sale las secciones desordenadas.

        también adicione al archivo zip el documento frontn-page-php, osea que adicioné tal como dice el tutorial al archivo zip, de tal manera que volvi a comprimir con los dos archibos uno con _front-page.php y otro con front-page.php, lo volvi a zipear y lo subi al tema y volvia a salir lo mismo, sale todo sin forma. favor si me puedes ayudar con esto, también indicarme si se puede agregar mas de una sección.

        • Caribdis Diseño Web

          Hola, Jimmy.

          ¿A qué te referís con “secciones desordenadas”? El ZIP tal como está funciona en una versión de Zerif que no fuera actualizada desde la versión suspendida.

          ¿No tenés una URL para verlo?

          En cuanto a agregar más de una sección, los pasos serían los mismos, pero siempre dándoles un nombre único a cada una y creando el archivo php correspondiente en la carpeta /sections/.

          Saludos.

  10. Jairo

    Necesito tu ayuda. Estoy tratando de crear una nueva sección, porque en la pagina “TESTIMONIOS” del tema, he agregado el widget correspondiente y no pasa nada. No hay cambio. No se ve ningún testimonio. Solo aparece la palabra TESTIMONIO y el subtitulo que puedo agregar. Pero ningún widget funciona en esta sección. Me gustaría saber si hay una forma en la que se pueda hacer que aparezcan. Para mi es muy importante esta sección.

    • Caribdis Diseño Web

      Hola, Jairo.

      ¿Podrías detallar un poco más el inconveniente? Si agregás widgets desde personalizador, ¿no guarda los cambios? ¿No los guarda tampoco desde Apariencia > Widgets? Y en lo posible, pasame una URL para ver el sitio.

      Saludos.

  11. Dani Chan

    Hola,

    tengo un par de dudas sobre las entradas en los post.

    1) En el grid de resumen de entradas, cuando hay más del número permitido dice en inglés: “older posts” y “newer posts”… ¿Cómo lo puedo traducir?

    2) Dentro de la página entradas individuales, la imagen destacada sale super grande… ¿Cómo se puede limitar para que ocupe todo el ancho pero la altura, sea por ejemplo de 600px? La idea es que se recorte “solo” en la pagina de content

    Muchas gracias!!

    • Caribdis Diseño Web

      Hola, Dani.

      Gracias por tu comentario.

      Zerif Lite incluye la traducción, así que si tenés configurado tu WordPress en Español deberías ver “Entradas antiguas” y “Entradas recientes”.

      En cuanto al segundo punto, convendría establecer un nuevo tamaño de miniatura. Tomá como referencia las instrucciones de este tutorial (la última parte). En el archivo functions.php del tema hijo pegá el siguiente código:

      add_image_size( 'custom-post-thumb', 825, 500, true ); // 825 es el ancho, 500 la altura (modificalo a gusto)
      

      Y en content-single.php, de la línea the_post_thumbnail('large'); reemplazá 'large' por 'custom-post-thumb'.

      Tené en cuenta que tendrás que regenerar las miniaturas con algún plugin para que tomen efecto sobre las imágenes que ya subiste.

      Saludos.

  12. Hugo

    Buenas tardes!
    Estoy configurando en mi sitio el tema gratuito y cuando me deslogueo de wordpress no se ven los iconos del pie de pagina, el texto de la sección titulo grande no esta.

    Que puede pasar?
    Estoy usando Zerif LiteVersión: 1.8.5.25 un tema hijo y también lo probé que el template original

    WordPress 4.8.1

    Gracias

    • Caribdis Diseño Web

      Hola, Hugo.

      ¿Agregaste contenido en esas secciones y guardaste los cambios?

      Saludos.

  13. alex

    Hola Ana, gracias por tus tutoriales!!
    te cuento que agregue una nueva sección, justamente la de focus y tengo la nueva sección sin problemas tal como mostras en el punto 4, pero al hacer el punto 5 no tengo ningún cambio en el personalizador de widget, cambie tal cual el contenido de la carpeta de new-section.php pero no me aparece ningún cambio en “widgets”… que podra ser?

    mil gracias!

    • Caribdis Diseño Web

      Hola, Alex.

      Fijate que todos los nombres coincidan. new-section.php no es lo mismo que new_section.php.

      Saludos.

      • alex

        Si, lo he revisado y todos los nombres son new_section, así es que aun no encuentro el error 🙁 incluso al ponerle título a la nueva sección para publicarla no se publica, debo haber errado desde un comienzo en algún punto, seguiré buscando el error, gracias!

  14. Elizabeth Martínez

    Hola que tal, muchas gracias por su ayuda. Me he visto en un apuro, ya que quiero realizar un tema hijo pero no me da acceso al “/wp-content/themes/” y al ir a “wp-admin/themes.php” (que es donde sí me da acceso) sólo me permite subir un nuevo archivo de tema. ¿Me podrías ayudar? Muchas gracias!

    • Caribdis Diseño Web

      Hola, Elizabeth.

      Tenés que acceder a la carpeta de instalación de WordPress vía FTP para subir los archivos del tema hijo que hayas creado. O bien comprimirlos en un ZIP e instalarlo desde Apariencia > Temas > Subir tema.

      Para más información, visitá esta entrada.

      Saludos.

  15. Pedro

    Hola Ana, primero que nada muchas gracias por toda tu ayuda.

    Tengo una consulta, ¿cómo puedo hacer para agregar una nueva sección y en esta incorporar un Shortcode?

    Muchas gracias por tu tiempo.

    Saludos!

    • Caribdis Diseño Web

      Hola, Pedro.

      Gracias por tu comentario.

      Podés usar este mismo tutorial como referencia, y en lugar de crear el área de widgets usar el código abreviado. Por ejemplo, donde está el siguiente código:

      <?php
          if ( is_active_sidebar( 'new-section-sidebar' ) ) {
          dynamic_sidebar( 'new-section-sidebar' );
          } else echo 'Añada algunos widgets aquí';
      ?>
      

      pegarías:

      <?php echo do_shortcode('[codigo-abreviado-del-plugin]'); ?>

      Y si no necesitás los campos de título y subtítulo en el personalizador, una simple función en un hook es suficiente. Por ejemplo, para insertarlo a continuación de la sección Nuestro equipo, sería algo así:

      function zerif_child_shortcode() {
          echo do_shortcode('[codigo-abreviado-del-plugin]');
      }
      add_action( 'zerif_after_our_team', 'zerif_child_shortcode' );
      

      Saludos.

      • Pedro

        Muchas gracias!
        Lo implementaré en mi página.

        Saludos!

  16. luis

    Hola Ana,
    instale el archivo del tema hijo correctamente, adicional utilice 3 widgets de Zerif – Nuestro enfoque y se ven bien. Sin embrago los bordes estan siempre en blanco y no cambian de color. Y la linea abajo de los circulos de los tres widgets es roja.
    Como puedo hacer para que tanto el color del circulo y de la linea sean iguales y que cuando uno se pare sobre el circulo este cambie de color? Habia pensado que fuesen amarillo, verde y azul.
    Mil gracias por tu ayuda.

    • Caribdis Diseño Web

      Hola, Luis.

      Fijate en esta respuesta.

      Saludos.

  17. Luis

    Hola tengo un menú desplegable en mi sitio con Zerif Lite y necesitaría saber si se le puede poner un marco o una sombra o cambiar el color de fondo cuando se despliega.
    Gracias

    • Caribdis Diseño Web

      Hola, Luis.

      Para cambiar los colores usá el siguiente código, con los valores que necesites:

      .navbar-inverse .navbar-nav ul.sub-menu {
          background: #cccccc; /* Fondo */
          border: 1px solid #333; /* Borde */
          box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08); /* Sombra */
      }
      

      Saludos.

  18. Lenis

    Hola de nuevo Ana!
    Creé el tema hijo y lo estoy editando en un servidor local en el que no tengo etradas ni nungún tipo de contenido, solo la plantilla, ¿Cómo hago para que después el tema hijo pueda ser usado en cualquier otra página? Es decir, que lo pueda pasar a una web real y me mantenga las modificaciones. Intenté hacerlo subiendo el .zip del tema hijo y no me aparecen todos los cambios, además se esconde la opción de agregar css adicional en el editor.

    • Caribdis Diseño Web

      Hola, Lenis.

      El tema hijo solo sirve para hacer cambios de estilo y/o estructura sobre el tema padre. Todo lo que son los contenidos (páginas, entradas, categorías, etiquetas, widgets y menús) es independiente y se guarda en la base de datos.

      Si querés copiar tal cual un sitio local a un servidor en línea podés hacerlo manualmente con un backup de la carpeta de WP y de la base de datos, o usar un plugin como Duplicator.

      Saludos.

  19. Luis Carlos

    Hola Ana, quiero poner una nuevo color de fondo a la nueva sección
    pongo el siguiente codigo en el editor CSS pero no me funciona
    }
    /* SECCIÓN NUEVA */
    .zerif_newsection_section {
    background: #B23180;
    }

    Como puedo hacer para cambiar el color del fondo de la nueva sección??

    • Caribdis Diseño Web

      Hola, Luis Carlos.

      Fijate en esta respuesta.

      Saludos.

      • Luis Carlos

        Hola Ana mil gracias por tu ayuda, logre cambiar el color de fondo del tema hijo como lo quería.
        Ahora tengo un último problema con esa sección y es que los textos debajo de las imagenes salen corridos al lado izquierdo.
        Si entras a mi pagina http://socialmass.co/luisComunicaciones/TallerdeVida/ te daras cuenta que en la sección de PROYECTOS que fue la que cree con el tema hijo no estan alineados los textos con los circulos.
        Como puedo hacer para arreglar esto???

        • Caribdis Diseño Web

          Hola, Luis Carlos.

          Para agregar widgets de Nuestro enfoque tenés que usar el código que se muestra al final en before-widget y after-widget.

          Saludos.

  20. Alexander Bulla

    Hola Ana buen dia muchas gracias por tu ayuda , tengo unas inquietudes como podria agregar mas secciones de este tipo sin que me genere error lo intente y me muestra faltal error y debo recuperar todo el funtions php. y tambien lograr que los widgest me queden mas centrados ya que agrego un carrucel con imagenes y se ve un poco hacia la derecha y no tener tanto espacio entre la seccion inferior y superior de la nueva seccion, te agradezco mucho tu asesoria, un excelente dia

    • Caribdis Diseño Web

      Hola, Alexander.

      Cada sección nueva tiene que tener un nombre único; si lo repetís en alguno de los códigos va a dar error.

      El tema del carrusel es porque está adoptando un ancho fijo y aparentemente no es responsive. Además, si querés usar una sola columna, tenés que usar la clase col-lg-12 en lugar de col-lg-3 al registrar el área de widgets.

      Y por último, el relleno lo manejás con CSS, en el caso de la sección nueva con el siguiente código:

      #nuevaseccion.focus {
          padding: 10px 0 10px 0;
      }
      

      Modificá el valor en píxeles por el que necesites.

      Saludos.

  21. Raul cañada

    Buenas tardes en la sección de mi cuenta me aparece el formulario para acceder, pero no me aparece la opción de poder registrar a un nuevo usuario como podría activar esta opción?

    • Caribdis Diseño Web

      Hola, Raúl.

      Si te referís al enlace Registrarse que aparece debajo del formulario de inicio de sesión, solo aparece si seleccionaste Cualquiera puede registrarse en la página Ajustes > Generales > Miembros.

      Saludos.

  22. carlos

    Hola soy nuevo suscriptor de tu pagina ya que me intereso mucho el trabajo que realizas, tengo una pregunta, quiero quitar la parte del contactenos de la pagina principal y ponerla en una pagina aparte que le llame contacto como puedo hacer esto, saludos…

    • Caribdis Diseño Web

      Hola, Carlos.

      Gracias por tu comentario y suscripción.

      Podés desactivar la sección Contáctenos de la página de inicio desde el Personalizador (marcando la casilla ¿Ocultar sección “Contáctenos”?) y luego crear una página donde tendrás que pegar el código abreviado [pirate_forms].

      Eso sería todo. Si necesitás un formulario más avanzado, podés buscarlo en el repositorio y en lugar de [pirate_forms] pegar el código que corresponda.

      Saludos.

  23. Antonio Andrade

    De nuevo yo… gracias como siempre por compartir tus conocimientos que son de gran ayuda… ahora quiero agregar “Footer areas” en la sección “widgets” porque necesito armarlo un poco más extenso de lo normal, ¡cómo puedo hacerlo?

    Mil gracias =)

    • Caribdis Diseño Web

      Hola, Antonio.

      No hay límite para los widgets que agregues en el pie de página, en las tres columnas podés repartirlos como quieras. Ahora, si necesitás más columnas de widgets es más complicado, porque tendrías que registrar áreas nuevas.

      Saludos.

      • Antonio

        Muchas gracias por responder, ya pude darle mejor formato, otra duda, en la seccion (perdona por los acentos, la computadora es extranjera) “our focus” siempre me aparecen los iconos 4 en linea yo los quiero 3 por linea, que debo hacer para modificar esto?

        Mil gracias.

        • Caribdis Diseño Web

          Hola, Antonio.

          Fijate en esta respuesta.

          Saludos.

  24. Elena

    Hola, tengo una duda. Creando una nueva sección de este modo, ¿puedo añadir un widget con las últimas entradas de Facebook en una de las columnas, y otro con las últimas de Twitter? ¿Recomiendas algún widget en especial? Gracias de antemano.

    • Caribdis Diseño Web

      Hola, Elena.

      Sí, podés agregar cualquier widget que tengas disponible. En esta entrada recomiendo uno de Twitter.

      Saludos.

  25. Eli

    Buenas noches, con mis escasos conocimientos en desarrollo web, he utilizado este tema modificando agregando las páginas que requiere mi proyecto.
    ¿Sería posible agregar en una de las páginas “Únete” formulario de inscripción?

    He habilitado plugins de RSS para facilitar al visitante la publicación de las “últimas entradas” en Facebook y twitter. El problema viene al publicar, todas las publicaciones en Facebook y twitter las hace con la imagen del logo y no con la imagen destacada de la entrada.
    ¿Podrías ayudarme?

    Muchas gracias y un saludo.

    • Caribdis Diseño Web

      Hola, Eli.

      Podés agregar un formulario estándar en una página, usando el código abreviado de Pirate Forms [pirate_forms]. Si necesitás algo más avanzado, podés usar Contact Form 7, o buscar algún otro que te permita agregar campos.

      El tema de las imágenes al compartir podés manejarlo instalando un plugin de SEO y activando los campos meta de redes sociales: te permite seleccionar la imagen y el extracto que quieras que aparezca. Yoast SEO, WP Meta SEO y All in One SEO (instalando el complemento) incluyen esta característica.

      Saludos.

  26. jhoan garcia

    Primero que nada , gracias por compartir tu conocimiento, ahora tengo tres preguntas, no se si la primera sea obvia pero no vi respuesta…y ante todo mis disculpas si alguna pregunta es inadecuada.

    1- si en lugar de ingresar una nueva sección de nuestro enfoque, quiero ingresar la seccion de ultimas noticias, ¿Que cambios debo realizar a el ejemplo que nos regalaste?

    2- ¿De que forma agrego no una nueva seccion , sino 2 nuevas secciones ?

    3- Las paginas que has hecho en tu portafolio , ¿Son todas plantillas gratis o algunas son de pago?

    • Caribdis Diseño Web

      Hola Jhoan.

      Gracias por tu comentario.

      El proceso para agregar/duplicar una sección es siempre el mismo, solo que hay que darle un nombre único a cada archivo php y a cada variable.

      Fijate en esta y esta respuestas para la sección Últimas noticias.

      Algunas de las webs del portfolio son a medida, y otras hechas a partir de temas premium (Divi es el que más uso actualmente).

      Saludos.

  27. Bernart

    Uff pues me parece mucho más complicado que antes.
    El usar más funciones para añadir los títulos y subtitulos de las secciones me trae de cabeza.

    He visto que en las nuevas versiones usa unos hooks en los archivos de las secciones como por ejemplo

    ¿Sabes a qué se refieren estas líneas y en que parte del código puedo editarlas para mis propias secciones?

    Muchas gracias una vez más usted es una gran ayuda

    • Bernart

      zerif top our_focus trigger( )
      zerif_before_our_focus trigger( )
      Perdón no se copiaron los hooks a los que me refería de ejemplo.
      Gracias

    • Caribdis Diseño Web

      Hola, Bernart.

      De hecho, es prácticamente igual que antes, solo que el código que estaba en el archivo de la sección se pasó a una función.

      Y los hooks son “llamadas” a funciones personalizadas que podés incluir en el archivo functions.php del tema hijo. Un ejemplo:

      function hola() {
          echo '<h1>Hola arriba de Focus</h1>';
      }
      add_action( 'zerif_top_our_focus', 'hola' );
      

      Saludos.

      • Bernart

        Muchas gracias, ya le estoy tomando el truquillo.

        Disculpa que te moleste una vez más,
        En la nueva versión de zerif-lite, las secciones de la página de inicio están en el panel (zerif_frontpage_sections_panel) para ello crea una clase Zerif_WP_Customize_Panel

        Entonces para cada sección hace un condicional de si es la versión última pues crea el panel de la sección y lo añade a la sección de pagina de inicio, y si no es la versión última pues simplemente crear la nueva sección.

        Yo sé, que puedo poner en la indicación del panel de la sección que creo, indicarle, el panel de la pagina de inicio.

        Me gustaría poder utilizar la condición que aparece pero me da error por la la clase

        ¿Puedo llamar a esa clase desde mi thema hijo o hay otra manera?

        • Caribdis Diseño Web

          Hola, Bernart.

          No sé si termino de entender lo que estás queriendo hacer.

          Si es mover la nueva sección dentro del panel Secciones de la página de inicio, agregala como sección y no como panel. El código sería algo así:

          $wp_customize->add_section( 'zerif_newsection_section' , array(
          	'title'       => __( 'Nueva sección', 'zerif-lite' ),
          	'description' => __( 'El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.', 'zerif-lite' ),
          	'panel'       => 'zerif_frontpage_sections_panel'
          ));
          

          Saludos.

  28. Wilbert

    Como agregar un nuevo boton para registro de cliente en pagina Zerif Lite:

    • Caribdis Diseño Web

      Hola, Wilbert.

      ¿Podrías ser un poco más específico? ¿Dónde querés agregar el botón?

      Saludos.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!