• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Zona de widgets en el contenido de artículos en WordPress

Zona de widgets en el contenido de artículos en WordPress

Zona de widgets en el contenido de artículos en WordPress

[ 4 junio 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

funcionalidad mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo Agregar una nueva zona de Widgets a un theme WordPress, en este artículo veremos cómo añadir una zona de Widgets pero agregaremos la nueva zona en una posición específica como parte del contenido de los artículos.

 

Generalidades

Tener una zona de Widgets dentro del contenido puede ser útil en casos en los que por ejemplo quieras mostrar anuncios como parte de tu contenido.

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen en donde se muestra un widget como parte del contenido.

Widget de Banner imagen en contenido

Veremos dos formas de agregar una zona de Widgets en el contenido: la primera a través de un shortcode, el cual agregaremos manualmente en el contenido, y la otra, una forma automática, la cual mostrará la zona de Widgets después de un párrafo específico.

 

Método 1 – Usando un Shortcode

En este caso tendrás que hacer el proceso de manera manual agregando el Shortcode en los artículos en donde deseas que se muestren los widgets de la zona de widgets creada.

La ventaja es que tienes un mejor control sobre tu contenido, la desventaja es que el proceso puede ser tedioso si tienes muchos artículos.


// Registro de la zona de Widgets llamada: Between Content
register_sidebar( array(
    'id' => 'content-widget',
    'name' => __( 'Between Content', 'decodecms' ),
    'description' => __( 'Widget Area between content', 'decodecms' ),
    'before_widget' => '<div>',
    'after_widget' => '</div>',
) );

// Creación del shortcode: [content_widget]
add_shortcode( 'content_widget', 'dcms_get_content_widget_area' );
function dcms_get_content_widget_area() {
    ob_start();
    dynamic_sidebar( 'content-widget', array(
	    'before' => '<div class="content-widget widget-area">',
	    'after'  => '</div>',
    ) );
    $dcms_content_widget = ob_get_contents();
    ob_end_clean();

    return $dcms_content_widget;
}

En el código anterior:

  • Primero creamos la nueva posición llamada Between Content usando la función register_sidebar()
  • Usamos la función add_shortcode() para crear el shortcode llamado content_widget
  • La función de creación de shortcode hace referencia a la función dcms_get_content_widget_area() que es la que muestra la zona y todos los widgets que tiene.
  • Podemos usar el shortcode como parte del contenido usando la siguiente sintaxis: [content_widget]

 

Método 2 – Usando un Hook

En este caso se agregará la zona de widgets con todos sus widgets de manera automática, sólo tienes que especificar después de qué párrafo se mostrará.


// Registro de la zona de Widgets llamada: Between Content
register_sidebar( array(
    'id' => 'content-widget',
    'name' => __( 'Between Content', 'decodecms' ),
    'description' => __( 'Widget Area between content', 'decodecms' ),
    'before_widget' => '<div>',
    'after_widget' => '</div>',
) );

// Uso del hook de filtro the_content
add_filter( 'the_content', 'dcms_insert_content_widget' );
function dcms_insert_content_widget( $content ) {
     
    $content_widget_area = dcms_get_content_widget_area();
 
    if ( is_single() ) {
        return dcms_insert_after_paragraph( $content_widget_area, 2, $content ); 
    }
    
    return $content;
}

//Obtenemos el contenido de la zona de widgets
function dcms_get_content_widget_area() {
    ob_start();
    dynamic_sidebar( 'content-widget', array(
	    'before' => '<div class="content-widget widget-area">',
	    'after'  => '</div>',
    ) );
    $dcms_content_widget = ob_get_contents();
    ob_end_clean();

    return $dcms_content_widget;
}

//Funcion auxiliar para insertar el contenido en un determinado párrafo
function dcms_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
 
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
 
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
     
    return implode( '', $paragraphs );
}

En el código anterior:

  • Primero creamos la nueva posición llamada Between Content usando la función register_sidebar()
  • Usamos la función add_filter() que usa el hook the_content y que hace referencia a la función dcms_insert_content_widget()
  • Dentro de esta función se llama a otras funciones, con la función dcms_get_content_widget_area() obtenemos los widgets
  • Colocamos el contenido en una variable llamada $content_widget_area y lo pasamos a la función dcms_insert_after_paragraph()
  • El segundo parámetro de la función dcms_insert_after_paragraph() define el número de párrafo después del cual se mostrará el contenido de los widgets, en el ejemplo se mostrará después del segundo párrafo

 

Conclusión

Tal como hemos visto, es posible mostrar widgets de una determinada posición como parte del contenido de nuestros artículos, ya sea de forma manual usando un shortcode, o de manera automática usando un hook

 
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar nueva zona Widgets WordPressAñadir una nueva zona de Widgets a un theme WordPress
  • Cambiando la estructura de menú de WordPressCambiando la estructura de menú de WordPress
  • Archivo de plantilla de acuerdo a url personalizada en WordPressArchivo de plantilla de acuerdo a url personalizada en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. gaston

    3 septiembre, 2019

    hola quisiera saber como hacer para colocar el area de widgets justo al final de las entradas y no en un parrafo en particular usando el metodo Hook que nos enseñas en el articulo. Saludos

    • Jhon Marreros Guzmán

      4 septiembre, 2019

      Hola, simplemente usa el filtro the_content, revisa el siguiente artículo de guía en donde se inserta artículos relacionados al final del artículo. https://decodecms.com/entradas-relacionadas-mejoradas-sin-plugins-en-wordpress/

  2. Manuel

    29 octubre, 2019

    Hola, he probado su tutorial y le agradezco la explicación pues es muy concisa y me ha funcionado. Mi pregunta es cómo insertar más zonas de widgets entre párrafos siguiendo el método dos, por ejemplo un widgets para el párrafo 2, otro para el 6, 9, etc.

    Garcias

    • Jhon Marreros Guzmán

      4 noviembre, 2019

      Hola, sería reutilizar las veces que quieras la función dcms_insert_after_paragraph, como has visto en el código esa función acepta como parámetro el párrafo y también el contenido del widget area. Saludos.

      • Manu

        7 enero, 2021

        Hola Jhon, gracias por este tipo de contenidos que ayudan a no depender de plugin y optimizar mejor el WordPress. Cuando dices reutilizar las veces que quieras la función “dcms_insert_after_paragraph”, cómo hay que hacerlo exactamente. Pues no consigo que me funcione en más de un párrafo. Solo me funciona si sigo exactamente las instrucciones para un párrafo. Debo hacer algo mal y no consigo saberlo.

        • Jhon Marreros Guzmán

          13 enero, 2021

          Hola, duplica las funciones de: // Registro de la zona de Widgets llamada: Between Content , y // Uso del hook de filtro the_content , el resto es lo mismo.

  3. Jarl

    10 abril, 2020

    Genial el tuto. Yo lo estaba haciendo con 2 plugins, pero siempre es bueno usar el código. Gracias por la explicación y el video.

    Pero me queda una duda. Quise agregar estilo en el archivo style.css de mi child-theme. Pero no me toma el estilo.

    Intente con:

    .content-widget {}
    #content-widget {}
    content-widget {}

    Y con ninguna. Solo queria agregar unos 30 pixeles arriba para separarlo del párrafo y por debajo también. Además, centrar para evitar que se mueva en tablets. Ya que use un banner de 300×50 solo para móviles.

    Gracias.

    • Jhon Marreros Guzmán

      10 abril, 2020

      Hola, en el código de este artículo content-widget es un clase, es decir usarías .content-widget, podrías evaluar agregar otro nombre de clase adicional y probar, otra opción es usar !important ya que es posible que tu theme tenga algún estilo con el mismo nombre tenga prioridad.

  4. Douglas

    3 junio, 2021

    Genial esta info. Espero me funcione.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cómo añadir un Favicon en WordPress

Query Monitor para optimizar y depurar tu sitio WordPress

Apuntar el dominio principal de un sitio WordPress a una carpeta

Insertar javascript en WordPress de forma correcta

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados