Si usas un tema abigarrado, de esos que están tan de moda últimamente, los de estilo revista (o magazine) seguramente te hayas dado de bruces más de una vez con el problema de la limitación de los títulos, pues tienes que controlarte o se descuadrará tu tema, no se verán bien los títulos y cualquier otro desastre estético.

Afortunadamente todo tiene solución en WordPress, y más con un poquito de código. Vamos a ver como hacerlo en solo 2 pasos … 

1. Añadiendo la función

Para empezar abrimos el fichero functions.php de tu tema y añadimos uno de los siguientes códigos:

Acortar títulos por palabras

Acortar títulos por caracteres

Guardas los cambios en el fichero.

2. Modificando el loop

Una vez elegido el tipo de acortamiento, con uno de los códigos anteriores, solo nos queda sustituir el código de impresión de los títulos en - normalmente - index.php. Buscamos algo similar a este código …

y lo sustituimos por este otro:

Dependiendo del código elegido te mostrará, en este ejemplo, 12 palabras o 12 caracteres, completando el resto con los socorridos puntos suspensivos '…'. Además, al colocar el cursor sobre el mismo nos mostrará el nombre completo (the_title()), para que no nos perdamos.

Si quieres cambiar el tema por defecto, ya sea para una instalación sencilla o para una instalación multisitio de WordPress 3.0, puedes hacerlo gracias a un código poco documentado pero que funciona a la perfección.

Solo tienes que añadir la siguiente línea al fichero wp-config.php del sitio o sitios en los que quieras definir un tema por defecto:

Lo único que tienes que elegir es el nombre de la carpeta del tema que quieres cargar por defecto, en el ejemplo la carpeta del tema Classic, algo genial para instalaciones nuevas personalizadas.

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

Si nuestro blog es unipersonal, es probable que no nos interese el siguiente tutorial. Pero si tenemos un en blog multipersonal, ya sea con una cantidad determinada de colaboradores  o abierto todo aquel que quiera colaborar (como éste), puede ser una buena idea mostrar de forma dinámica los datos del autor de la entrada actualizados al día.

Seguramente existe más de un plugin para realizar esto o algo por el estilo, pero como soy un fanático del hágalo usted mismo les voy a mostrar cómo hacerlo por código utilizando las mismas funciones de Wordpress.

Cabe aclarar que más allá del código php y html, seguramente cada uno necesitará adaptar un poco los estilos css a su theme. De todas formas sobre utilizar el theme por defecto de wordpress 2.9.2. La idea por supuesto es que tengan alguna idea de html, php y css, pero sino copiar y pegar el código final también vale. Comencemos entonces con el código:

Creemos primero el div que va a contener todo:

Vamos a comenzar mostrando el gravatar del autor. Para eso vamos a utilizar la función "get_avatar()" que recibe el id del usuario y el ancho en pixeles del avatar, y retorna el código html listo para insertar. A su vez para obtener el id del autor usaremos la función "get_the_author_meta()" que nos servirá para obtener casi cualquier información acerca del mismo, recibe como parámetro el dato a recuperar. Una vez obtenido el código lo imprimimos:

Ahora lo segundo seria agregar un título con un enlace al sitio web del autor, para eso utilizaremos la función "the_author_link()" que imprime el nombre publico del autor como link a su sitio.

Si pensamos en el SEO y preferimos que el enlace sea nofollow (o sea que los bots como el de Google no lo considere). Podriamos hacer lo siguiente:

Como verán usamos la función "the_author()" que imprime el nombre publico del author y la función "the_author_meta()" para obtener el link de su web.

Ahora utilicemos nuevamente la función "the_author_meta()" pero para obtener su descripción:

Si por cuestiones de diseño quisiéramos recortarla a no mas de una x cantidad de caracteres podemos usar la función "substr()" de php. Recibe la cadena a recortar, el punto de inicio y la cantidad de caracteres. Para recuperar la descripción usamos "get_the_author_meta()", como ya habrán deducido, cuando lo usamos con get_ adelante recuperamos el valor y cuando lo usamos sin el, directamente lo imprimimos. Por ejemplo si quisiéramos recortar la descripción a 140 caracteres:

Ahora la idea va a ser mostrar la cantidad de post del autor (una pavada que hacemos con la función "the_author_posts()") pero que a su vez funcione como un link a la pagina con los post del author. Esta página en un blog con permalinks "bonitos" tendría la siguiente forma tu-dominio.com/author/el-autor/. Pero como dependiendo de la configuración, esto puede cambiar, vamos a obtener primero el link a la página con los posts del autor.

Para nuestra tarea vamos a hacer uso de la función "get_author_posts_url()" que recibe el id del autor y devuelve el link que mostramos. Para obtener el id, volvemos a usar la función "get_the_author_meta()":

Ya el link armado para mostrar todo lo que queríamos queda así:

Para finalizar los datos a mostrar nos queda un detalle mas, los comentarios realizados por el autor. Dado que no existe (o más bien, yo no conozco) una función para obtener directamente la cantidad de comentarios de un autor, vamos a crear una, basándonos en el sql que Fernando me facilito tan amablemente hace un tiempo,que a su vez esta basado en el del plugin wordpress-plugin-nofollow-free:

Debido al hecho de que si los comentarios del blog son abiertos al que quiera comentar, nos vamos a encontrar con un mismo usuario que comenta con 2 email y nombres distintos o 2 usuarios que comentan con el mismo nombre; el resultado de la función no siempre va a ser exacto. Pero dentro de todo funciona bastante bien.

Ahora vamos a insertarla en el archivo functions.php de nuestro theme para poder utilizarla. En nuestro código vamos a utilizarla así (insertándola en el mismo párrafo que la de los posts del autor):

Todo nuestro código insertado dentro del div contenedor y puesto en forma de función por una cuestión de practicidad queda así:

Si al colocar ambas funciones en su archivo functions.php empiezan a saltarles errores diciendo que las cabeceras no se han podido enviar, lo mas probable es que hayan dejado saltos de línea o espacios por fuera de las etiquetas de php.

Por último vamos a agregar a la hoja de estilos de nuestro theme algunos retoques para embellecer nuestra barrita (por lo menos para que en Kubrick se vea bien):

En lo personal inserte la barrita arriba del título (llamando a la función show_author_data), pero cada uno colóquela donde quiera (siempre y cuando sea adentro del bucle).

Mi barrita en Kubrick se ve así (no se ve el gravatar porque al momento de tomar la captura me encuentro offline):

Para que funcione en Twenty Ten (el tema por defecto en wp 3.0) hay que armar una estructura un poco más compleja en cuanto a divs y css:

Y los css:

El resultado es el siguiente:

Palabras Finales

Espero que algún valiente haya llegado hasta acá. La idea del tutorial no era tanto hacer la barrita en si, sino colaborar a que de a poco muchos empiecen a perderle el miedo al código y no sean tan plugin dependientes.

Además tenía tiempo queriendo colaborar con algún post para esta bodega de conocimiento que es AyudaWordpress. Espero les sea útil.

PD: para el que no entendió un pomo pero igual quiere la barrita acá la tiene en forma de plugin(eso si, en versión súper minimalista, no esperen panel de control, opciones, ni nada por el estilo).

El nuevo tema por defecto de WordPress desde la versión 3.0 se llama TwentyTen o 2010, y una de sus características es que te permite cambiar la imagen de cabecera eligiendo entre una lista de imágenes predeterminadas o bien subiendo una imagen adicional, pero si quieres, por ejemplo, ofrecer para una instalación nueva una lista de imágenes distintas entre las que puedan elegir los usuarios, o quieres que la lista de imágenes de cabecera muestre unas de tu propia factura para cambiarlas de vez en cuando o en ocasiones (navidad, festividades, etc) también puedes hacerlo.

En realidad el proceso es muy sencillo, vamos a verlo … 

Primero abre el fichero functions.php del tema TwentyTen y localiza donde empieza esta sección:

A partir de ahí verás las "llamadas" a las imágenes por defecto, con su descripción:

Para que entiendas cada sección esto es lo que significan:

register_default_headers: La función que crea y muestra las cabeceras por defecto. Acepta varios parámetros.

name: Establece el valor del nombre de la cabecera. También aquí podemos definir valores y claves adicionales.

url: Ruta relativa a la imagen de cabecera. Date cuenta que la ruta por defecto es /images/headers/nombre_de_imagen.jpg

thumbnail_url: Ruta relativa a la miniatura de la imagen de cabecera, que verás en la página de administración del tema. La ruta por defecto es /images/headers/miniatura_de_imagen.jpg

description: Una descripción para la imagen que se muestra al pasar el cursor sobre la imagen de miniatura en el panel de opciones de cabecera del tema.

Más cosas que debes tener en cuenta:

• Las imágenes de cabecera deben ser de un tamaño de 940×198 pixels, si son más grandes se redimensionan y si son más pequeñas se ajustarán también para rellenar esas dimensiones.
• Las imágenes de miniatura pueden ser de cualquier tamaño pero el tamaño por defecto es de 230×48 pixels.
• Las imágenes solo pueden estar en formato .jpg o se ignorarán y no se mostrarán.

Ahora bien, ¿como añado imágenes o cambio las existentes?, pues si has llegado hasta aquí ya habrás imaginado que sustituir las imágenes por defecto por las tuyas es tan sencillo como subir tus imágenes de cabecera a la carpeta adecuada y cambiar nombre, descripción y nombre del fichero.

Pero si quieres añadir más el proceso sería este:

Copias un bloque de imagen (para no tener que teclear mucho) del estándar del fichero functions.php, por ejemplo este:

A continuación pegas el bloque copiado al final de la sección y sustituyes los parámetros para que se adapten a la nueva imagen y miniatura que hayas subido a las carpetas por defecto (o la que tu quieras), por ejemplo:

Guardas los cambios y ya tendrás una imagen nueva que cambiar fácilmente a golpe de clic.

Si te gusta ver las cosas más que leerlas en WPbegginer han creado un video que explica este mismo proceso, este:

Por defecto, WordPress nos crea una URL a cada autor, siguiendo esta estructura: http://tublog.com/author/usuario.

Habrá quienes deseen modificar esa sección, ya que es fea y, si hablamos de blogs hispanos, no encaja del todo bien. También habrá quienes deseen derechamente eliminar esa parte y dejar las URLs como http.//tublog.com/usuario. ¿La solución para ambos? Muy sencilla:

Tan solo añadimos esta linea a nuestro functions.php:

Esta demás decirte que parte debes modificar del código, pero por si las moscas, reemplaza donde dice REEMPLAZA_AQUI por la base que desees: "perfil", "autor", "usuario", la que quieres. Solo recuerda no borrar las comillas del código y no insertar espacios ni caracteres especiales.

Ahora, si lo que deseas es eliminar completamente esa parte de la URL, simplemente borra el REEMPLAZA_AQUI y no pongas nada (ni siquiera espacios) de modo que quede así:

Obviamente, guarda todo y verás como las URLs de tus autores son ahora http://tublog.com/loquesea/usuario.

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

Primero que nada debes verificar que tu servidor tenga la librería "zlib" activada, ya que sin ella no funciona el truco. Algunos Cpanel tienen la opción para activarla.

Luego, coloca el siguiente código en el header.php (antes del DOCTYPE)

¡Ya está!

En la página Port80Software.com puedes comprobar tu sitio para asegurarte de que está comprimiendo la salida.

Fuente: WpRecipes!

Ahora, con el acercamiento de la mayoría de los navegadores modernos a HTML5, se hace necesario que vayan apareciendo cada vez más plugins que se adapten a este nuevo – y revolucionario – estándar. Hasta ahora no hay muchos así que aquí tienes todos los que he encontrado con una descripción de lo que ofrecen. Por supuesto, lo recomendable es que actualices o cambies a un navegador compatible con HTML5, aquí tienes una comparativa.

Plugins HTML5:

1. Degradable HTML5 audio and video – Ofrece la posibilidad de incrustar vídeo y audio mediante shortcodes con soporte para degradados HTML5 de vídeo.
2. TagCloud html5 – Nube de tags en HTML5, basada en el tagcanvas-JS de http://www.goat1000.com.
3. HTML5 and Flash Video Player – Además de múltiples funciones para la incrustación sencilla de vídeo, ofrece soporte completo de vídeo HTML5.
4. WPtouch iPhone Theme – Este viejo conocido, que ofrece una versión móvil de tu sitio para smartphones, desde la versión 1.9.9 dispone de soporte para urls y comentarios HTML5:
5. AmR iCal Events List – Plugin de calendario que, desde la versión 2.6.1.0 dispone de soporte HTML5 para los espacios en blanco a la hora de añadir nuevos calendarios.
6. Transposh – translation filter for wordpress – Plugin que, cumpliendo los estándares HTML5, ofrece un sistema de traducción, mitad automático, mitad humano, de traducción de los contenidos de tu sitio.
7. wp-Typography – Plugin para mejorar las tipografías de tu sitio y, por supuesto, compatible con HTML5.
8. Fast and Secure Contact Form – Estupendo plugin que ofrece un formulario de contacto libre de spam, mediante captcha, y que cumple los estándares HTML5.
9. Forms – Formularios para WordPress totalmente HTML5.
10. XHTML5 Support – Convierte todos los elementos actuales de tu tema a HTML5. Para Internet Explorer 6 y 7 require algún apaño pero funciona como un reloj. Muy recomendable, pero no para novatos.
11. Override Post Title with First Content Heading – Plugin especial para mejorar el SEO de tu sitio que sustituye el h1 genérico de tu sitio en cada página por el título del post de la susodicha (página o entrada), por supuesto, siguiendo los estándares HTML5. Muy bueno.
12. Sectionize – Pues eso, “seccioniza” tu contenido para cumplir este estándar HTML5.
13. Hikari Email & URL Obfuscator – Permite que compartas tu email o urls en tu sitio pero sin que esto comprometa tu dirección de correo electrónico de cada a los spammers. Valida XHTML 1.1 y, por supuesto HTML5, sino no estaría en esta lista.
14. External “Video for Everybody” – Otro estupendo plugin para incrustar vídeos de servicios externos que, además, reconoce los navegadores que acepten HTML5 para ofrecerles la versión adecuada del vídeo.
15. Projekktor Video Tag Extension – Permite insertar elementos de vídeo HTML5 en tus entradas.
16. Universal Video – Otro más, que hay muchos, para insertar vídeo HTML5 de manera sencilla en tu WordPress.

Como ves no hay muchos, pero ya pronto serán legión. Espero te haya servido esta entrada para ir atrayendo tu atención hacia la importancia de HTML5 y, de paso, conocer unos buenos plugins.

Contenido exclusivo para suscriptores al Feed

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

Guía Windows Live Writer

Una de las novedades que llevamos disfrutando en WordPress desde hace poco son las miniaturas de post, denominadas imágenes destacadas en WordPress 3.0. Añadir miniaturas de post a tu tema es muy fácil, ya lo hemos visto, pero ¿que pasa con los feeds RSS?, ahí no se mostrarán salvo que no nos pongamos manos a la obra.

Pues vamos a ello … 

Además es sencillo, solo tenemos que recurrir al ya imprescindible fichero functions.php de tu tema y, en este caso, añadir unas cuantas líneas.

Si queremos que la miniatura aparezca antes del contenido del post el código es este:

Y si queremos que salga al final del contenido este otro:

Pero, vamos más allá, porque si queremos que el texto "envuelva" la miniatura, solo hay que quitar el div que sobra, quedando así el código a añadir:

Como siempre, tu eliges el modo de hacerlo.

Visto en DiggWP

Pero, ¿Cómo le podemos sacar buen partido a dicho menú, y sobre todo a TwentyTen?

Puesto que aún en el Códex no vemos como manejar bien estos menús, sí podríamos verlo observando bien los diseños que los están implementando. El problema es que hasta ahora sólo lo ha hecho Sufussion, con una intrincada programación que no es amigable con aquellos que nos hemos metido a aprender Wordpress sólo para poder personalizar a mayor profundidar nuestro espacio en Internet.

¿Qué hacemos por ahora? La opción que nos queda es sacarle el jugo a la implementación del menú que se ha hecho en TwentyTen. Y qué mejor que ir a la hoja de estilos de 2010, ir al final de la sección de menús y pegar lo que sigue:

Observe usted que en algunas reglas de css hemos añadido también "#access .color a". Esto provoca que todo el menú desplegable muestre el color seleccionado.

Presento este esquema, pero es extensible a gusto.

Una vez colocado el añadido CSS, nos falta ir a la sección de Menús, (Apariencia > Menús) Desplegar uno de los elementos, y en "CSS Classes - Optional"  colocamos el color de la regla que hemos definido.

Nos quedará algo así, si vamos asignando a cada menú el color que deseemos.

Comparto esto, para que no les sea el menú tan gris. Y poder trasplantar el código de los menús a nuestros propios temas, pero atribuytendo autoría a los creadores del tema donante, obvio