Posts Tagged: Tutoriales / Trucos

Marzo 11th, 2010

Usando shortcodes en todas partes

hack wordpress

Ya hemos visto muchas maneras de personalizar WordPress con shortcodes pero estas pequeñas maravillas pueden usarse en muchos más sitios que en el editor de entradas, aquí tienes unos cuantos buenos ejemplos … 

Shorcodes en widgets de texto

Lo primero es añadir este código al fichero functions.php de tu tema activo:

PHP:
  1. add_filter( 'widget_text', 'shortcode_unautop');
  2. add_filter( 'widget_text', 'do_shortcode');

La segunda línea es la que hace que funcionen los shortcodes en el widget de texto. Además, hay que tener en cuenta que los widgets de texto tienen una casilla para "añadir saltos de párrafo automáticamente", pues bien, la segunda linea inhabilita el código autop que podría, en caso de estar marcada la casilla, meter el shortcode introducido en un párrafo o incluso romper las tags.

Shortcodes en el tema

También se pueden usar shortcodes en el tema que uses. Para ello utilizamos la función do_shortcode() en la que el argumento será una cadena que contendrá el shortcode.

Por ejemplo, para mostrar el shortcode [publicidad] en tu tema pondrías algo así donde quieras que aparezca el resultado esperado:

PHP:
  1. <?php do_shortcode('[publicidad]'); ?>

La función do_shortcode() acepta cualquier tipo de texto. Si la cadena contiene un shortcode procesará ese código. De este modo, por ejemplo, podrías mostrar manualmente contenido de tus entradas de este modo:

PHP:
  1. <?php
  2. $content = get_the_content();
  3. echo do_shortcode($content);
  4. ?>

Shortcodes en comentarios

De nuevo recurrimos al fichero functions.php para añadirle este código que permite shortcodes en los campos de comentarios:

PHP:
  1. add_filter( 'comment_text', 'shortcode_unautop');
  2. add_filter( 'comment_text', 'do_shortcode' );

Shortcodes en extractos

Ahora, en functions.php añadiremos esto para poder insertar shortcodes en los extractos de entrada:

PHP:
  1. add_filter( 'the_excerpt', 'shortcode_unautop');
  2. add_filter( 'the_excerpt', 'do_shortcode');

Shortcodes en la descripción de usuario

Para poder meter shortcodes en la descripción del usuario hay que pasar la cadena de descripción por la función do_shortcode(). Para ello tendrás que añadir esto a tu tema activo:

PHP:
  1. <?php
  2. // $user_id = 3;
  3. $userdata = get_userdata($user_id);
  4. echo do_shortcode($userdata->description);
  5. ?>

Solo tendrás que cambiar el ID de usuario, en este caso el 3.

Shortcodes en descripciones de etiquetas, categorías y taxonomías

También puedes filtrar estas descripciones. Para ello recurrimos de nuevo al fichero functions.php:

PHP:
  1. add_filter( 'term_description', 'shortcode_unautop');
  2. add_filter( 'term_description', 'do_shortcode' );

Un mundo de posibilidades más ¿no?

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Marzo 8th, 2010

Prepara tu sitio para iPhone

Impresionante la recopilación realizada por Cats who code sobre códigos con los que adaptar tu sitio a la visualización en iPhone. Como creo que es de un gran interés para desarrolladores y usuarios avanzados y que, por supuesto, son aplicables a WordPress, aquí los tienes con alguna adaptación a nuestro entorno:

Detectar iPhones e iPods usando Javascript

Al desarrollar para iPhone o iPod Touch lo primero que hay que hacer es detectarlo para que, luego, le apliquemos códigos o estilos. El siguiente código d etecta iPhones o iPods usando Javascript, y los redirige a una página  específica para iPhone.

JavaScript:
  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  2.     if (document.cookie.indexOf("iphone_redirect=false") == -1) {
  3.         window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
  4.     }
  5. }

Fuente: http://davidwalsh.name/detect-iphone

Detectar iPhones e iPods usando PHP

Aunque el código anterior funciona de maravilla puede que Javascript esté desactivado en el iPhone. Si fuera el caso puedes usar PHP para detectar iPhones o iPods Touch.

PHP:
  1. if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
  2.     header('Location: http://yoursite.com/iphone');
  3.     exit();
  4. }

Fuente: http://davidwalsh.name/detect-iphone

Definir el ancho de iPhone como viewport

En muchas ocasiones visitas una web con tu iPhone y la ves en miniatura. La razón es que el desarrollador olvidó definir el viewport (o no sabe que existe). La declaración de width=device-width te permite definir el ancho del documento al ancho de la pantalla del iPhone. Las otras dos declaraciones son muy útiles si estás desarrollando un sitio  "solo para iPhone". En caso contrario puedes borrar estas dos declaraciones.
Definir un viewport es fácil: Simplemente inserta el siguiente meta en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa):

PHP:
  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Insertar un icono específico para iPhone

Cuando un usuario añade tu web a su página de inicio el iPhone usa una captura de pantalla de tu sitio como icono. Pero tu puedes ofrecer un icono específico, lo que es mucho mejor.
Definir un icono personalizado para iPhone es fácil: Simplemente pega el siguiente código en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa). La imagen debe ser de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:

PHP:
  1. <rel="apple-touch-icon" href="images/template/engage.png"/>

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Evitar que Safari ajuste el tamaño de texto al rotar

Cuando rotas el iPhone, Safarie ajusta el tamaño de texto. Si por algún motivo prefieres evitar este efecto solo tienes que usar el siguiente CSS, que tendrás que añadir a tu hoja de estilos (fichero "style.css" de tu plantilla activa).
La declaración -webkit-text-size-adjust es una propiedad CSS exclusiva de webkit que permite controlar el ajuste de texto.

CSS:
  1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  2.     -webkit-text-size-adjust:none;
  3. }

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Detectar la orientación del iPhone

Como el iPhone permite ver la página en vertical o apaisdo puede que necesites detectar en qué modo el documento será visible.
Esta función Javascript detecta la orientación actual del iPhone y aplica una clase CSS específica para cada modo de orientación. Fíjate que en este ejemplo la clase CSS se añade al ID del  page_wrapper. Remplázalo por el nombre de ID deseado (línea 24)

CSS:
  1. window.onload = function initialLoad() {
  2.     updateOrientation();
  3. }
  4.  
  5. function updateOrientation(){
  6.     var contentType = "show_";
  7.     switch(window.orientation){
  8.         case 0:
  9.     contentType += "normal";
  10.     break;
  11.  
  12.     case -90:
  13.     contentType += "right";
  14.     break;
  15.  
  16.     case 90:
  17.     contentType += "left";
  18.     break;
  19.  
  20.     case 180:
  21.     contentType += "flipped";
  22.     break;
  23.     }
  24.     document.getElementById("page_wrapper").setAttribute("class", contentType);
  25. }

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Aplicar estilos CSS solo para iPhones/iPods

Si buscas un modo limpio de aplicar clases CSS solo para iPhone puedes usar el siguiente código:

CSS:
  1. @media screen and (max-device-width: 480px){
  2.     /* Todo el CSS para iPhone va aqui */
  3. }

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Redimensionar imágenes automáticamente para iPhones

En las webs actuales la mayoría de las imágenes suelen ser de un ancho superior a 480px. Al ser de este tamaño la pantalla del iPhone puede que las imágenes más grandes se vean incorrectamente, incluso destrozando el diseño de tu sitio.

Pues bien, usando el siguiente código CSS podrás redimensionar automáticamente las imágenes que sean de un ancho mayor de 480px, el ancho estándar del iPhone, con lo que nunca se verán más anchas y no desconfigurarán tu sitio al visualizarse en un iPhone.

CSS:
  1. @media screen and (max-device-width: 480px){
  2.     img{
  3.         max-width:100%;
  4.         height:auto;
  5.     }
  6. }

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Ocultar la barra de tareas por defecto

La barra de tareas es útil pero a veces ocupa demasiado sitio, que vendría estupendo para mostrar mejor tu web. Si quieres que Safari oculte la barra por defecto cuando un usuario de iPhone visite tu sitio solo tienes que añadir el siguiente Javascript:

JavaScript:
  1. window.addEventListener('load', function() {
  2.     setTimeout(scrollTo, 0, 0, 1);
  3. }, false);

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/2

Usar enlaces especiales

Al igual que con los enlaces "mailto", tan útiles para que te envíen emails, si se visualiza tu web con un iPhone puedes añadir otro tipo de enlaces que ejecutarán acciones, gracias a la función de teléfono de este miniordenador de bolsillo.

Si quieres ofrecer enlaces para que te llamen o te envíen un SMS puedes usar códigos html de este tipo:

HTML:
  1. <a href="tel:12345678900">Llámame</a>

HTML:
  1. <a href="sms:12345678900">Mándame un SMS</a>

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/3

Simular la clase pseudo :hover

Como no se usa ratón en el iPhone no se utiliza la pseudo clase :hover. Sin embargo,  usando Javascript puedes simular la clase pseudo :hover cuando el usuario apoye el dedo sobre un enlace:

JavaScript:
  1. var myLinks = document.getElementsByTagName('a');
  2. for(var i = 0; i <myLinks.length; i++){
  3.    myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
  4.    myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
  5. }

Tras añadir el código anterior puedes aplicar algo de estilo CSS:

CSS:
  1. a:hover, a.hover {
  2.     /* el efecto hover que sea*/
  3. }

Fuente: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía para Administrar Wordpress

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Marzo 6th, 2010

Compartir en Facebook desde Wordpress.com

Si tienes un blog alojado en WordPress.com ya no necesitas visitar tu perfil de Facebook para añadir un enlace a tus publicaciones más recientes, puedes hacerlo desde el tablero de tu WordPress.

Solo tienes que ir al apartado "Mis tableros -> Gestionar blogs" desde la barra de WordPress.com y verás la nueva opción que se suma a la de compartir en Twitter o Yahoo, en concreto la de divulgar en Facebook.

Una vez ahí solo tienes que marcar la casilla de Facebook y se inicia el proceso (en dos ventanas) de autorización de tu cuenta de Facebook para publicar las publicaciones.

Fácil ¿eh?

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Marzo 4th, 2010

PubsubHubbub en WordPress

Si tienes un blog alojado en WordPress.com ya tienes RSS en tiempo real con PubsubHubbub, el protocolo que cambia el modo en que funciona la comunicación entre los clientes RSS y los feeds.

Si hasta ahora el cliente, por decirlo así, preguntaba al feed por si había información nueva, ahora, con PubsubHubbub el cliente simplemente está a la escucha, y es este protocolo quien le envía la información, lo que hace que la información aparezca en tiempo real, nada más publicarse, en nuestro caso desde WordPress.

Como he dicho al principio, en WordPress.com ya está habilitado, pero en tu WordPress alojado también puedes habilitar este sistema, instalando el plugin PushPress, que manda los "push" directamente, sin necesidad de servicios externos (digo esto porque otros plugins usan servicios externos, este lo hace directamente). ¿Que no quieres instalar otro plugin?, pues también puedes activarlo si usas Feedburner como redirección de tus feeds. Solo tendrás que activar la opción llamada "Pingshot" de la pestaña "Publicize" para tenerlo disponible.

Si usas Google Reader ya estás usando PubsubHubbub ¿a que no lo sabías? ¿o si?, y es que los compartidos de Google Reader ya funcionan con el sistema "push" para feeds. Para el resto de clientes habrá que esperar a que se extienda el sistema, pero con la apuesta de WordPress verás como será pronto.

Así que ¡a por ello! o ¿ya tenías habilitado PubsubHubbub?

Si aún te quedan dudas de qué es esto impronunciable aquí te dejo un vídeo y una imagen que lo explican … 

Imagen cortesía de Readwriteweb

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Marzo 1st, 2010

Ocultar la versión de WordPress de manera “elegante”

Hay muchas maneras de ocultar la versión de WordPress a miradas indiscretas. Ya hemos hablado de borrar el fichero readme.html y añadiendo la función remove_action, pero son soluciones incompletas en realidad pues no eliminan, por ejemplo, las referencias al número de versión, de tus feeds RSS. Cualquier hacker lo sabe ¿por qué no tu?

Una solución mucho más limpia, segura, efectiva y elegante es añadir el siguiente código al fichero functions.php de tu tema activo:

PHP:
  1. //Elimina referencias a la version de WordPress
  2. function quitar_version_wp() {
  3. return '';
  4. }
  5. add_filter('the_generator', 'quitar_version_wp');

De este modo el número de versión de WordPress no se mostrará en ninguna parte de WordPress, será totalmente opaco.

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Marzo 1st, 2010

Visualizador de PDFs mediante shortcode

Si quieres aprovechar el visualizador de Google Docs, y cargar tus propios PDF, alojados en tu servidor, sin tener que subirlos a Google Docs, puedes hacerlo creando un shortcode que use esta funcionalidad.

Para ello solo tienes que hacer lo siguiente:

1. Añade este código al fichero functions.php de tu tema activo:

PHP:
  1. function pdflink($attr, $content) {
  2.     return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
  3. }
  4. add_shortcode('pdf', 'pdflink');

2. Usa el shortcode recién creado para cargar tus pdf de este modo:

HTML:
  1. [pdf href="http://tusitio.com/documentos/midocumento.pdf"]Enlace directo al PDF[/pdf]

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 26th, 2010

Como incluir shortcode en tu post sin que se ejecuten

Si alguna vez has intentado incluir un shortcode como ejemplo en alguno de tus post, y dicho shortcode esta activo en nuestro blog, sabemos la pesadilla a la que nos enfrentamos: el shortcode se ejecutará aun cuando lo pongamos entre <code></code>

El error que cometemos es este: insertamos el shortcode completo ignorando (u olvidando) que el encargado de ejecutarlo es código PHP, el cual procesa el shortcode y envía el resultado, ignorando por completo los <code></code> en los que esta envuelto.

La solución es separar el shortcode, pero no con espacios, sino con los mismos <code></code>. Por ejemplo:

Para obtener este resultado:
[shortcode]

Debemos escribir el código de esta forma:
<code>[<code>shortcode</code>]</code>

Básicamente lo que hacemos es separar el shortcode, pero en lugar de utilizar espacios, utilizamos unos <code></code> extras.

¿Simple, no?

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 22nd, 2010

Añadir número de resultados y resaltado a las búsquedas

Hay muchas cosas que puedes hacer con los resultados de búsqueda pero estos 2 trucos quizás sean de los más requeridos. Es fácil, apunta …

Añadir número de resultados de búsqueda encontrados:

En el fichero search.php de tu plantilla normalmente encontrarás una línea así:

PHP:
  1. <h2 class="pagetitle">Resultados de búsqueda</h2>

Solo tienes que cambiarla por esto otro:

PHP:
  1. <h2 class="pagetitle">Resultados de búsqueda para <?php /* Contador de busqueda */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span class="search-terms">'); echo $key; _e('</span>'); _e(' &mdash; '); echo $count . ' '; _e('entradas'); wp_reset_query(); ?></h2>

Resaltar los resultados de la búsqueda:

De nuevo en search.php, pero esta vez busca esta línea … 

PHP:
  1. <?php the_title(); ?>

Y ahora la sustituyes por esto otro:

PHP:
  1. <?php echo $title; ?>

Y, lo más importante, antes de esa línea añades el siguiente código:

PHP:
  1. <?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title); ?>

En este ejemplo sencillo lo que haces es poner en negrita el texto encontrado, pero puedes sustituir la "class" por la que tu quieras, añadiendo color o lo que más te guste.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 17th, 2010

Miniaturas en el menú de entradas

Curioso, aunque no sé si práctico, este truco que permite visualizar las miniaturas de entrada introducidas a partir de WordPress 2.9, también en la ventana de administración de entradas.

Para obtener el resultado de la captura solo tienes que añadir el siguiente código al fichero functions.php de tu tema activo:

PHP:
  1. //miniaturas en admin de entradas
  2. if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
  3.  
  4.     // para entrada y página
  5.     add_theme_support('post-thumbnails', array( 'post', 'page' ) );
  6.  
  7.     function fb_AddThumbColumn($cols) {
  8.  
  9.         $cols['thumbnail'] = __('Miniatura');
  10.  
  11.         return $cols;
  12.     }
  13.  
  14.     function fb_AddThumbValue($column_name, $post_id) {
  15.  
  16.             $width = (int) 35;
  17.             $height = (int) 35;
  18.  
  19.             if ( 'thumbnail' == $column_name ) {
  20.                 // miniatura de WP 2.9
  21.                 $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
  22.                 // imagen de la galería
  23.                 $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
  24.                 if ($thumbnail_id)
  25.                     $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
  26.                 elseif ($attachments) {
  27.                     foreach ( $attachments as $attachment_id => $attachment ) {
  28.                         $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
  29.                     }
  30.                 }
  31.                     if ( isset($thumb) && $thumb ) {
  32.                         echo $thumb;
  33.                     } else {
  34.                         echo __('Ninguna');
  35.                     }
  36.             }
  37.     }
  38.  
  39.     // para entradas
  40.     add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
  41.     add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
  42.  
  43.     // para páginas
  44.     add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
  45.     add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
  46. }

Una vez guardes los cambios añade una columna adicional en la que, si has definido una miniatura de entrada, la mostrará.

Se me antoja útil para identificar rápidamente entradas sin leer los títulos, por ejemplo ¿se te ocurre alguna otra utilidad¿

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 12th, 2010

Enviar a Google Buzz desde WordPress

Ya sabrás que es el servicio de la semana, y seguramente del año. Google Buzz está llamado a ser la gran competencia de servicios como Twitter, Foursquare o Friendfeed, así que más vale que estemos preparados.

Añadir a tu sitio un enlace para compartir en Buzz es bien sencillo, solo tienes que añadir el siguiente código en el fichero single.php, page.php, index.php o donde quieras que aparezca:

HTML:
  1. <a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&srcURL=<?php bloginfo(‘url’); ?>&srcTitle=<?php the_title(); ?>&title=<?php the_title(); ?>">¡Enviar a Buzz!</a>

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!