Cómo usar el bloque de código de WordPress

El código de visualización en las páginas y publicaciones de WordPress puede ser difícil. Solo la publicación del código de contenido puede tener resultados interesantes, especialmente si WordPress lo muestra incorrectamente o su seguridad lo bloquea para actividades dañinas. Afortunadamente, el bloque de código de WordPress facilita los fragmentos de código. Saber cómo usar este bloque lo ayudará a mostrar el código en su contenido de su mejor manera tanto para su sitio como para sus lectores en este artículo, analizaremos el bloque de código de WordPress y veremos lo que hace. Veremos cómo agregarlo a sus publicaciones y páginas y ver su configuración y opciones. Manténgase al final para ver consejos y mejores prácticas sobre cómo usarlo y ver preguntas frecuentes.
Suscríbase a nuestro canal de YouTube cómo agregar el bloque de código a su publicación o página.

Para agregar el bloque de código a sus páginas y publicaciones, seleccione el bloque inserto al área de contenido en el que desea colocar el bloque o seleccione el inserto en la esquina superior izquierda de la página. Ingrese el nombre del bloque y seleccione cuando aparezca o se desplace a través de los bloques para ver qué hay allí.

Si lo prefiere, puede escribir / codificar en el área donde desea que aparezca el bloque. Luego, simplemente presione Entrar o seleccione el bloque de las opciones que aparecen.

Ahora tiene un bloque de código en 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 los aprendan o los usen en sus propios proyectos. En este ejemplo, uso el pseudo-código en WordPress (porque) lazy.level = avanzado.
El bloque de código tiene dos lugares donde encontrará configuraciones y opciones. El primero es el código de la barra de herramientas sobre el bloque. El segundo son las opciones en la barra lateral derecha. Nos miraremos a los dos. La barra de herramientas para bloquear el 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 en el 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 usa las flechas izquierda y derecha. Esto cambia el bloque a un bloque HTML personalizado, el bloque preformado, cambia las columnas y le permite crear un grupo, para que pueda ajustar el color de fondo, elegir los bordes y ajustar otras opciones. Pasar sobre ellos le da una vista previa de la forma en que se vería cada uno. Me gusta la opción HTML personalizada.

Disparar
La herramienta de tiro incluye seis puntos. Tome estos puntos para tirar del bloque donde quiera. Aparece una línea azul donde se colocará en cualquier ubicación posible cuando pase con el mouse sobre las diferentes áreas.

Cuando lo deje, el bloque se colocará en su nueva ubicación. Muevete

El movimiento de movimiento hacia arriba y hacia abajo mueven el bloque hacia arriba o hacia abajo con un bloque de bloques de contenido cada vez que hace clic en ellas. Bold y los italicias en negrita y cursiva se aplican al código que resaltó. Puede usarlos juntos o individualmente. Uso juntos y 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 convertir cualquiera de los códigos en un enlace que se puede hacer clic. Puede buscar o ingresar la URL para la parte del código resaltado. Esto es bueno si desea conectarse a tutoriales para cada uno de los pedidos, otros ejemplos, de dónde proviene el código, etc. Puede tener el enlace abierto en la misma pestaña o en una nueva pestaña. Más ajustes
Varias configuraciones en el bloque de código abren un cuadro de caída con múltiples opciones. Apliqué cada una de las opciones en este ejemplo.

Código en línea: muestra el texto formado como un código. Coloque el texto solo en una línea. Debido a que todo se forma como un código, la fuente se ve igual.

Imagen en línea: coloque una imagen en el texto donde colocó el mouse. La biblioteca de medios abre donde puede seleccionar una imagen. Si hace clic en la imagen, verá una caída en la que puede cambiar su ancho. Entrando el teclado: agrega etiquetas de teclado al código seleccionado. El código se muestra en la fuente de navegador predeterminada. Strikethrough: agrega una línea por el código que resaltó. Índice – Forma el código como un índice. SuperScript – Forma el código como un SuperCrypt. Puede usar el índice y la superindicación juntos. Esto reduce el tamaño de la fuente y centra el código horizontalmente.

Color de texto: cambia el color del código que resaltó. Seleccione de los colores prefabricados, elija un color en la herramienta de selección de color o ingrese el valor como Hex, RBG o HSL. elección
Las opciones de bloqueo de código se colocan en los tres puntos en el extremo derecho de la barra de herramientas. Las opciones incluyen: ocultar múltiples configuraciones: oculte la barra lateral derecha para darle un espacio de trabajo limpio y amplio. Copie: copie el bloque para que pueda pegarlo en cualquier lugar del área de contenido. Duplicado: duplica el bloque y lo coloca debajo del original. Inserte hacia adelante: agregue una zona de contenido sobre el bloque de código.
Insertar después: agregue un área de contenido en el bloque de código. Muévase: le permite mover el bloque colocando una línea azul que pueda moverse hacia arriba o hacia abajo con las teclas de flecha. Cuando llegue a la línea deseada, simplemente presione Entrar. Editar como HTML: cambia al editor de código para el bloque donde puede editar el código HTML. Seleccione la edición visual para cambiar el bloque nuevamente al modo visual. Agregue a los bloques reutilizables: agregue el bloque a los bloques reutilizables, para que pueda reutilizarlo en cualquier página o publicación. Grupo: agregue el bloque de un grupo para que pueda hacer cambios como una sola unidad.

Bloque de eliminación: elimine el bloque de código. Configuración de bloqueo de código
La configuración de bloqueo de código se coloca en la barra lateral derecha. Estos incluyen tipografía y configuraciones avanzadas. Seleccionar el bloque mostrará la configuración. Si la barra lateral no se muestra, haga clic en el icono de la rueda en la esquina superior derecha. IMPRESIÓN
La tipografía le permite seleccionar el tamaño de fuente para todo el bloque. Elija el tamaño de fuente de un cuadro desplegable de 7 de tamaño o ingrese un tamaño personalizado en el campo. Haga clic en Restablecer para cambiarlo nuevamente al tamaño de fuente predeterminado.

La configuración avanzada incluye un ancla HTML y un campo CSS CSS adicional. El ancla es una URL solo para este bloque, por lo que puede conectarse directamente a ella. Las clases de clase CSS adicionales le permiten agregar una clase CSS personalizada para estilizar el bloque. Consejos y mejores prácticas para el uso eficiente del bloque de código Use este bloque cuando desee mostrar código en 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 configuraciones en negrita y cursiva para llamar la atención sobre ciertos fragmentos de su código.

Como con cualquier código, etiquételo bien para que sea fácil de entender. Puede comentar sobre el código o agregar calificaciones dentro del bloque, pero asegúrese de que no estén en los elementos del código si alguien quiere 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 que otros pueden ver y usar. Muestra el código en un aspecto 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 etiquetas de código HTML. ¿Qué tipos de código pueden mostrar? Mostrará cualquier código de cualquier lenguaje de programación o script. El lenguaje no hace ninguna diferencia. Formar el código? No. No funciona como editor de código, por lo que no cambia espacio, colores, no agrega números, etc. Muestra el código solo en la forma en que lo escribe. ¿Qué diferente es el bloque de código del bloque HTML? El bloqueo de HTML le permite crear HTML sin necesidad de cambiar el editor de código de su página. Se ejecutará el código HTML en el frente. Puede obtener una vista previa de los resultados de la parte posterior. Puede usar el bloque de código para mostrar HTML si no desea ejecutar. ¿Qué es diferente del bloque preformado?