¿Todavía no probaste Hestia?

Tema Hestia

Clic en la imagen para abrir el tutorial

Hestia es el tema gratuito más reciente de ThemeIsle

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar
Con más opciones que Zerif Lite

¡Todo el contenido creado en Zerif Lite se importa automáticamente!

En este 2017 ThemeIsle seguirá añadiendo nuevas y fabulosas características. ¡No dejes de probarlo!

Hace poco más de un año aprendimos a mostrar una barra lateral en las páginas de WooCommerce dentro del tema gratuito Zerif Lite, de ThemeIsle.

Esas instrucciones simplemente sirven para incluir el área de widgets que ya existe en el tema, y que es común a todas las páginas del blog. Esto es sin dudas una limitación, ya que si usamos tanto la tienda como el blog nos veremos obligados a mostrar los mismos widgets en ambas secciones.

Para poder mostrar widgets distintos, tendremos que crear un área específica para la tienda y los productos de WooCommerce.

Paso 1: registrar el área de widgets

Lo más probable es que ya tengamos el tema hijo creado, con el área de widgets agregada en la plantilla de WooCommerce. Si así no fuera el caso, tendremos que seguir las instrucciones de esta entrada (solo el Paso 1) para crear el tema hijo.

Una vez creado, en el archivo functions.php, antes del cierre de la etiqueta ?> (si lo hubiera) pegamos lo siguiente:

function zerif_woocommerce_sidebar_widgets() {
    register_sidebar( array(
        'name' => __( 'Barra lateral de Tienda', 'zerif-lite' ),
        'id' => 'area-tienda',
        'description' => __( 'Widgets para las páginas de WooCommerce', 'zerif-lite' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'zerif_woocommerce_sidebar_widgets' );

Con esto veremos que se ha añadido un nuevo panel en nuestra página de Widgets.

Paso 2: incluir el área de widgets en la plantilla de WooCommerce

El código anterior por sí solo no nos va a servir de mucho si no lo “llamamos” desde la correspondiente plantilla. Así es que abriremos el archivo woocommerce.php (previamente editado según las instrucciones de esta entrada) y reemplazaremos la línea:

<?php zerif_sidebar_trigger(); ?>

Por:

<div class="sidebar-wrap col-md-3 content-left-wrap">
    <div id="woocommerce-sidebar" class="widget-area" role="complementary">
    <?php
    if ( is_active_sidebar( 'area-tienda' ) ) :
    dynamic_sidebar( 'area-tienda' );
    endif;
    ?>
    </div>
</div>

Vamos a agregar algunos widgets:

El resultado:

Y nuestras páginas del blog conservarán la barra lateral predeterminada. 🙂

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)