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.
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
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…
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
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/
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
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.