Cómo crear Shortcodes en WordPress con PHP

Hay posts que realmente disfruto a tope escribiéndolos. Éste es uno de esos porque trata un tema muy, pero que muy útil: aprender a añadir a WordPress tus propias funcionalidades.

como crear shortcodes

Imagen de Pixabay - © jamesmarkosborne

Quizás la razón más importante para usar WordPress.org es que se puede extender y modificar hasta extremos inimaginables.

Seguramente ya seas muy consciente de la flexibilidad que ofrece esta plataforma gracias a la casi infinita cantidad de plugins y de temas de WordPress para personalizarlo a tu gusto.

Sin embargo, aun así, cuando tienes una necesidad muy específica, muchas veces no encuentras el plugin que la implementa exactamente como tú necesitas.

Muchas veces son cosas muy simples. Un ejemplo típico son los elementos gráficos conocidos como widgets que representan una información de una manera determinada. Por ejemplo: una cajita con un resumen de las características de un producto o servicio.

Para este tipo de cosas sencillas es la para lo que se han inventado los shortcodes y aquí te voy a enseñar cómo los puedes programar.

Lo que es muy importante es el hecho de que para aprovechar los shortcodes, lo suyo es que uses WordPress.org (que implica hosting propio).

En WordPress.com, de modo muy parecido a cómo ocurre con los temas, estás muy limitado: sólo dispones de un conjunto limitado de shortcodes que vienen de fábrica y que no puedes ampliar, salvo que contrates el plan más caro, que es mucho más caro que un hosting básico o mediado.

¿Qué son los “shortcodes” exactamente?

Los shortcodes de WordPress son unos códigos especiales muy simples que se marcan con corchetes de esta manera:

[código] o [código param1="valor1", param2="valor2"]

Los shortcodes funcionan de un modo muy parecido a las “macros” que quizás conozcas, por ejemplo, de las aplicaciones de Office.

Es decir, ejecutan funciones determinadas, a veces prefabricadas, a veces implementadas por el propio usuario. En Office se implementan con las así llamadas herramientas de VBA, las siglas de Visual Basic for Applications, un lenguaje de programación propio de Microsoft.

En nuestro caso, los shortcodes también se programan, pero en el lenguaje de programación PHP que es el lenguaje en el que está hecho también WordPress y hay dos maneras: una sencilla pero limitada (sólo con HTML y JavaScript) que se explica en este post:

que es un shortcode Qué es un Shortcode de WordPress y cómo usarlos

Los shortcodes son una de las herramientas más útiles de WordPress, sin embargo, muy poca gente los conoce.

Y otra más avanzada que es programándolos en el lado servidor con PHP.

Aquí vamos a ver la manera más avanzada para lo cual lógicamente has de tener, al menos, unos conocimientos básicos de PHP.

Si nos es así, te dejo aquí un vídeo para que veas “de qué va” esto del PHP por si te planteas aprenderlo:

Pero OJO: este vídeo no sirve como curso completo de PHP. Lo he elegido porque te da una visión muy completa en muy poco tiempo de lo que es este lenguaje de programación, pero está demasiado condensado para que sirva realmente como un curso completo.

Por tanto, si te animas a aprender PHP, te recomiendo, o bien, que escojas un libro de PHP entre los mejor valorados en Amazon o elijas alguno de los cursos gratuitos que puedes encontrar en YouTube.

Para aprender en YouTube te recomiendo especialmente el material publicado en los canales de Falcon Masters y de Fazt Tech.

Y dentro de este aprendizaje te recomiendo también cuidar especialmente la elección de tu entorno de desarrollo, la aplicación con la que escribes el código fuente.

Mi opción preferida (la que uso) es PhpStorm, una opción de pago. Pero también hay opciones gratuitas muy interesantes como, por ejemplo, Visual Studio Code.

Y si quieres ir haciendo unos pinitos rápidos antes de entrar en serio en la programación, te recomiendo que uses al menos, un editor de código sencillo como, por ejemplo, Notepad++, que, además, es totalmente gratuito.

Cómo programar un shortcode para WordPress en PHP

Dicho todo esto, veamos entonces ahora cómo programar un shortcode en PHP, dentro de las pautas que nos marca el API (Application Programming Interface) de WordPress.

Los shortcodes se componen del código que lo implementa (una función PHP) y una llamada a otra función (add_short_code) que realiza el registro del shortcode en WordPress (que es que lo activa realmente).

La pinta que tiene un shortcode es como sigue (el patrón de shortcode más simple que existe):

// La función que implementa el shortcode. En este caso, 
// simplemente retorno simplemente crea una cadena, 
// “¡Hola Mundo!”, y la devuelve a la llamada al shortcode 
// la cual la recogerá para añadirla al contenido de 
// la página web.

function holaMundo() {
  return '<h1>¡Hola mundo!</h1>';
}

// Registra el shortcode: asocia el nombre del shortcode
// ‘hola’ a la ejecución de la función ‘holaMundo’ que 
// hemos creado arriba para que la llame.
add_shortcode('hola', 'holaMundo');

Como ves, el código PHP que hemos creado es muy simple, pero es que no tiene más. Éste es el “esqueleto” que vas a usar para cualquier shortcode, lo único que cambia es el contenido de la función que lógicamente puede ser mucho más complejo para shortcodes más sofisticados.

De hecho, aquí en este web tenemos un montón de shortcodes de este estilo, muy simples, para hacernos pequeños “widgets” a medida como, por ejemplo, nuestro banner de hostings recomendados:

¡El hosting web celebra su Black Friday!

Si necesitas un hosting para tu web o tu blog, ¡actúa ya!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Lo único que diferencia el shortcode que ha generado este banner es que el HTML que lo compone salta a la vista que lógicamente es un poquito más elaborado, pero nada más. Por lo demás, es lo mismo.

Lo bueno es que, si mañana cambian las cifras de los descuentos o hay alguna acción especial como el Black Friday, por ejemplo, es tan simple como retocar un momento el código y automáticamente el banner quedará actualizado en todas las páginas que lo usan (que son muchas…).

Para los que, como yo, preferís programar orientado a objetos en WordPress, dejo el mismo ejemplo de arriba en una variante orientada a objetos:

class EjemploHolaMundo {
  public function __construct() {
    // El primer ‘holaMundo’ es el shortcode como tal,
    // el segundo es el nombre del método de la clase 
    // que llamamos.
    add_shortcode('holaMundo', array($this, 'holaMundo'));
  }

  public function holaMundo($atts = null) {
    return '<h1>¡Hola mundo!</h1>';
  }
}

new EjemploHolaMundo();

Ojo: en este caso, para que se añada el shortcode es necesario instanciar un objeto de esta clase, para que se ejecute su constructor y con ello la parte del código que registra el shortcode.

Es importante comentar que en este simple ejemplo no estoy usando la posibilidad de pasar parámetros y tampoco estoy abordando el formato de shortcode que permite encerrar un contenido.

Estos detalles los puedes encontrar en la guía oficial de programación de shortcodes. Este post es simplemente una introducción a la programación de shortcodes para que entiendas los fundamentos de cómo funciona esto.

Integrar nuestro código PHP con WordPress

Antes de empezar, una advertencia: aunque nos vamos a limitar a crear shortcodes muy simples, añadirlos luego a una web WordPress no deja de ser tocar las “tripas” de tu web WordPress, hay un riesgo importante de que con un error en nuestro código acabemos tirando la web entera.

De hecho, al hablar de programar sé consciente de que nos estamos metiendo en el terreno de los profesionales de la programación en PHP y HTML. Es decir, como si metes las manos en el motor de tu coche.

Por tanto, hay que tomar una serie de medidas de precaución:

  1. Todo lo que hagas, hacerlo con atención y cuidado.
  2. Probar el código primero en una réplica de la web o una instalación de “laboratorio”. Para esto puedes crear también una instalación en local de WordPress tal como se explica en el tutorial de un poco más abajo. Una vez que hayas comprobado que el código va bien, ya lo puedes usar en la web real.
  3. Activar el modo de depuración de WordPress. Esto generará un fichero de depuración en el que se vuelcan los errores en la ruta de “/wp-content/debug.log” de tu web.

Y aquí el tutorial de cómo crear una instalación local de WordPress:

instalar wordpress local xampp Cómo instalar WordPress en un servidor local en 5 pasos con Xampp

Instalar WordPress en un servidor local no es difícil y muy útil para trabajar en tu sitio WordPress. Aquí te enseño cómo hacerlo muy fácil con Xampp.

Vistas estas precauciones, ya nos podemos poner manos a la obra para integrar nuestro código en WordPress. Para ello hay básicamente tres vías:

  • Integrar el shortcode en el fichero php de tu tema activo que se encuentra en el directorio wp-content/themes/[nombre de tu tema]”.
  • Vía un plugin para añadir código a medida a WordPress. Más fácil para los principiantes ya que te oculta algunas de las cosas que tienes que hacer si programas como lo harían los profesionales. Está muy bien para cosas sencillas, pero para cosas avanzadas te resultará limitante.
  • Con un plugin propio.

Veamos las diferencias y por cuál decidirnos.

Integrar el shortcode en functions.php

Que vaya por delante: esta vía la descarto totalmente porque es una chapuza. Pero hay que mencionarla porque es la vía que te sugieren en muchos contenidos.

Este es un fichero estándar que debe estar presente en todos los temas de WordPress y que se incluye y se ejecuta cada vez que se carga una página en un momento adecuado para incluir funciones PHP personalizadas. Esto lo ha hecho muy popular para meter aquí código personalizado.

De hecho, sirve para incluir cualquier cosa que se quiera hacer, no solamente shortcodes.

¿Por entonces digo que es una chapuza?

Sobre todo, por dos razones:

  1. Porque las actualizaciones de los temas machacan este fichero. Así que, con cada actualización perderías tus modificaciones.
  2. El código fuente hay que estructurarlo muy bien desde el principio (con una buena estructura de ficheros y carpetas), si no, con el tiempo, vas a tener un “código espagueti” imposible de corregir ante errores y de evolucionar.

Integrar shortcodes con el plugin Code Snippets

Una alternativa mucho mejor que añadir el código “a pelo” a functions.php es utilizar el plugin Code Snippets.

Este plugin mantiene un repositorio de fragmentos (“snippets”) de código. Para ello incluye un pequeño editar de código para programarlos y una lista con todos ellos desde la cual los puedes gestionar.

captura plugin code snippets
Portada del plugin Code Snippets en el repositorio de WordPress.org

Es una solución que ya considero bastante buena y que diría va a valer para el 95% o más de los usuarios que solamente van a hacer cosas relativamente sencillas.

Aquí puedes ver el código de arriba en el editor de este plugin:

ejemplo code snippets
El editor de código de Code Snippets.

Es una solución más fácil a la programación en WordPress ya que te oculta algunas de las cosas que tienes que hacer si programas como lo harían los profesionales.

Está muy bien para cosas sencillas porque ya soluciona el problema relacionado con las actualizaciones de los temas, pero sólo tienes un espacio único para el código en el editor y eso para proyectos grandes resultará un problema.

Integrar shortcodes creando un plugin propio

La vía más profesional, ausente de limitaciones es la de programar tu propio plugin.

La programación de plugins para cosas sencillas es realmente muy simple. Realmente lo único añadir para el ejemplo son tres cosas:

  1. Usar un fichero PHP principal con formato [nombre-plugin].php en el directorio raíz
  2. Comprimir el plugin con un formato .zip para poder añadirlo vía el escritorio de WordPress (por la vía de fichero local, es decir, no desde el repositorio de WordPress.org).
  3. Crear una cabecera para el fichero principal como la del ejemplo siguiente:

Como decía, para el ejemplo sería muy simple: bastaría con un único fichero, por ejemplo: hola-mundo.php, en el que iría la cabecera de arriba seguida del código. Es decir, esto:

<?php

/*
Plugin Name: [El nombre de tu plugin]
Plugin URI: [URL del plugin (si la va a tener), si no, pon tu web]
Description: [Una breve descripción del plugin]
Version: [La versión del plugin]
Author: [Autor del plugin]
Author URI: [URL del autor del plugin]
License: [El tipo de licencia, si la quieres poner. Por ejemplo: LGPL]
*/

// La función que implementa el shortcode. En este caso, simplemente 
// retorna una cadena “¡Hola Mundo!” y la devuelve a la llamada al 
// shortcode la cual la recogerá para añadirla al contenido de la 
// página web.

function holaMundo() {
  return '<h1>¡Hola mundo! </h1>';
}

// Registra el shortcode: asocia el nombre del shortcode ‘hola’
// a la ejecución de la función ‘holaMundo’ que hemos creado arriba
// para que la llame.
add_shortcode('hola', 'holaMundo');


De todos modos, para que sepas defenderte también con implementaciones más sofisticadas, con más código, en las que tengas que usar quizás también ficheros de imágenes, JavaScript o CSS, etc., te dejo este post de Raiola Networks en el que te explican mucho más a fondo cómo crear plugins.

¿Qué hacer si tengo problemas?

Desgraciadamente, al tocar código podemos meter mucho la pata y provocar incluso errores muy severos como la famosa “pantalla blanca de la muerte”.

Pero también es verdad que para eso ya hemos tomado medidas de precaución para que los problemas se queden en el entorno de pruebas.

Además, alguna vez te puede ocurrir que sean plugins que te hayas descargado los que te estén dando problemas, así que aprender cómo se depuran errores de código en WordPress es en todo caso algo extremadamente útil que te recomiendo encarecidamente.

De todos modos, quiero concienciarte de que la depuración ya es entrar en terrenos algo avanzados. Es algo que ya requiere una cierta soltura y dominio.

Por ese motivo, si con las indicaciones de aquí no consigues dar con el origen del error, si tienes un buen soporte para tu hosting, ellos te deberían ayudar si lo necesitas. Y si no es así, ya tienes una buena razón para cambiar a alguno de los hostings que recomendamos aquí 😉

Cómo depurar errores con el log de WordPress

En primer lugar, como ya decía arriba, hasta que no estés seguro de que tu código funciona bien, activa siempre el modo de depuración de WordPress que consiste básicamente en incluir estas líneas en el fichero wp-config.php que se encuentra en el directorio raíz de tu web WordPress:

define('WP_DEBUG', false);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

De este modo se generará un fichero de depuración en el que se vuelcan los errores en la ruta de “/wp-content/debug.log”. En este fichero verás líneas con fecha y hora con trazas de error de este estilo:

[10-May-2021 12:22:31 UTC] PHP Fatal error:  Uncaught Error: Call to undefined method BWPAMToolkit::addSShortcode() in /home/c2cero/public_html/c2cerodes/wp-content/plugins/bwp-amtoolkit/bwp-amtoolkit.php:189
Stack trace:
#0 /home/c2cero/public_html/c2cerodes/wp-content/plugins/bwp-foundation/src/core/options/abstract-plugin.php(139): BWPAMToolkit->lateInit()
#1 /home/c2cero/public_html/c2cerodes/wp-includes/class-wp-hook.php(292): AbstractBWPFPlugin->preLateInit('')
#2 /home/c2cero/public_html/c2cerodes/wp-includes/class-wp-hook.php(316): WP_Hook->apply_filters(NULL, Array)
#3 /home/c2cero/public_html/c2cerodes/wp-includes/plugin.php(484): WP_Hook->do_action(Array)
#4 /home/c2cero/public_html/c2cerodes/wp-settings.php(560): do_action('init')
#5 /home/c2cero/public_html/c2cerodes/wp-config.php(142): require_once('/home/c2cero/pu...')
#6 /home/c2cero/public_html/c2cerodes/wp-load.php(37): require_once('/home/c2cero/pu...')
#7 /home/c2cero/public_html/c2cerodes/wp-blog-header.php(13): require_once('/home/c2cero/pu...')
#8 /home/c2cero/public_html/c2cerode in /home/c2cero/public_html/c2cerodes/wp-content/plugins/bwp-amtoolkit/bwp-amtoolkit.php on line 189

Se sale del ámbito de este post entrar en todos los detalles de la depuración en PHP y en WordPress. Aquí simplemente quiero que te fijes en que estas trazas te desvelan el fichero y el número de línea exacto donde se ha producido el error.

Si lo haces, verás que arriba del todo nos dice que el error se ha producido en la línea 189 del fichero bwp-amtoolkit.php. Tan sólo con eso suele ser una información bastante precisa para poder dar rápidamente con el problema.

En este caso, además, canta mucho porque el error es un error de sintaxis: la traza nos dice que el método “addSShortcode()” de la clase “BWPAMToolkit” es un método que no existe. Si te vuelves a fijar canta que la llamada está mal, hay una “S” duplicada, ha de ser “addShortcode()”, con una sola “S”. Así que el error era algo tan simple como eso…

Cómo arreglar problemas si estás usando Code Snippets

En el caso de usar Code Snippets, los pasos de arriba te valdrán exactamente igual, pero en el caso de que no seas capaz de solucionar el problema por esa vía, puedes hacer también lo siguiente (aunque es más a lo bruto y menos eficaz en ese sentido):

  1. Haz siempre una copia de tu código (lo puedes exportar desde el propio plugin si quieres o haces un simple copiar y pegar en otro editor como Notepad++, por ejemplo) hasta que no lo tengas estable.
  2. Desactivas el shortcode en Code Snippets.
  3. Si aun así persiste el problema o si incluso llegas a tener problemas para poder entrar en el panel de administración de WordPress (esto ya es algo muy extremo), borras el plugin de code snippets del directorio de plugins (wp-content/plugins/code-snippets).
  4. Una vez borrado, WordPress estará operativo otra vez (aunque tus shortcodes en este momento no estarán operativos).
  5. Instalas de nuevo el plugin, restauras la copia normal que te decía arriba que hicieses antes de añadir un nuevo shortcode al plugin (la que viene en formato *.xml) y compruebas que todo ha vuelto a la normalidad.
  6. Repasas el código del shortcode nuevo para ver dónde puede estar el error y lo corriges (normalmente será algún gazapo en la edición o al copiar & pegar). También puede pasar el nombre de la función del shortcode se repita y cause los problemas.
  7. Vuelta a empezar con el shortcode corregido.

3 Ejemplos prácticos de shortcodes

Para que te hagas una idea un poco más concreta de lo que estamos hablando, nada mejor que unos ejemplos.

Así que he preparado unos cuantos ejemplos de shortcodes prácticos que te puedes descargar en la sección de descargas del blog. Los detalles sobre cómo usarlos vienen documentados un poco más abajo en este post y con cada una de las descargas.

1. Insertar un fichero cualquiera en tu blog

Este es tan simple como útil: lee el contenido de un fichero pasado como parámetro y lo inserta en el lugar del shortcode, de modo que puedes integrar el código HTML o JavaScript que quieras en el lugar del shortcode.

<?php
/**
* Creado por Hosting a Tope
* Fecha: 10/05/2021
* Versión: 1.0
* Licencia: Creative Commons Atribución
*/

/**
 * Lee un fichero y lo incrusta tal cual en el lugar del shortcode. 
 * Se asume que existen una carpeta "wp-custom/includes/" en el 
 * directorio de instalación de WordPress en el cual se va a poner 
 * los ficheros utilizados con este shortcode. 
 *
 * Uso: [includeHTML filename="[nombre-fichero]"]
 *
 * Parámetros:
 * 1. filename (obligatorio): El nombre del fichero. Los nombre de los 
 *    ficheros tienen que encontrarse en el directorio que se personaliza 
 *    abajo (o en subdirectorios de éste).
 */
function includeHtml($atts = null) {
    // Extraer el parámetro y darle un valor por defecto (cadena vacía) 
    // en caso de que el usuario no lo haya utilizado
    shortcode_atts(array(
        'filename' => ''
    ), $atts);

    // Edita la cadena "wp-custom/includes/" para cambiar el 
    // directorio raíz para los ficheros a incluir
    if (!empty($atts['filename'])) {
        $path = ABSPATH . "wp-custom/includes/" . $atts['filename'];
        // Cargamos el contenido del fichero en una variable
        $content = file_get_contents($path);
        return $content;
    } else {
        return "<h3>Error: falta el parámetro en [includeHTML].</h3>";
    }
}
add_shortcode('includeHTML', 'includeHTML');

Esto es prácticamente el shortcode trivial de “¡Hola mundo!” extendido simplemente con la capacidad de tomar el contenido de un fichero de modo que puedes tener múltiples “widgets” personalizados por ti.

2. Crear un botón con enlace

El siguiente ejemplo es un poquito más ambicioso y crea un enlace con apariencia de botón que tiene incluso la capacidad de cambiar de color cuando pasas con el ratón por encima.

De hecho, es una versión simplificada del botón que estás viendo precisamente aquí para la descarga del código. Es un shortcode de botón que usamos aquí en esta web, creado por mí y que en nuestro caso añade algunas cosas más como la posibilidad de registrar los clics recibidos.

<?php
/**
 * Creado por Hosting a Tope
 * Fecha: 10/05/2021
 * Versión: 1.0
 * Licencia: Creative Commons Atribución
 */

/**
 * Dibuja un botón con enlace. El botón usa la clase "bwp-link-button" 
 * lo que permite personalizar su apariencia en el menú de 
 * "_CSS adicional" dentro de la personalización estándar del tema 
 * (menú Apariencia/Personalizar en el escritorio de WordPress).
 *
 * Un ejemplo de hojas de estilo que crea un botón verde con texto blanco, 
 * en posición centrada y que cambiar de color al pasar el ratón 
 * sería éste:
 *
 * .bwp-link-button {
 *   margin: 20px auto;
 *   text-align: center;
 *   font-weight: 700;
 * }
 *
 * .bwp-link-button a {
 *   display: inline-block;
 *   margin: 5px auto;
 *   font-weight: 700;
 *   font-size: 1.1em;
 *   border-radius: 5px;
 *   background-color: green;
 *   padding: 8px 25px;
 *   color: #fff;
 * }
 *
 * .bwp-link-button a:hover {
 *   background-color: limegreen;
 * }
 *
 * Un ejemplo de uso sería éste: 
 *
 * [linkButton text="Ir a YouTube" link="https://youtube.com"]
 *
 * @param null $atts    
 * Admite los parámetros obligatorios "link" (URL completa 
 * o relativa del enlace), "text" (texto para el botón) y los 
 * parámetros opcionales "id" y "target" para poder añadir los 
 * atributos HTML correspondientes al enlace si fuese útil.
 *
 * @return string   El HTML del botón.
 * @throws Exception
 */
function showLinkButton($atts = null) {

    // Extraer los parámetros y darles un valor por defecto 
    // (cadena vacía) en caso de que el usuario no los haya 
    // usado expresamente.
    $atts = shortcode_atts(array(
        'link' => '',
        'text' => '',
        'id' => '',
        'target' => '_blank'
    ), $atts);

    // Validar los parámetros
    if (empty($atts['link'])) {
        throw new Exception("No se ha especificado el parámetro obligatorio [link].");
    }
    if (empty($atts['text'])) {
        throw new Exception("No se ha especificado el parámetro obligatorio [text].");
    }

    // Crear los atributos HTML
    if (!empty($atts['id'])) {
        $atts['id'] = ' id="'.$atts['id'].'"';
    }
    $atts['target'] = ' target="'.$atts['target'].'"';

    return
        '<div class="bwp-link-button">
            <a '.$atts['id'].$atts['target'].' href="'.$atts['link'].'" >'.$atts['text'].'</a>
        </div>';
}
add_shortcode('linkButton', 'showLinkButton');

Aunque es una versión simplificada de nuestro botón, ya te puede ser muy útil para todo tipo de usos.

3. Tabla de Pros/contras

Rematamos los ejemplos con uno ya un poco más sofisticado y que he “empaquetado”, además, como un plugin para que veas cómo funciona y lo fácil que es realmente crear un plugin.

Este plugin crea una tabla comparativa con el siguiente aspecto:

captura shortcode proscons
Éste es un ejemplo de la tabla comparativa creada por el shortcode.

En cuanto al diseño estético, me he inspirado fuertemente en el plugin de Mighty Classic Pros & Cons, aunque el código con el que está programada y la filosofía de uso son totalmente diferentes.

En el caso del plugin original, los contenidos se editan cada vez desde el editor que se inserta. Eso en mi caso no es lo deseable porque necesito repetir la misma tabla comparativa en diferentes páginas.

Por eso, este plugin usa ficheros .txt con un formato que permite especificar el contenido, que se guarda y se reutiliza múltiples veces lo cual se adapta mucho mejor a mis necesidades.

Por otra parte, este plugin no se instala desde el repositorio de plugins de wordpress.org. Viene como un fichero en formato .zip y se instala desde el escritorio de WordPress tal como se explica en este post.

En este caso, como ya es cierta cantidad de código, no lo mostramos entero aquí, sino que te remite directamente a la descarga del mismo para que ya lo ojees tranquilamente:

Como el desarrollo de plugins es un tema ya un poco más avanzado, te dejo aquí también el enlace al Manual oficial de WordPress para crear plugins.

Un último comentario y pequeño reto para ti: siendo realmente fácil la creación plugins básicos, ¿por qué no te atreves con convertir los dos ejemplos anteriores en un plugin?

Prácticamente, lo único que tienes que hacer es crear un nuevo fichero PHP, crear la cabecera anterior siguiente el formato que ya has podido ver arriba, añadir el código, comprimirlo como fichero .zip y poco más…

Así que ya tienes un entretenimiento para divertirte un rato si te gusta trastear con estas cosas. ¡Que lo disfrutes! 😉

Acerca del autor: Berto López

Soy autor y fundador de este blog, e Ingeniero en Informática de formación con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo 😄

De todo ello, lo que me llena de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto de emprendimiento actual, al cual pertenece, entre otras, esta web.

He tenido mucho contacto profesional con Pymes y pequeños emprendedores y eso me ha llevado inevitablemente hacia WordPress como plataforma web ideal para estos usuarios.

Mi interés se centra en la variante instalable en un servidor, WordPress.org, por su infinito potencial a cambio de un coste casi nulo. Un antes y un después para los emprendedores.

En este blog quiero ayudar a sus usuarios, sobre todo, con los aspectos más técnicos de WordPress y el hosting para poder disfrutar a tope, sin miedos, de esta maravillosa plataforma de software libre y de código abierto :)

36 comentarios en «Cómo crear Shortcodes en WordPress con PHP»

  1. No sé si ya alguien habrá hablado sobre este tema (no he podido leer todos los comentarios), pero pasa deshabilitar cualquier plugin, no es necesario borrarlo, solo cambiarle el nombre.

    Yo le añado un guion al nombre original y ya el wp no lo reconoce.

    Saludos!!

    Responder
  2. Enhorabuena por el blog. Muchas gracias Berto por compartir toda esta información, muy buen articulo y muy completo.
    Lo único que he tenido problemas al descargar el zip del shortcode del indice de contenidos, la url apunta al shortcode de incluir archivos.
    Saludos!

    Responder
    • Hola Germán,

      Es que es el mismo, pero con otro ejemplo de aplicación, aunque releyendo el texto veo que quizás es un poco confusa la explicación.

      En cualquier caso, es un post que vamos a actualizar a fondo, por eso, de momento no lo toco, en su momento será prácticamente un borrón y cuenta nueva 🙂

      Un saludo,
      Berto

      Responder
  3. Genial! No conocía el plugin Code Snippets, esto me ahorrará mucho trabajo. Al principio lo hacía al ‘pelo’ como tú dices y era un dolor de cabeza. Cualquier error en funciones.php hacia que el sitio no cargara. Así que generalmente hacia los cambios por la noche cuando hay menos tráfico y en el cpanel por si había errores borrar lo último. Ahora tengo una copia local de wordpress y ahí juego con libertad.

    Responder
  4. Sé que el tema tiene sus añitos, pero la informacion sigue siendo útil hoy como cuando se publicó. He leído y seguido varios tutoriales de Ciudadano 2.0 y no llegué a necesitar ayuda hasta ahora.

    He intentado poner los botones like y compartir de Facebook y no me aparecen. Lo he intentado con plugins y simplemente no consigo que los botones sean visibles. Intenté con el shortcode que das y sigo sin verlos; sé que estan allí porque no me aparece el shortcode [fbButton] como texto plano, pero la página no me muestra nada de nada. Al principio pensé que debía agregar el javascript del sdk de facebook, pero tu shortcode ya lo agrega.

    También he intentado instalar plugins que permitan iniciar sesión en mi web con la cuenta de Facebook, pero igual no me muestra el botón para iniciar sesión. Ya hice mi app en la página para programadores de Facebook, la asocié a mi página, le puse imagen, la hice pública y sigo sin poder ver algún boton de Facebook en mi web. Ya probé desactivar todos los plugins, excepto ése, y poner los temas por defecto y no funcionó.

    Incluso agregué este código al header de mi tema sin resultados:

    Ya se me está haciendo imposible integrar Facebook con mi página. ¿tienes alguna sugerencia para mí? cualquier cosa que pueda intentar será bienvenida. Gracias por leer mi largo comentario, mas si no digo todo lo que ya intenté me arriesgo a que sugirieras algo que no me funcionó.

    Responder
    • Hola Alejandro,

      Lo que te puedo sugerir es que depures por parte el problema. Es decir, prueba el código tal cual sin implementar un shortcode ni nada en una página HTML que edites tal cual “a pelo”. Si funciona ahí, ya has avanzado un paso, si no, ya te tengo que remitir al soporte que de pueda dar Facebook y cia. o a un profesional que se ponga contigo.

      Cuando eso lo tengas listo puede probar ya implementarlo como shortcode. Si no te funciona entonces, al menos, ya sabes que es algo que estás haciendo mal del lado de la programación PHP en WordPress.

      ¡Un saludo!
      Berto

      Responder
  5. Hola, antes que nada felicitarte por el excelente post 🙂
    Te quería preguntar si no es molestia como incluiste el campo Twitter en el formulario de comentarios, hay algún plugin para hacerlo o está añadido poniendo codígo en el archivo commnents.php
    Saludos!!!

    Responder
    • Hola Miguel,

      Es un plugin hecho por mi, seguramente lo dé gratis en su momento, pero antes tengo que encontrar un momento para acondicionarlo un poco para que funcione también en otros blogs que no sean el mío 🙂

      ¡Un saludo!
      Berto

      Responder
  6. Hola Berto, te felicito por tu gran blog y en especial en la calidad de los articulos. Espero que mi consulta sea tomada como un aporte. Tengo una duda y que tiene que ver con ciertos pasos que los blogeros asumen como obvios pero para los que estamos iniciando no lo son, en este caso me voy a referiri a facebook, y te pido por favor si puedes comentar acerca de la configuración del facebook, utilizando algun plugin, da lo mismo cual, he usado un monton y todos tiene la misma deficiencia, y hablo de la falta de configuración del id de facebook, ya sea para los like o seguir, todos los videos de youtube, tu blog y otros mas que he visitado, se saltan o simplemente omiten la configuración de facebook, pero si hablan de la configuración de twiter, es un poco extraña la situación, por algun motivo nadie habla de como se configura, sin embargo en sus propios blog, como el tuyo, si la tienen funcionando. Sería bueno que consideres la posibilidad de hacer un articulo para usuarios nuevos de verdad. Ya que para la calificación de SEO, y dar mas autoridad a nuestros sitios, facebook es el mas importante y como tal deberias tratarlo, con detalles para idiotas como yo. Ojala y comentes pronto como se asocia una cuenta de facebook a los botones de cualquier plugin como digg digg. Saludos amigo.

    Responder
    • Hola Carlos,

      Para decir la verdad, suele ser muy simple: en todos los plugins de este tipo te piden simplemente la URL de la cada cosa, la cuenta Facebook, Twitter, etc.

      En cualquier caso, este hilo de comentarios no es el foro para ello ya que aquí estamos hablando de otros temas.

      En caso de que sigas con dudas, te sugiero también tirar de Youtube, suele habar muchos tutoriales sobre este tipo de temas con la ventaja adicional de poder ver en vídeo cómo se hace.

      ¡Un saludo!
      Berto

      Responder
  7. Hola Berto, ( o no comento nunca, o lo hago 2 veces seguidas), es que me he pasado la tarde entera leyendo tu blog, lo que queria saber es que una vez que nos descargamos los shortcodes, y los activamos, para que utilizar el plugin snippet? si igual el shortcodes queda instalado en la barra de herramientas y se puede utilizar directamente al escribir el post.
    La verdad no entiendo para que el uso de los dos, o no es necesario que esten los 2? la verdad todavia no puedo utilizar el snippet, lo tengo instalado y todo pero no le encuentro la vuelta.
    Una vez mas gracias por tu ayuda.

    Responder
    • Hola Mary,

      Una cosa son shortcodes que viene con un plugin y los instala el plugin y otra que te proporcionen el código como es el caso en el post. En este caso el código que viene en las descargas es el que tienes que dar de algo como nuevo “snippet” para que se integre con WordPress y funcione.

      De todos modos, está pensado a modo de ilustración. Además, ya ha pasado algo de tiempo y tienes montenes de plugins gratuitos con shortcodes similares, más de ellos y mejores.

      ¡Un saludo!
      Berto

      Responder
    • Hola Yessy,

      No sé lo que puede estar pasando salvo que hubieses manipulado las fecha de los posts lo que explicaría que no sería en orden de publicación sino el de las fechas.

      Dicho esto, y ya que comentas que eres nueva en el mundillo, decirte que no se suele ver con buenos ojos un comentarios como éste que no guarda relación con el post en cuestión.

      Si haces un comentario en este blog o en cualquier otro, respeta por favor la temática del post. La sección de comentarios no es un lugar para resolver dudas de cualquier tipo.

      Un saludo,
      Berto

      Responder
  8. Holaa, soy novatilla en esto la verdad…a ver si puedes ayudarme. Me he desacargado el tema scroller para wordpress y lo estoy montanto cuando me doy cuenta que no me sale el botón de shortcode que debería aparecer según la documentación que me he descargado. El caso que viendo el .zip del tema vienen en la carpeta function varios ficheros relacionados: admin_shortcode_generador.php, admin-shortcode.php…etc.
    Tengo que activarlo en algún sitio o es que no va bien el tema. Gracias

    Responder
  9. Hola amigo, soy un total novato en esto de los sitios web pero poco a poco he venido armando uno, en algun lado lei de los shortcodes y me puse a investigar hasta llegar hasta aqui, pero efectivamente este tema no es para un novato como yo. Aprovechando el comentario como puedo poner eso de los POST POPULARES como en tu web? es un plugin? disculpa que me salga del tema. Saludos.

    Responder
  10. Un gran artículo! He querido poner en práctica lo que exponías copiando tu shortcode de redes sociales en el plugin code snippets y me ha funcionado a las mil maravillas. Entonces he tenido un error (culpa mía por trastear con el codigo)y no podía entrar en mi web hasta que mediante filezilla he borrado el plugin.

    Ahora todo funciona perfectamente pero si lo vuelvo a instalar me vuelve a salir el mismo error. Yo creía que desinstalando el plugin se borraba todo.

    ¿Tienes alguna idea de que puedo hacer? ¿Conoces algun otro plugin que me pueda servir?

    Gracias de antemano.

    Responder
    • Hola Pablo,

      No lo he investigado, probablemente use sus propias tablas en la base de datos, mira a ver. También es posible que tenga información en las opciones de WordPress (wp_options). Al no desinstalarlo el plugins no ha podido hacer un proceso de limpieza, es lógico que ocurra eso.

      Te puede ayudar quizás un plugin de limpieza de tablas como éste, aunque desconozco cuál es el mejor en este momento.

      Entre el trabajo del plugin y localizando a mano lo que pueden ser las tablas de Code Snippets, deberías poder dar con ello.

      Un consejo: es mejor tener una instalación de desarrollo para probar estas cosas, por ejemplo, con un hosting gratuito como x10hosting, no sirve para un blog en producción, pero estas cosas están muy bien para tener blogs para experimentar y madurar cosas como los shortcodes.

      Un saludo,
      Berto

      Responder
  11. Muchas gracias Berto, a ver si soy capaz de con los shorts q facilitas implantarlo en mi blog, que lo he intentado por mi cuenta y no han terminado de darme los resultados que esperaba. Un saludo!

    Responder
    • No te preocupes, es normal. Esto ya son temas un poco más avanzados con lo cual no es inmediato hacerse con ello.

      En su momento, abordaré también el tema de los hermanos de los shortcodes que son los “hooks”

      Saludos,
      Berto

      Responder
    • Hola Silvia,

      Los temas y los shortcodes son dos cosas que no tienen nada que ver. Los shortcodes ejecutan funciones programadas en PHP y los temas son componentes que se instalan y que determinan la estética de un blog WordPress.org

      Es posible crear temas de WordPress uno mismo, pero es ya es algo muuuy avanzado. Tendrías que ser una programadora PHP experimentada para que esto esté a tu alcance porque, aparte de mucho trabajo, es algo de bastante complejidad.

      En cambio los shortcodes son trocitos de código que pueden ser muy simples y que por eso mismo, con las explicaciones adecuadas, ganas y paciencia, pueden estar al alcance de una persona que no tenga experiencia en programación PHP.

      Un saludo,
      Berto

      Responder
  12. Hasta hora nunca me había planteado editar por mi mismo el código de mi blog, sin embargo gracias a este artículo tal vez intente introducir algun pequeño shortcode haber que resultado da.

    Te felicito Berto porque está todo perfectamente explicado y en detalle. Haces que parezca fácil algo que en mi opinión es realmente complejo.

    Saludos, Enric.

    Responder
    • Muchas gracias Enric,

      Me alegra mucho este comentario porque esta línea la pienso ampliar considerablemente en el año 2013. Creo que es posible acercar la programación a los bloggers no tecnicos y que les aporta un valor añadido inmenso.

      Un saludo,
      Berto

      Responder

Deja un comentario