Recomendado

Las mejores ofertas del Black Friday en Hormiguitas Ahorradoras

viernes, 10 de julio de 2020

Shortcode al estilo de WordPress para Blogger

Hoy voy a tratar un tema que me parece interesante y del cual no he visto nada por la red y es como crear nuestros propios shortcode al estilo de WordPress adaptándolos a Blogger.

 

Los que habéis trabajado o conocéis WordPress ya sabréis que es eso de los shortcode, para los que no sepan de su existencia o nunca hayan trabajado con shortcode, simplemente decir que un shortcode es, como ya se deja ver en el nombre, un código corto que es interpretado por la página y nos muestra aquello que hayamos programado para ese shortcode.

Hay que tener en cuenta que un shortcode por si solo, no vale para nada, no hace nada, necesita de programación php extra para que pueda funcionar, y como ya sabemos en Blogger no admite lenguaje php por lo que nosotros lo haremos en HTML y JavaScript, comencemos su realización.

El ejemplo que vamos a ver es crear un shortcode muy sencillo para que luego este ejemplo podamos adaptarlo a las necesidades de cada uno.

 Vamos a ver como haríamos un shortcode para mostrar en cualquier parte del blog, en este caso es un mensaje de que nos sigan en la red social de Instsagram.

Nuestro shortcode seria:

  1. <div id="instagram" />

Este código lo podemos poner en cualquier parte de nuestro blog, (dentro de las entradas, en la cabecera, en la columna laetal..), por si solo este código no hará nada, es ahora cuando le diremos con JavaScript que tiene que hacer el blog cuando encuentre este código.

Pondremos el siguiente código antes de la etiqueta </body>  de nuestro código fuente

  1. <script>
  2. //creado por https://joason.com
  3. document.getElementById("instagram").innerHTML = '<a href="url de destino">Sígueme en Instagram</a>';
  4. </script>

O si lo que necesitáis es poner una imagen enlazada, el código seria el siguiente:

  1. <script>
  2. //creado por https://joason.com
  3. document.getElementById("instagram").innerHTML = '<a href="url de destino"><img src="url de la imagen" width="ancho" height="alto" /></a>';
  4. </script>

es muy importante que lo pongamos al final del todo porque este código lo que hace encontrar el contenedor id="instagram" que hemos puesto anteriormente y escribir dentro del contenedor un enlace, con texto o imagen, para llevarlo a nuestra cuenta de Instagram.

Como podéis ver, cada vez que queramos poner nuestro mensaje de “Sígueme en Instagram” tan solo tenemos que poner nuestro shortcode que hemos creado <div id="instagram" />

Este ejemplo tan sencillo lo podéis extrapolar a cualquier necesidad de vuestro blog, poner un botón, un video, publicidad, cualquier cosa que podáis imaginar.

  • En esta nueva entrada os cuento como hacer los shortcode de otra manera, con gestión desde el back ofice.

 

Eso es todo, espero que os sea de utilidad, y como siempre, cualquier duda comentarla.

 

Un saludo…

No hay comentarios:

Publicar un comentario