La guía completa de los códigos cortos de WordPress
Publicado: 2020-10-02Antes del editor de bloques de WordPress, los códigos cortos de WordPress eran una de las mejores cosas para usar en el editor de WordPress para facilitar la adición de funciones de complementos y temas a páginas, publicaciones y otras secciones de un sitio web de WordPress.
Con el cambio al editor de bloques, ¿qué significa esto para la mayoría de los complementos y sitios web más antiguos que todavía están llenos de códigos cortos? ¿Seguirán funcionando los códigos cortos de WordPress? ¿Hay alguna manera de pasar fácilmente del uso de códigos cortos de WordPress a bloques de WordPress?
Vamos a averiguar. En esta guía, exploraremos los códigos cortos de WordPress en la era del editor de bloques de WordPress.
¿Qué son los códigos cortos de WordPress?
Un shortcode de WordPress es un fragmento de código dinámico y reutilizable envuelto entre [corchetes] . Los códigos cortos le permiten insertar fácilmente funciones específicas del propio WordPress o de un complemento o tema en cualquier publicación, página, tipo de publicación personalizada o widget. Piense en los códigos abreviados de WordPress como "atajos" o macros en su sitio web.
Puede usar códigos cortos de WordPress para mostrar contenido estático que es demasiado tedioso para seguir codificando y repitiendo. Y también puede 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 [corchetes] se puede "extender" de varias maneras, lo que le permite personalizar o agregar información de configuración adicional llamada atributos . Además, los atajos pueden envolver texto (o HTML) o incluso estar anidados dentro de otro código corto.
Por ejemplo, un shortcode puede tener los siguientes formatos:
[shortcode]
[shortcode]Some text[/shortcode]
[shortcode]<a href="http://mysite.com/">HTML content</a>[/shortcode]
[shortcode]Some text [another-shotcode] more text [/shortcode]
[shortcode icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/shortcode]
Atributos de shortcode
Los códigos cortos también son flexibles porque se pueden ampliar con atributos . Con los 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 abreviado correctos para agregar o eliminar ciertos elementos en la salida.
A continuación, se muestran algunos ejemplos de códigos cortos con atributos.
[[gallery id="123" size="medium"]]
[recent-posts posts="5"]
[recent-posts posts="5"]Posts Heading[/recent-posts]
Códigos cortos de WordPress integrados
WordPress viene con varios códigos cortos incorporados para renderizar ciertos tipos de contenido.
[[audio]]
El código abreviado de audio le permite incrustar archivos de audio y reproducirlos.
[[caption]]
Utilizado principalmente con imágenes individuales, el código corto de subtítulos le permite envolver los subtítulos alrededor del contenido.
[[gallery]]
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.
[[embed]]
El shortcode incrustado le permite envolver elementos incrustados con un ancho y alto máximo (pero no fijo).
[[playlist]]
El código abreviado 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.
[[video]]
El código corto de video le permite incrustar archivos de video y reproducirlos.
Códigos cortos de plugins y temas
Los temas y complementos específicos de WordPress tienen códigos cortos listos para usar 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 todavía usan 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 atrás o citas extraídas. Incluso existen complementos de códigos cortos que le 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á prediseñado 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 necesita es un simple archivo adicional en su directorio de archivos para crear el archivo custom-shortcodes.php . Si desea aprender los aspectos básicos de los códigos cortos personalizados, aquí tiene una guía sobre cómo crear códigos cortos personalizados.
La API de código corto de WordPress
Para los 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 abreviado 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 abreviado 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 shortcode. Además, se incluyen funciones auxiliares para configurar y obtener atributos de código abreviado predeterminados.
Los desarrolladores pueden consultar la documentación de la API de código corto de WordPress para obtener más información sobre:
- Manejo de atributos
- Producción
- Códigos cortos adjuntos vs autocierre
- Referencia de función
- 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 ... pero luego vino la edición basada en bloques. Con la introducción de WordPress 5.0 vino la implementación del editor Gutenberg o el Editor de bloques de WordPress planeado desde hace mucho tiempo como la página principal y el editor de publicaciones de WordPress, reemplazando al clásico editor de texto de WordPress que ha existido durante años.
Aquí hay 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 WordPress 5.0 cuando se convirtió en el editor predeterminado.
No hay nada intrínsecamente 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 editor de bloques de WordPress llegaron los bloques de WordPress. Atrás quedaron las opciones de formato en la parte superior que recuerdan a las aplicaciones de procesamiento de texto como Microsoft Word. En cambio, las opciones de formato se han reemplazado con las opciones de la barra lateral derecha con pestañas para cada bloque.
Los bloques de WordPress son esencialmente contenedores de contenido. Hay muchos bloques diferentes para diferentes tipos de contenido: imágenes, videos, textos, títulos, galerías, lo que sea.
Incluso hay un bloque de WordPress para formatear, espaciador y divisor, y están organizados casualmente en categorías para facilitar el acceso.
Todas las opciones y controles que estaban en la parte superior ahora residen en el lado derecho del editor de página / publicación, con pestañas en la parte superior que indican si desea ver las opciones para el bloque actual solo o para 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 frente a 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 facilitado guardar el diseño y el diseño de un determinado bloque y usarlo en otro. Muy parecido a una plantilla de página.
Por ejemplo, si agrega un bloque de botones y le da estilo con un color determinado, efectos de desplazamiento, etc., no querrá seguir haciéndolo en todas y cada una de las páginas a las que agrega ese botón. Si lo cambia a un bloque reutilizable, el botón se guarda en su sitio de WordPress y se convierte en su propio bloque que puede usar en otras páginas o publicaciones.
También puede actualizar aún más estos bloques convirtiéndolos en bloques regulares, guardándolos como uno nuevo (con un nuevo nombre) o actualizando el diseño existente del bloque.
Bloques de grupo
En WordPress 5.3 también se introdujeron bloques de grupo y plantillas.
Esencialmente, se le da la capacidad de agrupar ciertos bloques y moverlos o actualizarlos todos juntos. Esto eventualmente dio lugar a patrones de bloqueo. Los patrones de bloques han facilitado la edición de contenido, ya que los usuarios prefieren 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 agrega en cada sitio está predeterminado por su tema.
Con el editor de bloques, tienes la opción de actualizar el estilo de cada bloque individualmente, ya sea para destacar o para hacerlos más notorios.
Bloques y edición de sitio completo
Con todos estos avances y cambios en la forma en que creamos y construimos páginas en WordPress, surge la idea y la eventual transición 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 adecuada de opciones fuera la lucha definitiva para los desarrolladores y usuarios de WordPress.
Con la edición completa del sitio y la introducción de Block Builder, la tendencia apunta a 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 Twenty-Twenty WordPress sigue este patrón, dando a los creadores y propietarios de sitios web un mayor control sobre su sitio web y cómo les gustaría 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 completa de edición de sitios 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 abreviado facilita el uso de códigos cortos heredados dentro de una publicación o página y mantiene la integridad de la salida del código corto.
El bloque de código abreviado se puede agregar a una página o publicación haciendo clic en el botón Agregar bloque. Alternativamente, puede escribir / shortcode y presionar enter.
Notará que, a diferencia de otros bloques comunes, el bloque de código abreviado no incluye ninguna configuración específica en la barra de herramientas del bloque o en la barra lateral del editor, probablemente debido al hecho de que los códigos abreviados se pueden personalizar utilizando sus atributos.
¿Qué significa el editor de bloques para los códigos cortos de WordPress?
El editor de bloques de WordPress tiene importantes implicaciones 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 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 redactar 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 los 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 Gravity Forms. 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ía que usar un botón para insertar un formulario en su contenido.
Después de seleccionar su formulario, el código abreviado del formulario se agregó a su contenido. Dependiendo de las opciones que seleccionó, el código abreviado 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 . Desde el editor de bloques, seleccione el bloque Formularios.
Una vez que haya seleccionado el formulario, verá una mejor vista previa de cómo se verá el formulario 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 deberán decidir sobre el futuro de sus implementaciones de shortcode y convertir sus shortcodes 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 los usuarios soliciten una opción de bloqueo.
Para aquellos desarrolladores que todavía están lejos 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. Los complementos como los complementos de revisión y calificación, los reproductores de audio, los marcadores de fechas, las galerías, los formularios de contacto y casi cualquier otra cosa que todavía use códigos cortos todavía están "en el juego".
4. Los códigos cortos no desaparecerán pronto. Probablemente esa sea la razón por la que el editor de bloques de WordPress ofrece el bloque de shortcode para ayudar a mantener el uso de shortcode. 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 versiones futuras de WordPress aún admitan códigos cortos.
5. Los códigos cortos se pueden convertir en un bloque . ¿Tiene un tema o complemento favorito que usa 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 complemento o tema, o creas sitios web de WordPress y usaste 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 a bloques de WordPress
Así como 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.
Siga los primeros pasos de esta guía de códigos cortos personalizados.
Tome este ejemplo básico de Caldera Forms:
<?php /** * Handler for [cl_post_title] shortcode * * @param $atts * * @return string */ function caldera_learn_basic_blocks_post_title_shortcode_handler($atts) { $atts = shortcode_atts([ 'id' => 0, 'heading' => 'h3', ], $atts, 'cl_post_title'); return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]); } /** * 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, ['h2', 'h3', 'h4'])) { $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 genera el título de la publicación envuelto en el HTML del encabezado.
Una vez 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 en un bloque Gutenberg como ejemplo.
Más recursos sobre la creación de bloques de WordPress
Hay numerosos complementos y recursos disponibles en línea que lo ayudarán a llegar a ese paso, incluida la documentación oficial de WordPress sobre cómo escribir su primer tipo de bloque. También puede consultar la publicación de Igor Benic sobre cómo crear un bloque para mostrar publicaciones.
Después de leer estas guías, podrá descubrir cómo crear sus propios bloques de WordPress utilizando sus 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 la cantidad de dolores de cabeza que tienen muchos creadores de contenido y propietarios de sitios web 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 mejorarlo y aún más, lleno de funciones, incluidos aquellos que todavía usan códigos cortos. De cara al futuro, esperamos que más desarrolladores pasen a usar y agregar bloques de WordPress en lugar de códigos cortos de WordPress.
Esperamos que haya 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 pronto.
Kristen ha estado escribiendo tutoriales para ayudar a los usuarios de WordPress desde 2011. Por lo general, puede encontrarla trabajando en nuevos artículos para el blog iThemes o desarrollando recursos para #WPprosper. Fuera del trabajo, a Kristen le gusta llevar un diario (¡ha escrito dos libros!), Hacer caminatas y acampar, cocinar y las aventuras diarias con su familia, con la esperanza de vivir una vida más presente.
