Cómo Insertar HTML en Widget de Texto en WordPress

Cómo Insertar HTML en Widget de Texto en WordPress

Los widgets son un componente muy característico de WordPress, y permiten agregar contenido y características de forma rápida y fácil a tu sitio web, con sólo arrastrar y soltar el widget en el sidebar que tienes en tu tema. Hoy te mostraremos cómo insertar html en widget de texto en WordPress.

Qué es Widget en WordPress?

Un Widget en WordPress es un pequeño bloque que tiene funciones determinadas que cumple en el sitio web, mostrar comentarios, entradas recientes, menú, entre otros, que se agrega fácilmente a un sidebar con la característica de Drag and Drop para mostrar su contenido en una área específica de tu sitio web.

Los Widgets en WordPress originalmente fueron creados para ofrecer una forma fácil a los usuarios de estructurar la barra lateral del sitio web de forma flexible y práctica.

Actualmente los widgets han revolucionado bastante desde su primera aparición en la versión 2.2 y se ha desarrollado una API especial para crear widgets para los desarrolladores de WordPress.

Widget de Texto en WordPress

El widget de texto que viene preinstalado con el paquete de WordPress está compuesto básicamente de dos campos, uno de título de widget, y otro un área para insertar texto y también código HTML para darle un formato determinado al contenido introducido.

Widget de texto en WordPress para insertar texto simple o con HTML

WordPress por defecto incluye varios widgets que permiten mostrar contenido básico peculiar de un weblog, como mostrar categorías, menú, páginas, calendario de posts, entre otros, para ayudar a los visitantes a ubicar el contenido que desean buscar fácilmente.

Insertar HTML en Widget de Texto en WordPress

Para agregar un widget al sidebar de tu sitio web, primero te diriges a la Apariencia » Widgets para ver una lista de widgets que vienen con WordPress. Eliges en la parte de abajo el widget titulado Texto, que será nuestro objeto de trabajo.

Arrastrar y soltar widget de texto en WordPress

Una vez ubicado, lo arrastras y lo sueltas en la barra lateral donde quieres que aparezca, para empezar a insertar texto con formato HTML. Creamos un sencillo ejemplo de información sobre la imagen del día por ejemplo, que le daremos una presentación con HTML.

El código HTML que insertaremos para mostrar el contenido con el código incrustado, tendrá un formato similar al siguiente :

<div id="foto-dia">
    <img src="http://example.com/Foto-del-dia.jpg"
    alt="Dos niños con una hoja paraguas">
    <h4>Niños Bajo Lluvia</h4>
    <p>Dos niños asiáticos yendo al colegio bajo una fuerte llovia,
    con su <i>paraguas</i> de hoja grande de alguna planta,
    y una <b>sonrisa</b> grande en la cara.</p>
    <label><span>Lugar : </span><b>Filipinas</b></label>
    <label><span>Tipo : </span><b>JPEG</b></label>
</div>

Con algo de código de CSS, que es necesario para darle una presentación más vistosa y colorida al contenido, en este snippet.

label {
    display: block;
    font-weight: normal;
}

#foto-dia {
    padding: 10px;
    background: #eee;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #999;
}

#foto-dia p {
    padding: 10px 0;
}

La fusión de HTML y CSS en el campo de texto para mostrar el resultado, agregando la etiqueta
style para permitir incrustar CSS dentro del widget de texto tendrá esta forma final.

<style type="text/css">
label {
    display: block;
    font-weight: normal;
}

#foto-dia {
    padding: 10px;
    background: #eee;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #999;
}

#foto-dia p {
    padding: 10px 0;
}
</style>

<div id="foto-dia">
    <img src="http://example.com/Foto-del-dia.jpg"
    alt="Dos niños con una hoja paraguas">
    <h4>Niños Bajo Lluvia</h4>
    <p>Dos niños asiáticos yendo al colegio bajo una fuerte llovia,
    con su <i>paraguas</i> de hoja grande de alguna planta,
    y una <b>sonrisa</b> grande en la cara.</p>
    <label><span>Lugar : </span><b>Filipinas</b></label>
    <label><span>Tipo : </span><b>JPEG</b></label>
</div>

Todo el código final que debe ser copiado y pegado completo en el widget de Texto de WordPress para ver el resultado similar al que aparece en la imagen final del widget.

Imagen resultado final de agregar html a widget de texto en WordPress

De esta forma has terminado de insertar HTML en widget de texto en WordPress de forma exitosa. Es un ejemplo sencillo que puedes extender mucho más si tienes conocimientos amplios de lenguaje de estructura HTML y CSS para la estilización adecuada.

Esperamos que este post te ayude a insertar HTML en tu widget en el sidebar de tu tema de WordPress. Para preguntas síguenos por WPBody en facebook o usa la caja de comentarios abajo.

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí