Marketing

Cómo mostrar el código fuente en las publicaciones de tu blog de WordPress

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

Cada vez que guarda una publicación, WordPress lanza su contenido a través de varios 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.

Agregue bloques de código a sus publicaciones de WordPress

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

Agrega código a tu publicación de blog

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

Código PHP mostrado en WordPress

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.
  • Mostrar código con resaltado de sintaxis y números de línea.
  • Sus usuarios pueden aprender y copiar fácilmente el código

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 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.

Bloque resaltador 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 del bloque en la columna de la derecha.

Configuración de bloque de código para enfatizar la sintaxis

Primero, debe elegir el idioma para su código. A continuación, puede desactivar los números de línea, especificar el número de la primera 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.

Código de resaltado de sintaxis

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

Configuración de resaltado de sintaxis

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.

visualización de bloques de código

Use SyntaxHighlighter con un editor clásico

Si todavía usa el antiguo editor clásico de WordPress, aquí le mostramos cómo agregar código a sus publicaciones de blog de WordPress usando el complemento SyntaxHighlighter.

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

[php]


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

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

[html]

conexión de muestra
[/html]

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

Este método es adecuado para usuarios avanzados, ya que requiere más trabajo y no siempre funciona como se espera.

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

Primero, debe pasar su código a través de la herramienta HTML Entity Encoder en línea. Cambia el marcado de su código en objetos HTML, lo que le permite agregar código y omitir los filtros de limpieza de WordPress.

Ahora copie, pegue su código en un editor de texto y envuélvalo

 and  tags. 

Agregar código manualmente al editor clásico

Your code would look like this:


<p><a href="/home.html">This is a sample link</a></p>

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.

Mostrar código manualmente en WordPress

Esperamos que este artículo le 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 tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.