Antes del editor de bloques de WordPress, los códigos cortos de WordPress eran una de las mejores cosas para acceder al editor de WordPress para que fuera más fácil agregar funciones de complementos y temas a páginas, publicaciones y otras secciones de un sitio web de WordPress.

Con el traslado al editor de bloques, ¿qué significa esto para la mayoría de los complementos y sitios web antiguos que aún están llenos de códigos cortos? ¿Seguirán funcionando los códigos cortos de WordPress? ¿Hay una manera de pasar fácilmente de usar códigos cortos de WordPress a bloques de WordPress?

Averigüémoslo. En esta guía, exploraremos los códigos cortos de WordPress en la era del editor de bloques de WordPress.

¿Qué Son los Shortcodes de WordPress?

Un código corto de WordPress es un fragmento de código reutilizable y dinámico incluido . Los códigos cortos le permiten insertar fácilmente funciones específicas del propio WordPress o de un plugin o tema en cualquier publicación, página, tipo de publicación personalizada o widget. Piense en los códigos cortos de WordPress como «atajos» o como macros en su sitio web.

Puedes usar códigos cortos de WordPress para mostrar contenido estático que es demasiado tedioso para seguir codificando y repitiendo. Y también puedes usar códigos cortos para mostrar contenido dinámico, como galerías de imágenes, reproductores de audio para podcasts, calendarios de eventos o estadísticas cambiantes para ciertos datos.

Formato de código corto

Cuando se trata de insertar códigos cortos, el formato básico se puede «extender» de varias maneras, lo que le permite personalizar o agregar información de configuración adicional llamada atributos. Además, los accesos directos pueden envolver texto (o HTML) o incluso anidarse dentro de otro código corto.

Por ejemplo, un código corto puede tener los siguientes formatos:

Some text

<a href="http://mysite.com/">HTML content</a>

Some text more text 

 This is a custom icon 

Shortcode Atributos

códigos cortos son también flexibles, ya que pueden ser ampliados con los atributos. Con atributos, los códigos cortos ofrecen personalización adicional simplemente agregando fragmentos de código adicionales dentro del código corto.

Los complementos y temas ofrecen guías y rúbricas adicionales para ayudar a los usuarios a usar los fragmentos de código correctos para agregar o eliminar ciertos elementos en la salida.

Aquí hay algunos ejemplos de códigos cortos con atributos.

]

Posts Heading

Integrado en Shortcodes de WordPress

WordPress viene con varios incorporado en códigos cortos para la representación de ciertos tipos de contenido.

]

El audio abreviado permite incrustar archivos de audio y reproducirlos.

]

Utilizado principalmente con imágenes individuales, el código corto de subtítulos le permite envolver subtítulos en el contenido.

]

El código corto de la galería le permite agregar una o más galerías de imágenes a sus publicaciones y páginas.

]

El código corto incrustado le permite envolver elementos incrustados con un ancho y un alto máximos (pero no fijos).

]

El código corto de la lista de reproducción implementa la funcionalidad de mostrar una colección de archivos de audio o video de WordPress en una publicación.

]

El video abreviado permite incrustar archivos de vídeo y reproducirlos.

Plugin& Códigos cortos de tema

Los temas y complementos específicos de WordPress tienen códigos cortos desde el primer momento que puede insertar en el editor de publicaciones o páginas y mostrarán el resultado en la interfaz. Hasta la fecha, muchos temas y complementos siguen utilizando códigos cortos.

Por ejemplo, los códigos cortos se utilizan a menudo en complementos comunes para calendarios, formularios, tablas, membresías, temporizadores de cuenta regresiva o citas de extracción. Incluso existen complementos de código corto que te permiten crear códigos cortos para cualquier cosa.

Los temas de WordPress también pueden utilizar códigos cortos para renderizar cierto contenido dinámico que está preestilado o proporcionado por ellos.

Códigos cortos personalizados

La mayoría de los desarrolladores expertos optan por crear sus propios códigos cortos, esencialmente reduciendo el tiempo que lleva codificar algo que es repetitivo. Todo lo que se necesita es un simple archivo adicional en su directorio de archivos para crear los códigos cortos personalizados.archivo php. Si quieres aprender las cuerdas de los códigos cortos personalizados, aquí tienes una guía para crear códigos cortos personalizados.

La API de código corto de WordPress

Para desarrolladores que crean sus propios códigos cortos personalizados, la API de código corto de WordPress proporciona un conjunto simple de funciones para crear códigos cortos de WordPress para usar en publicaciones y páginas.

La API de código corto ayuda a los desarrolladores de complementos a crear contenido dinámico que los usuarios pueden agregar a páginas o publicaciones agregando el código corto correspondiente en el área de contenido. Afortunadamente, la API maneja todo el análisis complicado, eliminando la necesidad de escribir una expresión regular personalizada para cada código corto. Además, se incluyen funciones auxiliares para configurar y obtener atributos de código corto predeterminados.

Los desarrolladores pueden usar la documentación de la API de código corto de WordPress para obtener más información sobre:

• Atributos de manejo
• Salida
• Que encierran códigos cortos de cierre automático
• Referencia de funciones
• Limitaciones
• Sintaxis formal

Códigos cortos en el Editor Clásico

En el pasado, los códigos cortos se insertaban en el editor clásico de cualquier publicación o página, así:

¿Qué Son los Bloques de WordPress?

Los códigos cortos fueron primero but pero luego vino la edición basada en bloques. Con la introducción de WordPress 5.0 llegó la implementación del largamente planeado editor de Gutenberg o Editor de bloques de WordPress como editor de página principal y publicación para WordPress, reemplazando al clásico editor basado en texto de WordPress que ha existido durante años.

He aquí un vistazo al editor de contenido anterior a WordPress 5.5 (¡ah, esos eran los días!)

El editor de Gutenberg se anunció por primera vez en versiones anteriores de WordPress, pero siguió siendo opcional hasta que WordPress 5.0 se convirtió en el editor predeterminado.

No hay nada inherentemente malo con el nuevo editor bloqueado. De hecho, a la mayoría de los usuarios les gusta el aspecto mejorado, más limpio y menos intimidante del back-end de WordPress.

Pero con el WordPress editor de bloques vino de WordPress bloques. Atrás quedaron las opciones de formato en la parte superior que recuerdan a las aplicaciones de procesamiento de textos como Microsoft Word. En su lugar, las opciones de formato se han reemplazado por las opciones de la barra lateral derecha con pestañas para cada bloque.

WordPress bloques son esencialmente el contenido de los contenedores. Hay muchos bloques diferentes para diferentes tipos de contenido: imágenes, videos, textos, encabezados, galerías, lo que sea.

Incluso hay un bloque de WordPress para formatear, espaciar y dividir, y están dispuestos de forma informal en categorías para facilitar el acceso.

Todas las opciones y los controles que estaban en la parte superior ahora residen en el lado derecho de la página/post editor, con pestañas en la parte superior indicando si desea ver las opciones para el bloque actual solo o todo el documento.

El editor de bloques es más fácil, rápido y fácil de usar. Además, los desarrolladores de temas y complementos también están creando sus propios bloques que agregan más opciones de bloque a los bloques predeterminados de WordPress.

Bloques reutilizables vs. Códigos cortos

La forma antigua de guardar un conjunto de resultados predefinidos en el editor clásico de WordPress era mediante la creación de sus propios códigos cortos. Ahora, este método ha sido reemplazado por bloques reutilizables.

La capacidad de guardar bloques predefinidos y pre-personalizados también ha hecho que sea más fácil guardar el diseño de un bloque determinado y usarlo en otro. Muy parecido a una plantilla de página.

Por ejemplo, si agrega un botón de bloquear y estilo con un color determinado, hover, efectos, etc., no querrías seguir haciendo eso en todas y cada una de las páginas a las que agregas ese botón. Si lo cambias a un bloque reutilizable, el botón se guarda en tu sitio de WordPress y se convierte en su propio bloque que puedes usar en otras páginas o publicaciones.

También puede actualizar estos bloques convirtiéndolos en bloques normales, guardándolos como uno nuevo (con un nombre nuevo) o actualizando el diseño existente del bloque.

Grupo de Bloques

En WordPress 5.3 vino también la introducción de grupo de bloques y plantillas.

Esencialmente, se le da la capacidad de agrupar ciertos bloques y moverlos o actualizarlos todos juntos. Esto finalmente dio lugar a patrones de bloques. Los patrones de bloques han facilitado la edición de contenido, ya que los usuarios preferirían elegir un patrón y actualizar el contenido en lugar de comenzar desde un lienzo en blanco.

Opciones de estilo de bloque

Con cada tema vienen diferentes opciones de estilo. Y normalmente el estilo del contenido que agregas en cada sitio está predeterminado por tu tema.

Con el editor de bloques, tiene la opción de actualizar el estilo de cada bloque individualmente, ya sea para destacar o para hacerlos más visibles.

Bloques & Edición completa del sitio

Con todos estos avances y cambios en la forma en que creamos y construimos páginas en WordPress, surge la idea y la transición final a lo que se llama Edición Completa del Sitio.

En el pegado, la mayoría de los usuarios solo podían actualizar el cuerpo real de una publicación o página. Ciertos aspectos del sitio web, como el encabezado, el pie de página, las barras laterales y los widgets, aún dependen en gran medida del tema. Esto, por supuesto, hizo que buscar el tema perfecto con la cantidad correcta de opciones fuera la lucha definitiva para desarrolladores y usuarios de WordPress.

Con la Edición Completa del sitio y la introducción del Creador de bloques, la tendencia está marcando hacia hacer que todas las secciones de una página o publicación sean editables, de alguna manera, usando bloques.

Por ejemplo, el último tema de WordPress Twenty-Twenty sigue este patrón, dando a los creadores y propietarios de sitios web un mayor control sobre su sitio web y cómo querrían que se viera.

De cara al futuro, los desarrolladores de complementos y temas deberán adoptar un enfoque diferente al desarrollar su software para adaptarse a la nueva experiencia de edición completa del sitio y creación de páginas del editor de bloques de WordPress. Si bien la aplicación completa de esto todavía está en el horizonte, es un cambio positivo que probablemente veremos más temprano que tarde.

El Nuevo bloque de código corto

Antes del editor de bloques, los códigos cortos se insertaban directamente en la página o en el editor de páginas. Ahora, el editor de bloques de WordPress incluye un nuevo bloque de código corto.

El bloque de código corto facilita el uso de códigos cortos heredados dentro de una publicación o página y mantiene la integridad de la salida de código corto.

El bloque de código corto se puede agregar a una página o publicación haciendo clic en el botón Agregar bloque. Alternativamente, puede escribir / código corto y presionar enter.

Notará que, a diferencia de otros bloques comunes, el bloque de código corto no incluye ninguna configuración específica en la barra de herramientas de bloques o en la barra lateral del editor, probablemente debido sus atributos.

¿Qué Significa el Editor de Bloques para Códigos Cortos de WordPress?

El editor de bloques de WordPress tiene implicaciones importantes para los códigos cortos. Cubramos algunas de las cosas más importantes a tener en cuenta sobre los códigos cortos de WordPress en la era del editor de bloques.

1. El editor de bloques de WordPress cambia fundamentalmente la necesidad y el propósito de los códigos cortos para la mayoría de los complementos y temas. Con un sistema de edición basado en bloques, cada «elemento» de la página tiene su propio bloque, en lugar de estar contenido en un editor WYSIWYG editable.

Debido a que el editor de bloques es un enfoque totalmente diferente para componer una publicación o página, las partes más dinámicas de una página que se generan mediante códigos cortos pueden existir como bloques que se pueden agregar individualmente.

2. Los bloques ahora pueden tomar el lugar de la mayoría de los códigos cortos, eliminando la necesidad de que los usuarios aprendan a usar códigos cortos. El concepto y el formato de los códigos cortos pueden tener una curva de aprendizaje pronunciada para algunos usuarios, por lo que el enfoque de bloques puede ser más fácil.

Por ejemplo, tome el complemento Formas de gravedad. Antes del editor de bloques, el proceso para insertar un formulario en una publicación o página era diferente. Desde el editor clásico, tenías que usar un botón para insertar un formulario en tu contenido.

Después de seleccionar su formulario, el código corto del formulario se agregó a su contenido. Dependiendo de las opciones que seleccionaste, el código corto contenía los atributos de título y descripción.

Ahora, el complemento Gravity Forms ofrece un bloque de incrustación de bloques de formularios. En el editor de bloques, seleccione el bloque de formularios.

una Vez que haya seleccionado el formulario, usted verá una mejor vista previa de cómo la forma se verá en su página. La configuración del formulario se puede encontrar en la configuración del bloque.

3. Los desarrolladores de temas y complementos tendrán que decidir sobre el futuro de sus implementaciones de código corto y convertir sus códigos cortos en bloques. Como se mencionó anteriormente, cientos de temas, complementos y desarrolladores aún usan códigos cortos en sus sitios web y aplicaciones. La adopción de bloques puede ser lenta, pero a medida que los usuarios se familiaricen con el nuevo editor de bloques, es probable que soliciten una opción de bloque.

Para aquellos desarrolladores que aún están a kilómetros de adoptar el sistema de edición de bloques de WordPress, el concepto de Edición Completa del Sitio puede ir de la mano con sus códigos cortos. Complementos como complementos de revisión y calificación, reproductores de audio, marcadores de fecha, galerías, formularios de contacto y casi todo lo que aún usa códigos cortos todavía están «en el juego».»

4. Los códigos cortos no desaparecerán pronto. Probablemente es por eso que el editor de bloques de WordPress ofrece el bloque de código corto para ayudar a mantener el uso del código corto. Debido a que los códigos cortos tenían un uso e implementación tan amplios antes de WordPress 5.0 y el editor de bloques, es importante que las futuras versiones de WordPress sigan soportando códigos cortos.

5. Los códigos cortos se pueden convertir en un bloque. ¿Tienes un tema o plugin favorito que use códigos cortos? Es probable que esos códigos cortos se conviertan en un bloque en algún momento. Si eres un desarrollador de un plugin o tema, o construyes sitios web de WordPress y usas códigos cortos en un tema personalizado, es posible repensar los códigos cortos como bloques.

En la siguiente sección, cubriremos brevemente cómo convertir códigos cortos de WordPress en bloques de WordPress.

Cómo convertir códigos cortos de WordPress en bloques de WordPress

Al igual que puede agregar códigos cortos personalizados y bloques reutilizables, también puede convertir fácilmente códigos cortos personalizados de WordPress en bloques de WordPress.

Sigue los primeros pasos de esta guía de código corto personalizado.

Tome este ejemplo básico de Formas Caldera:

 <?php/** * Handler for shortcode * * @param $atts * * @return string */function caldera_learn_basic_blocks_post_title_shortcode_handler($atts){$atts = shortcode_atts(, $atts, 'cl_post_title');return caldera_learn_basic_blocks_post_title($atts, $atts);}/** * Output the post title wrapped in a heading * * @param int $post_id The post ID * @param string $heading Allows : h2,h3,h4 only * * @return string */function caldera_learn_basic_blocks_post_title($post_id, $heading){if (!in_array($heading, )) {$heading = 'h2';}$title = get_the_title(absint($post_id));return "<$heading>$title</$heading>";}/** * Register Shortcode */add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

Este código toma el ID de la publicación y un nivel de encabezado (h2, h3, he) y muestra el título de la publicación envuelto en el HTML para el encabezado.

Una vez que haya hecho esto y haya probado que el código funciona, debe registrar el código corto como un bloque. Aquí está la Guía Paso A Paso Para Convertir Un Código Corto De WordPress A Un Bloque De Gutenberg como ejemplo.

Más recursos para crear bloques de WordPress

Hay numerosos complementos y recursos disponibles en línea que te ayudarán a llegar a ese paso, incluida la documentación oficial de WordPress sobre Cómo Escribir Tu Primer Tipo de Bloque. También puedes consultar la publicación de Igor Benic sobre cómo crear un bloque para mostrar publicaciones.

Después de leer estas guías, podrás descubrir cómo crear tus propios bloques de WordPress usando tus códigos cortos personalizados.

El veredicto para los códigos cortos de WordPress

Los códigos cortos de WordPress son y seguirán siendo una de las partes más importantes de WordPress. Los códigos cortos han ayudado a muchos desarrolladores de complementos a hacer que sus complementos sean más fáciles de usar y muchos desarrolladores de temas amplían las funcionalidades de sus temas. Los códigos cortos también han reducido el número de dolores de cabeza que muchos creadores de contenido y propietarios de sitios web tienen después de crear sus códigos cortos personalizados cuando se trata de agregar y actualizar repetidamente las cosas que desean.

Dicho esto, no hay duda de que el editor de bloques es el futuro de la experiencia de edición de WordPress, así que espere ver a más desarrolladores contribuir a hacerlo mejor y aún más, lleno de funciones, incluidos aquellos que todavía están usando códigos cortos. De cara al futuro, esperamos que más desarrolladores hagan la transición a usar y agregar bloques de WordPress en lugar de códigos cortos de WordPress.

Esperamos que hayas aprendido mucho sobre la importancia de los códigos cortos de WordPress, para qué sirven y cuándo usarlos. Con suerte, puede comenzar a crear sus propios códigos cortos personalizados y, finalmente, sus propios bloques, los cuales seguramente no desaparecerán en el corto plazo.