Mostrar código en páginas y publicaciones de WordPress puede ser complicado. Simplemente publicar el código dentro del contenido puede tener resultados interesantes, especialmente si WordPress lo muestra incorrectamente o su seguridad lo bloquea por actividad maliciosa. Afortunadamente, el bloque de código de WordPress facilita la visualización de fragmentos de código. Saber cómo usar este bloque lo ayudará a mostrar el código dentro de su contenido de la mejor manera tanto para su sitio web como para sus lectores.
En este artículo, veremos el bloque de código de WordPress y veremos qué hace. Veremos cómo agregarlo a sus publicaciones y páginas y veremos su configuración y opciones. Quédese hasta el final para ver consejos y mejores prácticas sobre cómo usarlo y ver las preguntas frecuentes.
Suscríbete a nuestro canal de Youtube
Para agregar el Bloque de código a sus páginas y publicaciones, seleccione la herramienta de inserción de bloques junto al área de contenido donde desea colocar el bloque, o seleccione el insertador en la esquina superior izquierda de la página. Introduce el nombre del bloque y selecciónalo cuando aparezca o desplázate por los bloques para ver qué hay.
Si lo prefiere, puede escribir /código en el área donde desea que aparezca el bloque. Luego, simplemente presione enter o seleccione el bloque de las opciones que aparecen.
Ahora tiene un bloque de código dentro de su contenido donde puede agregar cualquier tipo de código que desee mostrar. El código se marca automáticamente con etiquetas de código, por lo que se muestra correctamente como código. Esto ayuda a proporcionar ejemplos para que los lectores aprendan o los usen en sus propios proyectos. En este ejemplo, estoy usando el pseudocódigo de la página de soporte de WordPress (porque) lazy.level = advanced.
Configuración y opciones de bloqueo de código
El bloque de código tiene dos lugares donde encontrará configuraciones y opciones. La primera es la barra de herramientas de código encima del bloque. El segundo son las opciones en la barra lateral derecha. Veremos ambos.
Barra de herramientas de bloque de código
Haga clic en cualquier parte del bloque para ver su barra de herramientas. Si no ve todas las herramientas, coloque el mouse debajo del bloque en una nueva ubicación de bloque y luego haga clic en el bloque. Aparecerán todos los ajustes.
Cambiar tipo o estilo de bloque de código
La primera configuración usa flechas izquierda y derecha. Esto cambia el bloque a un bloque HTML personalizado , bloque preformateado, cambia las columnas y le permite crear un grupo para que pueda ajustar el color de fondo, elegir bordes y ajustar otras opciones. Al pasar el cursor sobre ellos, obtendrá una vista previa de cómo se vería cada uno. Estoy pasando el cursor sobre la opción HTML personalizado.
Arrastrar
La herramienta de arrastre incluye seis puntos. Tome estos puntos para arrastrar el bloque a cualquier lugar que desee. Aparece una línea azul donde se colocará en cada ubicación posible cuando pasas el cursor sobre las diferentes áreas.
Cuando lo suelte, el bloque se colocará en su nueva ubicación.
Mover
Las flechas de movimiento hacia arriba y hacia abajo mueven el bloque hacia arriba o hacia abajo un bloque dentro de los bloques de contenido cada vez que hace clic en ellos.
negrita y cursiva
Los ajustes de negrita y cursiva se aplican al código que ha resaltado. Puedes usarlos juntos o individualmente. Estoy usando ambos juntos e independientemente en este ejemplo. es una buena manera de llamar la atención sobre ciertas líneas o comandos en el código.
Enlace
El enlace le permite hacer que cualquiera de los códigos sea un enlace en el que se puede hacer clic. Puede buscar o ingresar la URL de la parte del código que ha resaltado. Esto es bueno si desea vincular tutoriales para cada uno de los comandos, otros ejemplos, de dónde proviene el código, etc. Puede tener el vínculo abierto en la misma pestaña o en una nueva pestaña.
Más ajustes
Más configuraciones del bloque de código abre un cuadro desplegable con varias opciones. He aplicado cada una de las opciones en este ejemplo.
Código en línea : muestra el texto formateado como código. Coloca el texto en una línea por sí mismo. Dado que todo está formateado como código, la fuente tiene el mismo aspecto.
Imagen en línea : coloca una imagen dentro del texto donde ha colocado el mouse. Abre la Biblioteca multimedia donde puede seleccionar una imagen. Si hace clic en la imagen, verá un cuadro desplegable donde puede cambiar su ancho.
Entrada de teclado : agrega etiquetas de teclado al código que ha seleccionado. El código se muestra en la fuente monoespaciada predeterminada del navegador.
Tachado : agrega una línea a través del código que ha resaltado.
Subíndice : formatea el código como un subíndice.
Superíndice : formatea el código como un superíndice. Puede usar subíndice y superíndice juntos. Esto reduce el tamaño de la fuente y centra horizontalmente el código.
Color del texto : cambia el color del código que ha resaltado. Seleccione entre colores prefabricados, elija un color en la herramienta de selección de color o ingrese el valor como HEX, RBG o HSL.
Opciones
Las opciones de Bloque de código se colocan dentro de los tres puntos en el extremo derecho de la barra de herramientas. Las opciones incluyen:
Ocultar más configuraciones : oculta la barra lateral derecha para brindarle un espacio de trabajo limpio y amplio.
Copiar : copia el bloque para que pueda pegarlo en cualquier lugar dentro del área de contenido.
Duplicar : duplica el bloque y lo coloca debajo del original.
Insertar antes : agrega un área de contenido sobre el bloque de código.
Insertar después : agrega un área de contenido debajo del bloque de código.
Mover a : te permite mover el bloque colocando una línea azul que puedes mover hacia arriba o hacia abajo con las teclas de flecha. Cuando obtenga la línea en la ubicación que desea, simplemente presione Entrar.
Editar como HTML : cambia al editor de código para el bloque donde puede editar el código como HTML. Seleccione Editar visualmente para volver a cambiar el bloque al modo visual.
Agregar a bloques reutilizables : agrega el bloque a sus bloques reutilizables para que pueda reutilizarlo en cualquier página o publicación.
Grupo : agrega el bloque a un grupo para que pueda realizar cambios en ellos como una sola unidad.
Quitar bloque : elimina el bloque de código.
Configuración del bloque de código
La configuración del bloque de código se encuentra en la barra lateral derecha. Incluyen Tipografía y Configuración avanzada. Al seleccionar el bloque, se mostrarán los ajustes. Si no se muestra la barra lateral, haga clic en el ícono de ajustes en la esquina superior derecha.
Tipografía
La tipografía le permite seleccionar el tamaño de la fuente para todo el bloque. Elija el tamaño de fuente de un cuadro desplegable con 7 tamaños o ingrese un tamaño personalizado en el campo. Haga clic en Restablecer para volver a cambiarlo al tamaño de fuente predeterminado.
Avanzado
La configuración avanzada incluye un ancla HTML y un campo para clases CSS adicionales. El ancla es una URL solo para este bloque, por lo que puede vincularlo directamente. El campo Clases CSS adicionales le permite agregar una clase CSS personalizada para diseñar el bloque.
Sugerencias y mejores prácticas para usar el bloque de código de manera efectiva
Use este bloque cada vez que desee mostrar código dentro de su contenido. El código en sí no tiene ningún efecto en el bloque.
Formatee el código con espacios como lo haría al crear código con un editor de texto. Use la configuración de negrita y cursiva para llamar la atención sobre ciertos fragmentos dentro de su código.
Como con cualquier código, etiquételo bien para que sea fácil de entender. Puede comentar el código o agregar notas dentro del bloque, pero asegúrese de que no estén dentro de los elementos del código en caso de que alguien quiera copiar el código.
Preguntas frecuentes sobre el bloque de código
¿Cuál es el propósito del bloque de código de WordPress?
Para mostrar el código para que otros lo vean y lo usen. Muestra el código en un diseño limpio que mantiene su espacio.
¿El bloque de código ejecuta el código?
No. Muestra el código formateado para que sus lectores puedan verlo y usarlo. El código se envuelve automáticamente con las etiquetas de código HTML.
¿Qué tipos de código puede mostrar?
Mostrará cualquier código de cualquier lenguaje de programación o secuencias de comandos. El idioma no hace ninguna diferencia.
¿Formatea el código?
No. No funciona como editor de código, por lo que no cambia el espacio, los colores, no agrega números, etc. Simplemente muestra el código de la forma en que lo escribe.
¿En qué se diferencia el bloque de código del bloque HTML?
El Bloque HTML le permite crear HTML sin tener que cambiar a la vista del editor de código de su página. Ejecutará el HTML en la parte delantera. Puede obtener una vista previa de los resultados desde el back-end. Puede usar el bloque de código para mostrar HTML si no desea que se ejecute.
¿En qué se diferencia del bloque preformateado?
El bloque preformateado muestra el texto con sus espacios en una fuente monoespaciada. Agrega fuente y colores de fondo para las opciones de la barra lateral.
Conclusión
Esa es nuestra mirada al bloque de código de WordPress. El bloque es simple y fácil de usar. Dado que no ejecuta el código, el idioma en sí no importa. Este bloque proporciona una buena manera de mostrar cualquier tipo de código para que sus lectores lo copien o aprendan.
Queremos escuchar de ti. ¿Has usado el bloque de código de WordPress? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de Danielala / shutterstock.com