Plugins en WordPress? No papá, shortcodes!

https://2017.bogota.wordcamp.org/session/plugins-en-wordpress-no-papa-shortcodes/

Transcript

1. @rhonaldomaster #WCBogota
2. Plugins en WordPress? No papá, ¡shortcodes! Rhonalf Martinez @rhonaldomaster #WCBogota
3. Rhonalf Martinez @rhonaldomaster Front-end dev at Koombea @rhonaldomaster #WCBogota
4. ¿Qué haremos? • ¿De qué trata esto? • Suena muy bien, pero ¿cómo es eso? • ¿Y dónde lo coloco? • Acción (sin luces y cámaras?) • Algo de documentación • Despedida @rhonaldomaster #WCBogota
5. Reusable snippets [shortcodes] • Reusa … qué? • Reusable snippet = código reutilizable • Puede ser usado en cualquier parte del sitio • Lo haces a tu gusto @rhonaldomaster #WCBogota
6. Entiendo … y para qué lo puedo usar? Para lo que necesites! • Personaliza tu sitio con esta herramienta a tu gusto. • No tienes que repetir código. • Puedes hacerlos tú mismo o buscar alguno implementado en internet. @rhonaldomaster #WCBogota
7. Excelente! Y cómo los creo? • Son código, así que puedes usar tu editor preferido • Agrégalos al archivo functions.php del tema • Úsalos en tu sitio! @rhonaldomaster #WCBogota
8. A la acción! @rhonaldomaster #WCBogota
9. Un shortcode se agrega en el sitio usando la sintaxis [nombreshortcode] Puede recibir parámetros [nombreshortcode parametro="Hola"] También puedes enviar contenido [nombreshortcode]Hola mamá![/shortcode] El shortcode devolverá un string que se escribirá en la página @rhonaldomaster #WCBogota
10. Luego de crear tu shortcode, le decimos a wordpress que lo queremos usar. Para ello, se usa la siguiente instrucción: add_shortcode('nombre_a_usar','funcion_que_lo_crea'); En nuestro caso: add_shortcode('nombreshortcode','saludar_a_mama'); @rhonaldomaster #WCBogota
11. Y luego qué? Tranquilo … ahora viene lo sencillo :) Ya con el shortcode, solo tienes que colocarlo en el editor en tu entrada o página @rhonaldomaster #WCBogota
12. Y en tu post/página verás Si, asi de sencillo @rhonaldomaster #WCBogota
13. Y existen shortcodes predefinidos? Claro! Wordpress cuenta con los siguientes: • [audio] - https://codex.wordpress.org/Audio_Shortcode • [caption] - https://codex.wordpress.org/Caption_Shortcode • [embed] - https://codex.wordpress.org/Embed_Shortcode • [gallery] - https://codex.wordpress.org/Gallery_Shortcode • [playlist] - https://codex.wordpress.org/Playlist_Shortcode • [video] - https://codex.wordpress.org/Video_Shortcode @rhonaldomaster #WCBogota
14. Generemos un shortcode! @rhonaldomaster #WCBogota
15. Podemos usar estas herramientas on-line https://generatewp.com/shortcodes/ https://www.nimbusthemes.com/add-shortcode-wordpress-snippe t-generator @rhonaldomaster #WCBogota
16. Al usar la herramienta Ambas nos entregaran un texto o código, el cual debemos colocar en el archivo functions.php del tema de nuestro sitio Luego, a podemos usar el shortcode en la entrada o página que queramos! // Add Shortcode function custom_shortcode() { return '<span>Hola mamá, mira lo que hice</span>'; } add_shortcode( 'testing', 'custom_shortcode' ); @rhonaldomaster #WCBogota
17. Algo de documentación • https://codex.wordpress.org/Shortcode • https://ayudawp.com/que-son-los-shortcodes-y-como-crearlos/ • http://manuelvicedo.com/wordpress/guia-shortcodes/ • https://codex.wordpress.org/Shortcode_API • https://generatewp.com/shortcodes/ • https://www.nimbusthemes.com/add-shortcode-wordpress-snippet-generator/ • http://wptricks.net/added-permalinks-shortcode-on-wordpress/ • http://programacionmultimedia.net/php-crear-un-shortcode-personalizado-para- wordpress/ @rhonaldomaster #WCBogota
18. Gracias :)