Cómo usar bloques de código en WordPress

WordPress es un sólido sistema de administración de contenido que funciona con más de la mitad de todos los sitios web en Internet. El CRM incorporado facilita la creación de un sitio web, incluso si nunca antes ha escrito un programa de computadora. Si bien es muy fácil mostrar un bloque de texto normal en un sitio web de WordPress, no se puede decir lo mismo del código de computadora. Una pieza de código debe mostrarse adecuadamente para que los espectadores la analicen y comprendan. Y ahí es donde entran los bloques de código de WordPress.

Cómo usar bloques de código en WordPress

Si quieres saber cómo usar bloques de código en WordPress, has venido al lugar correcto. En este artículo, lo guiaremos a través de todo el proceso para que pueda comenzar a compartir fragmentos de código con sus lectores. Continúe leyendo para obtener más información.

Cómo usar bloques de código en WordPress

Mostrar un programa de computadora como un texto de página web normal puede ser desastroso. A muchos usuarios les resultará difícil de visualizar y comprender. Afortunadamente, muchos editores de WordPress tienen una función de bloques de código que le permite mostrar un programa de computadora en un formato de código.

Afortunadamente, usar bloques de código para mostrar código de computadora es relativamente fácil. Para comenzar, deberá cambiar al editor nativo de WordPress, ya que es posible que algunos complementos de texto no tengan la función. Una vez que haya hecho eso, siga estos pasos para agregar un bloque de código en una página del sitio web:

  1. Abra la página web a la que desea agregar un bloque de código haciendo clic en el botón "Nuevo".
    Como usar bloques de codigo en WordPress
  2. Escriba "/ código" y presione "Enter".
    1689350414 65 Como usar bloques de codigo en WordPress
  3. Escriba o pegue el código que desea que se muestre y presione la tecla "Enter".
    1689350414 698 Como usar bloques de codigo en WordPress
  4. Además, puede usar la barra de herramientas del bloque de código para personalizar la apariencia del código que acaba de escribir. Por ejemplo, puede usar el botón "B" para poner una línea en negrita o el botón "i" para ponerla en cursiva.
    1689350415 927 Como usar bloques de codigo en WordPress
  5. Una vez que haya terminado de crear su página web, haga clic en el botón "Vista previa" para ver cómo se verá el bloque de código en una versión en vivo.
    1689350415 816 Como usar bloques de codigo en WordPress
  6. Si está satisfecho con los resultados finales, presione el botón "Actualizar" para que otros también vean el bloque de código.
    1689350416 120 Como usar bloques de codigo en WordPress

Cómo cambiar la tipografía de tu bloque de código

La tipografía dice mucho y puede hacer o deshacer la estética no solo de su bloque de código sino también de toda la página web. Para cambiar la tipografía de tu bloque de código, sigue estos pasos:

  1. Resalte el bloque de código cuya tipografía desea modificar.
    1689350416 908 Como usar bloques de codigo en WordPress
  2. Haga clic en el icono "Configuración" en la esquina superior derecha de la pantalla.
    1689350417 68 Como usar bloques de codigo en WordPress
  3. En la sección "Tipografía", especifique su tipografía preferida.
    1689350419 744 Como usar bloques de codigo en WordPress
  4. Haga clic en el botón "Actualizar" para guardar los cambios.
    1689350419 474 Como usar bloques de codigo en WordPress

Puede personalizar aún más la estética del bloque cambiando el color, el fondo, el espacio entre letras y el espacio entre líneas.

Por ejemplo, si tiene un sitio web con un tema oscuro, es posible que desee que su bloque de código tenga un fondo diferente.

Cómo eliminar un bloque de código en WordPress

Los bloques de código no son permanentes y, al igual que cualquier otro elemento de una página web de WordPress, puede eliminarlos. Así es como se lleva a cabo el proceso:

  1. Abra la página web o la publicación que tiene el bloque de código que desea eliminar.
    1689350421 922 Como usar bloques de codigo en WordPress
  2. Haga clic en el bloque de código que desea eliminar para resaltarlo.
    1689350422 738 Como usar bloques de codigo en WordPress
  3. En el widget que aparece justo en la parte superior del bloque de código, haz clic en los tres puntos.
    1689350422 957 Como usar bloques de codigo en WordPress
  4. De las opciones, seleccione "Eliminar código".
    1689350423 819 Como usar bloques de codigo en WordPress

La acción anterior debería eliminar todo el bloque de código de la página web. Alternativamente, puede simplemente seleccionar el bloque y presionar la tecla "Eliminar". También puede presionar las teclas "Ctrl" + "Shift" + "Z" al mismo tiempo y eso debería lograr los mismos resultados.

Cómo editar un bloque de código ya publicado

De vez en cuando, estás obligado a cometer errores. También puede encontrar una mejor manera de ejecutar la idea a través del código. WordPress le permite editar bloques de código ya existentes siguiendo las instrucciones a continuación:

  1. Abra la página que tiene el bloque de código que desea editar.
    1689350421 922 Como usar bloques de codigo en WordPress
  2. Haga clic en "Editar".
    1689350424 183 Como usar bloques de codigo en WordPress
  3. Haga clic en el bloque de código para habilitar la edición de código.
    1689350422 738 Como usar bloques de codigo en WordPress
  4. Una vez que haya terminado de hacer los cambios, haga clic en el botón "Actualizar".
    1689350424 935 Como usar bloques de codigo en WordPress

Cómo agregar un bloque de código a su sitio web de WordPress usando un complemento

Si a menudo agrega fragmentos de código a su sitio web, entonces podría ser mejor obtener un complemento más robusto para ayudarlo. Un bloque de código potente y excelente popular es el Resaltador de sintaxis evolucionado enchufar.

Este complemento tiene una ventaja sobre el editor nativo de WordPress porque:

  • Resalta el número de líneas en un fragmento de código.
  • Soporta múltiples lenguajes de programación.
  • Permite a sus espectadores copiar y pegar el código mostrado.

Aquí se explica cómo usar el complemento para administrar mejor los fragmentos de código en su sitio web:

  1. Instalar y activar el Resaltador de sintaxis evolucionado enchufar.
    1689350425 552 Como usar bloques de codigo en WordPress
  2. Abra la página o la publicación si desea agregar un bloque de código.
    1689350427 195 Como usar bloques de codigo en WordPress
  3. Habilite la edición y haga clic en el botón más.
    1689350429 70 Como usar bloques de codigo en WordPress
  4. Busque "SyntaxHighLighter Evolved" y abra el primer resultado que aparece.
    1689350429 699 Como usar bloques de codigo en WordPress
  5. Pegue o escriba el código en el bloque de código disponible.
    1689350431 401 Como usar bloques de codigo en WordPress
  6. Haga clic en el icono de configuración en la esquina superior derecha de la pantalla y navegue hasta la pestaña "Bloquear".
    1689350431 555 Como usar bloques de codigo en WordPress
  7. Especifique cómo desea que aparezca su numeración y qué líneas de código desea resaltar.
    1689350432 192 Como usar bloques de codigo en WordPress
  8. También puede activar "Hacer que se pueda hacer clic en las URL" si desea que se pueda hacer clic en su código.
    1689350433 574 Como usar bloques de codigo en WordPress

Para cambiar el esquema de color y formato de su bloque de código, siga estos pasos:

  1. Vaya a "Configuración" y navegue a la sección "SyntaxHighlighter".
    1689350434 429 Como usar bloques de codigo en WordPress
  2. Cambia el tema de tu bloque.
    1689350434 675 Como usar bloques de codigo en WordPress
  3. Presione "Guardar" en "Vista previa" para obtener una vista previa de cómo se verán los cambios en el modo en vivo.
    1689350436 949 Como usar bloques de codigo en WordPress

Preguntas frecuentes adicionales

¿Cómo se hace que un código bloquee un enlace en el que se puede hacer clic?

Para hacer que un código bloquee un enlace usando el editor de WordPress, sigue estos pasos:

1. Seleccione la línea de código que desea que actúe como enlace.

2. Desde el widget emergente, seleccione el icono de enlace. Alternativamente, puede presionar las teclas "Ctrl" + "K" en su teclado.

3. Ingrese la URL a la que desea vincular el código y presione la tecla "Enter".

¿Puedo resaltar código usando el editor de bloques de código que proporciona el editor de WordPress?

No, el bloque de código proporcionado por el editor nativo de WordPress no permite a los usuarios copiar y pegar el código. Para hacerlo, necesitará la ayuda de un complemento avanzado de edición de bloques de código como el complemento "SyntaxHighligher Evolved".

¿Elementor tiene una función de bloques de código?

Elementor es un complemento popular de arrastrar y soltar que se utiliza para crear sitios web de WordPress. Desafortunadamente, si está utilizando el complemento para crear sitios web, no encontrará un bloque que le permita formatear programas de computadora en su sitio web. Por lo tanto, debe cambiar al editor de WordPress convencional para finalizar la tarea.

Ponga su sitio web en funcionamiento

Ya sea que ejecute un blog de programación o simplemente desee compartir fragmentos de código en su sitio web, es muy importante saber cómo usar bloques de código en WordPress. Los bloques de código le darán a sus lectores un tiempo fácil y, en general, aumentarán la experiencia del usuario de su sitio web. Y como puede ver, insertar bloques de código es un proceso relativamente fácil, especialmente con el editor nativo de WordPress.

¿Has intentado usar los bloques de código que proporciona WordPress? ¿Qué pasa con el complemento SyntaxHighlighter Evolved? Por favor, comparta con nosotros su experiencia en la sección de comentarios a continuación.