¿Quieres aprender a crear un shortcode en WordPress?
Aprender a crear un shortcode en WordPress puede ser una forma efectiva de personalizar tus publicaciones y páginas. Sin embargo, si es nuevo en el proceso, es posible que le resulte difícil averiguar cómo utilizar dicha función en su sitio web.
Es por eso que hemos elaborado una guía para ayudarlo a comenzar. Al observar cómo funcionan los códigos abreviados y cómo aplicarlos de manera efectiva, puede comenzar a personalizar su contenido a su gusto sin la necesidad de complementos adicionales.
En este artículo, discutiremos qué son los códigos abreviados de WordPress y por qué podría considerar usarlos. Luego le mostraremos cómo crear el suyo propio.
Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
¿Qué son los códigos cortos de WordPress?
Los códigos abreviados de WordPress actúan como accesos directos que le permiten incrustar rápidamente elementos en una publicación o página. Suelen ser una sola línea de código encerrada entre corchetes. Por ejemplo :
[exemplecodehortcode]Este código mostrará una característica predeterminada en el front-end de su sitio web.
WordPress códigos abreviados introducidos por primera vez con el lanzamiento de API de código abreviado. Esto facilitó a los usuarios agregar elementos atractivos a sus publicaciones y páginas, como Google Maps o el botón "Me gusta" de Facebook.
Existe en WordPress defectot seis códigos cortos :
- título: Envuelva los subtítulos alrededor del contenido
- galería : muestra galerías de imágenes
- Audio: incrusta y reproduce archivos de audio
- Video del juego : incrusta y reproduce archivos de video
- lista de reproducción : muestra una colección de archivos de audio o video
- incrustar : envuelve elementos en línea
También te encontrarás con dos tipos básicos de formato de shortcode: self-closing et enclosing.
Códigos cortos self-closing pueden sostenerse por sí mismos y no necesitan una etiqueta de cierre.
Mientras tanto, enclosing rodean el contenido que desea editar y lo obligan a cerrar la etiqueta manualmente. Por ejemplo, puede incrustar un video de YouTube colocando la URL entre las etiquetas. embed et /embed :
Por ejemplo, esto crearía el siguiente resultado:
Algunos de los mejores complementos de WordPress vienen con sus propios códigos cortos. Por ejemplo, WP Forms et Contacto 7 Forma tienen códigos cortos que le permiten incrustar rápidamente un formulario de contacto en una publicación o página. También puedes usar un complemento como MaxBotones para agregar un shortcode de botón donde quieras en tu sitio web.
¿Por qué debería considerar usar códigos cortos de WordPress?
Hay muchas razones por las que puede usar códigos cortos de WordPress. Por ejemplo, es más fácil y rápido que aprender y escribir un código largo en HTML. Además, lo ayudan a mantener su contenido limpio y accesible.
Los códigos cortos se pueden usar para automatizar ciertas funciones que usa repetidamente. Por ejemplo, si usa un botón llamada a la acción (CTA) en cada uno de sus artículos, tener listo un shortcode dedicado puede ser una solución rápida y conveniente.
Cabe mencionar que Editor de Gutenberg funciona de la misma manera, basándose en el uso de códigos cortos. Permite a los usuarios de WordPress agregar varias funciones interactivas mediante el uso de bloques.
Este método es mucho más amigable para los principiantes porque puede agregar contenido directamente en la interfaz de usuario. Sin embargo, el editor de bloques de WordPress todavía está limitado en lo que ofrece. Afortunadamente, viene con un bloque. Shortcode, que le permite agregar contenido personalizado a sus páginas.
Cómo crear un código abreviado en WordPress
Si ya tiene conocimientos de codificación, puede crear sus propios códigos abreviados personalizados. Esto le da control total sobre el aspecto y la funcionalidad de su sitio web.
Veamos cómo crear un shortcode de WordPress personalizado. En este tutorial, agregaremos enlaces de redes sociales a un artículo como ejemplo.
Paso 1: crea un nuevo archivo de tema
Antes de comenzar, es una buena idea haga una copia de seguridad completa de su sitio web de WordPress. También deberá crear un archivo separado para su código abreviado personalizado fuera del archivo functions.php de su tema de WordPress. Esto proporcionará una solución alternativa en caso de que algo salga mal.
Puedes usar un cliente FTP (Protocolo de transferencia de archivos) tal como FileZilla para acceder a los archivos de temas de su sitio web. Una vez que haya iniciado sesión en su sitio web, vaya a wp-content> temas y busque la carpeta de su tema actual. En nuestro ejemplo, esto será Owlpress:
Abre tu carpeta tema de WordPress, haz clic derecho sobre él y presiona Crear nuevo archivo.
Nombra tu nuevo archivo códigos cortos personalizados.php a continuación, haga clic en OK. Luego puede editarlo haciendo clic derecho sobre él y seleccionando la opción Ver edición :
Esto abrirá el archivo en su editor de texto predeterminado. Entonces solo necesitas agregar el siguiente bloque de código:
<?php ?>
Esto asegura que su nuevo archivo se interpretará como PHP, que es el lenguaje de secuencias de comandos en el que se basa WordPress.
A continuación, puede guardar los cambios y cerrar el archivo. Asegúrese de marcar la siguiente casilla para asegurarse de que se actualizará en el servidor y se aplicará a su sitio web:
Luego abre el archivo functions.php en la misma carpeta del tema y agregue la siguiente línea de código en la parte inferior del documento:
include('shortcodes-personnalises.php');
Esto le indicará al sistema que incluya cualquier cambio que realice en el archivo. códigos cortos personalizados.php dans les functions.php mientras te permite separarlos. Cuando esté listo, guarde los cambios y cierre el archivo.
Paso 2: crea la función de código abreviado
A continuación, deberá crear la función de código abreviado e indicarle qué hacer. Seleccione la opción de nuevo Ver edición de tu expediente códigos cortos personalizados.php. Use el siguiente fragmento de código para agregar una acción para vincular su función a:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}A continuación, deberá agregar una función de devolución de llamada, que se ejecutará cuando se active la acción de enlace. Agregar la siguiente línea de código directamente después de la mencionada anteriormente le dirá a WordPress que su función es un código abreviado:
add_shortcode('sabonner', 'subscribe_link');Cuando creas un shortcode usando la función add_shortcode, asignas una etiqueta de shortcode “ ($tag) " y un gancho de función correspondiente " ($func) que se ejecutará cada vez que se use el atajo.
En otras palabras, si la etiqueta del shortcode es [subscribe], entonces el gancho 'enlace_suscripción' redirige al visitante a la URL proporcionada.
Por lo tanto, todo el código que usa en su archivo shortcodes-personnalises.php se verá así:
Cabe señalar que al nombrar etiquetas, solo debe usar letras minúsculas, aunque se pueden usar guiones bajos. también es crucial evitar el uso de guiones, ya que puede interferir con otros códigos cortos.
Paso 3: agregue el código abreviado de cierre automático al sitio web
Ahora puede probar su código inicial como un código abreviado de cierre automático en su sitio de WordPress. Con el editor de bloques de WordPress, puede insertar la etiqueta [suscribirse] directamente en la publicación:
Esto mostrará el siguiente contenido a los visitantes de su sitio web:
Si está satisfecho con este código abreviado, no tiene que hacer nada más. Sin embargo, si desea personalizarlo, puede pasar al siguiente paso.
Paso 4: agregue parámetros al código abreviado
Puedes adaptar el shortcode "suscribir" para obtener funcionalidad adicional para mostrar otros enlaces de redes sociales. Puede hacerlo agregando un parámetro para modificar la URL.
Para añadir atributos de gestión, necesitas abrir el archivo códigos cortos personalizados.php y agrega el siguiente código:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Esto le permitirá personalizar los enlaces en su etiqueta de shortcode para agregarlos al editor de Gutenberg. Puedes pegarlo sobre el código anterior en el archivo. códigos cortos personalizados.php. Debería verse algo como esto:
Agregando el función shortcode_atts() combinará los atributos del usuario con todos los atributos conocidos, y cualquier dato que falte se reemplazará con sus valores predeterminados. Cuando esté listo, guarde los cambios y cierre el archivo.
Paso 5 - Pruebe la configuración
Ahora puede probar el shortcode actualizado en el Editor de bloques de WordPress. En nuestro ejemplo, estamos probando nuestros enlaces de Twitter y Facebook con los siguientes códigos abreviados:
[enlace de suscripción='https://www.facebook.com/live.blogpascher']Facebook[/suscribirse]
[enlace de suscripción='https://twitter.com/BlogPasCher']Twitter[/suscribirse]
Esto producirá el siguiente resultado en el front-end:
Este código abreviado de cierre automático muestra las URL directas de sus perfiles sociales a los visitantes. Sin embargo, es posible que desee que esta característica se vea un poco pulida.
Por ejemplo, podrá crear una versión adjunta que le permita personalizar completamente el texto de anclaje que se muestra a los usuarios cuando están a punto de hacer clic en él. Le mostraremos cómo hacerlo en el siguiente paso.
Paso 6: crear un código abreviado adjunto
El shortcode adjunto tendrá el mismo formato que el ejemplo anterior de cierre automático. Sin embargo, incluirá un parámetro adicional para la función.
Primero, deberá agregar $content = null, que identifica esta función como un shortcode adjunto. A continuación, puede agregar el do_shortcode de WordPress, que buscará códigos abreviados en el contenido.
En el archivo códigos cortos personalizados.php, agregue el nuevo código abreviado adjunto:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Cuando esté listo, su archivo códigos cortos personalizados.php debería verse así:
El código anterior tiene un atributo " estilo " adicional, que cambiará el texto del ancla a un color azul. No olvide guardar los cambios cuando haya terminado.
Paso 7: agregue el código abreviado adjunto al sitio web
Ahora puede insertar su shortcode en el editor de bloques de WordPress para ver el resultado final:
Como notó, puede cambiar fácilmente las URL de su página de redes sociales y el texto de anclaje que se muestra al visitante usando este código abreviado de envoltura. En este caso, hemos elegido " Facebook " et "Gorjeo" :
Listo ! Ahora ha creado un código abreviado personalizado para los enlaces de suscripción en sus páginas y publicaciones. Tenga en cuenta que todos los pasos mencionados anteriormente se pueden modificar para crear todo tipo de elementos diferentes utilizando la función de WordPress Shortcodes.
Agregar funcionalidad adicional a su sitio web de WordPress es mucho más fácil con códigos cortos. Puede usarlos para personalizar su contenido existente y agregar funciones interactivas, como formularios de contacto, galerías de imágenes o enlaces de suscripción.
Otros recursos recomendados
También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.
- Cómo crear un botón flotante con índice Z con Elementor
- ¿Cuándo y cómo instalar WordPress en un subdirectorio
- Cómo crear un complemento de WordPress de bloque simple de Gutenberg
- Cómo agregar fuentes personalizadas a un sitio web de WordPress
Conclusión
En este artículo, aprendimos cómo crear tu propio shortcode en WordPress. Si tiene alguna inquietud o sugerencia, háganoslo saber dentro de comentarios.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
