You are here
Como crear tu propio sidebar en WordPress personalizado? Sin categoría 

Como crear tu propio sidebar en WordPress personalizado?




Abrimos el archivo “functions.php”, es el lugar donde vamos a definir nuestro sidebar, para ello tenemos que incluir el siguiente código.

Código :
/** Sidebar personalizada SIDEBAR PERSONALIZADO */
if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => 'Detalles_vuelo',
        'before_widget' => '<div class="clase_personalizada">',
        'after_widget' => '</div>',
        'before_title' => '<h7>',
        'after_title' => '</h7>',
    ));
}





Definimos el campo name, con el nombre que le queramos dar a nuestro nuevo sidebar, será el nombre que veremos aparecer junto a nuestros otros sidebar


Definimos before widget, con la que va a ser el aspecto de nuestro sidebar, en este caso la definimos con una clase personalizada llamada clase_personalizada, en el caso de que queráis utilizar la clase por defecto que viene en vuestro theme tenéis que poner en el campo.

Código :
"widget %1$s"





El campo after_widget, se deja tal y como está para dar paso a diferentes widgets que queramos ir añadiendo.


El campo before_title, es como podéis ver el formato que le queremos dar a nuestro título en el widget y lo mismo con after_title.


Creamos un nuevo archivo php, en este caso podemos llamarlo sidebar_personalizado.php, y tan solo tenemos que colocar este código y guardarlo.

Código :
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Detalles_vuelo') ) : ?> <?php endif; ?>;





Creamos nuestra clase personalizada en la hoja de estilos que por defecto utilice nuestrotheme, casi siempre es style.css, y sobre todo darle el mismo nombre que va el código del paso 1.

Código :
<div class="clase_personalizada"></div>





Aprovechamos también para crear nuestro div personalizado, que es donde irá nuestro sidebar wordpress. Guardamos todo en el servidor y ya lo tenemos casi listo para poder implementar nuestro sidebar wordpress personalizado.


Por último buscamos el archivo PHP donde queramos alojar nuestro nuevo sidebar, nuestro nuevo sidebar puede ser horizontal horizontal o vertical, cuando tengamos localizado el lugar colocamos el siguiente código.

Código :
<div id="detalles-vuelo"><?php get_sidebar('personalizado') ?></div>



El código get_sidebar iría dentro de nuestro div personalizado y veréis que “personalizado” es la llamada a nuestro archivo que hemos creado en el paso 2, y que hemos llamadosidebar_personalizado. Así queda en el panel de administración:





Y ya está, a disfrutar experimentando ya que esta forma de personalizar nuestro WordPress nos va a dar un montón de alas para hacer aún más dinámico y personalizable.

Related posts

Comments

Leave a Comment


*