Planeta WordPress

Una de las funciones más utilizadas en los temas estilo revista, sobre todo de aquellos que disponen de un bloque de entradas destacadas, es la de excluir la última entrada (o varias de las últimas) del loop de la portada de tu sitio.

Y es algo bastante sencillo usando el parámetro 'offset' de la función 'query_posts'. Lo único que tienes que hacer es añadir la siguiente línea al loop de la portada que muestra los últimos posts:

En este ejemplo lo que hacemos es indicar que muestre los 5 últimos posts pero excluyendo el más reciente, definido en "offset=1".

Un ejemplo del código aplicado al loop sería así:

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:

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:

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:

Shortcodes en comentarios

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

Shortcodes en extractos

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

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:

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:

Un mundo de posibilidades más ¿no?

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.

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.

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):

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:

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.

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)

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:

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.

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:

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:

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:

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

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:

Guía para Administrar Wordpress

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:

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

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:

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

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?

WordPress, por defecto, envía al ordenador del usuario nuestro site en HTML descomprimido. Es decir, tal cual, de modo que el navegador de nuestros visitantes debe realizar algo más de trabajo que si nuestro HTML estuviera totalmente compactado.

Usando zlib, una librería nativa de PHP, podremos comprimir los archivos que enviemos de forma notable y con ello dar más potencia y rapidez a nuestro site.

Para ello, vamos primero a hacer un test y comprobar que nuestro servidor tiene instalado el módulo de zlib para nosotros: creamos un archivo llamado index.php y pegamos en él lo siguiente:

<? php phpinfo (); ?>

Recordemos quitar el espacio en la apertura del php, añadido aquí a efectos de muestra. Luego lo subimos a una nueva carpeta en nuestro host llamada /test-zlib, y apuntamos nuestro navegador hasta dicho archivo, para ver si nuestra configuración tiene disponible zlib o no.

Si es el caso, iremos al header.php de nuestro tema en uso y pegaremos, antes del DOCTYPE (inicio del HTML), lo siguiente :

<? php
ini_set ('zlib.output_compression', 'On') ;
ini_set ('zlib.output_compression_level', '1') ;
?>

Guardamos y regresamos a nuestro site. Ahora deberíamos poder disfrutar de nuestro HTML ‘comprimido’ de más rápida carga.

Si queréis verificar con detalle cuánto ancho de banda nos ahorra este truco, podréis hacer la comparación por ejemplo en: http://www.port80software.com

Esperamos vuestros comentarios comentarios.

WordPress, por defecto, envía al ordenador del usuario nuestro site en HTML descomprimido. Es decir, tal cual, de modo que el navegador de nuestros visitantes debe realizar algo más de trabajo que si nuestro HTML estuviera totalmente compactado.

Usando zlib, una librería nativa de PHP, podremos comprimir los archivos que enviemos de forma notable y con ello dar más potencia y rapidez a nuestro site.

Para ello, vamos primero a hacer un test y comprobar que nuestro servidor tiene instalado el módulo de zlib para nosotros: creamos un archivo llamado index.php y pegamos en él lo siguiente:

<? php phpinfo (); ?>

Recordemos quitar el espacio en la apertura del php, añadido aquí a efectos de muestra. Luego lo subimos a una nueva carpeta en nuestro host llamada /test-zlib, y apuntamos nuestro navegador hasta dicho archivo, para ver si nuestra configuración tiene disponible zlib o no.

Si es el caso, iremos al header.php de nuestro tema en uso y pegaremos, antes del DOCTYPE (inicio del HTML), lo siguiente :

<? php
ini_set ('zlib.output_compression', 'On') ;
ini_set ('zlib.output_compression_level', '1') ;
?>

Guardamos y regresamos a nuestro site. Ahora deberíamos poder disfrutar de nuestro HTML ‘comprimido’ de más rápida carga.

Si queréis verificar con detalle cuánto ancho de banda nos ahorra este truco, podréis hacer la comparación por ejemplo en: http://www.port80software.com

Esperamos vuestros comentarios comentarios.

Me acaba de avisar Sebastián Barría que ha liberado un nuevo plugin: ThumbGen. Lo que ofrece esta pieza de código es autogenerar miniaturas desde cualquier imagen cargada en tu WordPress.

No es, eso si, un plugin para el público recién llegado a WordPress sino dirigido a desarrolladores que quieran incorporar la función que habilita el plugin: thumbGen().

Usarlo, no obstante, es bastante sencillo. Solo tienes que descargarlo, subirlo y activarlo, o instalarlo sin salir de WordPress.

En la página oficial del plugin tienes el modo de uso, que Sebastián promete traducir al español pronto, pero vamos, que no es complicado, solo son unos parámetros a aplicar dependiendo de como quieres que se genere y/o ajuste la miniatura.

La sintáxis básica es esta:

Un ejemplo sería este:

En este ejemplo se lee la primera imagen de la entrada y guarda su información en una variable llamada $img. En la función thumbGen el primer parámetro es $img[0] que es la url de la imagen. El segundo y tercer parámetros son el ancho y la altura de la miniatura generada. El resto de los parámetros son el recorte (crop) y las opciones de centrado y escala de grises.

En cualquier caso una gran aportación de la comunidad hispana a WordPress que, por supuesto, estoy encantado de compartir. A ver si se animan más de los estupendos desarrolladores que hay.

Contenido exclusivo para suscriptores al Feed

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

Guía Domina tu Blog

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í:

Solo tienes que cambiarla por esto otro:

Resaltar los resultados de la búsqueda:

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

Y ahora la sustituyes por esto otro:

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

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.