Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
WordPress introdujo los shortcodes hace muuucho, en la versión 2.5, como forma de añadir estilos específicos del tema a través de una etiqueta fácil de usar en tu editor de entradas, o en el código de tu tema. Podemos implementar algunas impresionantes características a través de shortcodes, algo tanto útil como emocionante (¡aunque para geeks!). Hoy, vamos a echar un vistazo a algunas creativas implementaciones de la API de los shortcodes.
Introducción
Pronto veremos cómo usar la API de Shortcodes aquí en Tuts+, pero mientras asegúrate de consultar el codex. También vale la pena destacar que hay un interesante debate sobre la "ética" del uso de shortcodes dentro de los temas… para dejarlo claro, lo que vamos a ver aquí no es cómo mezclar elementos HTML básicos (por ej. usar un shortcode [b] para sustituir la etiqueta <b>) - en lugar de eso, todos los shortcodes que vamos a ver permitirán a los usuarios incluir información compleja en una entrada sin tener que usar un montón de código personalizado.
1. Visualizador de documentos de Google Docs
Usamos PDFs en la web por distintos motivos, principalmente para presentar documentación, pero por desgracia, algunos usuarios poco acostumbrados a la tecnología se sentirán frustrados al recibir avisos constantes para instalar una app que les permita visualizarlos. Por fortuna, Google Docs dispone de un visualizador nativo de PDFs. Este plugin, cortesía de Noscope nos proporciona la posibilidad de añadir un enlace a un visualizador en Google Docs, sólo tenemos que añadir el enlace hacia el PDF en el único parámetro del shortcode.
1 |
function pdflink($attr, $content) { |
2 |
if ($attr['href']) { |
3 |
return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>'; |
4 |
} else { |
5 |
$src = str_replace("=", "", $attr[0]); |
6 |
return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $src . '">'.$content.'</a>'; |
7 |
}
|
8 |
}
|
9 |
add_shortcode('pdf', 'pdflink'); |
De hecho, si realizas algunas modificaciones, el shortcode se convertirá en un visualizador también válido para otros tipos de archivos, por ejemplo presentaciones de PowerPoint y documentos de Word. Los usuarios podrán guardar estos archivos en sus librería de documentos de Google Doc, y si quieren, imprimirlos o editarlos.
Uso
Este shortcode en concreto es muy fácil de usar ya que sólo necesita un parámetro: el enlace de tu PDF.
1 |
[pdf=http://manuals.info.apple.com/en_US/Enterprise_Deployment_Guide.pdf]Link text.[/pdf] |
El resultado será un enlace como este.
2. Incrusta anuncios de Google Adsense en cualquier sitio
Bloguear puede ser una actividad lucrativa, pero necesitas hacer uso de algún tipo de monetización para sustentarte económicamente. Muchos bloggers lo consiguen mediante la publicidad, normalmente de Google. Este sencillo shortcode le permitirá a cualquier bloguero utilizar un shortcode sin parámetros para añadir un anuncio en una entrada, cortesía de WpRecipes.
1 |
function showads() { |
2 |
return '<script type="text/javascript"><!-- |
3 |
google_ad_client = "<em>your client id</em>";
|
4 |
google_ad_slot = "<em>your ad slot id</em>";
|
5 |
google_ad_width = <em>width</em>;
|
6 |
google_ad_height = <em>height</em>;
|
7 |
//-->
|
8 |
</script>
|
9 |
<script type="text/javascript"
|
10 |
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
|
11 |
</script>
|
12 |
'; |
13 |
}
|
14 |
|
15 |
add_shortcode('adsense', 'showads'); |
Si no usas Google Ads, también es muy sencillo pegar el código de tu propia publicidad en la función manteniendo el resto, sencillo.
Uso
Para añadir un anuncio en una entrada, simplemente añade el siguiente código y listo. Es ridículamente simple.
1 |
[adsense] |
3. Añadir notas privadas a las entradas
Si trabajas en tu blog junto con otros colaboradores, la coordinación y la comunicación es algo esencial. Colocando el siguiente shortcode acompañado de tu mensaje, todos los administradores del blog podrán verlo, pero no los visitantes del sitio. La cuarta línea encierra tu nota con una clase "note", permitiéndote aplicar estilos que se adapten al diseño de tu blog. De nuevo, debemos agradecer este shortcode a WPRecipes.
1 |
function sc_note( $atts, $content = null ) { |
2 |
if ( current_user_can( 'publish_posts' ) ) |
3 |
return '<div class="note">'.$content.'</div>'; |
4 |
return ''; |
5 |
}
|
6 |
|
7 |
add_shortcode( 'note', 'sc_note' ); |
Uso
Simplemente envuelve tu nota dentro del shortcode [note]
1 |
[note]<em>Your note text</em>[/note] |
4. Ofuscar una dirección de email
A nadie le gusta el spam, y colocar tu dirección de email de forma visible y pública en un sitio web no ayuda a evitarlo. Sin embargo, hacerlo podría ser necesario y afortunadamente puedes hacerlo con este shortcode para evitar que te inunden la bandeja de entrada con spam.
1 |
function munge_mail_shortcode( $atts , $content=null ) { |
2 |
|
3 |
for ($i = 0; $i < strlen($content); $i++) $encodedmail .= "&#" . ord($content[$i]) . ';'; |
4 |
|
5 |
return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>'; |
6 |
|
7 |
}
|
8 |
add_shortcode('mailto', 'munge_mail_shortcode'); |
Uso
Este shortcode codificará tu dirección de email con caracteres HTML en lugar de presentarla en simple texto. Es muy útil, y aunque no es una solución a prueba de fuego, es un buen primer paso. Puedes conseguirlo envolviendo la dirección de email que desees entre las etiquetas [mailto] como ves en el siguiente ejemplo.
1 |
[mailto]myemail@example.com[/mailto] |
5. Añade Google Maps con muy poco esfuerzo
Muchos temas para WordPress vienen con una etiqueta para YouTube - u otro servicio similar - esto significa que para añadir vídeos basta con pegar el ID del vídeo. Gracias al shortcode Digging into WordPress, podemos añadir un mapa de Google, basta con pegar la URL proporcionada por la página del mapa.
1 |
function fn_googleMaps($atts, $content = null) { |
2 |
extract(shortcode_atts(array( |
3 |
"width" => '640', |
4 |
"height" => '480', |
5 |
"src" => '' |
6 |
), $atts)); |
7 |
return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'"></iframe>'; |
8 |
}
|
9 |
add_shortcode("googlemap", "fn_googleMaps"); |
Uso
Este shortcode sólo tiene tres atributos: width (anchura), height (altura) y URL. Las dos primeras son obvias y, cuando no se especifican, se usan los valores especificados en el anterior código (que por supuesto puedes modificar a tu gusto). El último atributo requerido es la URL, disponible en el sitio web de Google Maps. Busca la dirección del mapa que deseas, haz clic en el botón "Compartir" y después, en la ventana emergente selecciona "Enviar un enlace" y copia el enlace que aparece.
1 |
[googlemap width="600" height"360" src="http://google.com/maps/?ie=..."] |
6. Incrusta un feed RSS
Nuestra próxima propuesta nos la proporciona Smashing Magazine, y posibilita la incrustación de un feed RSS en tu blog a través de un sencillo shortcode jugando con las herramientas para RSS nativas de WordPress. Francamente, este es un shortcode increíble, y sólo necesita dos parámetros.
1 |
include_once(ABSPATH.WPINC.'/rss.php'); |
2 |
|
3 |
function readRss($atts) { |
4 |
extract(shortcode_atts(array( |
5 |
"feed" => 'http://', |
6 |
"num" => '1', |
7 |
), $atts)); |
8 |
|
9 |
return wp_rss($feed, $num); |
10 |
}
|
11 |
|
12 |
add_shortcode('rss', 'readRss'); |
Uso
En este caso, todo lo que necesitas es indicar la URL de tu feed RSS en el atributo "feed", y el número de entradas que quieres mostrar en el atributo "num".
1 |
[rss feed="http://feeds.feedburner.com/webdesigntutsplus" num="3"] |
7. Botón compartir para Twitter
Twitter introdujo un botón para compartir hace ya tiempo que permite que los usuarios que hayan iniciado sesión compartan entradas en la red social con tan sólo unos pocos clics. Es muy sencillo añadir uno en tu tema, pero debes ubicarlo en un archivo de tu tema, pero debe ser una ubicación estática. Este útil shortcode de iLERTECH te permite añadir un botón de Twitter mediante un shortcode compuesto por una sola letra.
1 |
function twitter( $atts, $content=null ){ |
2 |
/* Author: Nicholas P. Iler
|
3 |
* URL: http://www.ilertech.com/2011/07/add-twitter-share-button-to-wordpress-3-0-with-a-simple-shortcode/
|
4 |
*/
|
5 |
|
6 |
extract(shortcode_atts(array( |
7 |
'url' => null, |
8 |
'counturl' => null, |
9 |
'via' => '', |
10 |
'text' => '', |
11 |
'related' => '', |
12 |
'countbox' => 'none', // none, horizontal, vertical |
13 |
|
14 |
), $atts)); |
15 |
|
16 |
// Check for count url and set to $url if not provided
|
17 |
if($counturl == null) $counturl = $url; |
18 |
|
19 |
$twitter_code = << <script src="http://platform.twitter.com/widgets.js" type="text/javascript"><!--mce:0--></script> |
20 |
<a class="twitter-share-button" href="http://twitter.com/share"></a> |
21 |
HTML; |
22 |
|
23 |
return $twitter_code; |
24 |
|
25 |
}
|
26 |
add_shortcode('t', 'twitter'); |
Uso
Existen dos usos para este shortcode. Tienes una muestra de su uso más simple aquí abajo, esto añadirá el botón en tu entrada sin mostrar las veces que se ha compartido.
1 |
[t url='get_permalink();'] |
Sencillo, ¿no? Si quieres añadir un contador a tu botón, sólo necesitas añadir un parámetro más, y podrás optar por la versión horizontal o vertical del botón.
1 |
[t countbox="horizontal/vertical"] |
Por último, este ejemplo te permite definir qué cuentas relacionadas se mostrarán después de haber tuiteado, con el objetivo de conseguir más seguidores.
1 |
[t related='connorturnbull: Author, envatowebdesign: Sister Site'] |
8. Mostrar contenido sólo a los usuarios registrados
Hay una creciente tendencia a mostrar contenido sólo a los usuarios registrados, en ocasiones bajo la premisa de una suscripción premium. WordPress dispone de un excelente sistema para la gestión de usuarios, con potencial para extenderlo a través de distintos tipos de plugins, de manera que es posible que este shortcode te resulte de gran utilidad. Usando este código, cualquier contenido que esté entre las etiquetas será disponible sólo para aquellos usuarios que se hayan registrado previamente en tu sitio.
Si te preocupa tu feed, este shortcode también ocultará su contenido, así que no existirá ningún agujero.
1 |
add_shortcode( 'member', 'member_check_shortcode' ); |
2 |
|
3 |
function member_check_shortcode( $atts, $content = null ) { |
4 |
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) |
5 |
return $content; |
6 |
return ''; |
7 |
}
|
Uso
Como habrás deducido (o, deberías) a partir de la función del shortcode, las etiquetas [member] hará invisible cualquier contenido situado entre ellas a los ojos de los usuarios que no hayan iniciado sesión, también en el feed.
1 |
[member]My super secret content.[/member] |
9. Muestra las entradas relacionadas
Las entradas relacionadas son una forma excelente para animar a los usuarios a consultar más contenido de tu sitio, dirigiéndolos hacia tus otros archivos. Puedes implementarlo en tu tema, este shortcode hará el trabajo por tí permitiéndote controlar y manipular el resultado mediante su atributos.
No obstante, ten cuidado, esta función es un poco más larga que las anteriores, y debemos agradecérsela a WP Mods.
1 |
function related_posts_shortcode( $atts ) { |
2 |
extract(shortcode_atts(array( |
3 |
'limit' => '5', |
4 |
), $atts)); |
5 |
|
6 |
global $wpdb, $post, $table_prefix; |
7 |
|
8 |
if ($post->ID) { |
9 |
$retval = '<ul>'; |
10 |
// Get tags
|
11 |
$tags = wp_get_post_tags($post->ID); |
12 |
$tagsarray = array(); |
13 |
foreach ($tags as $tag) { |
14 |
$tagsarray[] = $tag->term_id; |
15 |
}
|
16 |
$tagslist = implode(',', $tagsarray); |
17 |
|
18 |
// Do the query
|
19 |
$q = "SELECT p.*, count(tr.object_id) as count |
20 |
FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID |
21 |
AND p.post_status = 'publish'
|
22 |
AND p.post_date_gmt < NOW()
|
23 |
GROUP BY tr.object_id
|
24 |
ORDER BY count DESC, p.post_date_gmt DESC
|
25 |
LIMIT $limit;"; |
26 |
|
27 |
$related = $wpdb->get_results($q); |
28 |
if ( $related ) { |
29 |
foreach($related as $r) { |
30 |
$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>'; |
31 |
}
|
32 |
} else { |
33 |
$retval .= ' |
34 |
<li>No related posts found</li>'; |
35 |
}
|
36 |
$retval .= '</ul>'; |
37 |
return $retval; |
38 |
}
|
39 |
return; |
40 |
}
|
Uso
Serás capaz de insertar tus entradas relacionadas usando el siguiente ejemplo del shortcode. Además puedes limitar el número de entradas a mostrar ajustando el atributo para el límite de entradas, como hemos hecho en el segundo ejemplo.
1 |
[related_posts] |
1 |
[related_posts limit="num"] |
10. Mostrar la última imagen adjuntada a una entrada
Este es un interesante shortcode que nos permitirá mostrar la última imagen que hayas adjuntado en una entrada. Evidentemente, WordPress tiene una función para asignar una imagen destacada, pero no siempre funciona para conseguir lo que quieres, y además quizá necesites dos. Por fortuna, esta función nos permite cargar una imagen y hacer que aparezca automáticamente en cualquier ubicación que quieras, siempre que sea la última que hayas adjuntado.
1 |
function sc_postimage($atts, $content = null) { |
2 |
extract(shortcode_atts(array( |
3 |
"size" => 'thumbnail', |
4 |
"float" => 'none' |
5 |
), $atts)); |
6 |
$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); |
7 |
foreach( $images as $imageID => $imagePost ) |
8 |
$fullimage = wp_get_attachment_image($imageID, $size, false); |
9 |
$imagedata = wp_get_attachment_image_src($imageID, $size, false); |
10 |
$width = ($imagedata[1]+2); |
11 |
$height = ($imagedata[2]+2); |
12 |
return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>'; |
13 |
}
|
14 |
add_shortcode("postimage", "sc_postimage"); |
Uso
Como ocurre con la mayoría de los shortcodes que hemos visto hoy, este forma parte de "los shortcodes más sencillos" de este listado. La etiqueta puede usarse sola, o indicando un tamaño y un atributo float para personalizarlo más aún, como puedes ver en el siguiente ejemplo.
1 |
[postimage size="num" float="left/right"] |
11. Incrustar un gráfico de Google
Blue Anvil nos trae un increíble shortcode para incrustar un tipo de medio realmente divertido. No, no se trata de un vídeo de YouTube, ni un efecto de Flash o HTML5. Se trata de los gráficos.
Claro, los gráficos también pueden ser aburridos. Pero no lo son para un desarrollador web, gracias a la alta capacidad de personalización que nos permite la API de Google Charts, que ahora puede trasladarse a un shortcode para facilitar su uso. Usar este shortcode es más laborioso que los demás, pero te ahorrará mucho tiempo a la larga si usas este tipo de gráficos de forma regular.
1 |
function chart_shortcode( $atts ) { |
2 |
extract(shortcode_atts(array( |
3 |
'data' => '', |
4 |
'colors' => '', |
5 |
'size' => '400x200', |
6 |
'bg' => 'ffffff', |
7 |
'title' => '', |
8 |
'labels' => '', |
9 |
'advanced' => '', |
10 |
'type' => 'pie' |
11 |
), $atts)); |
12 |
|
13 |
switch ($type) { |
14 |
case 'line' : |
15 |
$charttype = 'lc'; break; |
16 |
case 'xyline' : |
17 |
$charttype = 'lxy'; break; |
18 |
case 'sparkline' : |
19 |
$charttype = 'ls'; break; |
20 |
case 'meter' : |
21 |
$charttype = 'gom'; break; |
22 |
case 'scatter' : |
23 |
$charttype = 's'; break; |
24 |
case 'venn' : |
25 |
$charttype = 'v'; break; |
26 |
case 'pie' : |
27 |
$charttype = 'p3'; break; |
28 |
case 'pie2d' : |
29 |
$charttype = 'p'; break; |
30 |
default : |
31 |
$charttype = $type; |
32 |
break; |
33 |
}
|
34 |
|
35 |
if ($title) $string .= '&chtt='.$title.''; |
36 |
if ($labels) $string .= '&chl='.$labels.''; |
37 |
if ($colors) $string .= '&chco='.$colors.''; |
38 |
$string .= '&chs='.$size.''; |
39 |
$string .= '&chd=t:'.$data.''; |
40 |
$string .= '&chf='.$bg.''; |
41 |
|
42 |
return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />'; |
43 |
}
|
44 |
add_shortcode('chart', 'chart_shortcode'); |
Uso
Para usar este shortcode, te recomiendo aprender antes un poco sobre cómo funciona la API de Google Charts. Si es posible, consulta antes su documentación, así te harás una idea de cómo funciona.
Después te resultará fácil establecer sus parámetros, por ejemplo, los valores de los datos y las etiquetas. Otros, como los colores, el color de fondo, el tamaño, el título y el tipo son bastante obvios y no tienen ninguna dificultad.
1 |
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"] |
12. Deshabilitar los formatos de WordPress
En algunos casos, podrías no querer mostrar texto tal y como lo renderiza automáticamente WordPress. Este plugin/shortcode elimina el formateo automático ejecutado por WordPress eliminando los filtros que se aplican al invocar "the_content".
1 |
function my_formatter($content) { |
2 |
$new_content = ''; |
3 |
$pattern_full = '{(\[raw\].*?\[/raw\])}is'; |
4 |
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is'; |
5 |
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); |
6 |
|
7 |
foreach ($pieces as $piece) { |
8 |
if (preg_match($pattern_contents, $piece, $matches)) { |
9 |
$new_content .= $matches[1]; |
10 |
} else { |
11 |
$new_content .= wptexturize(wpautop($piece)); |
12 |
}
|
13 |
}
|
14 |
|
15 |
return $new_content; |
16 |
}
|
17 |
|
18 |
remove_filter('the_content', 'wpautop'); |
19 |
remove_filter('the_content', 'wptexturize'); |
20 |
|
21 |
add_filter('the_content', 'my_formatter', 99); |
Uso
Su empleo es relativamente fácil, sólo hace falta envolver tu texto entre las etiquetas [raw] del shortcode.
1 |
[raw]My unformatted text[/raw] |
13. Mostrar las estadísticas del blog
A muchos blogs les encanta mostrar el número de artículos publicados, el número de comentarios, u otro tipo de estadísticas. La función de este shortcode de WP Code Snippets permitirá que cualquier autor muestre interesantes estadísticas tras insertarlo en su entrada o página. Además, puedes usarlo junto con el shortcode anterior que ocultaba el contenido a todo el mundo excepto a los administradores, para mostrar información como el número de comentarios pendientes de aprobación o los marcados como spam.
1 |
add_shortcode('wcs_count', 'wcs_count_shortcode_handler'); |
2 |
|
3 |
function wcs_count_shortcode_handler($atts) |
4 |
{
|
5 |
// extract parameters
|
6 |
$parms = shortcode_atts(array( |
7 |
'type' => 'posts', |
8 |
'format' => 'true', |
9 |
'extra' => '1', |
10 |
), $atts); |
11 |
|
12 |
$type = strtolower($parms['type']); |
13 |
$format = strtolower($parms['format']); |
14 |
$extra = $parms['extra']; |
15 |
|
16 |
// process t/f options
|
17 |
$b_format = false; |
18 |
if (($format == 'yes') || ($format == 'y') || |
19 |
($format == 'true') || ($format == '1')) |
20 |
{$b_format = true;} |
21 |
|
22 |
|
23 |
// exit
|
24 |
return wcs_get_count($type, $b_format, $extra); |
25 |
}
|
26 |
|
27 |
|
28 |
function wcs_get_count($type='posts', $format='1', $extra='1') |
29 |
{
|
30 |
// TYPES:
|
31 |
// posts, posts_by_author, pages, tags, categories
|
32 |
// users, ms_users, blogroll, blogroll_categories, commenters
|
33 |
// comments, comments_pending, comments_spam, comments_pingback
|
34 |
// comments_by_user, comments_by_nicename, comments_by_email
|
35 |
// comments_per_post
|
36 |
|
37 |
// $extra is used with:
|
38 |
// posts_by_author, comments_by_user, comments_by_nicename, comments_by_email
|
39 |
// comments_per_post
|
40 |
|
41 |
// init
|
42 |
global $wpdb; |
43 |
$type = strtolower($type); |
44 |
$count = 0; |
45 |
|
46 |
// process
|
47 |
switch($type) |
48 |
{
|
49 |
case 'posts': // published |
50 |
$count = wp_count_posts('post'); |
51 |
$count = $count->publish; |
52 |
// options: publish, future, draft, pending, private, trash, auto-draft, & inherit
|
53 |
break; |
54 |
|
55 |
case 'posts_by_author': // use $extra for user/author id |
56 |
case 'posts_by_user': |
57 |
$query = "SELECT COUNT(*) FROM $wpdb->posts "; |
58 |
$where = "WHERE post_type='post' AND post_status='publish' AND post_author='$extra'"; |
59 |
$count = $wpdb->get_var($query . $where); |
60 |
// alternative method is: count_user_posts()
|
61 |
break; |
62 |
|
63 |
case 'pages': // published |
64 |
$count = wp_count_posts('page'); |
65 |
$count = $count->publish; |
66 |
break; |
67 |
|
68 |
case 'tags': |
69 |
$count = wp_count_terms('post_tag'); |
70 |
break; |
71 |
|
72 |
case 'categories': |
73 |
$count = wp_count_terms('category'); |
74 |
break; |
75 |
|
76 |
case 'users': |
77 |
$count = count_users(); |
78 |
$count = $count['total_users']; |
79 |
break; |
80 |
|
81 |
case 'ms_users': // multi-site |
82 |
$count = get_user_count(); |
83 |
break; |
84 |
|
85 |
case 'blogroll': |
86 |
$query = "SELECT COUNT(*) FROM $wpdb->links "; |
87 |
$where = "WHERE link_visible='Y'"; |
88 |
$count = $wpdb->get_var($query . $where); |
89 |
break; |
90 |
|
91 |
case 'blogroll_categories': |
92 |
$count = wp_count_terms('link_category'); |
93 |
break; |
94 |
|
95 |
case 'commenters': |
96 |
$query = "SELECT COUNT(DISTINCT comment_author) FROM $wpdb->comments "; |
97 |
$where = "WHERE comment_approved='1' AND comment_type=''"; |
98 |
$count = $wpdb->get_var($query . $where); |
99 |
break; |
100 |
|
101 |
case 'comments': |
102 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
103 |
$where = "WHERE comment_approved='1' AND comment_type=''"; |
104 |
$count = $wpdb->get_var($query . $where); |
105 |
break; |
106 |
|
107 |
case 'comments_pending': |
108 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
109 |
$where = "WHERE comment_approved='0' AND comment_type=''"; |
110 |
$count = $wpdb->get_var($query . $where); |
111 |
break; |
112 |
|
113 |
case 'comments_spam': |
114 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
115 |
$where = "WHERE comment_approved='spam' AND comment_type=''"; |
116 |
$count = $wpdb->get_var($query . $where); |
117 |
break; |
118 |
|
119 |
case 'comments_pingback': |
120 |
case 'comments_pingbacks': |
121 |
case 'comments_trackback': |
122 |
case 'comments_trackbacks': |
123 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
124 |
$where = "WHERE comment_approved='1' AND comment_type='pingback'"; |
125 |
$count = $wpdb->get_var($query . $where); |
126 |
break; |
127 |
|
128 |
case 'comments_by_user': // use $extra for user_id |
129 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
130 |
$where = "WHERE comment_approved='1' AND comment_type='' AND user_id='$extra'"; |
131 |
$count = $wpdb->get_var($query . $where); |
132 |
break; |
133 |
|
134 |
case 'comments_by_author': // use $extra for author nicename (case INsensitive) |
135 |
case 'comments_by_nicename': |
136 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
137 |
$where = "WHERE comment_approved='1' AND comment_type='' AND comment_author='$extra'"; |
138 |
$count = $wpdb->get_var($query . $where); |
139 |
break; |
140 |
|
141 |
case 'comments_by_email': // use $extra for author email (case INsensitive) |
142 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
143 |
$where = "WHERE comment_approved='1' AND comment_type='' AND comment_author_email='$extra'"; |
144 |
$count = $wpdb->get_var($query . $where); |
145 |
break; |
146 |
|
147 |
case 'comments_per_post': // $extra is decimal place precision (0 for integer only) |
148 |
// posts
|
149 |
$posts_count = wp_count_posts('post'); |
150 |
$posts_count = $posts_count->publish; |
151 |
// comments
|
152 |
$query = "SELECT COUNT(*) FROM $wpdb->comments "; |
153 |
$where = "WHERE comment_approved='1' AND comment_type=''"; |
154 |
$comment_count = $wpdb->get_var($query . $where); |
155 |
// average
|
156 |
return round($comment_count / $posts_count, $extra); |
157 |
|
158 |
default: |
159 |
$count = 0; |
160 |
}
|
161 |
|
162 |
// exit
|
163 |
if ($format) {$count = number_format_i18n($count);} |
164 |
return $count; |
165 |
|
166 |
/**********************************************************************
|
167 |
Copyright © 2011 Gizmo Digital Fusion (http://wpCodeSnippets.info)
|
168 |
you can redistribute and/or modify this code under the terms of the
|
169 |
GNU GPL v2: http://www.gnu.org/licenses/gpl-2.0.html
|
170 |
**********************************************************************/
|
171 |
}
|
Uso
Sí, ¡es largo! Pero queríamos ofrecerte el rango de valuable información que está ahora disponible con sólo unas líneas de texto, como mostramos aquí abajo. La lista completa de tipos está disponible en el artículo original del blog, y es necesario indicar al menos uno en el atributo "type". En el caso de las estadísticas relacionadas con un usuario concreto, tendrás que usar el atributo "extra" e indicar el ID del usuario.
1 |
[wcs_count type="posts"] |
14. Añadir una insignia de Flickr
Muchos blogs usan Flickr para gestionar sus imágenes, especialmente aquellos que usan Flickr para su principal finalidad: la fotografía. Una insignia de Flickr es un pequeño widget que nos permitirá mostrar galerías de imágenes desde la plataforma en nuestro sitio web y además puede modificarse para convertirse en un shortcode WordPress friendly.
1 |
function flickr_badge_shortcode($atts, $content=NULL){ |
2 |
|
3 |
$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts); |
4 |
|
5 |
return sprintf('<div class="flickr_badge"><h3>%s</h3><script src="http://www.flickr.com/badge_code_v2.gne?%s" type="text/javascript"></script></div>', $content, http_build_query($query_atts)); |
6 |
}
|
7 |
|
8 |
add_shortcode('flickrbadge', 'flickr_badge_shortcode'); |
Uso
La insignia de Flickr incluye varios parámetros que comparten con el correspondiente shortcode que acabamos de crear. "count" informa a tu shortcode cuantas imágenes debe mostrar, "source" describe los términos usados para localizar las imágenes (como el usuario, el grupo, user_set, etc.) y "display" decide si las muestra de forma aleatoria, o sólo las últimas. El resto de parámetros de explican por sí solos.
1 |
[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]Here’s the latest fish[/flickrbadge] |
15. Añadir un botón de donación de PayPal
Los blogs no se financian por sí solos, y con independencia de que el propietario trabaje a tiempo completo en él, o como un proyecto paralelo, probablemente tendrá que pagar algún tipo de facturas. Aunque algunos bloggers recurren a la publicidad, otros se financian a través de las donaciones de su comunidad a través de PAyPal. Este shortcode te permitirá colocar un enlace para las donaciones en cualquier sitio, y es super sencillo aplicarle tus propios estilos para adecuarlo al diseño de tu blog.
Así que la próxima vez que despotriques sobre los altos costes del alojamiento web, coloca un enlace de donación en lugar de intentar dirigirlos a otra parte.
1 |
function donate_shortcode( $atts ) { |
2 |
extract(shortcode_atts(array( |
3 |
'text' => 'Make a donation', |
4 |
'account' => 'REPLACE ME', |
5 |
'for' => '', |
6 |
), $atts)); |
7 |
|
8 |
global $post; |
9 |
|
10 |
if (!$for) $for = str_replace(" ","+",$post->post_title); |
11 |
|
12 |
return '<a class="donateLink" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation+for+'.$for.'">'.$text.'</a>'; |
13 |
|
14 |
}
|
15 |
add_shortcode('donate', 'donate_shortcode'); |
Uso
El shortcode de las donaciones no es solicitado dentro del mismo, sino a través de CSS agregado a la clase "donateLink" que se emplea para mostrar el enlace.
1 |
[donate] |
Un par de plugins increíbles con shortcodes
Los siguientes son shortcodes proporcionados a través de plugins, principalmente porque usan formas más avanzadas de configuración o código en el back-end. Muchos plugins tienen una licencia que te permitirá redistribuirlos, útil si quieres usar un shortcode concreto en el proyecto de un cliente. Aunque no ofrecen una funcionalidad que puedas simplemente pegar en un único archivo, ofrecen características que valen la pena aunque tengas que hacer instalaciones extra.
16. Invoca fácilmente texto que se repite
Este plugin crea un nuevo tipo de entrada en tu instalación de WordPress que te permitirá crear texto repetible que podrás invocar en cualquier momento vía shortcode. Al crear un boilerplate que gestiona tu aviso legal, podrás reutilizarlo posteriormente haciendo referencia al mismo en cualquier entrada.
Entre las ventajas de esta instalación se incluyen las etiquetas de plantilla que lo acompañan, por tanto puedes invocar los boilerplates desde los archivos del tema también.
Uso
El siguiente ejemplo muestra su uso más simple del shortcode, sin ninguno de los otros atributos que incluye y que están especificados en la documentación.
1 |
[boilerplate bytitle="Copyright"] |
17. Añadir un temporizador hacia atrás y hacia adelante
Espero que te hayas dado cuenta de en qué medida los shortcodes nos facilitan todo tipo de cosas. Como su propio nombre sugiere, Easy Timer nos permite insertar un temporizador hacia atrás o hacia adelante en tu blog, en cualquiera de los lenguajes incluidos.
Además de esta funcionalidad, el plugin sirve para programar la modificación de contenido que será ejecutada cuando el temporizador termine.
Uso
Los términos de uso están explicados en la página del plugin dentro de tu instalación WordPress, aunque son bastante sencillos como vamos veremos ahora.
1 |
[timer] |
2 |
[elapsed-timer] |
3 |
[remaining-timer] |
18. Añadir y gestionar un formulario de contacto fácilmente
Yo solía gestionar mi formulario de contacto a través de un shortcode cuando lo coloco en mis antiguas entradas. Este plugin te permitirá insertar un formulario en cualquier entrada o página a través de un shortcode que invocará el formulario que hayamos establecido en los ajustes del plugin. Tras mi experiencia con este plugin, puedo garantizar su utilidad cuando tenemos que repetir el mismo formulario múltiples veces, o cuando los tengamos que actualizar.
Uso
Como la configuración de este plugin se ejecuta principalmente desde el nuevo menú que agrega en el escritorio, todo lo que necesitamos para incrustar el formulario de contacto es un shortcode sin atributos.
1 |
[contact-form] |
Nota: Sí, existen cientos de otros plugins que usan un shortcode para insertar formularios. Este es uno más seleccionado de entre todo ellos. Consulta también Contact Form 7 y el popular Gravity Forms.
19. Crear códigos QR
¡Este es fantástico! El plugin Yeblon QR Code te permite generar un código QR a partir de un shortcode, con la URL y el tamaño definidos como atributos. Tus usuarios verán un código QR que podrán escanear y usar dentro de su contenido.
Puede que sea un poco "geeky", ¡pero también es estupendo!
Uso
Simplemente incluye el shortcode con un parámetro "url" (obviamente indica la url a la que debe dirigir tu shortcode) y "size" para definir la anchura y la altura del código QR. Puedes, además, añadir un atributo "class" y/o "style" para introducir estilos adicionales a tu código QR.
1 |
[yeblonqrcode size="200" url="http://wp.tutsplus.com"] |
20. Listar los archivos cargados
Por último, hemos llegado a un humilde plugin que nos permitirá enumerar en forma de lista todos los adjuntos relacionados con una entrada o una página; Ideal para añadir archivos sin tener que preocuparnos de añadir un montón de enlaces.
Uso
Este código puede ser utilizado tal cual o con algunos extras. Por ejemplo, el atributo "tipo" te permite limitar los resultados a un único tipo de archivo que hayamos indicado en el atributo. Los otros atributos disponibles están principalmente relacionados con la aplicación de estilos y la estructura que se usará para presentar el listado.
1 |
[list-attachments type="pdf"] |
¡Resumiendo!
Por supuesto, las posibilidades prácticas de los shortcodes son infinitas, y funcionan como método eficaz para ahorrar tiempo en tu labor diaria como blogger. Algunos de estos shortcodes parecen aburridos en la superficie (por ej., cuántas personas necesitan insertar un PDF de forma regular), pero si tenemos en cuenta que nos ayudarán a añadir funciones adicionales y ligeras en nuestros proyectos, merecen la pena. En algunos casos, como en el caso del generador de códigos QR, ¡es sencillamente fantástico!
Si conoces algún otro código que quieras compartir con todos nosotros, hazlo a través de un comentario en la siguiente sección.
By
