Cómo mostrar fácilmente el código en su sitio WordPress

¿Quieres mostrar código en las entradas de tu blog WordPress?

Si intenta añadir código como si fuera texto normal, WordPress no lo mostrará correctamente. WordPress pasa tu contenido por varios filtros de limpieza cada vez que guardas una entrada. Estos filtros están ahí para asegurarse de que alguien no inyecte código a través de un editor de entradas para hackear su sitio web.

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

¿Por qué mostrar código en un sitio web WordPress?

Si escribe entradas de blog sobre debates técnicos o crea documentación para sus productos, mostrar fragmentos de código es realmente útil. Los usuarios pueden copiar el código y añadirlo a su sitio web.

Sin embargo, mostrar código en un sitio web WordPress no es tan sencillo.

WordPress interpretará los fragmentos de código como código funcional e intentará implementarlo en su sitio web en lugar de mostrarlo como texto. Tampoco mostraría el código con precisión, lo que daría lugar a errores cuando los usuarios los introdujeran en su sitio web.

Además, WordPress utiliza múltiples filtros como medidas de seguridad. Filtra el contenido para evitar que los hackers inyecten código malintencionado en el editor de contenidos y pirateen tu sitio web.

Dicho esto, existen diferentes formas de mostrar código en WordPress. Puedes enlazar los siguientes enlaces para saltar a tu sección preferida:

Método 1. Mostrar código usando el editor por defecto de WordPress

Este método se recomienda para principiantes y usuarios que no necesiten mostrar código muy a menudo.

Sólo tiene que editar la entrada del blog o la página en la que desea mostrar el código. En la pantalla del editor de contenido de WordPress, añada un nuevo bloque de código a la entrada.

Ahora puede introducir el fragmento de código en el área de texto del bloque.

El bloque de código mostrará una vista previa de tu código.

Después, puede guardar la entrada de su blog y obtener una vista previa para ver el bloque de código en acción.

Una vez que esté satisfecho con la apariencia de su código, siga adelante y publique la entrada de su blog.

Dependiendo de su tema de WordPress, el bloque de código puede tener un aspecto diferente en su sitio web.

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

Para este método, utilizaremos un plugin de WordPress para mostrar código en las entradas de tu blog. Este método se recomienda para usuarios que suelen mostrar código en sus artículos.

Le ofrece las siguientes ventajas sobre el bloque de código por defecto:

• Permite visualizar fácilmente cualquier código en cualquier idioma de programación.
• Muestra el código con resaltado de sintaxis y números de línea.
• Sus usuarios podrán estudiar fácilmente el código y copiarlo.

En primer lugar, debe instalar y activar el plugin SyntaxHighlighter Evolved. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, puede seguir adelante y editar la entrada del blog en la que desea mostrar el código. En la pantalla de edición de entradas, añade el bloque ‘SyntaxHighlighter Code’ a tu entrada.

Ahora verás un nuevo bloque de código en el editor de entradas donde puedes introducir tu código.

Después de añadir el código, tienes que seleccionar los ajustes del bloque en la columna de la derecha.

Primero, tienes que seleccionar el idioma de tu código, como PHP, CSS, Java, etc. Después, puedes desactivar los números de línea, proporcionar el número de la primera línea, resaltar cualquier línea que desees y desactivar la característica de hacer que los enlaces sean clicables.

Cuando hayas terminado, guarda tu entrada y haz clic en el botón de vista previa para verla en acción.

El plugin viene con una serie de esquemas de color y temas.

Para cambiar el tema de color, debe visitar la página Ajustes ” SyntaxHighlighter.

Desde la página de ajustes, puede seleccionar un tema de color y cambiar los ajustes de SyntaxHighlighter.

Puedes guardar tus ajustes para ver una vista previa del bloque de código en la parte inferior de la página.

Uso de SyntaxHighlighter con el editor clásico

Si todavía utiliza el antiguo editor clásico de WordPress, a continuación le explicamos cómo utilizar el plugin SyntaxHighlighter para añadir código a las entradas de su blog de WordPress.

Basta con poner el código entre corchetes con el nombre del idioma. Por ejemplo, si vas a añadir código PHP, entonces lo añadirás así:

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

Del mismo modo, si desea añadir un código HTML, entonces lo envolverá alrededor del shortcode HTML de la siguiente manera:

<a href="example.com">A sample link</a>

Método 3. Mostrar código en WordPress manualmente (sin plugins ni bloqueos)

Este método es para usuarios avanzados porque requiere más trabajo y no siempre funciona como se pretende.

Es adecuado para los usuarios que todavía utilizan el antiguo editor Classic y quieren mostrar el código sin utilizar un plugin.

En primer lugar, tienes que pasar tu código por una herramienta online de codificación de entidades HTML. Cambiará el marcado de tu código a entidades HTML, lo que te permitirá añadir el código y evitar los filtros de limpieza de WordPress.

Ahora copia y pega tu código en el editor de texto y envuélvelo alrededor de las etiquetas <pre> y <code>.

El código sería el siguiente:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;Este es un enlace de ejemplo&lt;/a&gt;&lt;/p&gt;
</pre></code>

Ahora puede guardar su entrada y obtener una vista previa del código en acción.

Su navegador convertirá las entidades HTML y los usuarios podrán ver y copiar el código correcto.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar código fácilmente en tu sitio de WordPress. Puede que también quieras ver nuestra lista definitiva de los consejos, trucos y hacks para WordPress más buscados y cómo aumentar el tráfico de tu blog.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.