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

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

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.

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