Añadir fragmentos de código JavaScript personalizados para el complemento de YouTube Feed

Cómo añadir código JavaScript personalizado junto a un feed de YouTube utilizando WPCode, en lugar de editar los archivos del tema.

¿Te gustaría añadir tu propio código JavaScript a tu feed de YouTube?

En esta guía, te mostraremos dos formas de hacerlo. La primera utiliza el cuadro «JavaScript personalizado» que viene integrado en el plugin YouTube Feed. La segunda utiliza WPCode, un plugin gratuito de los creadores de WPForms y All in One SEO. En ambos ejemplos se añade una breve nota al final de tu feed.

Antes de empezar, asegúrate de que el plugin «YouTube Feed» esté instalado y activado en tu sitio web.

• Cómo utilizar el cuadro de JavaScript personalizado
• Uso de WPCode
• Ejecutar tu código cuando se carguen más vídeos
• Preguntas frecuentes

Cómo utilizar el cuadro de JavaScript personalizado

Para empezar, abriremos el cuadro «JavaScript personalizado». Es la forma más rápida de añadir código JavaScript, ya que forma parte del complemento.

En tu panel de control de WordPress, ve a «YouTube Feed» » «Configuración». A continuación, haz clic en la pestaña «Fuentes ».

En la pestaña «Feeds», desplázate hacia abajo hasta el cuadro «JavaScript personalizado ». A continuación, pega tu código en él. En este ejemplo, pegaremos un código que añade una breve nota al final de tu feed.

$( '.sb_youtube' ).not( ':has(.my-feed-note)' ).append( '<p class="my-feed-note">Thanks for stopping by!</p>' );

No es necesario añadir ninguna etiqueta de script. El complemento se encarga de añadir tu código a la página por ti. El $ El signo «@» funciona como atajo para jQuery.

En la parte inferior de la página, haz clic en «Guardar cambios».

Ahora, abre una página en la que se muestre tu feed. La nota aparece al final del feed.

El plugin ejecuta tu código una vez que se han cargado los vídeos. Lo vuelve a ejecutar cada vez que se añaden más vídeos, por ejemplo, cuando un visitante hace clic en el botón «Cargar más». Por eso, en el ejemplo se comprueba primero si ya existe la nota. Sin esa comprobación, la nota se añadiría de nuevo cada vez.

Cómo «The Box» protege tu código

El cuadro es ideal para un fragmento corto que guardes una sola vez. Cuando vuelvas más tarde a la pestaña «Feeds», el cuadro mostrará una barra invertida delante de cada comilla de tu código. Cada vez que guardes la pestaña de nuevo, se añadirán más, por lo que el código del cuadro ya no coincidirá con lo que escribiste.

Si tienes pensado editar el código más adelante, WPCode es la mejor opción. Mantiene el código exactamente tal y como lo has escrito.

Uso de WPCode

También puedes añadir tu código JavaScript con WPCode. Es un plugin gratuito que guarda todos tus fragmentos de código personalizados en un solo lugar.

Para empezar, instala y activa el plugin WPCode. A continuación, ve a «Code Snippets» » «Añadir fragmento de código».

En la página «Añadir fragmento de código», pasa el cursor por encima del cuadro titulado «Añadir tu código personalizado (nuevo fragmento de código)». A continuación, haz clic en «+ Añadir fragmento de código personalizado».

En la ventana que se abra, selecciona «Fragmento de JavaScript».

En primer lugar, escribe un título para tu fragmento de código. A continuación, pega tu código en el cuadro de código.

En este ejemplo, utilizaremos un código que añade la misma nota breve al final de tu feed. A diferencia del primer ejemplo, no utiliza jQuery. Esto hace que funcione correctamente en páginas que no lo cargan.

document.addEventListener( 'DOMContentLoaded', function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
} );

No es necesario que añadas ninguna etiqueta de script. WPCode las añade automáticamente. El cuadro de código comienza con una línea de script que no se puede editar.

A continuación, busca el campo «Ubicación » y haz clic en él. Después, selecciona «Pie de página de todo el sitio». De este modo, tu código se añadirá al final de tus páginas.

En la parte superior de la página, haz clic en el botón de alternancia para cambiar el estado del fragmento de «Inactivo» a «Activo».

A continuación, haz clic en «Guardar fragmento».

Una vez que el fragmento esté activo, la nota aparecerá al final de tu feed en las páginas que lo muestren, igual que en el primer ejemplo.

Si solo quieres que el código aparezca en determinadas páginas, WPCode te permite limitar dónde se ejecuta un fragmento de código. Consulta la documentación de WPCode para saber cómo hacerlo.

Ejecutar tu código cuando se carguen más vídeos

Un fragmento de código WPCode se ejecuta una sola vez, cuando la página termina de cargarse. El cuadro «JavaScript personalizado» también se vuelve a ejecutar cuando se añaden más vídeos, por ejemplo, tras hacer clic en «Cargar más».

Para obtener el mismo resultado con WPCode, define una función llamada window.sbyCustomJS en tu fragmento de código. El complemento la ejecuta una vez que se han cargado los primeros vídeos y, de nuevo, cada vez que se añaden más. Se trata de la misma función que crea el cuadro «JavaScript personalizado», así que utiliza una u otra, pero no ambas.

window.sbyCustomJS = function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		if ( feed.querySelector( '.my-feed-note' ) ) {
			return;
		}
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
};

Utiliza este código en lugar del ejemplo anterior de WPCode y sigue los mismos pasos. Si estás modificando el fragmento de código que ya has guardado, el botón «Guardar fragmento» aparecerá como «Actualizar». La casilla de selección situada en la parte superior evita que la nota se añada de nuevo cada vez que se ejecuta la función.

¡Y ya está! Ahora puedes añadir tu propio código JavaScript a tu feed de YouTube mediante el cuadro «JavaScript personalizado» o un fragmento de código WPCode. A continuación, quizá te interese ver cómo configurar el plugin YouTube Feed Pro.

Preguntas frecuentes

A continuación, respondemos a algunas de las preguntas más frecuentes sobre cómo añadir código JavaScript personalizado a tu feed.