Marzo 13th, 2010
Tags: Comentarios, gravatar, programación, trucos
Posted in WordPress | Comentarios desactivados
He aquí un sencillo código para cuando queremos mostrar los últimos comentarios realizados en nuestro blog (en el índice del mismo, por ejemplo), a la vez que el Gravatar de sus autores:
Copiar y pegar en nuestro template (allí dónde más nos convenga)
Aquí estamos invocando los cinco últimos comentarios, lo cual podremos cambiar por el número deseado modificando la segunda línea del código.
Marzo 13th, 2010
Tags: Codex, código, Funciones, offset, php, programación, Tutoriales / Trucos, Wordpress.org
Posted in WordPress | Comentarios desactivados

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:
PHP:
-
query_posts('posts_per_page=5&offset=1');
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í:
PHP:
-
<?php
-
query_posts('posts_per_page=5&offset=1');
-
if ( have_posts() ) : while ( have_posts() ) : the_post();
-
?>

¿Te gustó este post? ¡Compártelo!
Marzo 12th, 2010
Tags: categorias, etiquetas, programación, Tags, trucos
Posted in WordPress | Comentarios desactivados
Si queremos, en algún espacio de nuestros templates (en los archivos, el índice, single.php…), proponer un conjunto de etiquetas que reúnan posts no sólo marcados con ellas, sino que pertenezcan a una misma categoría, tenemos aquí el código para conseguirlo.
Abriremos functions.php y pegaremos lo siguiente: (copiar y pegar)
A partir de aquí, en nuestro template (por ejemplo, index.php), escogeremos el lugar que creamos más conveniente para nuestras etiquetas y escribiremos la llamada a la función:
$args = array('categories' => '12,13,14');
$tags = get_category_tags($args);
Por supuesto, deberemos poner los tags de apertura y cierre de PHP.
De este modo, vamos a reunir etiquetas que hayan sido usadas en artículos bajo las categorías con ID 12, 13 y 14. La identidad numérica de cada categoría la sabremos sobrevolándola con el cursor del ratón en nuestro panel de Administración.
Créditos: foros de WordPress.org
Marzo 12th, 2010
Tags: Avanzado, Miniposts, Plecost, seguridad, Wordpress.org
Posted in WordPress | Comentarios desactivados
Marzo 11th, 2010
Tags: imágenes, programación, Shortcodes, trucos
Posted in WordPress | Comentarios desactivados
Para los más inquietos de nosotros, los que gustamos de subir por FTP un montón de imágenes a nuestro site con nombres de archivo fáciles y luego utilizarlas rápidamente cuando escribimos un artículo (sin las complicaciones del Media Uploader), tenemos a nuestra disposición un muy buen truco para acelerar esa inclusión.
Para ello, abriremos functions.php y pegaremos el siguiente código:
function image_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'name' => '',
'align' => 'right',
'ext' => 'png',
'path' => '/wp-content/uploads/',
'url' => ''
), $atts ) );
$file=ABSPATH."$path$name.$ext";
if (file_exists($file)) {
$size=getimagesize($file);
if ($size!==false) $size=$size[3];
$output = "<img src='".get_option('siteurl')."$path$name.$ext' alt='$name' $size align='$align' class='align$align' />";
if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
return $output;
}
else {
trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
return '';
}
}
add_shortcode('image','image_shortcode');
Este código debe, por supuesto, abrirse y cerrarse con los tags de apertura y cierre de PHP e incluirse al final de functions.php o bien entre las diversas funciones que allí ya tengamos especificadas.
Luego, en nuestros artículos, no tendremos más que escribir el siguiente shortcode:
[image name=Montevideo]
“Montevideo” es el nombre del archivo Montevideo.png.
Notad que aquí hemos permitido la inclusión de archivos en formato .png (pueden ser en .jpg pero lo tenéis que cambiar).
Esperamos que este truco sea de vuestra utilidad.
Marzo 11th, 2010
Tags: código, Experto, Funciones, functions, php, programación, Shortcodes, taxonomía, Tutoriales / Trucos, widgets, Wordpress.org
Posted in WordPress | Comentarios desactivados

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:
-
add_filter( 'widget_text', 'shortcode_unautop');
-
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:
-
<?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:
-
<?php
-
$content = get_the_content();
-
echo do_shortcode
($content);
-
?>
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:
-
add_filter( 'comment_text', 'shortcode_unautop');
-
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:
-
add_filter( 'the_excerpt', 'shortcode_unautop');
-
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:
-
<?php
-
// $user_id = 3;
-
$userdata = get_userdata($user_id);
-
echo do_shortcode
($userdata->
description);
-
?>
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:
-
add_filter( 'term_description', 'shortcode_unautop');
-
add_filter( 'term_description', 'do_shortcode' );
Un mundo de posibilidades más ¿no?

¿Te gustó este post? ¡Compártelo!
Marzo 10th, 2010
Tags: Comentarios, programación, trucos
Posted in WordPress | Comentarios desactivados
Muchas veces nos interesa disponer de una pequeña cantidad de código que, añadida a nuestros templates, haga innecesario depender de un plugin. Con ello, podremos maniobrar más fácilmente con el tema con el que estemos tratando.
Hoy veremos una manera rápida para mostrar nuestros comentarios recientes sin plugins ni widgets. Este código podremos pegarlo primero en functions.php y luego, con una nueva función lista para nosotros, directamente en nuestros templates (por ejemplo, al final de todo de sidebar.php o incluso en alguno de los apartados que conformen nuestro footer.php).
El código es el siguiente (copiar y pegar en functions.php)
Sólo nos queda invocar los últimos comentarios con el nuevo tag que se nos habrá creado : <?php recent_comments(); ?>
Si queremos cinco comentarios en vez de 10 (que es la cantidad por defecto), podemos especificarlo así :
<?php recent_comments(‘5′); ?>
Esperamos que os resulte de interés.
Marzo 9th, 2010
Tags: plugins, SEO
Posted in WordPress | Comentarios desactivados
Atraer lectores a tu blog seguro que es uno de tus objetivos: si no el más importante, uno de los que tienes en cuenta. Esto puedes hacerlo con plugins sociales, que son muy prácticos para que los usuarios que ya tienes den a conocer tu contenido en sus redes sociales.
No obstante, hay otras formas importantes a tener en cuenta, y una de ellas es el Search Engine Optimization (SEO) o Optimización para Buscadores. El SEO es el nombre asignado al conjunto de técnicas que son desarrolladas para poder mejorar el posicionamiento de una página web o blog en los buscadores. De esta forma, saldremos más arriba en los buscadores cuando los usuarios escriban nuestras palabras clave, de forma que llegarán más fácilmente a nuestro blog.
El SEO no es una ciencia exacta, ni mucho menos, principalmente porque los buscadores como Google no publican sus criterios exactos de posicionamiento. Además, dichos criterios son distintos para cada buscador y pueden ir cambiando con el tiempo. Aún así, hay un plugin que creo imprescindible para que tu blog esté bien posicionado: All In One SEO Pack.
All In One SEO Pack realiza los ajustes básicos de SEO automáticamente. Aunque puede parecer un poco mágico, este plugin sólo inserta el título del post, las palabras clave y la descripción en el header de tu página, automatizando un trabajo que podría ser muy tedioso y que es realmente importante para el posicionamiento. Además, puede gestionar los atributos de las imágenes y enlaces de forma eficaz y automática.
Otro plugin muy interesante es WP-Canonical, que evita que los buscadores consideren contenido duplicado en tu blog: para ellos, no es lo mismo cuando un post sale en la página principal que cuando sale en los archivos o en las categorías, así que lo mejor es indicarle a los buscadores que realmente es lo mismo con la etiqueta canonical de HTML. Este plugin lo hace todo automáticamente.
Aún así, recuerda que para que tu blog salga bien en los buscadores no sólo tienes que instalar estos plugins. Hay muchas otras cosas que puedes hacer, que iremos contando poco a poco en el blog; pero especialmente debes centrarte en la creación de contenido de calidad. ¿Quieres que tratemos algún tema en concreto? ¡Coméntalo!
Fuentes: Blog Pocket, My Ink Blog, Ias-Symposium
Marzo 8th, 2010
Tags: Apple, CSS, diseño, Experto, iphone, iPod, javascript, php, programación, Safari, SMS, Tutoriales / Trucos, Wordpress.org
Posted in WordPress | Comentarios desactivados

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:
-
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
-
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
-
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
-
}
-
}
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:
-
if(strstr($_SERVER['HTTP_USER_AGENT'],
'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],
'iPod')) {
-
header('Location: http://yoursite.com/iphone');
-
-
}
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:
-
<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:
-
<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:
-
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-
-webkit-text-size-adjust:none;
-
}
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:
-
window.onload = function initialLoad() {
-
updateOrientation();
-
}
-
-
function updateOrientation(){
-
var contentType = "show_";
-
switch(window.orientation){
-
case 0:
-
contentType += "normal";
-
break;
-
-
case -90:
-
contentType += "right";
-
break;
-
-
case 90:
-
contentType += "left";
-
break;
-
-
case 180:
-
contentType += "flipped";
-
break;
-
}
-
document.getElementById("page_wrapper").setAttribute("class", contentType);
-
}
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:
-
@media screen and (max-device-width: 480px){
-
/* Todo el CSS para iPhone va aqui */
-
}
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:
-
@media screen and (max-device-width: 480px){
-
img{
-
max-width:100%;
-
height:auto;
-
}
-
}
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:
-
window.addEventListener('load', function() {
-
setTimeout(scrollTo, 0, 0, 1);
-
}, 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:
-
<a href="tel:12345678900">Llámame
</a>
HTML:
-
<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:
-
var myLinks = document.getElementsByTagName('a');
-
for(var i = 0; i <myLinks.length; i++){
-
myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
-
myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
-
}
Tras añadir el código anterior puedes aplicar algo de estilo CSS:
CSS:
-
a:hover, a.hover {
-
/* el efecto hover que sea*/
-
}
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

¿Te gustó este post? ¡Compártelo!
Marzo 8th, 2010
Tags: Comentarios, Entradas, Posts, programación, trucos
Posted in WordPress | Comentarios desactivados
Sin necesidad de utilizar ningún plugin, tenemos a nuestra disposición un buen método para listar, según el número de comentarios, nuestros posts más populares (o los más comentados, según queramos enfocarlo con el título que demos a la lista).
No tendremos más que dirigirnos a la barra lateral (sidebar.php; o pie de página, footer.php) de nuestro tema de WordPress y editarla (recomendamos como siempre a Notepad++ para escribir código) con el siguiente snippet:
Copiar y pegar en nuestro template.
Con este código estamos realizando un sondeo general a nuestra base de datos tomando los 7 posts con más comentarios, preparando sus títulos, URLs y número exacto de comentarios que tengan, y disponiéndolo todo en una lista que deberemos por supuesto “decorar” con CSS a nuestro gusto.
Con este método, quedamos como reyes porque no necesitamos largos cálculos para entender cuál de nuestros posts es más visualizado y reservamos al lector un poco de discusión con todos los comentarios que allí se mostrarán al acabar la lectura principal.