Editar el sidebar de WordPress

Aquí aprenderemos a modificar nuestra barra lateral o también llamada sidebar.

Cuántas veces no nos hemos quejado cuando sale

Pues hay dos formas de quitarlo. La primera es yendo a http://www.aquitupagina.com/wp-admin/link-manager.php. Aquí podremos quitar enlaces o cambiarlos, poner de nuevos…

Y la segunda es mediante código. Para esto habrá que currárselo un poco más pero aumentaremos las prestaciones. Hemos de tener en cuenta que algo puede salir mal, por lo tanto podemos realizar una copia y pegarla en el bloc de notas o asegurarnos de tener el sidebar guardado en otro lugar,. Cuándo vayamos a editar código tendríamos que asegurarnos que editamos el archivo correcto del theme correcto. Aquí podremos editarlo mediante el blog de notas o directamente des del navegador. Todos los pasos serán los mismos,  abriremos el sidebar de nuestro theme con el blog de notas. Si lo deseamos hacer directamente de nuestra web vamos a http://www.aquitupagina.com/wp-admin/theme-editor.php. Después en la barra lateral escogeremos Barra lateral (sidebar.php).

Ahora viene un poco de teoría. Todas etiquetas que pongamos tiene un principio y fin. Por lo tanto debemos poner <etiqueta> lo que pongamos </etiqueta> aqi se termina. Las etiquetas h2 son los bloques de menú, representan los titulos. Cada bloque esta definido por listas li. El sidebar esta entre etiquetas ul, antes de cada bloque también se debe poner otra. Un ejemplo sencillo de sidebar es:

<ul id=” La sidebar”>
<li id=”Nombret”>
<h2>Titulo del bloque</h2>
<p>Tagina</p>
</li>
<li id=”links”>
<h2>Enlaces</h2>
<ul>
<li><a href=”tu enlace”>Nombre enlace</a></li>
</ul>
</li>
</ul>

Ahora viene la parte de código para quitar el apartado de enlaces buscaremos <?php wp_list_bookmarks(); ?> y lo suprimiremos. Una vez hecho esto ya no aparecerá más excepto que lo volvamos a poner.

Ahora podemos crear nuestra categoría de enlaces.

Pondremos <li><h2><?php _e(‘Enlaces’, ‘kubrick’); ?></h2> para crear un apartado.

Para poner enlaces

<ul><li><a href=”la web” title=”<?php _e(‘lo que queremos que nos muestre al poner el puntero encima’, ‘kubrick’); ?>”>titulo del enlace</a></li>
<?php wp_meta(); ?>
</ul>

A mi el sidebar me queda así, se podría considerar como ejemplo.

<div id=”sidebar”>
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li>
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

<?php if ( is_404() || is_category() || is_day() || is_month() ||
is_year() || is_search() || is_paged() ) {
?> <li>

<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p><?php printf(__(‘You are currently browsing the archives for the %s category.’, ‘kubrick’), single_cat_title(”, false)); ?></p>

<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<p><?php printf(__(‘You are currently browsing the <a href=”%1$s/”>%2$s</a> blog archives for the day %3$s.’, ‘kubrick’), get_bloginfo(‘url’), get_bloginfo(‘name’), get_the_time(__(‘l, F jS, Y’, ‘kubrick’))); ?></p>

<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<p><?php printf(__(‘You are currently browsing the <a href=”%1$s/”>%2$s</a> blog archives for %3$s.’, ‘kubrick’), get_bloginfo(‘url’), get_bloginfo(‘name’), get_the_time(__(‘F, Y’, ‘kubrick’))); ?></p>

<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<p><?php printf(__(‘You are currently browsing the <a href=”%1$s/”>%2$s</a> blog archives for the year %3$s.’, ‘kubrick’), get_bloginfo(‘url’), get_bloginfo(‘name’), get_the_time(‘Y’)); ?></p>

<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
<p><?php printf(__(‘You have searched the <a href=”%1$s/”>%2$s</a> blog archives for <strong>‘%3$s’</strong>. If you are unable to find anything in these search results, you can try one of these links.’, ‘kubrick’), get_bloginfo(‘url’), get_bloginfo(‘name’), get_search_query()); ?></p>

<?php /* If this is a monthly archive */ } elseif (isset($_GET[‘paged’]) && !empty($_GET[‘paged’])) { ?>
<p><?php printf(__(‘You are currently browsing the <a href=”%1$s/”>%2$s</a> blog archives.’, ‘kubrick’), get_bloginfo(‘url’), get_bloginfo(‘name’)); ?></p>

<?php } ?>

</li> <?php }?>

<?php wp_list_pages(‘title_li=<h2>’ . __(‘Pages’, ‘kubrick’) . ‘</h2>’ ); ?>

<li><h2><?php _e(‘Archives’, ‘kubrick’); ?></h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</li>

<?php wp_list_categories(‘show_count=1&title_li=<h2>’ . __(‘Categories’, ‘kubrick’) . ‘</h2>’); ?>

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>

<li><h2><?php _e(‘Usuarios’, ‘kubrick’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li> </ul>
<li><h2><?php _e(‘Enlaces’, ‘kubrick’); ?></h2>
<ul>

<li><a href=”http://misnecesidades.webcindario.com&#8221; title=”<?php _e(‘Interesante lugar con algunos trabajos, ayudas y conocimientos’, ‘kubrick’); ?>”>Mis necesidades</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>

<?php endif; ?>
</ul>
</div>

Fuente:

http://comunidad.dragonjar.org/index.php/topic,1035.0/topicseen.html
http://www.tecnobot.com/tutorial-como-adaptar-tu-theme-de-wordpress-a-widgets/

2 comentarios »

  1. crystyta said

    Hola a ver si me podeis echar un cable con esto. Quiero cambiar el ancho de mi sidebar a 300 pixeles de ancho y no tengo ni idea de hacerlo. Esta es mi hoja de estilo de mi plantilla:

    /* sidebar defines */

    div#sidebar.left { width:195px; padding:30px 5px 35px 9px; float:left; font:normal 12px “Trebuche MS”,verdana,sans-serif,tahoma,impact,arial; color:#454545; }
    div#sidebar.right { width:185px; padding:30px 0px 35px 20px; float:left; font:normal 12px “Trebuche MS”,verdana,sans-serif,tahoma,impact,arial; color:#454545; }

    div#sidebar table { margin:10px 0px 0px 0px; border:none; border-collapse:collapse;}
    div#sidebar table tbody {border:none; padding:0px; margin:0px;}
    div#sidebar table tr { padding:0px; margin:0px;}
    div#sidebar table th { background:#0d4d63; color:#ffffff; margin:0px; padding:0px; border:none; text-align:center; vertical-align:middle; width:28px; height:25px;}
    div#sidebar table td { background:#f9f9f9; color:#bbbbbb; margin:0px; padding:0px; border:none; text-align:center; vertical-align:middle; width:28px; height:25px;}

    div#sidebar ul { list-style:none; margin:0px; padding:0px; }

    div#sidebar ul li {padding:0px; margin:0px; border-bottom:1px dotted #cccccc; }

    div#sidebar ul li a { font:normal 12px “Trebuchet Ms”,Verdana,sans-serif,tahoma,impact,arial; color:#727272;}
    div#sidebar table td a { color:#212121; }
    div#sidebar ul li a:hover { font:normal 12px “Trebuchet Ms”,Verdana,sans-serif,tahoma,impact,arial; color:#1eacdd;}
    div#sidebar ul li h2.sidebartitle{ height:25px; font:bold 18px Tahoma,”Trebuchet MS”,verdana,sans-serif; color:#105a74; margin:0px; padding:0px;}
    div#sidebar ul li.widget { padding:20px 0px 0px 0px; border:none;}

    div#sidebar ul li ul { list-style:none; margin:0px 0px 0px 2px; padding:0px 0px 0px 0px; color:#727272; }

    div#sidebar ul li ul li ul { list-style:square inside; padding:0px 0px 0px 8px; color:#929292;}
    div#sidebar ul li ul li ul a { color:#929292;}
    div#sidebar ul li ul li ul li {margin:0px; border-bottom:none;}
    div#sidebar ul li form { margin:0px; padding:0px;}
    div#sidebar ul li input[type=”text”] { padding:5px; width:110px; margin:0px 5px 0px 0px; font:normal 12px “Trebuche MS”,verdana,sans-serif,tahoma,impact,arial; color:#666666; border:1px solid #999999; }
    div#sidebar ul li input[type=”submit”] { width:52px; padding:0px; height:26px; margin:0px; }
    div#sidebar ul.search-form li { border:none; }
    div#sidebar ul li form#searchform label {display:block; }

    Si me decis donde tengo que poner los valores os lo agradeceria profundamente.

    Un saludo

  2. etnos said

    hola,
    Creo que es este trozo width:195px que lo cambias por width:300px
    Aunque debes tener en cuenta que tienes dos sidebar por lo que veo, uno a derecha y otro a izquierda.

RSS feed for comments on this post · TrackBack URI

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: