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

¿Desea mostrar código en sus publicaciones de blog de WordPress? Si trató de agregar código como texto normal, WordPress no lo mostrará correctamente.


WordPress ejecuta su contenido a través de varios filtros de limpieza cada vez que guarda una publicación. Estos filtros están ahí para asegurarse de que alguien no inyecte código a través del editor de publicaciones para hackear su sitio web.

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

Cómo mostrar fácilmente el código en publicaciones de WordPress

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

Este método se recomienda para principiantes y usuarios que no necesitan mostrar código con mucha 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 publicaciones, agregue un nuevo bloque de código a su publicación.

Agregue bloque de código a sus publicaciones de WordPress

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

Agregue código a su publicación de blog

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

Código PHP que se muestra en WordPress

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

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

Para este método, utilizaremos un complemento de WordPress para mostrar el código en las publicaciones de tu blog. Este método se recomienda para usuarios que a menudo muestran código en sus artículos..

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

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

Primero, debe instalar y activar el complemento SyntaxHighlighter Evolved. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, puede continuar y editar la publicación del blog donde desea mostrar el código. En la pantalla de edición de publicaciones, agregue el bloque “SyntaxHighlighter Code” a su publicación.

Bloque de código de sintaxis

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 de bloque de la columna derecha.

Configuración de bloqueo de código de resaltado de sintaxis

Primero, debe seleccionar el idioma para su código. Después de eso, puede desactivar los números de línea, proporcionar el primer número de línea, resaltar cualquier línea que desee y desactivar la función para hacer clic en los enlaces..

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

Código mostrado con resaltado de sintaxis

El complemento viene con una serie de esquemas de colores y temas. Para cambiar el tema del color, debe visitar Configuración »SyntaxHighlighter página.

Configuración de sintaxis

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

Vista previa de bloque de código

Uso de SyntaxHighlighter con Classic Editor

Si todavía usa el antiguo editor clásico de WordPress, así es como usaría el complemento SyntaxHighlighter para agregar código a sus publicaciones de blog de WordPress.

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

[php]
<?php
función privada get_time_tags () {
$ tiempo = get_the_time (‘d M, Y’);
devolver $ tiempo;
}
?>
[/ php]

Del mismo modo, si desea agregar un código HTML, lo envolverá alrededor del código corto HTML de esta manera:

[html]
Un enlace de muestra
[/ html]

Método 3. Visualizar código en WordPress manualmente (sin complemento o bloque)

Este método es para usuarios avanzados porque requiere más trabajo y no siempre funciona según lo previsto.

Es adecuado para usuarios que todavía usan el antiguo editor clásico y desean mostrar código sin usar un complemento.

Primero, debe pasar su código a través de una herramienta codificadora de entidades HTML en línea. Cambiará el marcado de su código a entidades HTML, lo que le permitirá agregar el código y omitir los filtros de limpieza de WordPress.

Ahora copie y pegue su código en el editor de texto y envuélvalo y etiquete.

Agregar código manualmente en el editor clásico

Su código se vería así:

Este es un enlace de muestra

Ahora puede guardar su publicación 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.

Visualización manual de código en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo mostrar fácilmente el código en tu sitio de WordPress. También es posible que desee ver nuestra lista definitiva de los consejos, trucos y hacks más buscados de WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map