in ,

Cómo agregar un shortcode de WordPress a tu sitio

El shortcode es una poderosa herramienta para cualquier persona interesada en modificar la forma en que funciona tu sitio de WordPress, ya que los shortcodes ofrecen la personalización definitiva sin obligarte a saber mucho sobre codificación en general.

Los códigos cortos son esencialmente palabras o frases cortas que se colocan entre corchetes [así]. Puede colocar un shortcode de WordPress en el editor, que luego hace referencia a información adicional en tu archivo funciones.php para revelar algo en el frontend de tu sitio web.

Por ejemplo, si deseas incrustar un archivo de video para una publicación de blog, simplemente coloca corchetes [ ] alrededor de la palabra video para hacer referencia a un video que se cargó previamente en tu sitio. Los códigos cortos son excelentes para crear cosas como botones, controles deslizantes de estilo acordeón, widgets de Twitter, divisores y todo tipo de «golosinas» de formato que generalmente te obligarían a comprender la codificación PHP.

Los códigos cortos están destinados a hacer tu vida más fácil, pero para agregar nuevos códigos cortos a tu sitio de WordPress, debes decirle al sistema con qué deseas que se reemplace el código corto. Echemos un vistazo a algunos métodos para agregar nuevas opciones de código corto de WordPress para tomar el control total de tu sitio.

Comienza con los códigos cortos predeterminados de WordPress

WordPress en realidad viene empaquetado con algunos códigos cortos predeterminados para que los uses sin colocar nada en tu archivo de funciones.php. Haz clic en los enlaces a continuación para obtener más información sobre los códigos cortos predeterminados de WordPress:

La API de WordPress permite generar una cantidad exponencial de otros códigos cortos, pero desafortunadamente, las personas tienden a olvidarse de estas poderosas características y solo se quedan con los códigos cortos predeterminados. Sigue leyendo para ver cómo puedes dejar de conformarte con lo que se proporciona y crear códigos cortos personalizados para que tu sitio se vea de la manera que deseas.

Cómo crear un Shortcode de WordPress

Para empezar, queremos hacer un shortcode que entregue un módulo de Adsense simplemente escribiendo [adsense] en el editor.

Paso 1: Coloque la función en funciones.php

Busque el archivo funciones.php de tu sitio de WordPress y pega la siguiente función en el archivo. Estamos utilizando la función Adsense como un ejemplo fácil. Una función es básicamente la pieza que le dice al shortcode qué mostrar en el frontend de tu sitio. En este caso, cuando colocamos el shortcode [adsense] en el sitio, utiliza la siguiente función para mostrar un anuncio.

function google_adsense() {
return '<script type="text/javascript"><!--
google_ad_client = "<em>your client id</em>";
google_ad_slot = "<em>your ad slot id</em>";
google_ad_width = <em>width</em>;
google_ad_height = <em>height</em>;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

Este código que acabas de colocar en tu archivo funciones.php es lo que reemplaza el código corto en el frontend, en este caso un simple módulo de Adsense. Dependiendo de tu función y shortcode, puedes agregar columnas, botones personalizados, widgets de redes sociales y más.

Paso 2: Vincular tu Shortcode a la función

El hecho de que hayas creado el shortcode y la función, no significa que los dos estén vinculados entre sí. Ahora necesitamos agregar una llamada final para emparejar los dos. Utilice la siguiente llamada:

add_shortcode('adsense', 'google_adsense');

La primera palabra es lo que hace llamar a tu shortcode. Entonces, dado que lo enumeramos como «adsense», WordPress genera automáticamente un shortcode [adsense]. Llamamos a la función google_adsense por lo que el segundo parámetro en nuestra llamada le dice a WordPress que necesita usar esa función en particular cada vez que coloques el shortcode adecuado en tu sitio web.

Ten en cuenta que éste es solo uno de los muchos códigos cortos que puedes crear en WordPress. Si estás interesado en generar más, ve a la API de código corto de WordPress.

Paso 3: Hacer que el Shortcode funcione en tu sitio de WordPress

Para ver lo que genera tu shortcode en el frontend real de tu sitio, debes abrir una página o publicación en WordPress y colocar el shortcode [adsense] en el texto. Haz clic para obtener una vista previa de lo que aparece en tu sitio o publica la página o publicación para que sea permanente. ¡Eso es todo! Ahora estás en camino de reducir las cargas de tiempo mediante el uso de códigos cortos.

Considera el uso de complementos de shortcode para simplificar el proceso

Si no deseas meterte con las funciones, simplemente activa un complemento para completar el trabajo sucio por ti.

#1 Shortcodes Ultimate

Shortcodes Ultimate es una de las opciones más populares si no deseas crear los códigos cortos tú mismo. Encuentra códigos cortos para nuevas pestañas, cuadros, botones, controles deslizantes y más. Es bueno porque puedes actualizar a la versión premium para recibir códigos cortos adicionales si comienzas a usarlos con más frecuencia.

Ten en cuenta que cuando eliges un complemento de shortcode, debes asegurarte de que el diseño sea receptivo para que puedas manipular tus shortcodes mientras estás en otros dispositivos y los shortcodes realmente responden a varios dispositivos cuando se muestran en el frontend.

#2 Código corto de arranque fácil (Easy Bootstrap)

Easy Bootstrap Shortcode tiene una interfaz simple, que es agradable para los webmasters principiantes. Tiene una característica interesante que permite crear un shortcode en el plugin y olvidarse de escribir el shortcode al editor. En mi opinión, no es tan difícil poner un shortcode, pero supongo que te ahorra un paso adicional.

Este elegante complemento también ofrece el poder de deshabilitar el CSS del complemento. Esto da la oportunidad de utilizar cualquier CSS personalizado que hayas hecho tú mismo. He usado este complemento varias veces en el pasado, y el desarrollador realmente lo actualiza con nuevos códigos cortos todo el tiempo. Esto es bueno porque recibes un montón de juguetes nuevos gratuitos para jugar cada vez que se lanza una actualización.

#3 Códigos cortos de CPO CPO Shortcodes

CPO Shortcodes no es nada diferente de los otros complementos, así que no dudes en probarlo y ver si la interfaz te gusta más. Hay más de 30 códigos cortos incluidos con el complemento, como códigos cortos para barras de progreso, mapas en línea, miembros del equipo, notificaciones y más.

Tiene un buen creador de código corto visual para que puedas ver cuál es el resultado incluso antes de publicar en tu sitio web. El complemento también incluye una pestaña en la parte superior de tu editor para facilitar el acceso.

#4 Códigos cortos de Olevmedia Olevmedia Shortcodes

Olevmedia Shortcodes también agrega un módulo de diseño visual y un botón sobre el editor para que puedas tener una idea de los códigos cortos que deseas usar antes de implementarlos en tu sitio. Prueba algunos de los códigos cortos más geniales como marcadores, tablas, infoboxes, tablas de precios, logotipos y más.

Una gran ventaja es que el diseño de shortcode es completamente receptivo, por lo que cuando publicas una publicación o página con un shortcode, las personas pueden verlo bien si están usando una tableta o dispositivo móvil. También notarás que muchos de estos complementos incluyen capturas de pantalla y tutoriales útiles para ver exactamente cómo se verán los códigos cortos incluso antes de que tenga que instalar el complemento.

Me gusta escanear a través de los códigos cortos ofrecidos en cada complemento de antemano, para no perder el tiempo instalando una docena de complementos y jugando con cada uno para resolverlo.

#5 Shortcoder

Shortcoder es una versión única del plugin tradicional de shortcode. En lugar de simplemente proporcionar un montón de códigos cortos preempaquetado, ayuda a desarrollar tus propios códigos cortos personalizados. Almacena el HTML u otros fragmentos en el propio complemento y lo vincula a cualquier código corto que desees.

El editor visual es bastante bueno para ver lo que está creando, y parece funcionar muy bien tanto para principiantes como para expertos, ya que puede personalizar desde cero o extraer de plantillas.

Esperamos que esta publicación te haya ayudado a agregar acceso directo a tu sitio de WordPress. Es posible que desees ver nuestra guía sobre cómo agregar un logotipo personalizado a tu sitio de WordPress.

Comparte tus pensamientos en la sección de comentarios si tienes alguna pregunta sobre las opciones de código corto de WordPress y cómo usarlas en tu sitio. ¿Hay algún código corto de WordPress en particular sin el que no puedas vivir? ¡Háznoslo saber!

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cómo agregar un control deslizante receptivo a tu tema infantil de Genesis

Cómo agregar un logotipo personalizado a tu sitio de WordPress