Crear un nuevo sidebar en WordPress

Como crear un #, una nueva zona o área de widgets, en un tema de #, en la cabecera (header), pie de pagina (footer) o en otra zona del tema que necesites. Mediante el archivo y los hooks de WordPress.

Lo necesario:

  • Como ejemplo utilizaremos el tema Twenty Eleven.
  • Un tema hijo de este tema,
  • y el archivo functions.php del tema hijo.

Los pasos son muy sencillos pero los explicamos en detalle para que saber como realizarlos sin problemas.

1. Registrar el sidebar

Se recomienda hacer los siguientes cambios en un tema hijo y no hacerlos directamente sobre los archivos del theme, evitaremos así la perdida de los cambios que hagamos en esos archivos cuando se actualice el theme.

Los cambios los haremos en el archivo functions.php del tema hijo y de este modo solo tendremos que hacerlos una vez.

1.1 Editar functions.php

Abrir el archivo e ir hasta la última linea de código donde aparece lo siguiente:

?>

y antes de esa línea insertar el código siguiente:

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function themename_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Footer', 'twentyeleven' ),
        'id'            => 'sidebar-nuevo-1',
        'description'   => 'Aquí irán los widgets que se muestran en el pie de pagina',
        'class'         => '',
        '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', 'themename_widgets_init' );

Recordarmos, estamos utilizando de ejemplo el tema , tendra que acomodar ese codigo segun el tema que tenga.
 
Explicación:

  • Nombre de la función: themename_widgets_init
    escribir el que queramos con un formato similar, como newsidebar_widgets_init
  • Name:
    • Sidebar <- Escoger uno, es el nombre del sidebar que aparecerá en el area de widgets de la administración de WordPress.
    • twentyeleven <- nombre del tema en formato texto y minúsculas, en este caso estamos usando como ejemplo el tema Twenty Eleven.
  • id: sidebar-nuevo-1 <- id del sidebar que vamos a crear, debe ser en minúsculas, y si son varias palabras unirlas con guion - por que no debe haber espacios en el nombre de id, y debe ser único, elegir uno que intuyamos que no exista ya.
  • description: Texto que describe el sidebar nuevo, y que se vera en la administración de WordPress en widgets.
  • class: la classe css del lado de la administracion, dejarlo en blanco si no se necesita.
  • before_widget dejar el codigo que forma la cabecera del widget.
    <aside id="%1$s" class="widget %2$s">
  • after_widget: dejarlo como está.
  • before_title: dejarlo como está.
  • after_title: dejarlo como está.
  • add-action…: themename_widgets_init <- es el mismo del nombre de la función que pusimos al principio.

Comprobación de cambios:

Aun hay mas cambios que hacer.
Pero ya podemos comprobar que el nuevo sidebar aparece en la administración de WordPress en:
Apariencia -> Widgets

Crear un nuevo sidebar en WordPress
Zona Widgets de la administración de WordPress con nuevo Sidebar.

2. Mostrar el Sidebar en el theme.

Usaremos de nuevo el archivo functions.php
Y aprovecharemos un hook del theme para insertar nuestro sidebar.

Hooks o “ganchos” son partes en el código de los archivos de WordPress que nos permiten agregar nuevo código, haciendo una “llamada” a uno de estos hooks en este caso desde un solo archivo, el archivo functions.php y desde este archivo insertar nuevo código en cualquiera de los otros sin tener que modificarlos, esto previene de que cuando se actualice WordPress no se borren nuestros cambios.

Así que usaremos un hook o “gancho” para insertar en este caso nuestro sidebar en el archivo del footer o pie de pagina.

Siguen un formato parecido a este:

do_action( 'nombre_del_hook' );

2.1 Averiguar el hook donde queremos insertar el sidebar

Como estamos utilizando como ejemplo el theme Twenty Eleven y en este ejemplo queremos que el nuevo siebar aparezca en el pie de pagina, buscaríamos dentro del código del archivo que muestra el pie de pagina, que es el archivo footer.php.

En su caso si es en otro theme y tambien quiere mostrar el nuevo sidebar en el pie de pagina abra el archivo footer.php del tema que tiene instalado, si en cambio quiere mostrarlo en la cabecera tendria que buscar en el archivo header.php; y así el archivo según donde quiera mostrarlo.

Tenemos que averiguar que hooks tiene el tema en el que queremos mostrar el nuevo sidebar.

2.1.1 Buscar hook en el archivo que corresponda

En este ejemplo seria en el footer.php, editaríamos el archivo:

theme/twentyeleven/footer.php

por la linea 27 encontramos el siguiente código:

<?php do_action( 'twentyeleven_credits' ); ?>

twentyeleven_credits <-- en este caso es el hook que utilizaremos para insertar el nuevo sidebar. Es el hook que muestra los créditos del pie de pagina en el tema Twenty Eleven. En su caso sera otro si es otro tema y otra parte del tema donde quiere mostrarlo el sidebar.

2.2 Agregar el siguiente código en el archivo functions.php del tema hijo

Igual que como hicimos en el paso numero 1.1, se agregara el siguiente código en el archivo functions.php del tema hijo.

Necesitamos el hook que habíamos buscado en el punto 2.1.1
twentyeleven_credits (en este ejemplo)
y lo formara parte del siguiente código, tal y como se ve en la línea:

<?php dynamic_sidebar( 'twentyeleven_credits' ); ?>

en su caso sustituya twentyeleven_credits por el hook que use el tema que está usando.

El código a insertar en functions.php del theme-hijo seria el siguiente en este ejemplo:

/**
 * Hook to add a new sidebar
 *
 * @see wp-content/themes/twentyeleven/footer.php
 */
function new_sidebar_1_footer(){
if ( is_active_sidebar( 'sidebar-nuevo-1' ) ) : ?>
<div id="sidebar-footer-nuevo" class="sidebar">
    <?php dynamic_sidebar( 'sidebar-nuevo-1' ); ?>
</div>
<?php endif;
}
add_action( 'twentyeleven_credits', 'new_sidebar_1_footer'  );

Cambie sidebar-nuevo-1 por la id del sidebar que usted haya creado.

dynamic_sidebar funciona tanto con el nombre del sidebar como con la id, cualquiera de esos dos datos los puede usar.

3. Agregar widgets al nuevo sidebar

En la administración de WordPress ir a la zona de Widgets

Apariencia -> Widgets

Ahora ya solo nos queda agregar los widgets que queramos al nuevo sideber y listo!

Crear un nuevo sidebar en WordPress
Zona Widgets de la administración de WordPress con nuevo Sidebar.

4. Hoja de estilos CSS para el nuevo sidebar

Quedaria agregar los estilos que usaran los widgets del nuevo sidebar, que dependeran si muestra los widgets deforma horizontal, vertical, en columnas…
 
 
Si te ha gustado el articulo o te ha sido de utilidad comentanoslo o dale al me gusta para seguir este o mas artículos en nuestra cuenta en facebook/disenowebentenerife

#Wordpress #Sidebar #crearsidebarwordpress




Comentar

A %d blogueros les gusta esto: