]]> Pensarás que es una chorrada pero no, no es ninguna tontería, y te lo voy a explicar … si es que quieres estar al día claro. Si eres de los antiguos y no quieres progresar pasa de esta entrada.

Como ya sabrás, al insertar una imagen desde el cargador de archivos en el editor de WordPress se añaden automáticamente los atributos HTML width y height que indican el tamaño en el que se mostrará la imagen en tu tema activo, para eso, para que se adapte al ancho del tema y no quede horrible, pero esto ya lo sabías ¿no?.

Pues bien, esto ya es cosa antigua …

Con los nuevos diseños adaptables (o como se les denomina en inglés “responsive“), que se adaptan al navegador e incluso dispositivo desde el que se está visualizando una web, no tiene sentido definir atributos fijos de ancho y alto de imágenes, pues el tema se adaptará, como todos los elementos del contenido, al tamaño del dispositivo lector, sea este un ordenador, un smartphone o un iPad, mola ¿eh?.

¿Entiendes ya porque es posible que sea interesante eliminar – por defecto – los atributos width y height que el cargador de archivos inserta en el editor?. Pues eso, que si usas un tema con diseño adaptable no necesitas algo como esto:

<img src="ruta/a/tu/imagen" width="500" height="600" class="aligncenter size-full" alt="" title="">

Para eliminar por defecto los atributos que te sobrarán en un diseño adaptable sólo tienes que añadir el siguiente código al archivo functions.php de tu tema:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Guardas y ya está. La próxima vez que insertes una imagen en tu editor ya no añadirá los atributos width y height, que de eso ya se ocupará tu tema adaptable (o “responsive“, como prefieras llamarlo)

]]>

El tema por defecto de WordPress, Twenty Eleven, tiene incorporada la funcionalidad de entradas destacadas, que las mostrará en un deslizador, pero no es obvio su uso.

Si quieres aprovechar esta funcionalidad no hay ajuste que modificar ni opción que activar, solo tienes que tener en cuenta lo siguiente para activarla:

1. Crea una nueva página usando como plantilla la denominada “Showcase template” en el widget de “Atributos de página”
   
2. En “Ajustes de lectura” de tu WordPress elige mostrar una página estática en portada, y eliges la página recién creada con la plantilla showcase
   
3. Marca como “sticky” las entradas que quieres que aparezcan en el deslizador
   
4. Añade una imagen destacada en la entrada, que será la que se mostrará en el deslizador. Si la imagen es del tamaño máximo (1000×288 pixels) o mayor se mostrará como fondo del área del deslizador, con el título de la entrada sobre la misma. Si es menor aparecerá a la derecha del área, con el título y el extracto a la izquierda de la misma. También debes saber que si la imagen destacada es igual o mayor que el tamaño máximo, en la plantilla de entrada simple esta reemplazará la imagen de cabecera
   

Hasta aquí como activar el deslizador, pero este tiene una característica que puedes cambiar. Y es que por defecto no tiene movimiento automático, sino que se muestran unos puntos en los que debes hacer clic para cambiar de una entrada destacada (sticky) a otra.

Si quieres que el deslizador avance automáticamente debes añadir un poco de código, este:

<script type="text/javascript" charset="utf-8">
    // Avance automático del deslizador de Twenty Eleven
    // Fuente: http://pastebin.com/s6JEthVi
    jQuery(document).ready(function(){
        var change_every = 10; // Los segundos que el deslizador tardará en hacer el avance automático
        var current = 1;
        function auto_advance(){
            if(current == -1) return false;
            jQuery('.feature-slider a').eq(current % jQuery('.feature-slider a').length).trigger('click', [true]);
            current++;
        };
        setInterval(function(){auto_advance()}, change_every * 1000);
    });
</script>

Este código debes añadirlo, bien en la plantilla de página de “showcase” o si lo prefieres en el widget de “showcase”, pero sin ponerle título, funcionará igual.

Nota: este truco último no funciona en wordpress.com, pues está limitada la inserción de código script

]]> Si eres de los que te gusta “tunear” a tope WordPress seguro que te encantará saber que es tremendamente sencillo definir un fondo para tu tema, diferente para una página estática o una entrada.

Además, para seguir con las buenas noticias, no necesitas modificar tu tema, ni escribir ni una sola línea de código, sin tocar el CSS. Lo único que necesitas es instalar el plugin Background per page.

Una vez activo tendrás una pantalla nueva bajo el menú “Apariencia” en la que definir un fondo a tu gusto para todo el body, el contenido de entradas o de páginas.

También puedes definir el patrón de repetición de una imagen e incluso que tenga degradado, todo a golpe de clic.

]]>

Es una de las preguntas más leídas en los foros WordPress, la que provoca la curiosidad cuando vemos una web que nos gusta y nos preguntamos ¿Qué tema WordPress usa esa web?.

Y, aunque no es fácil siempre adivinar el tema que usa una web, pues en muchas ocasiones se cambian referencias al mismo, si tenemos algunos trucos para tratar de adivinarlo cuando no hay ninguna referencia al tema usado en la misma web, algo bastante común.

1. Ver código fuente

El primer método para adivinar el tema que suelo usar es ver el código fuente de la web en cuestión. Desde el clic derecho de cualquier navegador moderno tenemos acceso a ver el código de la web que estamos visualizando, y una simple búsqueda por la cadena “wp-content/themes/” nos “soplará” el nombre de la carpeta del tema activo en la primera referencia al mismo, que normalmente suele estar en la cabecera del código, en la llamada a la hoja de estilos …

2. Inspeccionar elemento de cabecera de hoja de estilos

Un método similar es acceder a la utilidad de inspección de elementos web de los navegadores modernos, o Firebug si usas Firefox, mediante la cual puedes hacer clic en la hoja de estilos y, directamente, ver toda la información de la cabecera de la misma donde, salvo que se haya modificado, tendrás el nombre, descripción y hasta URL de la web del autor del tema.

3. WWTIT

Quizás basado en este método, está el servicio web llamado “What WordPress theme is that?“. Pones la url en la caja de búsqueda y te muestra precisamente esta información de cabecera de la hoja de estilos que todos los temas WordPress usan.

Por supuesto, ninguno de estos métodos anteriores sirve de nada si el administrador o diseñador de la web cambió el nombre de carpeta del tema y la información de cabecera de la hoja de estilos.

4. Clases CSS distintivas

Si este fuera el caso hay alguna cosa que puedes probar. Por ejemplo, usando el método 3 descrito anteriormente, busca una clase CSS exclusiva del tema, que no sea la típica “post” o “content“, sino una con nombres extraños, del gusto de muchos diseñadores.

Una vez identificada una que no sea “corriente” solo tienes que “googlear” por esa clase y, con un poco de suerte, identificar alguna consulta de soporte en foros donde, ya si, se cite el nombre del tema, o incluso la página de soporte del autor.

Y, bueno, esto es lo que yo suelo hacer, si tu tienes algún otro método se agradecerá que lo compartas

Nota: para las capturas he usado la web de mi muy mejor amiga Ana Aldea

]]> Los menús de WordPress son un gran avance, aunque parezca poca cosa. El hecho de poder configurar un menú de navegación por entradas, páginas, categorías, tags o enlaces personalizados, sin tocar una línea de código, es algo demandado hace tiempo, sobre todo porque era algo que ya tenían otros CMS hace tiempo.

Y desde WordPress 3.0 ya está disponible internamente en WordPress la gestión de menús en los temas, si estos los soportan, y sino lo añades como explicaba en el enlace anterior.

Pues bien, una pregunta, quizás tonta, que me hacen en muchos cursos es cómo añadir un elemento de menú que no enlace a nada, que sea una especie de ancla a la que se añadan otros submenús.

Y la respuesta, de puro simple es muy fácil. Lo único que tienes que hacer es añadir un enlace personalizado y, en el campo URL, poner #.

Lo que consigues es un elemento de menú que, al hacer clic en el mismo, no te lleva a ninguna parte, solo sirve de “apertura” para sus submenús.

Este truco, por supuesto, funciona igual en WordPress alojado y en WordPress.com.

]]>

Hoy en día no tiene sentido, con el grado de avance de WordPress, publicar un tema nuevo sin que venga preparado para traducciones, para que los usuarios puedan fácilmente añadir la localización para su idioma. Si queremos que nuestro tema sea popular, que llegue a todas partes y sea fácil de utilizar por usuarios de WordPress de cualquier país, no tienes excusa para facilitar su internacionalización.

Además, es muy sencillo preparar un tema WordPress para traducción, internacionalización, localización, como quieras llamarlo, así que vamos a verlo ya mismo …

Los 5 pasos para preparar un tema WordPress para traducción que vamos a seguir son los siguientes:

1. Cargar un dominio de texto
2. Procesar los mensajes de texto con funciones WordPress
3. Extraer los mensajes con Poedit
4. Ofrecer una traducción para cada mensaje y crear un archivo de idioma para una traducción concreta
5. Decir a WordPress que active la localización y cargue el archivo de idioma

Vamos a ello …

1. Cargar un dominio de texto

Lo primero que hay que hacer es cargar un dominio de texto añadiendo la siguiente línea al archivo functions.php de tu tema:

load_theme_textdomain('mitema', get_template_directory() . '/languages');

El primer argumento debe ser un identificador único (una buena práctica es usar el nombre de tu tema); lo que define el dominio del tema, ya que el texto para la traducción no estará en los archivos de instalación de WordPress. El segundo argumento define la carpeta de los archivos de idioma. Para cargar estos archivos la función debe estar unida a la acción after_setup_theme action:

add_action('after_setup_theme', 'my_theme_setup');
function my_theme_setup(){
    load_theme_textdomain('mitema', get_template_directory() . '/languages');
}

2. Procesar los mensajes de texto con funciones WordPress

Después de editar el fichero functions.php, el siguiente paso es revisar el código de los archivos del tema, encontrar los mensajes que tienen que traducirse y procesarlos con la función WordPress adecuada. Los dos más importantes, y que se usan más a menudo, son _e($text_message) y __($text_message).

La primera función busca la traducción del $text_message y lo imprime. Si la traducción no existe entonces imprime $text_message. Esta función se usa para los mensajes de texto que no sean funciones PHP, ya que imprime el resultado. Por ejemplo, eliges la siguiente línea:

echo ‘Hello user’;

Y hay que transformarla a:

_e(‘Hello user’,’mitema’);

La segunda función busca la traducción del $text_message y lo devuelve. Si no existe traducción entonces devuelve el $text_message. Esto se usa para el texto que esté en funciones PHP. Por ejemplo:

the_content( ‘Read more’ );

Hay que transformar la llamada de la función a:

the_content( __(‘Read more’,’mitema’) );

A veces un mensaje de texto incluye datos dinámicos, como números de una variable PHP. En estos casos usaremos la función PHP printf para producir la cadena del mensaje final:

$results_found = 12;
$message = sprintf( __(‘%s results found’ , ‘mitema’) , $results_found );

Singular y plural

WordPress ofrece una función para la traducción singular y plural del mismo mensaje de texto:

_n( $single, $plural, $number, $domain )

El primer argumento es el texto que se usará para el singular, y el segundo es el texto que se usará para el plural. El tercer argumento es el número con el que comparar para decidir cual usar.

Aunque la función _n() está incluida en WordPress no se recomienda usarla ya que el software de traducción solo usa el primer parámetro de una función, así que no se procesarían estos dos mensajes de texto. En su lugar podemos usar la declaración PHP if:

if($results_found == 1)
$message = __(‘1 result found’ , ‘my-text-domain’);
else
$message = sprintf( __(‘%s results found’ , ‘my-text-domain’) , $results_found );

3. Extraer los mensajes con Poedit

Una vez hemos procesado cada mensaje de texto con las funciones antes mencionadas nuestro tema está listo para traducción. A estos efectos hay tres tipos de ficheros de idioma:

1. El archivo .POT contiene una lista de todos los mensajes traducibles de tu tema
2. El archivo .po se crea cuando traducimos un fichero POT a un idioma concreto
3. El archivo .mo es un archivo binario que lo crea automáticamente Poedit. Este es el que WordPress lee para traducir temas y plugins

Creamos el POT
Lo primero es crear el fichero POT, que contiene todos los mensajes del código del tema y que será el archivo que el traductor use para traducir los mensajes de otro fichero de idioma. Aunque hay varias aplicaciones para editar y crear ficheros de idioma te recomiendo Poedit, que es multiplataforma y es el que yo uso.

1. Abre Poedit y crea un nuevo catálogo
2. Completa la información del catálogo en la pestaña “Información del proyecto”
   
3. En la pestaña “Rutas” identifica la carpeta donde Poedit buscará los archivos con el código que contiene los mensajes de texto traducibles. Estas carpetas son relativas a la carpeta de nuestro archivo de idioma así que guardaremos el archivo en una carpeta de la carpeta de tu tema, por lo que añadiremos ..:
   
4. En la pestaña “Palabras clave” definiremos las funciones WordPress utilizadas para traducir mensajes (recuerda que Poedit no es solo para WordPress). En nuestro tema las dos palabras clave utilizadas han sido __ y _e.
   
5. Una vez que hagas clic en “Aceptar” Poedit busca en las carpetas que le hemos dicho en la pestaña “Rutas” y te listará los mensajes de texto encontrados en los archivos del tema.
6. Guarda el archivo POT en una carpeta llamada languores dentro de la carpeta de tu tema.
   

Este archivo POT recién creado en realidad no lo necesita WordPress, es simplemente la plantilla que contiene las cadenas de mensajes traducibles, que puedes facilitar al traductor para que lo traduzca y te devuelva un fichero .po.

4. Ofrecer una traducción para cada mensaje y crear un archivo de idioma para una traducción concreta

Como ya tenemos el POT ahora solo hay que empezar a traducir cadenas de texto con Poedit, la aplicación, la primera vez que guardes cambios crea el solito los ficheros .po y .mo.

1. Empieza a elegir cadenas de texto de la lista y traduce una a una en los campos inferiores
   
2. Sigue traduciendo hasta que estén todas las cadenas de texto traducidas a tu idioma
3. Guarda y verás los ficheros .po y .mo generados automáticamente en la carpeta languages
   

5. Decir a WordPress que active la localización y cargue el archivo de idioma

Una vez hayamos creado los ficheros .po y .mo ya podemos decir a WordPress que active la localización y cargue los archivos del idioma. Edita el archivo wp-config.php, que encontrarás en la carpeta raíz de la instalación de WordPress.

Lo que hay que hacer es modificar la variable WPLANG al idioma que queremos usar. Por ejemplo:

define('WPLANG', '');

Pasaría a quedar así si vamos a usar la localización (traducción) al español de España:

define('WPLANG', 'es_ES');

Si WordPress encuentra un archivo de traducción al “español de España” como hemos definido en la configuración del catálogo, en la carpeta que configuramos en el primer paso de este tutorial, entonces mostrará los mensajes traducidos a este idioma en el tema y los visitantes lo verán en español de España. Si no lo encontrara entonces mostraría los mensajes por defecto.

EXTRA: Preparar para traducción plugins

Aunque no iba de plugins esta guía no está de más explicar como se prepara para traducción un plugin, máxime cuando hay pasos que se repiten, así que vamos a ver lo que cambia a la hora de internacionalizar plugins.

Al igual que hacemos con el tema, lo primero es decirle a WordPress donde encontrará los archivos de idioma, añadiendo la siguiente función, en este caso en el archivo principal del plugin:

load_plugin_textdomain('miplugin', false, basename( dirname( __FILE__ ) ) . '/languages' );

El primer parámetro define el dominio del texto, a ser posible usando el nombre del plugin, ya que debe ser único. El segundo parámetro define la ruta de la carpeta donde estará el fichero .mo. Como corresponde a una función anticuada, que fue válida hasta WordPress 2.7, especificaremos como valor false. El tercer parámetro es la carpeta donde están los archivos de idioma, en este caso asumimos que hay una carpeta llamada language dentro de la carpeta del plugin.

También, para cargar los archivos de idioma tenemos que añadir un ‘hook‘ y enlazar esta función en la acción init de WordPress:

function traduccion_miplugin()
{
load_plugin_textdomain('miplugin', false, basename( dirname( __FILE__ ) ) . '/languages' );
}
add_action('init', 'traduccion_miplugin');

Para terminar tendremos que procesar los mensajes de texto igual que hemos hecho con el tema, siguiendo los pasos 2 al 5, usando las funciones que a estas alturas ya conoces: _e($text_message) y __($text_message). Una vez procesado todo y creados los ficheros de traducción nuestro plugin estará listo para traducción.

Más información:

• Traduciendo WordPress
• l18n para desarrolladores WordPress