Cómo añadir una imagen en el sidebar de WordPress

En un tema de WordPress, el sidebar es uno de los elementos más importantes ya que puede albergar componentes tan cruciales para el CMS como un buscador, un listado de categorías y muchas cosas más. La presencia y el posicionamiento de dichos componentes lo gestiona el administrador de la web a través del backoffice. Podemos agregar más componentes al sidebar haciendo cambios a nivel de tema. Habiendo dicho esto, vamos a ver qué métodos podemos utilizar para añadir una imagen en el sidebar de WordPress.

La presencia del sidebar en el diseño web actualmente está en debate debido al diseño responsive. Muchos diseñadores prefieren definitivamente no utilizar el sidebar en sus diseños puesto que, casi siempre, este queda relegado al final de la pantalla cuando navegamos a través de un dispositivo móvil. Pero no tiene porqué ser así. Cuando navegamos en versión escritorio, el sidebar puede jugar un papel crucial otorgando contenido muy útil al usuario. Y no solo eso, si además captamos la atención del usuario con elementos gráficos como imágenes, iconos o gráficos estadísticos, el engagement se incrementa exponencialmente.

Pero volviendo al tema que nos ocupa en esta entrada. Si tu tema cuenta con un sidebar que soporta widgets, puedes agregar una imagen en dicha zona. Si no, tendrás que agregar el código necesario para agregar una imagen manualmente en el fichero sidebar.php. Estos son los métodos que veremos en esre artículo para añadir una imagen en el sidebar de WordPress.

  • Utilizando los widgets del sidebar de WordPress
  • Creando un widget personalizado

Añadiendo imágenes utilizando los widgets del sidebar

Los temas de WordPress suelen contar con contenedores para diversos widgets. Entre ellos, si tu tema cuenta con sidebar, debe haber un contenedor llamado “Sidebar” o “Barra lateral”. Por cierto, si quieres agregar, eliminar y, en definitiva, gestionar los widgets de tu tema, debes ir a Apariencia > Widgets.

En las siguientes secciones, veremos cómo agregar una imagen en el sidebar usando varios widgets. Ya sabes que para agregar widgets a un contenedor, solamente tienes que coger y arrastrar el widget que quieras de la zona izquierda al contenedor que se sitúa en la zona derecha.

Utilizando el widget Imagen

Lo que tenemos que hacer es arrastrar el widget Imagen y soltarlo en el contenedor del sidebar de nuestro tema. Mediante el widget Imagen puedes agregar una imagen con el título que nosotros queramos y un enlace si queremos que el usuario, cuando haga clic en dicha imagen, sea redirigido hacia una URL.

Utilizando el widget Texto

Cómo añadir una imagen en el sidebar de WordPress 1

Lo que tenemos que hacer es arrastrar el widget Texto y soltarlo en el contenedor del sidebar de nuestro tema. Mediante el widget Texto puedes agregar una imagen al igual que lo hacemos en el cuerpo de entradas y páginas con el editor WYSIWYG de WordPress. Para ello, pulsa sobre el botón Añadir objeto y selecciona la imagen que desees.

Utilizando el widget HTML Personalizado

Cómo añadir una imagen en el sidebar de WordPress 2

Lo que tenemos que hacer es arrastrar el widget HTML Personalizado y soltarlo en el contenedor del sidebar de nuestro tema. Mediante el widget HTML Personalizado, como su propio nombre indica, podemos agregar el contenido HTML que nosotros queramos. Si no tienes ni idea de HTML, no te preocupes, a continuación te dejo el código que debes pegar en el cuerpo del widget. Ojo, no te olvides de sustituir la URL de la imagen del ejemplo, por la URL de tu imagen.


Creando un widget personalizado

Si tu tema no soporta widgets, puedes crearlos tu mismo editando el fichero functions.php. El código para crear un widget para mostrar una imagen lo puedes ver más abajo. Copia el código y agrégalo en tu fichero functions.php.

php

class SideBar_Image_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'SideBar_Image_Widget',
            'SideBar Image Widget',
            array( 'description' => 'Widget para mostrar imagen', )
            );
    }
    
    function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $args['before_widget'];
        echo $args['before_title'] . "Imagen" . $args['after_title'];
        echo "";
        echo $args['after_widget'];
    }
}
?>

Para registrar este widget personalizado en la inicialización de WordPress utilizaremos este action hook.

php
$templatePath =  get_template_directory();
require_once $templatePath . "/widgets/class.custom-sidebar-image-widget.php";
...
...
function register_sidebar_image_widget() {
    register_widget( 'SideBar_Image_Widget' );
}
add_action( 'widgets_init', 'register_sidebar_image_widget' );
?>

 

Y hasta aquí nuestro artículo sobre cómo añadir una imagen en el sidebar de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Image by Andi Nur Abdillah from the Noun Project

SIGUE LEYENDO…
Ir a la fuente / Author: Jorge López

VEO lo que NO SE VE

 
seo o no seo precio seo
seo o no seo precio seo coste seo

Más SEO, Más CLIENTES

Posicionamiento SEO, Hosting Servidores SSD optimizados para WordPress, Diseño de páginas web WordPress

Primer ANÁLISIS SEO GRATIS! Envía un email con tu dominio a:

Josean | www.seox.es | seox@seox.es  |  656 545 123  🙂

  Licencia de Creative Commons

SeoX: SEO en Bilbao para agencias, posicionamiento de páginas web, Link Building, Hosting WordPress, Marketing Digital en Bilbao

seo - Search engines - Search engine - Optimization - Traffic - Engine optimization - Search engine optimization - Optimize - Digital marketing - Optimizing - Ppc - Organic search - Backlinks - Online marketing - Link building - Seo strategy - On page seo - Keyword research - Adwords - Search engine results - line presence - Webmaster - Pay per click - Serps - Sitemap - Seo services - Engine results - Marketing strategy - Search marketing - Pay per - Webmasters - Local seo - Internet marketing - Backlink - Mobile friendly - Google search console