Primeros pasos con códigos cortos de WordPress y fragmentos de muestra
Publicado: 2021-02-18Los códigos cortos de WordPress se introdujeron en 2.5 y lo ayudan a crear códigos macro para usar dentro de su contenido. Si lo piensa, esta es una excelente manera de crear algo como un anuncio dinámico o un botón de llamada a la acción en sus publicaciones.
Si usamos el ejemplo de la llamada a la acción, podría agregar algo como esto a su publicación de blog para mostrar el botón y luego editar el resultado en el archivo functions.php de su plantilla, al que llegaremos en un minuto.
[button]
Para personalizar el botón, simplemente podríamos agregar algo como:
[button type="twitter"]
O para hacerlo aún mejor, podríamos usar un código abreviado adjunto:
[button type="twitter"]Follow me on Twitter![/button]
Con un poco de imaginación, pronto te das cuenta del potencial de los códigos cortos y de lo que se puede hacer con ellos. En este artículo, le mostraré cómo crear y usar estos tres tipos diferentes de códigos cortos, y luego mostraré algunos códigos cortos listos para usar para usar en su propio sitio de WordPress.
Crear un shortcode de cierre automático
El shortcode más simple es el de cierre automático. Crearemos un enlace simple a nuestra cuenta de Twitter y luego lo agregaremos a una publicación de blog.
Todo el código va en functions.php
, que se encuentra en /wp-content/themes/your-theme/
. Si no tiene uno, simplemente créelo y coloque el código en él.
<?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>
Uso:
[button]
Simplemente usando la función add_shortcode()
, podemos vincular cualquier función de PHP a nuestro shortcode. En este ejemplo simple, todo lo que hacemos es devolver un enlace a nuestra cuenta de Twitter, pero demos un paso más y agreguemos algunos parámetros.
Crear un shortcode de cierre automático con parámetros
Shortcode tiene soporte para parámetros, lo que nos permite personalizar la salida. En este ejemplo, tenemos dos botones diferentes, por lo que debemos definir qué botón queremos mostrar.
<?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>
Ahora puede elegir qué botón mostrar definiendo el type
en su shortcode.
[button type="twitter"] [button type="rss"]
Esto es genial. Pero, ¿y si quisiéramos cambiar el texto? Podríamos seguir agregando tipos de shortcode como [button type="twitter-2"]
y así sucesivamente, pero eso no es muy dinámico, ¿verdad? Veamos cómo hacer esto de la manera correcta.
Creando un shortcode adjunto
El código abreviado adjunto le permite incrustar contenido dentro de su código abreviado, al igual que BBCode si alguna vez lo ha usado.
<?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>
Para usar este shortcode, incrusta el texto que desea usar así:
[button]Follow me on Twitter![/button]
Para mejorar aún más este botón, podríamos agregar parámetros como lo hicimos en el ejemplo anterior. Agreguemos dos parámetros esta vez, uno para el nombre de usuario de Twitter y otro para el estilo del botón. Luego podemos tener diferentes tipos de botones y elegir a qué cuenta de Twitter queremos vincular el botón.
<?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>
Uso:
[button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>
Ahora tenemos un botón personalizable que podemos vincular a cualquier cuenta de Twitter. Como estoy seguro de que entiende, puede crear códigos abreviados mucho más avanzados que este, pero este es un buen comienzo.
Códigos cortos en widgets y archivos de plantilla
Ahora, cuando haya visto el poder de los códigos abreviados, probablemente se esté preguntando por qué no puede usarlos en sus widgets y sus archivos de plantilla. Bueno, resulta que puedes.
Para activar shortcodes en tus widgets, simplemente coloca el siguiente código en functions.php:
add_filter('widget_text', 'do_shortcode')
Y para usar un código abreviado en sus archivos de plantilla, puede acceder a ellos usando:
do_shortcode("[button]");
Shortodes listos para usar
Aquí hay algunos códigos cortos interesantes que puede implementar de inmediato.
Código en publicaciones
Si ejecuta un blog que se enfoca en la programación, probablemente desee mostrar código en sus publicaciones.
function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');
Uso:
[code]<?php echo 'Hello World!'; ?>
Incruste Adsense en cualquier lugar de sus publicaciones
Con este shortcode, puede agregar un anuncio de Google en cualquier lugar de sus publicaciones simplemente usando [adsense]
.
function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');
Insertar vídeo de YouTube
Este shortcode te permitirá incrustar videos de YouTube en las publicaciones de tu blog.
function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");
Uso:
// Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]
Código abreviado de donación de Paypal
Este es un código abreviado que lo ayuda a crear enlaces de donación a su cuenta de Paypal.
function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');
Uso:
[donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]
Nota privada a los autores
Este último es ingenioso. Con este shortcode, puede crear notas en sus publicaciones que solo los autores pueden ver.
function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );
Conclusión
Después de leer este artículo, espero que te gusten los shortcodes de WordPress tanto como a mí, y espero que empieces a implementarlos en tu propio blog.