Todo sobre los códigos cortos de WordPress

Si alguna vez ha trabajado con un tema de WordPress, probablemente se haya topado con un código abreviado de WordPress... algo que se parece un poco a esto:

 [button type="twitter"]

¡Sin embargo, si entendiste qué es un shortcode y cómo funcionan es otra cuestión! Los autores de temas utilizan mucho los códigos abreviados, pero a veces simplemente "suponen" que los usuarios sabrán qué son y cómo funcionan cuando, de hecho, ¡pueden ser bastante confusos!

La buena noticia es que los códigos abreviados son fáciles de entender y usar. En este artículo, echaremos un vistazo a los códigos abreviados para descubrir cómo puede aprovecharlos al máximo antes de ver cómo puede crear su propio código abreviado.

¡Saltamos!

¿Qué son los códigos cortos de WordPress?

WordPress introdujo códigos abreviados cuando lanzó la versión 2.5 de WordPress (eso fue en 2008) y desde entonces se han utilizado ampliamente en la mayoría de los temas y complementos.

Entonces, ¿qué son exactamente los códigos cortos? Bueno, en resumen (lo siento, no pude resistirme), los códigos abreviados son un poco de código que se puede usar prácticamente en cualquier lugar de su sitio web para insertar una característica o función. Entonces, en lugar de tener que codificar laboriosamente, digamos, un ícono de redes sociales usando HTML, puede insertar un código abreviado que 'le dice' a WordPress que inserte un ícono de redes sociales donde inserta un determinado código abreviado. El estilo y la función (en este ejemplo) del ícono de redes sociales están predefinidos por el desarrollador del tema, por lo que todo el trabajo pesado desde la perspectiva de la programación se ha hecho por usted.

Entonces, tal vez desee colocar un ícono de Facebook en la parte inferior de una publicación de blog. En lugar de insertar esto manualmente, agregar un hipervínculo, actualizar el tamaño del ícono, etc., todo lo que debe hacer es ingresar un código abreviado que ha sido 'preprogramado' por el autor del tema que podría verse así:

 social icon="facebook"]

Es importante reiterar en este punto que no puede simplemente agregar códigos abreviados de su propia invención y esperar que funcionen. Es necesario que se hayan agregado como una opción a su tema. Por lo general, los temas vienen con muchos códigos cortos preconstruidos y las instrucciones del tema incluirán una lista de códigos cortos disponibles para que elijas.

Los códigos abreviados son un gran atajo para que los no desarrolladores muestren muchos tipos de contenido sin escribir código y una herramienta que también puede ahorrar tiempo a los desarrolladores.

¿Qué puedes hacer con los códigos cortos de WordPress?

Los códigos abreviados se utilizan para insertar una amplia gama de contenido desde un botón de llamada a la acción (CTA), un cuadro de publicidad dinámica, un formulario de contacto, galerías de imágenes, controles deslizantes y mucho más… pero, como se mencionó anteriormente, ¿qué opciones de código abreviado son? disponible para usted dependerá del tema y los complementos que esté utilizando.

Un ejemplo de código abreviado utilizando el complemento Contact Form 7

No son solo los temas los que hacen uso de códigos abreviados. Uno de los complementos de formulario de contacto más populares disponibles en la actualidad, Contact Form 7, utiliza códigos abreviados para permitir a los usuarios insertar rápida y fácilmente un formulario de contacto en la ubicación que elijan.

Para hacer esto, una vez que haya instalado Contact Form 7, todo lo que necesita hacer para agregar un formulario a una página o publicación en su sitio web es lo siguiente.

Paso uno:

Vaya al menú Contacto > Formularios de contacto y cree un nuevo formulario o use el existente que viene con el complemento.

Copie el código abreviado [contact-form-7 title="Contact form 1"] que corresponde al formulario.

Segundo paso:

Pegue el código abreviado en la ubicación donde desea que aparezca el formulario, como se muestra a continuación:

Guarde la página y debería ver esto:

¡Y eso es! Acaba de utilizar con éxito un código abreviado para insertar un formulario de contacto en su sitio web. Como puede ver, los códigos abreviados son increíblemente fáciles de usar y pueden acelerar tareas que, de otro modo, serían complejas y requerirían mucho tiempo.

Uso de códigos cortos predeterminados de WordPress

Aunque la mayoría de los códigos cortos que probablemente usará se introducirán como resultado de la instalación de un tema o complemento. Sin embargo, WordPress en sí tiene un puñado de códigos abreviados "predeterminados" que puede usar. Éstos incluyen:

• Audio
• Subtítulo
• Empotrar
• Galería
• lista de reproducción
• Video

Estos códigos abreviados se pueden usar en todo su sitio para agregar una variedad de contenido, por ejemplo, un reproductor de audio. En la imagen a continuación, mostramos esto utilizado en un widget de pie de página.

Para saber cómo usar estos códigos abreviados con más detalle, consulte el artículo de soporte de WordPress sobre estos.

Entonces, ¿qué haces cuando WordPress o el tema/complemento que estás usando no proporciona el código abreviado que necesitas para tu propósito específico? Fácil... ¡crea el tuyo propio!

Crea tu propio código corto de WordPress

WordPress tiene una API de código corto que se puede aprovechar para desarrollar sus propios códigos cortos con relativa facilidad. Repasemos los pasos básicos que debe seguir para crear su propio shortcode ahora.

Paso uno:

En este ejemplo, vamos a crear un botón CTA (llamada a la acción) en el que el lector puede hacer clic para ser redirigido a un formulario de contacto.

Para ayudar a mantener las cosas organizadas, le sugerimos que guarde todos sus códigos abreviados en un archivo separado (en lugar de agregar código a un archivo existente). Para hacer esto, cree un nuevo archivo vacío en la misma carpeta que el archivo functions.php de su tema y asígnele el nombre my-shortcodes.php . Después de esto, incluya este archivo en su archivo functions.php de esta manera:

 include('my-shortcodes.php');

Si bien, como acabamos de decir, recomendamos crear sus códigos abreviados en un archivo separado, para los fines de este artículo vamos a continuar y agregar nuestro nuevo código directamente en nuestro archivo functions.php para ayudar a mantener el ejemplo. lo más claro posible.

Usaremos la función add_shortcode que se introduce en el archivo wp-includes/shortcodes.php . Esta función necesita dos parámetros, la etiqueta de código abreviado y la función de devolución de llamada.

 add_shortcode( string $tag, callable $callback )

Segundo paso:

Aquí está el fragmento de código que puede poner en su archivo functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Tenga en cuenta que los nombres de etiquetas y funciones solo incluyen minúsculas y guiones bajos.

No olvide reemplazar 'THE_CONTACT_FORM_URL' con la URL del formulario de contacto al que desea redirigir al usuario.

Además, opcionalmente puede usar este código CSS en su archivo style.css para hacer que el botón se vea más atractivo visualmente:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Paso tres:

La visualización de su shortcode en el contenido del sitio web se realiza como lo haría con cualquier otro shortcode. En este ejemplo, nuestro shortcode sería [my_cta_button] . Agregue esto a una publicación o página y debería ver algo como esto cuando vea la página:

Este ejemplo genera contenido que está predefinido en el código PHP que proporcionamos. Veamos cómo puede permitir que el usuario administrador personalice la salida del shortcode si es necesario.

Un código abreviado que acepta atributos de usuario

Para crear un shortcode que tenga atributos editables por el usuario, debe definir una matriz de los atributos que desea permitir que el usuario cambie dentro de su función de devolución de llamada. Por ejemplo, es posible que desee tener la posibilidad de cambiar el título predeterminado y la URL del botón.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

En el código anterior, usamos la función shortcode_atts para combinar los atributos definidos por el usuario con atributos conocidos. De esta manera, debe crear una función de código abreviado diferente para cada botón de CTA que necesitará, pero solo una que redirija a cualquier lugar que el usuario especifique cada vez.

El uso de este código debe especificarse así: [my_cta_button title='My Custom Title' url='MY_URL']

Agregar un código abreviado en un archivo de plantilla

Desde el punto de vista de los desarrolladores, también hay una forma rápida de forzar la inclusión del código abreviado en una posición predefinida en su sitio web llamándolo en el archivo de plantilla correspondiente. Por ejemplo, si queremos que el botón CTA se muestre en la sección inferior de cada publicación o página, podemos editar la plantilla singular y usar la función do_shortcode . En el tema Twenty Twenty, editamos el archivo singular.php e insertamos esta línea debajo del cierre del contenedor div principal:

 <?php echo do_shortcode('[my_cta_button]'); ?>

El resultado se mostrará debajo del contenido de la publicación y antes de los widgets de pie de página.

Conclusión

Antes de terminar este artículo, recuerde que si usa códigos abreviados proporcionados por su tema o un complemento y luego deshabilita ese tema/complemento, esos códigos abreviados dejarán de funcionar (solo se quedará con el corchete de código abreviado que se muestra en la parte delantera de su sitio web).

Con esa pequeña advertencia, los códigos abreviados son una característica realmente útil cuando se trata de crear un sitio web. Son ampliamente utilizados en WordPress y, si aún no ha adoptado su uso, ¡quizás ahora sea el momento de darle otra mirada a los códigos abreviados!