Oferta SiteGround Black Friday

Incrustar «gists» de github en WordPress

Una de las pegas que muchos nos encontramos en WordPress es cómo mostrar código en una entrada sin que este se ejecute. Yo he usado varios sistemas, y actualmente esto más o menos contento con un plugin llamado SyntaxHighlighter Evolved.

Pero la solución real para insertar código en WordPress sin que se ejecute sería una incrustación de, por ejemplo, los «gists» de github, un servicio web para compartir código con otros usuarios.

github dispone de un sistema propio de incrustación de código, pues en cada «gist» tienes un enlace de «embed» que te permite incrustar un script que mostrará el gist.

Ahora bien ¿no sería mejor ahorrar tiempo y usarlo como un incrustado automático, igual que hacemos con un vídeo de YouTube o un Tweet de Twitter?, copiando y pegando simplemente la URL de un «gist» en el editor visual de WordPress.

Si te animas es realmente sencillo, solo tienes que añadir este código a tu plugin de funciones:

//Autoincrustado desde github
wp_embed_register_handler( 'gist', '/https:\/\/gist\.github\.com\/(\d+)(\?file=.*)?/i', 'wp_embed_handler_gist' );
function wp_embed_handler_gist( $matches, $attr, $url, $rawattr ) {
	$embed = sprintf(
			'<script src="https://gist.github.com/%1$s.js%2$s"></script>',
			esc_attr($matches[1]),
			esc_attr($matches[2])
			);
	return apply_filters( 'embed_gist', $embed, $matches, $attr, $url, $rawattr );
}

Una vez guardes los cambios ya puedes mostrar «gists» de github pegando su URL en el editor (visual o html) de WordPress.

Y se vería así:

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 0 / 5. Total de votos: 0

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

3 comentarios en “Incrustar «gists» de github en WordPress”

  1. fernando, como se pega código en los foros de github? cuando lo pego no se vé bien lo reconoce como html. no encuentro guía en github. Lastima que no se programador o algo

    gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio