• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Plugins / Insertar código fuente en WordPress usando Prism
Anuncio banner webservi

Insertar código fuente en WordPress usando Prism

insertar código fuente en WordPress

[ 7 julio 2016 ] [ Actualizado: 20 julio 2016 ]
[ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

librería

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Cansado de insertar código que luce aburrido?, en el siguiente artículo veremos cómo insertar código fuente en WordPress, tanto en las entradas como en los comentarios, usando la librería Prism integrada con un plugin.

 

1- Instalando el plugin a usar

El plugin que usaremos es Prism Syntax Highlighter for WordPress, lo que hace básicamente este plugin es cargar dos archivos: prism.css y prism.js, en la parte frontal del sitio.


Plugin prism

 

2- Personalizando el código a cargar

Desde el sitio web de Prism, al usar el botón de descarga, podemos personalizar lo siguiente:

  • Descargar archivos Minificados, esta es la opción recomendada.
  • Themes, a través de esta opción podemos elegir cómo queremos que luzca nuestro código.
  • Lenguajes, Debemos elegir sólo los lenguajes de programación que queremos usar, html esta considerado como markup.
  • Plugins, finalmente podemos elegir si vamos a usar o no plugins, algunos de los más populares son mostrar numeración y destacar una línea de código.

 
Una vez configurada nuestra descarga, en la parte inferior veremos que tenemos disponibles dos botones, uno para la descarga del archivo prism.js y otro para la descarga del archivo prism.css , estos archivos descargados, de acuerdo a la documentación del plugin que estamos usando, deben copiarse a la carpeta : /wp-content/uploads/prism/

Descarga de archivos prism

 

3- Probando Prism con nuestro código

Una vez realizado la instalación del plugin y la personalización de los archivos de visualización, podemos entonces usarlo en nuestro sitio Web

– Insertar código con código html

Esta el la opción más común, podemos insertar código con la siguiente sintaxis:

<pre><code class=»language-xxx»></code></pre>

En donde xxx es el lenguaje de programación a mostrar, usamos pre para una mejor visualización, especialmente si son varias líneas de código.

– Insertar código con Shortcode y un campo personalizado

Esta es otra opción que nos brinda el plugin, para insertar código con un shortcode debemos hacer referencia a un campo personalizado previamente creado en nuestra entrada, luego haremos referencia a este campo personalizado con el atributo field, con la siguiente sintaxis.

[ prism field=yyy language=xxx]

En donde yyy es el nombre del campo personalizado que tiene asignado nuestro código y xxx es el lenguaje de programación usado.

– Insertar código con Shortcode y una url

En caso necesitemos mostrar mucho código, es mejor hacerlo a través de un archivo externo, en este caso podemos usar un shortcode con el atributo url, la sintaxis es como sigue :

[prism url=zzz language=xxx]

En dondee xxx es el lenguaje de programación del archivo y zzz es la url del archivo externo a mostrar, tenemos que tener en cuenta que en la url brindada debe figurar directamente el archivo a mostrar, en el caso de un archivo de Github, debemos usar el modo Raw.

 

4- Código fuente en comentarios

Para tener esta misma funcionalidad en los comentarios, solo debemos asegurarnos que los archivos prism.js y prism.css se encuentren cargados en la entrada. El plugin usado tiene una consistencia de sólo cargar estos archivos si hay código a mostrar en la entrada, si comentamos un artículo que no tiene código en la entrada, este comentario no se formateará con prism.

Para corregir esto modificaremos el archivo del plugin prism.php , específicamente la función : maybe_load_prism , la dejaremos tal como luce en el siguiente código.

En este código vemos que si es una entrada o una página, comprobado con is_single(), siempre cargará los archivos prism.


public function maybe_load_prism()
{

	global $post, $wp_query;

	$post_contents = '';

	if ( is_single() ) 
	{
		wp_enqueue_style( 'prism' );
		wp_enqueue_script( 'prism' );

	} 
	elseif ( defined( 'PRISM_ARCHIVE_SCAN' ) && PRISM_ARCHIVE_SCAN )
	{
		$post_ids = wp_list_pluck( $wp_query->posts, 'ID' );
		foreach ( $post_ids as $post_id ) 
		{
			$post_contents .= get_post_field( 'post_content', $post_id );
		}
	}
	
}

 

¿Aún con dudas?, para aclarar los puntos tratados anteriormente te sugiero revisar el siguiente video:

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPressMostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jovel

    15 febrero, 2018

    Como puedo hacer para que me funcione, ya que tengo un template personalizado, echo desde cero, tendría que agregar un script en el function.php o algo así?

    • Jhon Marreros Guzmán

      15 febrero, 2018

      Hola, el código que proporciono para mostrar código en comentarios, si que sería necesario agregarlo en el archivo functions.php de tu theme.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

WP CLI: Interfaz de línea de comandos para WordPress

Personalizar nube de etiquetas en WordPress

Cómo duplicar un Widget en WordPress con Javascript

Generador de plugins base para WordPress

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad