Para prescindir de plugins externos innecesarios, aquí verás cómo hacer tus propios widgets para insertar en tu página de WordPress o dentro de cualquier post.

Sólo tienes que saber algo de HTML y de javascript. Vamos a ello!

Custom HTML

Si has visto algún otro post de este blog ya habrás visto la tabla de contenido de arriba, o la notificación de cookies en la barra lateral.

Ambos son elementos dinámicos que he programado con HTML y javascript y que puedes insertar en múltiples sitios de tu WordPress usando un bloque "Custom HTML".

Simplemente inserta este bloque y dentro podrás introducir tu código HTML personalizado y programable con javascript. Veamos unos ejemplos.

Notificación de cookies

La barra lateral de este blog muestra un mensaje de consentimiento de cookies, con un enlace a la política de privacidad.

Puede que hayas visto que al cambiar el idioma de la página, se cambia el contenido de dicho mensaje automáticamente.

Haz click derecho para inspeccionar la estructura de la página.

Para que funcione correctamente, imagina que el bloque Custom HTML que insertas es un iframe o una especie de página insertada; una sub-página dentro de nuestra página.

Editamos el contenido del Custom HTML como si de otra página se tratara, y podemos añadir libremente lo que queramos.

Para la notificación, solo quiero una línea de texto, a la que asigno la id "cookie-txt". Es bueno añadir toda la estructura HTML básica, aunque se puede prescindir de muchos elementos. 

<html>
<body style="background-color:'lightgrey';width:100%;">
<p id="cookie-txt"></p>
</body>
</html>

Ahora añado una función javascript que lea el idioma de la página y rellene esta línea en consecuencia.

Puedes hacer distintas pruebas usando la consola y el inspector del navegador, haciendo click derecho en la página.

Una forma rápida de obtener el idioma es leyendo la propiedad lang="es-ES" del elemento <html> de la página (o lang="en-GB" para inglés).

El resto es una condición:

  • Si se detecta "es-ES", definimos el mensaje en Español.
  • Si se detecta "en-GB", definimos el mensaje en Inglés.

El contenido del mensaje lo definimos mediante la propiedad innerHTML del elemento <p>, por lo que podemos darle cualquier formato HTML, como incrustarle un enlace o resaltar en negrita.

<script>
var lang=document.getElementsByTagName("html")[0].lang;
if(lang=="es-ES"){
document.getElementById("cookie-txt").innerHTML="🍪 <a href='https://theroamingworkshop.cloud/b/?page_id=1225' target='_blank'>Política</a> <b>anti-Cookies</b> aceptada al navegar.</p>";
}else if(lang=="en-GB"){
document.getElementById("cookie-txt").innerHTML="<b>🍪 anti-Cookies</b> <a href='https://theroamingworkshop.cloud/b/?page_id=3' target='_blank'>policy</a> accepted while browsing.";
}
</script>

Por lo que quedaría algo así:

El código completo del Custom HTML que muestra la notificación de cookies es este:

<html>
<body style="background-color:'lightgrey';width:100%;">
<p id="cookie-txt"></p>
</body>
<script>
var lang=document.getElementsByTagName("html")[0].lang;
if(lang=="es-ES"){
document.getElementById("cookie-txt").innerHTML="🍪 <a href='https://theroamingworkshop.cloud/b/?page_id=1225' target='_blank'>Política</a> <b>anti-Cookies</b> aceptada al navegar.</p>";
}else if(lang=="en-GB"){
document.getElementById("cookie-txt").innerHTML="<b>🍪 anti-Cookies</b> <a href='https://theroamingworkshop.cloud/b/?page_id=3' target='_blank'>policy</a> accepted while browsing.";
}
</script>
</html>

El bloque Custom HTML, en este caso, lo inserto como un elemento de la barra lateral:

Tabla de contenido

La tabla de contenido que aparece en cada post viene a ser más o menos lo mismo que lo anterior.

En primer lugar, defino la tabla dándole formato, y dejando el contenido vacío para rellenar luego con una función.

<div id="menu" style="padding:20px 20px 20px 20px; border-left:2px solid darkgrey;">
<p style="font-weight:bold;">Contenido</p>
</div>

En este caso, lo que haré es buscar los "headings" o títulos de cada apartado, en concreto los de etiqueta <h2>. Por ello, al redactar los posts debo usar siempre este tipo de encabezado (que es el habitual) si quiero que aparezca en la tabla.

Además, defino un ancla o html Anchor, que se asignará como "id", lo cual nos permitirá crear un enlace que nos lleve hasta dicho encabezado.

La función hará lo siguiente:

  1. Buscar los elementos <h2> uno por uno.
    for (let i=0;i < window.document.getElementsByTagName("h2").length; i++) { element = window.document.getElementsByTagName("h2")[i];
    ...
  2. Tomar el texto que contiene.
    text = "▹ "+element.innerHTML;
  3. Crear el nuevo elemento de tipo hiperenlace (<a>) que irá a la tabla de contenido, con el texto anterior.
    var newelement = document.createElement("a"); newelement.innerHTML=text;
  4. Tomar la "id" del post y del encabezado para crear un enlace a dicho encabezado.
    var postid = window.document.getElementsByTagName("article")[0].id;
    var url = "https://theroamingworkshop.cloud/b/?p="+postid.substr(5,postid.length)+"#"+element.id;
  5. Añadirlo todo en una línea al elemento de la tabla de contenido
    newelement.setAttribute("href", url); newelement.appendChild(document.createElement("br")); window.document.getElementById("menu").appendChild(newelement);

TIP! Añadiendo #id-de-la-sección al final de una URL te dirije a dicho apartado.

  1. Por último, algunas páginas tardan un tiempo en cargar y no están todos los encabezados disponibles al inicio, por lo que meto todo el código anterior en una función, y la invoco con un tiempo de retardo.
    window.setTimeout(fillmenu,500);

El código del bloque completo sería el siguiente:

<div id="menu" style="padding:20px 20px 20px 20px; border-left:2px solid darkgrey;">
<p style="font-weight:bold;">Contenido</p>
</div>
<script>
var text;
var element;

function fillmenu(){

for (let i=0; i<window.document.getElementsByTagName("h2").length; i++){
element = window.document.getElementsByTagName("h2")[i];
text = "▹ "+element.innerHTML;
var newelement = document.createElement("a");
newelement.innerHTML=text;
var postid=window.document.getElementsByTagName("article")[0].id;
var url = "https://theroamingworkshop.cloud/b/?p="+postid.substr(5,postid.length)+"#"+element.id;
newelement.setAttribute("href", url);
newelement.appendChild(document.createElement("br"));
window.document.getElementById("menu").appendChild(newelement);
}
}

window.setTimeout(fillmenu,500);

</script>

TIP! Añade este bloque HTML a tus bloques reusables y lo podrás insertar en todos tus posts. Este bloque de TIP! es otro ejemplo.

Bloque de TIP!

TIP! Este bloque de TIP! es otro ejemplo. Tendrás que reconvertir a un bloque regular si quieres alterar el contenido solo en el bloque insertado

Aquí su código:

<p style="border-left:3px solid orange;padding-left:5px;font-size:14px;"><i><b>TIP! </b>Este bloque de <b>TIP!</b> es otro ejemplo. Tendrás que reconvertir a un bloque regular si quieres alterar el contenido <b>solo</b> en el bloque insertado</i></p>

Conclusión

Como verás, las posibilidades son realmente ilimitadas así que queda todo a expensas de tu imaginación.

Se creativo y diseña tus propios widgets, ya verás lo bien complementan tu blog!

Como siempre, dudas o comentarios al Twitter 🐦 ¡Hasta otra!

(el bloque de Twitter también es un reutilizable 👀 )

🐦 @RoamingWorkshop