Cómo añadir contenido antes y después de las entradas en WordPress

Me ha surgido el problema de añadir los botones sociales, antes y después de cada entrada en WordPress.

Te voy a explicar como añadir contenido antes y después de las entradas de WordPress, de forma sencilla y automática.

En este caso me voy a centrar en los botones sociales, pero puedes añadir el contenido que tú quieras.

Existen muchos plugins para añadir estos botones. Hasta ahora estaba usando Social Warfare, y lo hace perfectamente.

-¿Entonces cual es el problema Julián?

No hay problema. Solo que, si puedo ahorrarme un plugin, lo prefiero, porque cuantos mas tienes instalados, mas lenta es tu web.

Cómo añadir contenido antes y después de las entradas de WordPress

Como ya te he hablado en otro artículo. El maquetador que uso en mi web es Elementor Pro (de pago), aunque también tiene una versión gratuita muy potente.

Elementor tiene la opción de añadir botones sociales. Y la verdad es que tiene muchas opciones de configuración y quedan muy bien. Podéis verlos en funcionamiento en este mismo artículo.

Share Butons Elementor
Share Butons Elementor

El problema con el que me he encontrado es que no podia añadirlos antes y después de cada entrada. El plugin Social Warfare lo hace automaticamente. Con Elementor hay que hacerlo de forma manual (al menos yo no he encontrado la forma), añadirlo en cada entrada, una a una. Un rollo.

¿Cual es la solución que he encontrado?

Instalar otro plugin o añadir código php que realice esta función.

1. Añadir contenido mediante un plugin

Si, es cierto. En teoría lo que iba a hacer era ahorrarme un plugin, quitando Social Warfare y usando Share Butons, que trae por defecto Elementor. Pero al final no me voy a ahorrar ningún plugin.

Me ha tocado instalar otro, para poder mostrar automáticamente los botones sociales de Elementor en cada entrada, antes y después de cada una.

Aun así, los voy a usar, porque me gusta mas el diseño, y porque tiene la opción de compartir por email. Esta opción no la tenia Social Warfare.

El plugin que he usado para añadir los botones antes y después de cada entrada es  Insert Post Ads.

Aunque, aparentemente, este plugin, por el nombre, ha debido ser creado para añadir publicidad dentro de los artículos. Nos sirve para añadir cualquier tipo de contenido, antes y después de cada post.

Te dejo un vídeo en ingles. El plugin es muy sencillo, se entiende bien el funcionamiento.

Una vez instalado y activado el plugin, nos aparece una nueva opción en la barra lateral del escritorio de WordPress.

Post Adverts

Dentro del apartado Post Adverts/Settings nos encontramos con las pocas opciones de ajustes que tiene este plugin. La verdad es que es un plugin muy sencillo, pero a la vez útil.

Ajustes Insert Post Ads
Ajustes Insert Post Ads

Seleccionamos donde queremos que se muestre el contenido que vamos a crear. Yo en este caso, solo he marcado que se muestre en las entradas, como ves en la imagen de arriba.

Y en el caso de que vayas a usar CSS personalizado para el contenido a mostrar, puedes marcar la opción de Exclude CSS. Si no, la dejas desmarcada.

Ahora vamos a ver como añadir los botones sociales de Elementor en nuestras entradas de forma automática.

Ten en cuenta, que con este plugin, no solo vas a poder añadir los botones. Podrás añadir cualquier contenido que se te ocurra. En realidad, tiene bastante potencial, si lo piensas.

Añadir contenido a las entradas con Inset Post Ads
Añadir contenido a las entradas con Inset Post Ads

En este caso estoy poniendo como ejemplo, añadir los botones sociales de Elementor, pero como digo, puedes usarlo para añadir cualquier tipo de contenido antes y después de cada entrada en tu wordpress, y además, tiene la opción de añadir contenido en una zona concreta de la entrada con la opción After Paragraph Number. Añadiendo el numero de párrafo donde queremos que aparezca.

Para añadir lo botones sociales de Elementor antes y después de cada entrada, tienes primero que crearlos. Doy por hecho que usas Elementor, y que sabes añadir una sección, añadir los botones sociales, los sabes configurar, y sabes guardarlos como una plantilla. Si no sabes hacerlo, te dejo un vídeo en ingles:

Una vez creados los botones, y guardada la plantilla. Tenemos que ir a la sección Elementor/Mi biblioteca y copiar el shorcode, que será el código que añadiremos en la caja Adver Code que hemos visto mas arriba.

El resultado es el que ves en este artículo, si te fijas en los botones sociales.

Si necesitas desactivar en algún artículo en concreto que se muestre el contenido, puedes hacerlo desde la opción que aparece en cada post. Te dejo una captura para que veas donde está:

Disble Adverts Post
Disble Adverts Post

Espero que te sea útil este plugin como me lo ha sido a mi.

2. Añadir contenido mediante código php

Si no quieres instalar mas plugins, tienes la opción de hacerlo añadiendo código php.

¿Donde se añade este código?

Tienes varias opciones.

Si usas el theme GeneratePress, puedes usar los GP Hooks que trae GeneratePress en su versión PRO.

Los GP Hooks te dan la opción de añadir contenido, ya sea en html o en php en diversas zonas de tu web, sin que tengas que editar ningún archivo. Es muy cómodo, y te aseguras que, aunque actualices tu versión de WordPress, no se sobre escribirán los cambios que hayas hecho.

Si no tienes GeneratePress, puedes editar el archivo funcions.php de tu theme.

En esta imagen puedes ver el código y en que secciones de GP Hooks lo he añadido.

GP Hooks GeneratePress
GP Hooks GeneratePress

Te dejo el código php que he utilizado:
<?php
if (is_single()) :
echo do_shortcode('aquí contenido que quieres mostrar');
endif;
?>

Finalmente he añadido los botones mediante el plugin Insert Post Ads. Por algún motivo que desconozco, cuando los añado mediante el código php y los GP Hooks, no consigo ajustar la posición en todos los navegadores igual. Con el plugin se ven perfectamente en todos los navegadores.

Lo único que no he conseguido aun, es centrar los botones verticalmente.

Si sabes como centrarlos, te agradecería que lo dejaras en los comentarios.

Al final he conseguido centrarlos.

Fuente de las imágenes: Flaticon

Cómo añadir contenido antes y después de las entradas en WordPress
5 (100%) 4 votes

8 comentarios en “Cómo añadir contenido antes y después de las entradas en WordPress

  1. Gracias Julian por esta entrada, yo actualmente estoy construyendo mi web y estoy usando el plugins social warfare que fue el que nos recomendó Arturo Garcia en su curso, y hace la tarea más que bien.
    Pero veo que el plugin que muestras nos da la versatilidad de poder agregar cualquier cosa, como la firma, un anuncio , las redes mismas, un formulario de contacto, bueno cualquier contenido que sea útil según la estrategia que implementemos en el blog.
    Además te da la posibilidad de darle un diseño más personalizado a las redes sociales.

    Muy buen aporte

  2. JJulian en cuanto a centrar los iconos verticalmente, estuve mirando elementor y veo que no da la opción así que tendrías que utilizar Css.
    Yo probé en mi web y se podría hacer de la siguiente manera
    .elementor-social-icons-wrapper a{
    display:block;
    width:50px;
    }
    Este código lo pegas en personaliza-css adicional y ya te los dejaría verticalmente alineados.

    Pero ten en cuenta que si añades este código, te lo aplicara para todos los iconos sociales que añadas con elementor en tu web.
    Para tu caso no habría problema creo, porque solo lo vas añadir en las entradas del blog.

    Espero que te sirva de ayuda

    • Efectivamente Jhon! Este plugin tiene mucho potencial. Yo lo he usado para los botones sociales, pero sirve para todo lo que comentas.

      Gracias por tu comentario. Me alegro que, aunque no lo vayas a usar para los botones, te sea de utilidad.

      Al final los he dejado en la posición que quiero. Gracias por el aporte del CSS. Igualmente tomo nota, siempre viene bien.

      Que sepas que es el primer comentario en mi web.

      Me ha hecho ilusión, y además aportando valor.

      Muchas gracias!

  3. Buen artículo Julián.
    Yo al igual que Jhon, también estoy en pleno desarrollo de mi web. Es interesante el hecho de poder agregar contenido tanto al inicio, como al final de cada entrada o página o incluso en el centro. El pero sería que tienes que instalar otro plugin, aunque quitaras el otro pero bueno creo que merece la pena.

    Un saludo!

  4. Hola Julian, me ha venido muy bien este articulo.
    Justamente estoy refrescando mi blog y me ha dado luz sobre algo que quiero hacer.

    Como decía Jhon las posibilidades con ese plugin son varias mas alla de los iconos sociales.

    Ademas que los GP Hooks te permiten dar un salto en cuanto a personalizacion la web que estemos haciendo

    • Me alegro que te sea util Joel. Las posibilidades son infinitas.

      No hay nada perfecto. Aunque, juntando varios imperfectos, se puede hacer lo que buscamos.

      Yo no he podido ajustar como quería los botones sociales con GP Hooks, sin embargo, con este plugin si he podido.

      Ya nos contarás que utilidad le das tú.

      Un saludo, y gracias por el comentario.

Deja un comentario