X

Cómo editar los títulos h2 en los widgets del sidebar de WordPress

La mayoría de los templates o diseños que podemos descargar o preinstalar en WordPress suelen venir con etiquetas h2 en los títulos de los widgets y puede que no nos interese, por lo que vamos a ver cómo editar los títulos de los widgets en wordpress.

Cuando habalmos de SEO o posicionamiento web nos debemos centrar en una serie de reglas o directrices que nos van a ayudar a mantener un código limpio y bien estructurado. Hay infinidad de etiquetas que debemos utilizar para poder maquetar bien nuestro contenido a nivel de código y así indicarle a los buscadores de qué parte de la página se trata cada cosa, y por ello debemos saber cómo usarlos.

No me voy a extender más pero explicaremos las etiquetas de título en otro artículo para que sepas cómo usarlas y por qué debes hacerlo así.

Cómo cambiar el título de los widgets de h2 a h3

En WordPress como comentaba antes, lo normal es encontrarte los widgets con h2, ya bien por que antes con las técnicas css que usábamos era necesario, o por un descuido del creador del tema. Con css podemos dar el mismo estilo independientemente de la etiqueta, por lo que vamos a ver cómo editar el h2, que nos tocará modificar directamente en el código.

Dependiendo del tipo de template que estemos utilizando tendremos que buscar en el archivo functions.php o en otro, si en functions no está te tocará buscar en el resto de los archivos como por ejemplo sidebar.php, pero no debería ser difícil de encontrar.

La porción de código que debemos encontrar es la de la función register_sidebar, y debería contener algo similar a lo siguiente:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
));

Como puedes ver en la línea de before_title y after_title encontramos la apertura y cierre de la etiqueta h2. Simplemente tendremos que editarla y guardarla. Nos quedaría algo así:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
));

Una vez lo hayas guardado deberías empezar a ver la nueva etiqueta en la página, y si no es así deberás revisar si estás usando algún servicio CDN, algún plugin de caché o similares, para poder así hacer una limpieza de los archivos cacheados y ver los cambios.

En un principio podemos cambiarla a h3, h4 o cualquier nivel de títulos, dependiendo de lo que usemos en nuestra página, pero te recomiendo informarte primero sobre el uso de los títulos.

Si por otro lado no quieres usar las etiquetas de título, puedes simplemente marcar un span, p o cualquier otro, pero como he comentado debes ser consciente del efecto que pueda tener esto en tu posicionamiento.

¿Tenías etiquetas h2 en tu sidebar? ¿Por cual las has cambiado y por qué?

VicHaunter:
    Categorías: Ayuda

Ver comentarios (4)

    • Depende un poco del template, algunos las ponen directamente en él código y puede provocar estos problemas.

    • Podrías hacerlo de cuatro maneras. Entiendo que hablas de editar el widget predeterminado de categorías.
      La fácil es buscar un plugin con un widget configurable de categorías, que seguro que hay alguna.
      La segunda algo más compleja sería hacerte un plugin tú mismo

      Por otro lado, si solo quieres añadir un poco de código, puedes modificar las categorías con jquery por ejemplo si tus li tienen la clase cat-item:
      $j = jQuery.noConflict();
      $j(document).ready(function(){
      $j('li.cat-item > a').addClass('tuclase');
      });

      O agregando al archivo functions una función que haga un reemplazo en el código de las categorías:
      add_filter('wp_list_categories', 'add_class_incatslinks');
      function add_class_incatslinks($links) {
      $links = str_replace('<a ', '<a class="tuclase"', $links);
      return $links;
      }

Artículo relacionado
Los comentarios de Disqus están cargando....

Como todos, usamos cookies.