Puede ser difícil mostrar el código en sus páginas y publicaciones de WordPress. Simplemente publicar el código en el contenido puede generar resultados interesantes, especialmente si WordPress lo muestra incorrectamente o si su seguridad lo bloquea de la actividad maliciosa. Afortunadamente, WordPress Code Block facilita la visualización de fragmentos de código. Saber cómo usar este bloque te ayudará a mostrar el código en tu contenido de la mejor manera tanto para tu sitio web como para tus lectores.
En este artículo, veremos un 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. Haga una pausa para ver el resto de los consejos y las mejores prácticas para usarlo, y lea algunas preguntas frecuentes.
Suscríbete a nuestro canal de YouTube
¿Cómo agrego un bloque de código a mi publicación o página?
Para agregar un 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 la herramienta de inserción en la esquina superior izquierda de la página. Introduce un nombre para el bloque y selecciónalo cuando aparezca, o desplázate por los bloques para ver qué hay.
Si lo prefiere, puede escribir /código donde quieres que aparezca el bloque. Luego simplemente presiona Enter o selecciona un bloque de las opciones que se muestran.
Ahora tiene un bloque de código en su cuerpo donde puede agregar cualquier tipo de código que desee mostrar. El código se etiqueta automáticamente con etiquetas de código para que se muestre correctamente como código. Esto ayuda a proporcionar a los lectores ejemplos para aprender o utilizar en sus propios proyectos. En este ejemplo, estoy usando el pseudocódigo del sitio 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 de un bloque para ver su barra de herramientas. Si no puede ver todas las herramientas, coloque el mouse debajo del bloque en la nueva ubicación del bloque y luego haga clic en el bloque. Aparecerán todas las configuraciones.
Cambiar el tipo o estilo del bloque de código
La primera configuración utiliza las flechas izquierda y derecha. Esto cambia el bloque a un bloque HTML personalizado, un bloque con formato previo, cambia las columnas y le permite crear un grupo para que pueda personalizar el color de fondo, elegir un borde y ajustar otras opciones. Al pasar el cursor sobre ellos, obtendrá una vista previa de cómo se verá cada uno de ellos. Paso el cursor sobre la opción HTML personalizado.
Jalar
La herramienta de arrastre contiene seis puntos. Agarra estos puntos para arrastrar el bloque a cualquier lugar. Cuando pase el cursor sobre diferentes áreas, aparecerá una línea azul donde se colocará siempre que sea posible.
Cuando lo suelte, el bloque se colocará en su nueva ubicación.
Llevar
Las flechas hacia arriba y hacia abajo mueven el bloque hacia arriba o hacia abajo un bloque en 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 seleccionado. Puedes usarlos juntos o individualmente. En este ejemplo, estoy usando ambos juntos e independientemente. Esta es una buena manera de prestar atención a líneas o comandos específicos en su código.
Combinar
Un enlace convierte código arbitrario en un enlace en el que se puede hacer clic. Puede buscar o ingresar la URL de la parte seleccionada del código. Esto está bien si desea vincular tutoriales para cada uno de los comandos, otros ejemplos, de dónde proviene el código, etc. Puede abrir el enlace en la misma pestaña o en una nueva pestaña.
Más ajustes
Más configuraciones de bloqueo de código abre un cuadro desplegable con varias opciones. En este ejemplo, utilicé cada una de las opciones.
código en línea – muestra texto formateado como código. Sam pone el texto en la línea. Dado que todo está formateado como código, la fuente tiene el mismo aspecto.
Imagen integrada – Pone una imagen en el texto donde colocaste el mouse. Abre la biblioteca de medios 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 seleccionado. El código se muestra en la fuente monoespaciada predeterminada del navegador.
tachado – agrega una línea a través del código resaltado.
Índice – formatea el código como subíndice.
Sobrescrito – formatea el código como superíndice. Puede usar subíndice y superíndice juntos. Esto reduce el tamaño de la fuente y centra el código horizontalmente.
El color del texto – cambia el color del código resaltado. Elija entre colores preestablecidos, seleccione un color en el selector de color o ingrese un valor como HEX, RBG o HSL.
Opciones
Las opciones de bloque de código se encuentran dentro de los tres puntos en el lado derecho de la barra de herramientas. Las opciones incluyen:
Ocultar más configuraciones – Oculta la barra lateral derecha para un espacio de trabajo limpio y amplio.
Copiar – copia el bloque para que pueda pegarlo en cualquier lugar del área de contenido.
Duplicar – duplicar el bloque y colocarlo 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 – le permite mover el bloque colocando una línea azul que se puede mover hacia arriba o hacia abajo con las teclas de flecha. Una vez que obtenga la línea en la ubicación que desea, simplemente presione Entrar.
Editar como HTML – cambios en el editor de código para un 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 un bloque a los bloques reutilizables para que pueda reutilizarlo en cualquier página o publicación.
Grupo – agrega un bloque a un grupo, para que pueda realizar cambios en ellos como una sola unidad.
Eliminar bloque – elimina un bloque de código.
Configuración de bloqueo de código
La configuración del bloque de código se encuentra en la barra lateral derecha. Estos incluyen tipografía y configuraciones avanzadas. Al seleccionar un 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 elegir el tamaño de fuente para todo el bloque. Seleccione un tamaño de fuente de la lista desplegable con 7 tamaños o ingrese un tamaño personalizado en el campo. Haga clic en Restablecer para restaurar el tamaño de fuente predeterminado.
Avanzado
La configuración avanzada incluye un ancla HTML y un campo para clases CSS adicionales. Un ancla es una URL solo para ese bloque, por lo que puede vincularlo directamente. El campo Clases de CSS adicionales le permite agregar una clase de CSS personalizada para diseñar el bloque.
Sugerencias y mejores prácticas para usar un bloque de código de manera efectiva
Usa este bloque cada vez que quieras mostrar código en tu cuerpo. El código en sí no tiene efecto en el bloque.
Formatee el código con espacios como lo haría al crear el código con un editor de texto. Use la configuración de negrita y cursiva para llamar la atención sobre fragmentos de código específicos.
Como con cualquier código, márcalo bien para que sea fácil de entender. Puede comentar el código o agregar notas en el bloque, pero asegúrese de que no estén en 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 ver el código para que otros puedan verlo y usarlo. Imprime el código en un diseño limpio que mantiene los espacios en blanco.
¿El bloque de código ejecuta código?
No. Muestra código formateado para que los lectores puedan verlo y usarlo. El código se coloca automáticamente en etiquetas de código HTML.
¿Qué tipo de código puede mostrar?
Dará salida a cualquier código de cualquier lenguaje de programación o secuencias de comandos. El idioma no importa.
¿Formatea el código?
No. No funciona como editor de código, por lo que no cambia el espaciado, los colores, no agrega números, etc. Simplemente muestra el código a medida que lo escribe.
¿Cuál es la diferencia entre un bloque de código y un bloque HTML?
El bloque HTML le permite crear código HTML sin tener que ir a la vista del editor de código de página. Ejecutará el código HTML en la interfaz de usuario. Puede obtener una vista previa de los resultados desde el backend. Puede usar un bloque de código para mostrar el código HTML si no desea que se ejecute.
¿En qué se diferencia de un bloque preformateado?
El bloque con formato previo muestra texto con espacios en una fuente monoespaciada. Agrega fuente y colores de fondo para las opciones de la barra lateral.
Solicitud
Aquí está nuestro vistazo 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 los lectores lo copien o aprendan.
Queremos escuchar de ti. ¿Has usado el código de bloqueo de WordPress? Háganos saber lo que piensa al respecto en los comentarios.
Foto destacada a través de Danielala / shutterstock.com
