• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Insertar código fuente en WordPress usando Prism

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

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de 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 principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Personalizar enlace leer más en WordPress

Añadir una nueva zona de Widgets a un theme WordPress

Mostrar notificaciones por usuario en la administración de WordPress

Tabla de Contenidos en WordPress sin plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados