Si alguna vez ha intentado compartir fragmentos de código en WordPress, es posible que haya tenido problemas para incluirlos en sus publicaciones.
Le complacerá saber que esto no se debe a un error de su parte. Hay dos explicaciones de por qué no se procesa el fragmento de código.
Para entender la primera razón, veamos un ejemplo popular: texto en negrita. Por ejemplo, si desea poner en negrita manualmente la palabra «cachorro» en su publicación de WordPress, ingrese cachorro en el editor de WordPress. ¿No es fácil? El problema es que WordPress no puede deducir si desea compartir este fragmento de código con sus lectores o si desea poner el texto en negrita. WordPress interpretará el fragmento como código HTML, formará la palabra «cachorro«Y haz que el fragmento de código desaparezca de la publicación publicada.
Tal vez esté pensando: «¿No puedo soltar las etiquetas HTML y simplemente insertar el código sin formato?» Todavía sin huesos. WordPress filtra automáticamente cualquier código sin procesar que encuentre como medidas de seguridad. Este limpiador está diseñado para mantener su sitio, y WordPress en general, seguro al evitar que alguien inyecte código en su editor de publicaciones y piratee su sitio.
Sin embargo, hay ocasiones en las que la ley le exige que muestre código en sus publicaciones. Por ejemplo, podría ser un vendedor que escribe guías y tutoriales de diseño web, o un desarrollador que escribe trucos de WordPress.
Sea cual sea el motivo, tiene varias opciones para mostrar el código en su sitio de WordPress. En este tutorial, te mostramos cómo.
Cómo ver el código en WordPress
Hay tres opciones para mostrar el código en WordPress. Puede convertir manualmente el código en caracteres especiales llamados entidades HTML, lo que se recomienda para usuarios avanzados que solo necesitan ver el código ocasionalmente. Puede usar el editor de Gutenberg si es un principiante que no necesita ver el código con frecuencia. También puedes usar un enchufe.
Tanto los principiantes como los expertos usan un complemento si ven el código con frecuencia y no quieren perder el tiempo agregando bloques de código o convirtiendo el código en entidades HTML.
A continuación, repasaremos cada uno de estos procesos en detalle, para que pueda elegir el método que mejor se adapte a las necesidades de su sitio de WordPress.
Ver el código en WordPress manualmente
Si es un usuario de WordPress con más experiencia, puede usar la entidad HTML para escribir código a mano. Esta es la solución más ligera y flexible (y por lo tanto difícil) de las tres.
Las entidades HTML son una forma única de escribir marcado HTML que los navegadores pueden interpretar para mostrar correctamente los caracteres relacionados. En otras palabras, le permiten incrustar el código en su sitio que parece código, pero no se comporta como código. A continuación se muestran algunas de las etiquetas HTML y unidades de caracteres HTML más populares. Para representar el código que usa cualquiera de estos caracteres, debe reemplazar las etiquetas HTML en el lado izquierdo del signo igual con elementos en el lado derecho.
Para comprender cómo usar entidades para mostrar código en su sitio, volvamos a nuestro ejemplo anterior de código HTML para poner texto en negrita. Para compartir un fragmento de código negrita aquí en lugar de texto en negrita, cambie primero del editor visual al editor de texto. En esta pestaña, reemplazará los caracteres superior e inferior con sus entidades de caracteres HTML. Ahora se verá como texto en negrita aquí
Finalmente, pondrás el fragmento en la etiqueta. . Así es como se verá en el editor:
Después de guardar los cambios, puede presionar Anuncio para ver cómo se mostrará el código a los usuarios en la interfaz del sitio web.
Este método es bueno si agrega una línea de código aquí y allá. Si está buscando una manera más fácil de escribir y publicar varias líneas de código, puede usar un codificador de entidades HTML basado en web como Web2.0Generadores. Solo ingresa tu código y presiona Codificar botón de texto Convertirá su código en entidades HTML que puede agregar entre la etiqueta .
Como habrás adivinado, cuanto más a menudo muestres el código en tu sitio web, menos atractiva se vuelve esta opción. Para encontrar la mejor solución para su sitio web, hay otras dos opciones que puede considerar.
Ver código en WordPress con el editor Gutenberg
Si está buscando una forma más sencilla de mostrar el código en su sitio y tiene instalado WordPress 5.0 o superior, no dude en utilizarlo. redactor de Gutenberg para agregar bloques de código con unos pocos clics del mouse. Los pasos se muestran a continuación.
1. Primero, inicie sesión en su panel de WordPress.
2. En el lado izquierdo de la página, haga clic en Publicaciones o Fiestas.
3. Elegir Agregar nuevo o coloca el cursor sobre una publicación o página existente y selecciona Editar.
4. Coloque el cursor donde desea que aparezca el código.
5. haga clic aquí Agregar un bloque icono (es un signo más en un círculo).
6. También puede escribir / código y presionar Enter.
7. Ahora ingrese el fragmento de código en el cuadro de texto del bloque y guarde los cambios.
La apariencia del bloque de código en su sitio variará según el tema de WordPress. Para modificar su apariencia, puede escribir CSS personalizado en la barra lateral para diseñar el bloque como mejor le parezca.
El bloque de código no admite configuraciones adicionales ni estilos de formato. Para facilitar su flujo de trabajo con más flexibilidad, puede usar un complemento.
Ver código en WordPress usando un complemento
El uso de un complemento tiene varias ventajas sobre las otras dos opciones. Le permite mostrar fácilmente cualquier código en cualquier lenguaje de programación con resaltado de sintaxis y números de línea. Esto facilitará que los visitantes lean y copien este código.
Para publicar código con resaltado de sintaxis, puede usar Complemento de sintaxis de resaltador desarrollado. Es gratis, fácil de usar y compatible con el editor y editor clásico de Gutenberg. A continuación se muestran los pasos para utilizar el editor de Gutenberg.
1. Primero, inicie sesión en su panel de WordPress.
2. En el lado izquierdo de la página, haga clic en Complementos > Agregar nuevo.
3. Ingrese «Syntax Highlighter Evolved» en el campo de búsqueda.
4. haga clic aquí instalar ahora > Activar.
5. Después de la activación, vaya a Ajustes > Resaltador de sintaxis evolucionado.
6. Verifique y ajuste la configuración como mejor le parezca, luego haga clic en guardar cambios.
7. Ahora haga clic Publicaciones o Fiestas desde la barra lateral en el lado izquierdo de la página.
8. Elegir Agregar nuevo o coloca el cursor sobre una publicación o página existente y selecciona Editar.
9. haga clic aquí Agregar un bloque y busque «Código de resaltado de sintaxis».
10 Introduce tu código en el bloque de código.
11 Seleccione la configuración del bloque en la columna de la derecha.
y. Elija el idioma de su código.
b. Habilite o deshabilite los números de línea.
C. Introduzca el número de la primera línea de código.
d. Seleccione cualquier línea que desee.
a mi. Haz que los enlaces se puedan hacer clic.
Si está utilizando el editor clásico, los primeros nueve pasos son los mismos. Una vez en la publicación o página donde desea agregar el código, haga clic en Texto para entrar en el modo de edición de texto. Luego, simplemente ajuste su código alrededor del código abreviado del idioma correcto. Algunas de las abreviaturas más utilizadas son:
- [javascript][/javascript]
Luego puede guardar su borrador y obtener una vista previa para ver cómo se verá el código para los visitantes de su sitio. A continuación se muestra una demostración de cómo se mostrarán algunos códigos CSS en un sitio en vivo.
Ahora que conoce las diferentes opciones de visualización de código en WordPress, puede llevar sus guías y tutoriales de diseño web al siguiente nivel. Tus lectores te lo agradecerán.
