Como un blog de WordPress enfocado en la creación de sitios web, a veces nos encontramos con lectores que quieren pegar un fragmento de código o compartir una pieza de código en los comentarios.
Sin embargo, WordPress no viene con ningún resaltado de sintaxis incorporado para comentarios, publicaciones o páginas, lo que puede ser complicado tanto para el comentarista como para otros lectores que intentan entender el código.
Afortunadamente, hemos encontrado una manera fácil de resolver este problema. En este artículo, le mostraremos cómo agregar fácilmente resaltado de sintaxis en los comentarios de WordPress.
¿Por qué y cuándo necesita resaltado de sintaxis en los comentarios de WordPress?
El resaltado de sintaxis es una forma de hacer que el código se vea mejor y sea más fácil de entender. Agrega colores y números de línea a los fragmentos de código, haciéndolos más legibles. Aquí tiene un ejemplo:
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Si tiene un blog de WordPress sobre desarrollo web o codificación, habilitar el resaltado de sintaxis en los comentarios de WordPress es importante. Con esto, los lectores pueden escribir código fácilmente de una manera legible.
Esto los animará a dejar más comentarios y compartir sus propios fragmentos. No solo hace que los comentarios sean más interesantes, sino que también fomenta un sentido de participación comunitaria.
Además, si sus lectores necesitan ayuda, pueden insertar fácilmente el código en el comentario de una manera que sea visualmente atractiva y fácil de entender para sus compañeros comentaristas.
Teniendo esto en cuenta, veamos cómo puedes agregar resaltado de sintaxis en el formulario de comentarios de tu sitio web de WordPress.
Paso 1: Instala el plugin Syntax Highlighter Evolved
La forma más fácil de agregar resaltado de sintaxis en WordPress es con el plugin Syntax Highlighter Evolved. Es súper fácil de usar y te permite habilitar el resaltado de sintaxis en publicaciones, páginas y comentarios de WordPress.
En WPBeginner, usamos este plugin para insertar y mostrar fragmentos de código. Puedes leer nuestro artículo sobre por qué usamos Syntax Highlighter Evolved para más detalles.
Primero, necesitas instalar y activar el plugin Syntax Highlighter Evolved. Para más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez hecho esto, ahora puedes editar una publicación o página y agregar código usando el resaltador de sintaxis. Así es como se ve en el editor de bloques:
Puedes aprender más sobre cómo usar el plugin Syntax Highlighter Evolved en nuestro artículo sobre cómo mostrar código en WordPress.
Por defecto, Syntax Highlighter Evolved permite a los visitantes agregar código en sus comentarios, pero ese código necesita estar envuelto en shortcodes.
Estos shortcodes llevan el nombre de todos los lenguajes de programación y scripting populares. Esto significa que el comentarista simplemente necesita envolver su código en corchetes que contengan el nombre del lenguaje.
Por ejemplo, si quisieras publicar un comentario que contenga código PHP, usarías lo siguiente:
Hi everyone. I need help with this PHP code: [php]
<?PHP
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]De manera similar, si quisieras publicar algo de código HTML como comentario, necesitarías envolverlo en el shortcode HTML:
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Ahora, lo que hace esto complicado es que los usuarios no sabrán que en realidad pueden usar resaltado de sintaxis con estos shortcodes. Por lo tanto, tienes que informarles a través de un mensaje de aviso.
Paso 2: Agregar un aviso de resaltado de sintaxis en el formulario de comentarios
Para informar a los comentaristas sobre la función de resaltado de sintaxis, necesitas agregar un mensaje de aviso encima de tu formulario de comentarios, así:
Puedes hacer esto agregando un fragmento de código personalizado a tu sitio de WordPress.
Si estás leyendo este tutorial porque tienes un blog de codificación, entonces lo más probable es que te sientas bastante cómodo con la codificación.
Aun así, puede ser difícil para los usuarios más avanzados hacer un seguimiento de todos sus fragmentos de código. Si no se administran correctamente, puedes experimentar algunos errores comunes de WordPress o romper tu sitio por completo.
Es por eso que recomendamos usar WPCode para insertar fragmentos de código personalizados. Es la forma más fácil y segura de agregar código personalizado en WordPress sin tener que editar ningún archivo principal de WordPress.
Nota: Aunque la versión gratuita de WPCode está disponible, recomendamos usar la versión Pro de WPCode, ya que te brinda acceso a lógica condicional inteligente, acceso a una biblioteca en la nube de fragmentos de código y más.
Lo primero que debes hacer es instalar y activar el plugin WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, dirígete a Fragmentos de código » + Agregar fragmento.
Aquí, verás todos los fragmentos listos para usar que puedes agregar a tu sitio web de WordPress.
Como queremos agregar nuestro propio fragmento, pasa el cursor sobre ‘Agregar tu código personalizado (Nuevo fragmento)’ y luego haz clic en ‘+ Agregar fragmento personalizado’.
Para empezar, ingresa un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento.
Después de eso, abre el menú desplegable ‘Tipo de código’ y elige ‘Fragmento de PHP’.
Ahora, simplemente pega el siguiente fragmento en el editor de código:
function wpbeginner_comment_text_before($arg) {
// Add a custom notice to inform users about using shortcodes for syntax highlighting
$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, or </p>";
// Return the modified comment arguments
return $arg;
}
// Add the filter to apply the custom comment modification function
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Después de eso, abre el menú desplegable 'Ubicación' y haz clic en 'Ejecutar en todas partes'.
Luego, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor 'Inactivo' para que cambie a 'Activo'.
Finalmente, haz clic en ‘Guardar fragmento’ para que el fragmento se publique.
Este código simplemente muestra un aviso encima del campo de comentarios en el formulario de comentarios de WordPress. Sin embargo, no verás este texto mientras hayas iniciado sesión en tu cuenta, por lo que necesitarás abrir una nueva ventana del navegador en modo incógnito o cerrar sesión en tu cuenta.
Si quieres ver si el shortcode realmente funciona, simplemente visita tu sitio web en modo incógnito, comenta una publicación de blog y usa el shortcode. Cuando el comentario haya sido moderado y aprobado, deberías ver algo como esto:
Aprende más formas de aumentar la participación en los comentarios
Agregar la capacidad de resaltado de sintaxis no es la única forma de aumentar la participación en tus comentarios si tienes un blog de desarrollo web.
Otro consejo es agregar 'me gusta' y 'no me gusta' a tus comentarios. Esto permite a tus lectores expresar fácilmente sus opiniones sobre comentarios específicos. Puede generar discusiones y resaltar contribuciones valiosas de tu comunidad.
Además, puedes notificar a los usuarios cuando reciban respuestas a sus comentarios. Esto asegura que se mantengan involucrados en la conversación y los hace volver por más.
Además, es posible que desees agregar campos personalizados al formulario de comentarios. Puedes hacer esto si quieres que los lectores proporcionen información específica junto con sus comentarios, como el lenguaje de programación que están usando o la versión de un framework.
Aquí tienes otros consejos que puedes implementar para aumentar la participación en los comentarios:
- Cómo mostrar las publicaciones más comentadas en WordPress
- Cómo destacar o enterrar comentarios en WordPress
- Cómo redirigir la atención de tu usuario con Redirección de comentarios
Esperamos que este artículo te haya ayudado a agregar resaltado de sintaxis en los comentarios de WordPress. También puedes consultar nuestra guía sobre cómo agregar videos y más en los comentarios de WordPress y nuestras selecciones expertas de los mejores plugins de comentarios para WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Gracias por demostrar la posibilidad usando un fragmento. Ya tengo bastantes plugins en el sitio que necesito para ejecutarlo y, al mismo tiempo, dado que tengo un blog de tecnología, quería permitir a los usuarios resaltar códigos en los comentarios. Uso WP Code para otros fragmentos que tienen un papel importante en el sitio web, por lo que la posibilidad de hacer esto con un fragmento es muy útil. Gracias una vez más, guardaré el fragmento en mi biblioteca de código para otros sitios también.
Yves
Última actualización hace 9 meses. No probado con la última versión de WordPress.
Soporte de WPBeginner
Para esa advertencia de 'no probado', te recomendamos que eches un vistazo a nuestro artículo a continuación:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Administrador
Seth
Buen artículo y muy informativo. Acabo de activar las notificaciones de actualización. Buen trabajo, chicos.
Soporte de WPBeginner
Glad our article was helpful
Administrador