• 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
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 WordPress Añadir una nueva zona de Widgets a un theme WordPress
  • SVG animado en WordPress Insertar un logo SVG animado en WordPress
  • Saltos de enlace en WordPress Saltos de enlace en una misma página en WordPress
  • Archivo HTML como página de inicio en WordPress Archivo HTML como página de inicio en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando…

Interacciones del lector

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.

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

*

* Gravatar habilitado

Barra lateral primaria

Únete a DecodeCMS

Recibirás como regalo:

Fundamentos de programación:
Guía base para entender la estructura de WordPress.

Mini curso en video de:
Cómo construir un plugin de entradas populares.

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Tablas Responsive en WordPress sin plugins

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

Propiedades avanzadas de menú en WordPress

Cómo usar imágenes SVG en WordPress

Recientes

  • Configura el theme Twenty Twenty de WordPress
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Archivo HTML como página de inicio en WordPress
  • Configurar la papelera de WordPress
alojamiento wordpress

© logo decode pie Copyright 2019 | Todos los derechos reservados | Política de Privacidad