Cómo crear códigos cortos de WordPress y trabajar con ellos

Publicado: 2018-03-28

Los códigos cortos de WordPress son pequeñas etiquetas que se utilizan como accesos directos para ejecutar funciones específicas en publicaciones y páginas. Puede reconocer códigos abreviados por corchetes que rodean una palabra o frase simple. Se introdujeron en la versión 2.5 con la misión de ayudar a las personas a ejecutar funciones de forma sencilla.

Como ya sabrá, WordPress usa el lenguaje de programación PHP para encenderse. Por lo tanto, cuando desee agregar una función específica directamente a publicaciones y páginas, tendrá que escribir el código en el editor de texto. En cambio, los códigos cortos permiten a los usuarios reemplazar todo el bloque de código con un término simple y ejecutarlo simplemente publicando una publicación. Increíble, ¿no es así?

Lee mas:
Cursos de WordPress de Udemy

Cómo usar los códigos cortos de WordPress

Códigos cortos en editores de texto y visuales

Para usar códigos cortos, uno no tiene que saber cómo codificar o entender cómo funcionan en el backend. El propio WordPress, así como la mayoría de los temas y complementos de WordPress, utilizan diferentes códigos cortos para permitir el uso de muchas funciones avanzadas.

Por ejemplo, para mostrar la galería completa de imágenes, solo tiene que usar el código corto de [galería] que viene instalado con WordPress. La mayoría de los códigos cortos se pueden utilizar en su forma básica como en el ejemplo anterior.

Los códigos cortos se reemplazan por el contenido real tan pronto como publique o obtenga una vista previa de una publicación o página.

Parámetros de shortcode

La mayoría de las veces, los códigos cortos pueden tener parámetros adicionales . Al agregarles información adicional, puede personalizar y cambiar la salida. Por ejemplo, mientras que el shortcode trivial [galería] muestra todas las imágenes que están adjuntas a la publicación, es posible cambiar eso. El código abreviado de la galería le permite especificar imágenes por su ID para que pueda mostrar solo las imágenes específicas o incluso incluir imágenes que no forman parte de esa publicación en particular.

Además, es posible definir un tamaño de la galería y muchas otras cosas proporcionando parámetros adicionales. He aquí un ejemplo:

La galería de este ejemplo solo mostraría imágenes con números de identificación específicos. En este caso, el tamaño se cambiaría automáticamente a medio. Y obtienes todo eso con un simple shortcode. Ahora imagina cómo se vería todo el asunto si estuvieras a punto de agregar manualmente el código PHP que tendría decenas, si no cientos, de líneas. ¡Gracias, códigos cortos!

Etiquetas de inicio y finalización

Algunos códigos cortos más complejos pueden tener etiquetas de inicio y finalización. Entonces, en lugar de un código corto, terminaría teniendo dos con contenido específico en el medio.

Por ejemplo, un complemento de Google Maps puede permitirle mostrar una ubicación en los mapas a través del código corto. La mayoría de estos complementos tendrán etiquetas de inicio y finalización, mientras que la dirección debe escribirse en el medio. He aquí un ejemplo:

[[maps]] Nueva York, EE. UU. [[/ maps]]

Como puede ver en el ejemplo, la etiqueta final siempre comienza con un signo de barra "/". Al tener ambas etiquetas, WordPress puede identificar las partes de los códigos cortos más fácilmente.

Trabajar en el editor de texto

Códigos cortos de WordPress

Aunque son solo accesos directos a funciones, los códigos abreviados son en realidad criptogramas específicos de WordPress por sí mismos. Entonces, si intenta escribir un código corto en el editor visual, WordPress le mostrará inmediatamente la salida (o solo el marcador de posición) de ese código corto. Si siguió el ejemplo de la galería y escribió el código corto en el editor visual, verá que WordPress muestra inmediatamente su contenido (vea la primera imagen en esta publicación para ver cómo funciona).

Si desea editar un shortcode y trabajar con sus parámetros, cambie a un editor de texto que le permita ver la estructura de cualquier shortcode dado.

Códigos cortos predeterminados de WordPress

Los códigos cortos generalmente se administran por temas y complementos. Cada desarrollador puede registrar códigos cortos por su cuenta, por lo que cada uno es diferente. Lo que hace un shortcode, cuáles son sus parámetros y funciones, depende únicamente del complemento y tema específico que esté utilizando.

Por ejemplo, un complemento que le ayuda a mostrar una ubicación en Google Maps puede tener [[mapas]] código corto, uno que muestra formularios de suscripción utilizará [[formulario]] y así sucesivamente.

Cada producto es diferente, así que asegúrese de consultar la descripción y documentación de los temas y complementos para obtener más información sobre su uso específico.

Pero WordPress viene con un conjunto de códigos cortos predeterminados que puede usar sin instalar extensiones adicionales. De forma predeterminada, estos son códigos cortos con los que puede trabajar:

  • [audio]: incrustar archivos de audio
  • [subtítulo]: ajusta los subtítulos al contenido
  • [galería]: muestra la galería de imágenes
  • [lista de reproducción]: muestra una colección de archivos de audio y video
  • [video]: incrustar archivos de video

Escapar de códigos cortos (muestra el texto de los códigos cortos sin ejecutarlo)

A veces, es posible que desee mostrar texto que representa un código corto en lugar de ejecutarlo. Si intentó agregar un código corto tanto al texto como a los editores visuales, se dio cuenta de que se ejecutó en ambas ocasiones.

Para mostrar el texto de un código abreviado, utilice corchetes dobles: [[código abreviado]]

Si desea mostrar un código corto con etiquetas de inicio y finalización, use solo el primer y el último corchete doble: [[mapas] Nueva York, EE. UU. [/ Mapas]]

Cuando trabaja en el editor de texto, también puede reemplazar los corchetes por sus códigos. Entonces, en lugar de “[” puede usar “& # 91;”, y en su lugar “]” use “& # 93;”. Por ejemplo: & # 91; shortcode & # 93 ; también mostrará el código corto sin ejecutarlo.

Cómo crear un shortcode simple

Cuando escribes artículos en WordPress a diario, hay momentos en los que te repites y tienes que escribir algo una y otra vez. No importa si se trata de la URL de un sitio web, una oración larga o tal vez un fragmento de código HTML que escribe constantemente desde cero, debería considerar escribir un código corto para ello.

Y con esta sencilla función, no tienes que ser programador o ni siquiera contratarás a uno para que te facilite las cosas. Siga los siguientes pasos y cree un shortcode personalizado:

  1. Abra el archivo function.php en el menú Apariencia -> Editor
  2. Coloque el siguiente código al final del archivo:
 function fsg_shortURL () {
return 'http://www.firstsiteguide.com';
}
add_shortcode ('fsg', 'fsg_shortURL');
  1. Vaya al Editor de texto y escriba [fsg] para obtener la URL en lugar del código corto

No fue tan difícil, ¿verdad?

Ejemplo más avanzado: agregar código corto de imagen

Al colocar el siguiente código en functions.php, puede crear el código corto para colocar una imagen con atributos personalizados de ancho y alto:

  1. Ir al archivo functions.php
  2. Pega el siguiente código:
 function img_shortcode ($ atts, $ content = null) {

	extraer (shortcode_atts (
		formación(
			'ancho' => '',
			'altura' => '',
		), $ atts)
	);
regreso '';
}
add_shortcode ('img', 'img_shortcode');
  1. Abrir editor de texto:

Aquí puede usar [img width = 'x' height = 'y'] http: //… [/ img] shortcode donde “x” e “y” son números que representan el ancho y el alto en píxeles.

Puede agregar fácilmente otros atributos de imagen si los necesita; consulte la lista de todos los atributos de imagen en W3 Schools.

Cómo usar códigos cortos en Text Widget

Con la versión 4.9 de WordPress que se lanzó el 15 de noviembre de 2017, los códigos cortos funcionan automáticamente en los widgets de texto. Pero si todavía usa una versión anterior de WordPress, esta parte del tutorial lo ayudará a obtener el resultado.

Los códigos cortos pueden contener diferentes funcionalidades que puede agregar a su sitio web de WordPress. Ya sea que haya creado uno para usted o que venga con un tema o un complemento que acaba de instalar, probablemente usará códigos cortos todo el tiempo. Dado que realmente puede ahorrar tiempo y beneficiarse de ellos, no hay razón para no usar códigos cortos.

Si acaba de comenzar a crear su sitio web de WordPress, es posible que haya utilizado códigos cortos solo en el editor de publicaciones. Pero, la verdad es que puedes usar shortcodes prácticamente en cualquier lugar .

Por ejemplo, si está utilizando el complemento Google Maps PRO de 5 segundos que le permite crear mapas sin esfuerzo con innumerables pines en él, es posible que desee insertar el mapa a través de un código abreviado directamente en su widget de texto y mostrar su ubicación en la barra lateral en lugar de una sola correo. Pero si su tema no admite códigos cortos en widgets, deberá habilitar la función usted mismo y eso es lo que mostraremos en este artículo.

Si necesita usar un código corto en sus archivos PHP (por ejemplo, si desea ejecutar el código en su archivo header.php y ejecutar el código corto donde esté presente el encabezado), puede hacerlo fácilmente envolviendo el código alrededor. . Pero si ha intentado usar un código corto en su widget de texto como en el ejemplo que mencionamos anteriormente, terminó decepcionado porque eso simplemente no funciona y el widget mostró el código corto en lugar de su contenido. A menos que su tema ya tenga la función registrada, deberá habilitarla usted mismo.

Por lo tanto, si desea poder poner un código corto en un widget de texto y hacerlo funcionar, no se preocupe; puede hacer que suceda en cuestión de segundos:

  1. Funciones abiertas.php
  2. Copie y pegue las siguientes dos líneas:
 add_filter ('widget_text', 'shortcode_unautop');
add_filter ('widget_text', 'do_shortcode');
  1. Guardar cambios

Si bien en realidad es suficiente usar solo la segunda línea que hace que el código corto funcione, querrá la primera línea para evitar la inserción automática de WordPress del párrafo y las etiquetas de ruptura donde inconscientemente crea saltos de línea al formatear el texto en un widget. . En caso de que coloque un código corto en una línea separada, unautop eliminará esas etiquetas de párrafo y el código corto funcionará como un encanto.

Ahora puede navegar hasta Apariencia -> Widgets y arrastrar el widget de texto a donde desee. Después de todo esto, cuando escribe un código corto directamente en su widget de texto (que está registrado en su sitio, por supuesto) se ejecutará tal como se escribió en el editor de publicaciones.

Del mismo modo, puede ejecutar código PHP desde su widget de texto. Fue bastante fácil, ¿no? Disfrute de sus códigos cortos.

Los códigos cortos están en todas partes

Si recién está comenzando un blog de WordPress, los códigos cortos pueden parecer redundantes y difíciles de entender. La mayoría de las veces, será posible evitar los códigos cortos utilizando una interfaz fácil de usar proporcionada por un complemento. Pero cuando se involucre más con el blog y cuando comience a usar más complementos, comprenderá el poder real de los códigos cortos.

Usarlos se convertirá en una rutina y rápidamente te acostumbrarás a escribir corchetes en cada nueva publicación que crees. Así que tómate unos minutos y usa este artículo para aprender los conceptos básicos.