Hoy vamos a explicar cómo insertar un shortcode de manera automatizada en nuestro WordPress y que además sus valores sean personalizables. ¿Y qué es un shortcode? Pues no es más que una manera de llamar a una función sin tener que meter código en nuestra página de wordpress.
Como ejemplo vamos a crear un shortcode (en forma de botón) que generará dos campos que podamos personalizar: “Repeticiones” y “Peso”.
Para crear nuestro propio shortcode necesitaremos dos cosas:
- Crear unas pocas líneas de código (sencillo) en nuestro archivo functions.php
- Instalar el plugin Shortcoder. Este plugin nos ayudará para facilitar la inserción del shortcode y los parámetros de manera fácil y sencilla desde el editor de WordPress, (desde la pestaña HTML aparecerá un botón para insertar el shortcode que hayamos creado:
Pasos:
1. Para empezar, como ejemplo hemos creado unos campos personalizables para crear rutinas de entrenamientos con diferentes valores como repeticiones, peso, etc.
Lo primero que haremos es acceder al archivo functions.php de nuestro tema, y al final del documento, crearemos la función del shortcode. En éste caso lo haremos con los parámetros “repeticiones” y “peso”. El código sería algo así:
function workout_func($atts){
extract( shortcode_atts( array (
‘repeticiones’ => ‘ 0’,
‘peso’ => ‘ 0’,
), $atts ) );
$output = ‘<div>Repeticiones: ‘ . $repeticiones . ‘</div><div>Peso: ‘ . $peso .'</div>’;
return $output;
}
add_shortcode(‘workout’,’workout_func’);
Una vez lo tengamos, crearemos la función que queramos hacer. En éste caso la hemos llamado workout_func. Dentro de la función hemos definido los campos “repeticiones” y “peso” con un valor por defecto de “0”. Éste valor será el que podremos personalizar desde WordPress de forma súper fácil sin tocar código.
En la variable $outputalmacenaremos la estructura HTML que queramos darle y concatenaremos con las variables $repeticiones y$peso
Después, añadiremos el return $output para que nos devuelva el valor que hemos asignado anteriormente.
Por último el add_shortcodeañadirá el shortcode que hemos creado para que podamos llamarlo desde WordPress.
El primer valor que van dentro de add_shortcode hace referencia al nombre que queramos poner a nuestro shortcode, en éste caso lo hemos llamado workout. El segundo valor hace referencia a la función, a la que hemos llamado workout_func.
add_shortcode(‘workout’,’workout_func’);
Los valores asignados a peso y repeticiones, que en éste caso hemos puesto ‘0’, saldrían por defecto, pero desde nuestro editor de WordPress éstos campos serán personalizables.
2. Ahora que ya tenemos el shortcode creado, si desde el editor de WordPress pusiéramos en cualquiera de nuestras páginas:
[workout][/workout]
Veríamos algo asi:
Repeticiones: 0
Peso: 0
En éste caso, como queremos cambiar el valor de los campos según el ejercicio, y además automatizar el proceso para crear el shortcode, entra el juego el plugin Shortcoder.
3. Instalaremos el plugin y lo activaremos.
4. Iremos a nuestro escritorio de WordPress / Ajustes / Shortcoder
5. Daremos click al botón + Create a new shortcode
6. Pondremos el nombre de nuestro shortcode, en éste caso “Workout”.
En la descripción tendremos que poner el shortcode con el nombre que le hayamos puesto en el código, así que pondremos “workout”.
[workout repeticiones=”” peso=“”]
En el archivo functions.php podemos ver el nombre del shortcode que habíamos puesto:
7. Ahora sólo queda que los parámetros los podamos personalizar. Para ello, dentro de las comillas de cada valor (repeticiones y peso) insertaremos el parámetro. Daremos click en Insert shortcode parameters / Custom parameter / añadir nombre del parámetro.
Añadiremos tanto “repeticiones” como “peso” y haremos click en “Insert parameter”
Con esto quedará el shortcode de ésta manera:
[workout repeticiones=”%%repeticiones%%” peso=”%%peso%%”]
8. Ya tenemos el shortcode creado. Para ver como queda, nos iremos a nuestra página donde queramos instertar el shortcode y nos aparecerá un botón:
9. Dando click en el botón shortcode nos aparecerá nuestra lista de shortcodes que hayamos creado, si hacemos click en Workout (nuestro shortcode creado) nos aparecerá los dos campos donde podremos poner el valor que queramos.
10. Daremos click en insert shortcode y automáticamente se generará solo, quedaría así:
[sc name=”Workout” repeticiones=”10″ peso=”20″ ]
Actualizaremos nuestra página, y listo!! Sabemos que ser un pro en WordPress requiere de conocimientos y tiempo por eso, si necesitas actualizar tu web y no sabes como hacerlo, contacta con nosotros y te ofreceremos distintos packs de soluciones adaptados a tus necesidades: [email protected]