Cómo mostrar fácilmente el código en su sitio de WordPress (3 formas)

¿Quiere mostrar código en sus publicaciones de blog de WordPress? Si intenta agregar el código como texto sin formato, WordPress no lo mostrará correctamente.

Cada vez que guarda una publicación, WordPress ejecuta su contenido a través de múltiples filtros de limpieza. Estos filtros aseguran que nadie pueda piratear su sitio inyectando código a través del editor de publicaciones.

En este artículo, le mostraremos la forma correcta de mostrar fácilmente el código en su sitio de WordPress. Te mostraremos los diferentes métodos y podrás elegir el que mejor se adapte a tus necesidades.

Método 1. Muestra el código usando el editor predeterminado en WordPress

Este método se recomienda para principiantes y usuarios que no necesitan mostrar el código con frecuencia.

Simplemente edite la publicación del blog o la página donde desea mostrar el código. En la pantalla de edición de publicación, agregue el nuevo bloque de código a su publicación.

Ahora puede ingresar fragmentos de código en el área de texto del bloque.

Luego puede guardar su publicación de blog y verla para ver el bloque de código en acción.

Dependiendo de su tema de WordPress, los bloques de código en su sitio web pueden verse diferentes.

Método 2. Mostrar código en WordPress usando un complemento

Para este método, usaremos el complemento de WordPress para mostrar el código en las publicaciones de su blog. Este método se recomienda para los usuarios que muestran código en los artículos con frecuencia.

Tiene las siguientes ventajas sobre los bloques de código predeterminados:

• Le permite mostrar fácilmente cualquier código en cualquier lenguaje de programación
• Muestra código con sintaxis y números de línea.
• Sus usuarios pueden aprender y copiar fácilmente el código

Primero, necesita instalar y activar Evolución de SyntaxHighlighter insertar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Una vez activado, puede continuar editando la publicación del blog donde desea mostrar el código. En la pantalla de edición de publicación, agregue el bloque "SyntaxHighlighter Code" a su publicación.

Ahora verá un nuevo bloque de código en el editor de publicaciones, donde puede ingresar su código. Después de agregar el código, debe seleccionar la configuración del bloque en la columna de la derecha.

Primero, debe elegir un idioma para su código. Luego puede desactivar los números de línea, proporcionar el primer número de línea, resaltar cada línea que desee y desactivar la función para que se pueda hacer clic en el enlace.

Una vez que haya terminado, guarde su publicación y haga clic en el botón de vista previa para verla en acción.

El complemento viene con muchos esquemas de color y temas. Para cambiar el tema de color, debe visitar Ajustes » Resaltado de sintaxis Página.

En la página de configuración, puede seleccionar un tema de color y cambiar la configuración de SyntaxHighlighter. Puede guardar la configuración para ver una vista previa del bloque de código en la parte inferior de la página.

Use SyntaxHighlighter con un editor clásico

Si todavía usa el antiguo editor clásico de WordPress, puede usar el complemento SyntaxHighlighter para agregar código a las publicaciones de su blog de WordPress.

Simplemente incluya su código entre corchetes con el nombre del idioma. Por ejemplo, si agrega código PHP, lo agregará así:

[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

De manera similar, si desea agregar código HTML, envuélvalo en código corto HTML de la siguiente manera:

[html]
<a href="https://www.wpbeginner.com/wp-tutorials/how-to-display-raw-codes-in-your-wordpress-blog-posts/example.com">A sample link</a>
[/html]

Método 3: mostrar el código en WordPress manualmente (sin complementos ni bloques)

Éste El método es adecuado para usuarios avanzados, ya que requiere más trabajo y no siempre funciona como se esperaba.

Para aquellos que todavía usan el antiguo editor clásico y quieren mostrar el código sin usar complementos.

Primero, necesitas conectarte a Internet Codificador HTML para objetos herramienta. Cambia el marcado de su código en objetos HTML, lo que le permitirá agregar código y omitir los filtros de limpieza de WordPress.

Ahora copie y pegue su código en un editor de texto y envuélvalo <pre> y <code> Etiqueta.

Su código se ve así:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;This is a sample link&lt;/a&gt;&lt;/p&gt;
</pre></code>

Ahora puede guardar su publicación y ver el código en acción. Su navegador convertirá los objetos HTML y el usuario podrá ver y copiar el código correcto.

Esperamos que este artículo lo haya ayudado a aprender cómo mostrar fácilmente el código en su sitio de WordPress. También puede consultar nuestra lista final de los mejores consejos, trucos y trucos de WordPress.

Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube Vídeo tutoriales para WordPress, también nos puedes encontrar en Gorjeo y Facebook.