¿Quiere mostrar correctamente el código en su sitio web de WordPress? El código personalizado es lo que hace que su sitio web funcione como lo hace. A veces es posible que necesite compartir esta información con sus visitantes. Por ejemplo, si desea crear tutoriales de codificación, no funciona tan bien si no muestra el código.
Para estos casos, desea mostrar su código directamente en la página o publicación y tiene algunas opciones para elegir. El método más obvio es simplemente pegar el código y resaltarlo, lo que funciona perfectamente, pero es posible que a algunos sitios web no les guste su apariencia. Hoy demostraré cómo mostrar correctamente el código en WordPress usando dos métodos.
Por qué mostrar código en WordPress
Mostrar código no es necesario para muchos sitios web y solo unos pocos lo necesitarán. La mejor parte de compartir código es poder copiarlo y pegarlo. Puede ver imágenes de código y es muy tedioso intentar copiar el código línea por línea. Para evitar eso, los sitios web deben compartir el código directamente en la página o publicación en la que se menciona.
Desafortunadamente, las líneas de código no se ven tan bien en medio de una publicación o página, pero esto podría ser diferente en un sitio web de código compartido. Independientemente, hay muchas ocasiones en las que mostrar código es necesario para el tema y puede ayudar a compartir grandes ideas en un sitio web.
Cómo mostrar correctamente el código en WordPress
Hoy demostraré cómo mostrar correctamente el código en WordPress usando dos métodos. El primer método es pegar el código directamente en WordPress, pero también te mostraré algunas opciones de estilo simples. El segundo método es usar el complemento SyntaxHighlighter Evolved . Cualquiera que sea el método que elija, no importa, pero use el mismo método en todo su sitio web.
Método 1: sin complemento
El uso de complementos puede ser más fácil y verse mejor, pero definitivamente es diferente para todos. Los complementos son ampliamente utilizados, pero también ralentizan su sitio web.
Vaya a cualquier página o publicación en la que le gustaría insertar el código. Pegue el código en la página. En mi ejemplo, usaré un pequeño fragmento de CSS personalizado:
.site-header .search-form {
posición: absoluta;
derecha: 200px;
arriba: 200px;
}
El problema es que los segmentos de código más largos se mezclarán con el contenido de la página. Otra forma de manejarlo es usar opciones de formato específicas del tema. Por ejemplo, el tema KnowAll tiene incorporado el complemento Heroic Shortcodes. Resaltará todo el texto con un color específico. Aquí hay un ejemplo: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].site-header .search-form {
posición: absoluta;
derecha: 200px;
arriba: 200px;
}[/ht_mensaje]
Dado que este es un tema específico, no es para todos. Alternativamente, puede utilizar un enfoque de resaltado.
.site-header .search-form {
posición: absoluta;
derecha: 200px;
arriba: 200px;
}
Este efecto de resaltado se puede crear usando la siguiente línea en el editor de texto:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<span style=”background -color: amarillo;”> Insertar texto aquí</span>[/ht_message]
Reemplace «Insertar texto aquí» con su código. Ayuda a que el código se destaque del resto de su contenido en la página. También puede cambiar el color de resaltado. Simplemente cambie «Amarillo» al color de su elección.
Otra opción de formato es el enfoque numerado. Resalte el texto y haga clic en el botón «Lista numerada» para agregar números.
Puede usar cada número como una línea de código. Cuando un visitante resalta el código para copiarlo, no copiará la numeración de línea.
- .encabezado del sitio .formulario de búsqueda {
- posición: absoluta;
- derecha: 200px;
- arriba: 200px;
- }
Si te gusta el esquema de numeración, te gustará mucho el segundo método.
Alternativamente, también puede usar un enfoque de viñetas. Resalte el texto y haga clic en el botón «Lista con viñetas» para agregar viñetas.
El enfoque numerado es mejor porque las líneas de código están numeradas, por lo que parece más natural.
- .encabezado del sitio .formulario de búsqueda {
- posición: absoluta;
- derecha: 200px;
- arriba: 200px;
- }
Método 2: Complemento
Comience haciendo clic en Complementos y seleccione la opción Agregar nuevo en el panel de administración de la izquierda.
Busque SyntaxHighlighter Evolved en el cuadro de búsqueda disponible. Esto abrirá complementos adicionales que pueden resultarle útiles.
Desplácese hacia abajo hasta que encuentre el complemento SyntaxHighlighter Evolved y haga clic en el botón «Instalar ahora» y active el complemento para su uso.
En el panel de administración de la izquierda, haga clic en Configuración y seleccione la opción SyntaxHighlighter. Esto abrirá la página de configuración principal.
Debería estar bien con la configuración predeterminada, pero siéntase libre de cambiar cualquiera de ellos. El complemento proporciona una descripción detallada de cada configuración. Puede ver una vista previa de la misma en la parte inferior de la página. Haga clic en el botón «Guardar cambios» para finalizar.
El complemento funciona mediante el uso de códigos cortos . Los dos lenguajes más utilizados en WordPress son PHP y CSS. Cada uno de ellos tiene un comando especial de shortcode.
Para PHP, use: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
|
1
|
Insert PHP Here |
[/ht_mensaje]
Para CSS, use:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
|
1
|
Insert CSS Here |
[/ht_mensaje]
Cada uno de ellos se verá igual, pero con un idioma diferente.
Felicitaciones, ha aprendido con éxito cómo mostrar código en WordPress.
Se consistente
Todos los sitios web deben ser coherentes. Si elige el método de resaltado, utilícelo todo el tiempo. No mezcle y combine métodos porque los visitantes comenzarán a buscar texto resaltado. Por ejemplo, si todos sus artículos usan el método de texto resaltado, pero uno usa el enfoque de numeración, un visitante puede desplazarse hacia abajo en una página en busca de texto resaltado sin encontrar lo que busca.
Si decide cambiar los métodos, tómese el tiempo para volver atrás y hacer que su sitio web sea consistente. Lo último que desea son visitantes confundidos porque la confusión se convierte en ira. Es más probable que los visitantes enojados compartan comentarios y los malos comentarios no son algo bueno.
¿Qué método has elegido? ¿Ha elegido un método que no está en la lista?