Inicio / Tutoriales Wordpress / ¿Como agregar una sidebar en WordPress?
agregar una sidebar en WordPress
Escrito por | | en Tutoriales Wordpress

¿Como agregar una sidebar en WordPress?

¿Como agregar una sidebar en WordPress?
1 5

¿Como agregar una sidebar en WordPress? Antes de comenzar debemos recordar que las barras laterales de WordPress son contenedores donde podemos agregar widgets con la técnica drag and drop es decir con la técnica de arrastrar y soltar. En este tutorial WordPress vamos a conocer como agregar barras laterales a nuestros themes, si bien es cierto que hay muchos themes gratuitos y de pago con una infinidad de opciones, en ciertas ocasiones necesitamos un theme WordPress a la medida y que mejor que desarrollarlo nosotros mismos.

WordPress Sidebar: Al final el árticulo habremos respondido las siguientes preguntas.

  • ¿Cómo agregar o editar una barra lateral en WordPress?
  • ¿Cómo cambiar la sidebar en WordPress?
  • ¿Cómo eliminar la barra lateral en WordPress?
  • ¿Cómo agregar sidebars extras en WordPress?

Las barras laterales de WordPress nos proporcionan una forma de organizar el contenido de nuestros sitios con widget de forma amigable. Podemos agregar un Widget de categorías en una barra lateral y en otra barra un Widget con las entradas más populares. También las WordPress Sidebar son útiles para los administradores de sitios ya que les permiten administrar los widget de WordPress de forma organizada; Se puede considerar barras laterales al pie de página y hasta el encabezado del sitio, ya que si estas zonas están preparadas o programadas como una WordPress Sidebar podríamos agregar widget .

¿Como agregar una sidebar en WordPress?

Pongamos una situacion real: Tenemos una barra lateral izquierda en nuestro tema actual y estamos planeando agregar una nueva barra lateral derecha a nuestro sitio. Nuestro objetivo principal es agregar la barra lateral derecha pero solo en la página principal, no nos interesa mostrar la nueva barra lateral en los post o páginas de WordPress.

Vista de las barras laterales en el escritorio de WordPress.

Barra lateral WordPress

En el theme Twenty Fifteem, esta es la vista por defecto del área de Widgets. Aquí podemos sacar algunos widgets, agregar otros que WordPress trae por defecto o hasta buscar algún plugin que nos permita agregar mas widgets. Lo que no podemos hacer es crear otra barra lateral, solo tendremos una barra lateral izquierda.

Agregar sidebar en Twenty Fifteem

¿Como agregar una sidebar al theme Twenty Fifteem?

Para agregar una barra lateral en WordPress no necesitamos ser programadores, solo se requiere el acceso de administrador del sitio y un servicio de F.T.P para modificar los archivos de nuestro theme.

Vamos a describir 4 pasos para agregar una barra lateral derecha a nuestro theme Twenty Fifteem.

  • 1 Registrar la nueva sidebar: Necesitamos dar de alta o registrar nuestra nueva barra lateral con el tema actual que estemos utilizando. Para cumplir este paso deberemos editar el archivo functions.php de nuestro theme.
  • 2 Crear la nueva barra lateral : Debemos crear un archivo que llamaremos sidebar-right y lo colocaremos en la carpeta de nuestro theme.
  • 3 Llamar a la sidebar: Ahora necesitamos decirle a nuestro theme que muestre la nueva sidebar , con el contenido que nosotros le hubiéramos agregado.
  • 4 Aplicar estilos : Seguramente vamos a necesitar aplicar estilos css a nuestra nueva barra lateral, para ello deberemos agregar código al archivo style.css .

Paso 1: Registrar la nueva barra lateral

Lo que primero que hacemos es buscar el archivo functions.php de nuestro theme, el mismo se encontrara en : wp-content\themes\twentyfifteen -> funtios.php.
Luego debemos buscar el texto ‘register_sidebar’, dentro del archivo functions.php.

El código que buscamos es el siguiente:

function twentyfifteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Widget Area', 'twentyfifteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
        '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', 'twentyfifteen_widgets_init' );

Aquí podemos ver que se ha registrado un Área de Widget que lleva el id de ‘sidebar-1’ y que este theme la muestra en el sector izquierdo. Pues bien agregaremos un trozo de código que nos permita manipular una nueva area de Widget, la llamaremos Sidebar Right para recordar que el contenido que coloquemos aparecerá a la derecha del theme.
Ahora nuestro código debería verse de la siguiente forma:

function twentyfifteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Widget Area', 'twentyfifteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

    register_sidebar( array(
        'name'          => __( 'Sidebar Right', 'twentyfifteen' ),
        'id'            => 'sidebar-2',
        'description'   => __( 'Add widgets here to appear in your sidebar right.', 'twentyfifteen' ),
        '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', 'twentyfifteen_widgets_init' );

Y nuestra nueva zona para agregar widgets en la barra lateral derecha se vera de la siguiente forma en la sección de administración de nuestro WordPress.
¿Como agregar una nueva sidebar?

Sidebar Right: Sera el nombre de la barra lateral que se mostrará en el sector de administración de WordPress, en la parte superior de la barra lateral que creamos recientemente.
sidebar-2: Es el ID de la barra lateral, que utilizaremos si deseamos programar algo y hacemos referencia a esta barra lateral.

Paso 2: Crear el nuevo archivo para la Sidebar Right.

Para crear un archivo para nuestra barra lateral derecha, lo que hacemos es duplicar el archivo que ya existe y que es el responsable de mostrar la barra latreral izquierda. Vamos a la carpeta de nuestro theme y lo duplicamos, debería verse de la siguiente forma.

Ahora al archivo sidebar-copia.php lo renombraremos como sidebar-right.php, borramos todo el código que encontremos y colocaremos el siguiente código:

<?php
/**
 * The sidebar containing the main widget area
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>        <?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
        <div id="sidebar-2" class="sidebar-right">
        <div id="widget-area" class="widget-area" role="complementary">
                <?php dynamic_sidebar( 'sidebar-2' ); ?>
            </div><!-- .widget-area -->
            </div><!-- .secondary -->
        <?php endif; ?>

3 Mostrar la nueva barra lateral en nuestro theme.

Para mostrar la barra lateral debemos posicionarnos en un archivo de WordPress e indicarle que debe mostrar la nueva sidebar. Vamos a abrir el archivo index.php de nuestro theme (recuerda que planteamos que mostraríamos nuestra sidebar solo en la página principal) y le indicaremos a WordPress que debe mostrar la nueva barra lateral derecha.
Abrimos el archivo index.php y agregamos el siguiente código.

<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">    
        <?php 
        // Mostramos nuestro sidebar
        get_sidebar('right'); 
        ?>

Observa que el código se agrega después de dos div y antes de cualquier iteración. Aproximadamente posterior a la línea 20. Echemos un vistazo para observar cómo queda nuestro sitio.

Ya podemos observar el contenido de nuestra nueva sidebar , aunque la decoración no es muy interesante para nuestro sitio. Vamos a darle un poco de estilos y para ello abrimos nuestro archivo style.css.
Agregamos el siguiente código en nuestro archivo style.css

/****Nueva sidebar********/

.home .sidebar-right
{   width: 24%;
    position: absolute;
    margin-left: 690px;
    margin-top: -80px;
    background-color: #fff;
    text-align: center;
}
.home .sidebar-right .widget-area
{
    padding-top:55px;
}
.home .site-content {    
    margin-left: 24%;  
}
body::before {   
width: 24.4118%;
}
.home .hentry{ 
    margin: 0 1.3333%;
    width: 70%;
    padding-top:1px;
}

Algo que debes considerar es que este código css es solo una propuesta, existen muchas formas de mejorarlo y de optimizarlo. Pero para nuestro ejemplo será suficiente.
Y finalmente nuestra nueva barra lateral se ve de forma correcta.

Conclución: agregar una sidebar en WordPress

Aprendimos que agregar una sidebar en WordPress no es tan complejo, quizas lo más complejo sea adaptar el css de nuestro sitio a la nueva sidebar. ¿Tienes alguna idea de como mejorar nuestro código css? ¿Existiran otras formas de agregar barras laterales sin meter mano en el código?. Si tienes alguna repuesta a estas u otras preguntas, no dudes en dejar tu comentario y realizar tu aporte. Hasta la proxima entrega!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *