Articles

Dominar códigos cortos de WordPress

by admin
  • 9 min de lectura
  • WordPress,Essentials,Shortcodes,Techniques (WP)
  • Guardado para lectura sin conexión
  • Compartir en Twitter, LinkedIn
Introducido en WordPress 2.5, códigos cortos son poderosos, pero todavía bastante desconocido, WordPress funciones. Imagine que simplemente puede escribir » adsense «para mostrar un anuncio de AdSense o» post_count » para averiguar instantáneamente el número de publicaciones en su blog.

Los códigos cortos de WordPress pueden hacer esto y más y definitivamente harán que su vida de blogging sea más fácil. En este artículo, le mostraremos cómo crear y usar códigos cortos, así como proporcionar códigos cortos de WordPress listos para usar que mejorarán su experiencia de blogging.

También puede echar un vistazo a las siguientes publicaciones relacionadas:

  • Códigos cortos de WordPress: Una Guía Completa
  • Insertar Widgets con Códigos cortos
  • 10 Útiles Hacks de Bucle de WordPress

¿Qué son los códigos cortos?

Usar códigos cortos es muy fácil. Para usar uno, cree una nueva publicación (o edite una existente), cambie el editor al modo HTML y escriba un código corto entre paréntesis, como:

También es posible usar atributos con códigos cortos. Un código corto con atributos se vería algo como esto:

Los códigos cortos también pueden incrustar contenido, como se muestra aquí:

Smashing Magazine

Los códigos cortos son manejados por un conjunto de funciones introducidas en WordPress 2.5 llamadas API de código corto. Cuando se guarda una publicación, se analiza su contenido y la API de código corto transforma automáticamente los códigos cortos para realizar la función que están destinados a realizar.

Crear un código corto simple

Lo que hay que recordar con los códigos cortos es que son muy fáciles de crear. Si sabes cómo escribir una función básica de PHP, entonces ya sabes cómo crear un código corto de WordPress. Para el primero, vamos a crear el conocido mensaje «Hola, Mundo».

  1. Abra las funciones.archivo php en tu tema. Si el archivo no existe, créelo.

  2. Primero, tenemos que crear una función para devolver la cadena» Hello World». Pega esto en tus funciones.archivo php:

    function hello() { return 'Hello, World!';}

  3. Ahora que tenemos una función, tenemos que convertirlo en un shortcode. Gracias a la función add_shortcode(), esto es muy fácil de hacer. Pegue esta línea después de nuestra función hello(), luego guarde y cierre las funciones.archivo php:

    add_shortcode('hw', 'hello');

    El primer parámetro es el nombre del código corto, y el segundo es la función a llamar.

  4. Ahora que se ha creado el código corto, podemos usarlo en publicaciones de blog y en páginas. Para usarlo, simplemente cambie el editor al modo HTML y escriba lo siguiente:

    ¡Ya está! Por supuesto, este es un código corto muy básico, pero es un buen ejemplo de lo fácil que es crear uno.

Crear códigos cortos avanzados

Como se mencionó, los códigos cortos se pueden usar con atributos, que son muy útiles, por ejemplo, para pasar argumentos a funciones. En este ejemplo, te mostraremos cómo crear un código corto para mostrar una URL, al igual que lo harías con los códigos BBCode que se usan en foros como VBulletin y PHPBB.

  1. Abra sus funciones.archivo php. Pegue el siguiente función:

    function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}

  2. Vamos a poner la función en un shortcode:

    add_shortcode("url", "myUrl");

  3. El shortcode ya está creado. Puedes usarlo en tus publicaciones y páginas:

    WordPress recipes

    Cuando guardas una publicación, el código corto mostrará un enlace titulado «recetas de WordPress» y apuntando a http://www.wprecipes.com.

explicación del Código. Para funcionar correctamente, nuestra función de código corto debe manejar dos parámetros: $atts y $content$atts es el atributo(s) de código corto. En este ejemplo, el atributo se llama href y contiene un enlace a una URL. $content es el contenido del código corto, incrustado entre el dominio y el subdirectorio (es decir, entre «www.example.com» y «/ subdirectorio»). Como puede ver en el código, hemos dado valores predeterminados a content content y $atts.

Ahora que sabemos cómo crear y usar códigos cortos, ¡echemos un vistazo a algunos códigos cortos listos para usar!

Crear un «Enviar a Twitter» Shortcode

El problema. Parece que muchos de ustedes disfrutaron de mi hack de «Enviar a Twitter». También disfruté mucho de ese truco, pero tiene un inconveniente: si pegas el código en tu sencillo.archivo php, el enlace «Enviar a Twitter» estará visible en cada publicación, lo que puede que no desee. Sería mejor controlar este hack y poder especificar cuándo agregarlo a una publicación. La solución es simple: ¡un código corto!

La solución. Este código es fácil de crear. Básicamente, solo obtenemos el código del hack «Enviar a Twitter» y lo convertimos en una función PHP. Pegue el siguiente código en las funciones.archivo php en tu tema:

function twitt() { return '<div><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';}add_shortcode('twitter', 'twitt');

Para usar este código corto, simplemente cambie el editor al modo HTML y luego escriba:

y aparecerá un enlace «Enviar a Twitter» donde colocó el código corto.

  • Cómo: Crear una «enviar esto a twitter» botón
  • Twitter herramientas

Crear un «Suscribirse a RSS» Shortcode

El problema. Ya sabes que una muy buena manera de obtener suscriptores RSS es mostrar una caja de aspecto agradable que diga algo como «Suscríbete a la fuente RSS.»Pero, una vez más, realmente no queremos codificar algo en nuestro tema y perder el control de la forma en que aparece. En este hack, crearemos un código corto «Suscribirse a RSS». Visualízalo en algunos lugares y no en otros, en publicaciones o páginas, por encima o por debajo del contenido principal, todo depende de ti.

La solución. Como de costumbre, creamos una función y luego la convertimos en un código corto. Este código entra en sus funciones.archivo php. ¡No olvides reemplazar la URL del feed de ejemplo con la tuya propia!

function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';}add_shortcode('subscribe', 'subscribeRss');

Estilizar la caja. Probablemente haya notado la clase rss-box que se agregó al elemento div que contiene el enlace. Esto le permite diseñar la caja de la manera que desee. Aquí hay un ejemplo de algunos estilos CSS que puede aplicar a su caja de «Suscribirse a RSS». Simplemente pégalo en el estilo.archivo css en su tema:

.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}

Inserte Google AdSense En cualquier lugar

El problema. La mayoría de los bloggers usan Google AdSense. Es muy fácil incluir código AdSense en un archivo de tema como sidebar.php. Pero los marketers en línea exitosos saben que las personas hacen clic más en los anuncios que están incrustados en el contenido en sí.

La solución. Para incrustar AdSense en cualquier lugar de tus publicaciones o páginas, crea un código corto:

  1. Abre las funciones.archivo php en su tema y pegue el siguiente código. ¡No olvide modificar el código JavaScript con su propio código de AdSense!

    function showads() { return '<div><script type="text/javascript"><!-- google_ad_client = "pub-XXXXXXXXXXXXXX"; 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></div>';}add_shortcode('adsense', 'showads');

  2. una Vez que haya guardado funciones.php, puede usar el siguiente código corto para mostrar AdSense en cualquier lugar de sus mensajes y páginas:

    Tenga en cuenta que nuestro código de AdSense está envuelto con un elemento adsense div, podemos darle el estilo que queramos en nuestro estilo.archivo css.

explicación del Código. El código anterior se utiliza simplemente para mostrar anuncios de AdSense. Cuando el código corto se inserta en una publicación, devuelve un anuncio de AdSense. Es bastante fácil, pero también, estarás de acuerdo, ¡un ahorro de tiempo real!

Fuentes:

  • Cómo: Incrustar AdSense en cualquier lugar de sus publicaciones

Incrustar un lector RSS

El problema. Muchos lectores también parecían disfrutar de la publicación «8 Hacks RSS para WordPress» publicada recientemente en la revista Smashing. Ahora, usemos nuestro conocimiento de RSS y códigos cortos para incrustar un lector de RSS directamente en nuestras publicaciones y páginas.

La solución. Como de costumbre, para aplicar este truco, simplemente pegue el siguiente código en la función de su tema.archivo php.

//This file is needed to be able to use the wp_rss() function.include_once(ABSPATH.WPINC.'/rss.php');function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts)); return wp_rss($feed, $num);}add_shortcode('rss', 'readRss');

Para utilizar el código abreviado, escriba:

El feed atributo es la URL del feed para incrustar, y num es el número de elementos a mostrar.

Obtener publicaciones de la base de datos de WordPress con un código corto

El problema. ¿Alguna vez deseaste poder llamar a una lista de publicaciones relacionadas directamente en el editor de WordPress? Claro, el complemento «Publicaciones relacionadas» puede recuperar publicaciones relacionadas para ti, pero con un código corto puedes obtener fácilmente una lista de cualquier número de publicaciones de una categoría en particular.

La solución. Como de costumbre, pegue este código en sus funciones.archivo php.

function sc_liste($atts, $content = null) { extract(shortcode_atts(array( "num" => '5', "cat" => ’ ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='<ul>'; foreach($myposts as $post) : setup_postdata($post); $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>'; endforeach; $retour.='</ul> '; return $retour;}add_shortcode("list", "sc_liste");

Para usarlo, simplemente pegue lo siguiente en el editor de WordPress, después de cambiar al modo HTML:

Esto mostrará una lista de tres publicaciones de la categoría con un ID de 1. Si no sabes cómo obtener el ID de una categoría específica, aquí se explica una forma sencilla.

explicación del Código. Después de que se ha extraído los argumentos y creó la variable global $posts, el sc_liste() función utiliza la etiqueta get_posts() función con la etiqueta numberpostsorderorderby y category parámetros para obtener la X la mayoría de las publicaciones recientes de la categoría Y. Una vez hecho esto, las publicaciones se incrustan en una lista HTML desordenada y se te devuelven.

Fuente:

  1. WordPress: Creación de shortcode avancé

Obtener la Última Imagen Adjunta a un mensaje

El problema. En WordPress, las imágenes son bastante fáciles de manipular. Pero, ¿por qué no hacerlo aún más fácil? Veamos un código corto más complejo, uno que obtiene automáticamente la última imagen adjunta a una publicación.

La solución. Abra las funciones.archivo php y pegue el siguiente código:

function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata+2); $height = ($imagedata+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';}add_shortcode("postimage", "sc_postimage");

Para usar el código corto, simplemente escriba lo siguiente en el editor, cuando esté en modo HTML:

Explicación del código. La función sc_postimage() primero extrae los atributos del código corto. Luego, recupera la imagen utilizando las funciones de WordPress get_children()wp_get_attachment_image() y wp_get_attachment_image_src(). Una vez hecho esto, la imagen se devuelve e inserta en el contenido de la publicación.

Fuentes:

  1. Código corto de WordPress: mostrar fácilmente la última imagen que adjunto al post

El problema. Incluso si disfrutaste de este artículo, es posible que te hayas sentido un poco frustrado porque, de forma predeterminada, WordPress no permite insertar código corto en los widgets de la barra lateral. Afortunadamente, aquí hay un pequeño truco para mejorar la funcionalidad de WordPress y permitir que se usen códigos cortos en widgets de barra lateral.

La solución. Una pieza más de código para pegar en sus funciones.archivo php:

add_filter('widget_text', 'do_shortcode');

¡Eso es todo lo que necesita para permitir códigos cortos en los widgets de la barra lateral!

explicación del Código. Lo que hicimos aquí es bastante simple: agregamos un filtro en la función widget_text() para ejecutar la función do_shortcode(), que usa la API para ejecutar el código corto. Por lo tanto, los códigos cortos ahora están habilitados en los widgets de la barra lateral.

Editorial sensacional(al)