wordpress - Tienda de ultramarinos
logo Tienda de Ultramarinos
Etiquetas: wordpress

Ininite Scroll + Automatic Text Expander

Dos de los detalles en los que más me he esforzado y que más me gustan del nuevo diseño son que tenga scroll infinito, de modo que no hace falta clicar en página atrás para ver viejos posts (tanto en la página principal como en categorías), y que las entradas aparezcan contraídas con posibilidad de extenderse en el mismo lugar.

Activar el scroll infinito es muy fácil en WordPress utilizando el plugin Infinite Scroll, que funciona perfectamente y es sencillísimo de configurar. Únicamente hay que decirle bajo qué clases CSS están los posts y el link de navegación atrás. Nada más.

Por otro lado, para facilitar las cosas decidí que mostrar unos pocos párrafos sería lo ideal. Busqué y busqué, pero no fui capaz de encontrar nada que cortase los artículos con posibilidad de expandirlos. Creo que la única alternativa ahora mismo en WordPress es mandar que aprezca un extracto (the_excerpt()) en lugar de todo el contenido (the_content()), con el cuál eliges un número de caracteres que quieres que se muestren.

La función propia de wordpress parece ser bastante probre y hay muchos plugins mejorándola, evitando que corte palabras enteras, que corte etiquetas HTML, etc. Pero nada de esto hacía lo que yo quería, pues obliga al lector a abrir el post y cargar otra página (de lo cual algunos estarán encantadísimos porque les suma visitas; pero mi intención es que me lean, no hacerme pajas con las estadísticas de páginas visitadas).

De ese modo, terminé por bajarme Text Expander, un plugin que permite contraer ciertas partes de un post simplemente escribiendo entre corchetes EXPAND y /EXPAND rodeando al texto a ocultar. Parecía la solución… pero hubiera supuesto añadir a mano en cada una de todas las entradas del blog esas etiquetas, lo cual es una tarea titanica. Además de que si algún día decido cambiarlo supondría un esfuerzo equivalente.

Por eso terminé por empezar a cacharrear con el código del plugin para hacerme algo a la medida. Ahora, para cada entrada que se carga se cuentan los párrafos que tiene, y si son más de cinco, le digo que me añade el EXPAND entre el segundo y el tercero. En realidad no sólo tiene en cuenta párrafos, sino también listas, citas e imágenes. Parecía sencillo, pero la cosa se empezó a complicar cuando me di cuenta de que había que tener mucho cuidado con los párrafos dentro de un blockquote, o las sublistas dentro de listas (ul); de lo contrario, al perderse las etiquetas de cierre, se desestructuraba todo el blog. Creo que finalmente he sido capaz de solucionarlo, pero como puede haber alguna combinación que no haya tenido en cuenta os pediré que si en algún momento descubrís algún error me lo comuniquéis.

Otro problema que me costó identificar fue que las nuevas entradas obtenidas al deslizar la página hasta el final se cargaban expandidas, de modo que pensaba que no estaba aplicandose la conversión allí. Al final me di cuenta de que la contracción se aplicaba al cargar la página con una línea de Javascript, pero esto no funciona con las nuevas al estar ya “cerrada” la web. Afortunadamente Infinite Scroll incluye un apartado en su configuración que permite al usuario añadir código Javascript que se invoque una vez el nuevo contenido se carga, de modo que con tres o cuatro líneas solucioné el problema.

Creo que es algo bastante útil y que quizás más gente necesite algo así, de modo que he pensado que quizás podría darle un retoque y publicarlo como plug-in; aunque nunca lo he hecho así que no tengo ni idea de si es un proceso sencillo. ¿Alguien tiene experiencia en plugins de WordPress y puede darme un consejo?

Por cierto, pensé que sería interesante dejar la primera entrada de la página principal directamente extendida, pues al ser la última publicada será más probable que la gente entre a leer esa. ¿Os gusta así o la preferís contraída como el resto?

Validación XHTML para WordPress

Si los estándares están para algo es para respetarlos. En la informática, donde cada cosa puede ser de su padre y de su madre (y generalmente lo son) el uso de estándares tiende a facilitar mucho las cosas, especialmente la compatibilidad. Que todavía sea necesario llenar las páginas webs de scripts detectando el navegador para utilizar un código u otro tendría que darnos vergüenza.

Y no sólo en la informática, los estándares facilitan la vida allá dónde van. Los tamaños de las camas son estándar: o son de 80, o son de 90, pero no vas a tener camas de 85; lo cual ayuda mucho al comprar sábanas y demás. El formato de etiquetado de las camisetas o zapatos es estándar: una M siempre es más pequeña que una L, y un 38 es más pequeño que un 42. Sin embargo no es estándar la medida de las mismas, por lo que dependiendo de la marca L y XL tienen tamaños completamente diferentes. Eso significa que en mi armario hay camisetas de varios tallajes, y cuando compras por internet tienes que buscar las especificaciones del fabricante de ese modelo y comparar con las de casa.

Otra cosa que no es estándar son los cargadores de los móviles, por lo que siempre has de andar con el tuyo a cuestas y ningún amigo puede dejarte el suyo, incluso de la misma marca. Sí, Nokia siempre ha seguido una muy buena política al respecto, hasta que los redujeron de tamaño hace poco y vuelta a empezar. Las tarjetas de crédito y los carnéts son estándar, y por eso todos caben perfectamente en tu cartera.

En internet, la organización encargada de la adopción de estándares es el World Wide Web Consortium (W3C), dirigido por Tim Berners-Lee, el padre de la web. El W3C se compone de un amplio número de expertos que velan por la compatibilidad de todos los estándares y por conseguir un consenso con la industria para que los navegadores y herramientas soporten un núcleo básico de funcionalidades con el que poder hacer cosas sin volverse loco por saber si lo que has hecho se verá igual en todas partes.

Como muchos saben y habrán cacharreado en algún momento de sus vidas, la base de las páginas web es el lenguaje HTML. Otro metalenguaje de marcado que puede parecer muy similar es XML, utilizado para organizar y etiquetar documentos de texto, funcionando mediante etiquetas de la misma forma que HTML. No puede considerarse un lenguaje directamente porque en realidad sólo consta de un conjunto de directrices y especificaciones sobre cómo utilizarse, por lo que cada uno puede utilizar las etiquetas y valores que le vengan en gana. Simplemente tiene que respetar la estructura y formato de XML. Este formato es muy práctico para procesar cualquier tipo de información con un ordenador y es ampliamente utilizado en múltiples áreas.

Como decía, HTML y XML son muy similares, pero el primero no respeta todas las especificaciones del segundo, por lo que se inventó XHTML, que es básicamente un fichero HTML con la estructura que dicta XML. Una de las principales características es que todas las etiquetas deben ser correctamente cerradas, cosa que no era necesaria con HTML, o la prohibición de anidar ciertas etiquetas en otras.

De XHTML 1.0 existen diferentes versiones, cada una más laxa que la anterior con respecto a las normas. Son Strict, Transitional y Frameset. Luego se creó XHTML 1.1, que es XHTML 1.0 Strict con alguna cosa más. La versión 2.0 lleva 10 años de borradores. Para saber si tu página cumple los estándares, W3C ofrece su validador.

Una de las principales motivaciones de la W3C detrás de todos estos estándares es separar la definición de la estructura de una página de la información mostrada por la misma. Un buen aliado para ello han sido las hojas de estilos CSS, una poderosa herramienta para definir el diseño de tu web, y que ha desplazado por completo a las famosas “tablas” tan utilizadas en los 90. En aquellos tiempos, si querías colocar varios elementos en distintos puntos tenías que llenar la página de tablas invisibles con infinitas filas y columnas para cada situación. Con CSS todo es un mundo maravilloso de orden y funcionalidad.

Afortunadamente, con el nuevo diseño he tenido bastante suerte y seguía los estándares bastante bien, salvo por algunas etiquetas mal cerradas aquí o haya, que incluso puede que hayan sido fallo mío con las modificaciones.

Otro pequeño problema ha venido con el plugin oficial de Statcounter, que te introduce tres líneas en el blog. Utiliza target=”_blank” en el vínculo (abrir en ventana nueva) lo cual está desaconsejado por el W3C. También olvidan cerrar la etiqueta de la imagen. Tienen los comentarios cerrados, por lo que he dejado nota en el repositorio de plugins de WordPress. Para arreglarlo tienes que ir al editor de plugins de tu WordPress y hacer los cambios en el fichero php. En mi caso es la línea 288.

Un problema “peor” viene con las galerías de imágenes que WordPress te permite insertar en las entradas. Casualmente ayer utilicé por primera vez la opción de galería para mostrar el viejo diseño; esto es básicamente como publicar un álbum de fotos de forma automática, sin necesidad de insertar las imágenes una a una. Si no llego a utilizarlo ni me hubiese dado cuenta.

Resulta que al insertar la galería puedes seleccionar varias opciones, con lo que dependiendo de cada una tendrá distintos formatos. Estos formatos están definidos por un CSS que se copia en el cuerpo de la entrada. Esto está tremendamente mal, porque a fin de cuentas estás mezclando la definición con el contenido. HTML está dividido en dos secciones: cabecera y cuerpo, head y body. Lo correcto es que en la cabecera estén todas las definiciones y en el cuerpo la información.

Realmente las CSS suelen estar en un fichero aparte, el cual indicas en la cabecera. Esto te permite utilizar la misma definición en cualquier página sin tener que copiar las definiciones en cada una, pero para cosas puntuales como ésta, es correcto ponerlas simplemente en la cabecera.

Tras barajar varias posibles soluciones a mano, me he decantado por googlear… y efectivamente es un problema que había inquietado a muchos otros antes. Está publicado desde hace trece meses en el trac de WordPress, pero no se se implementarán soluciones en la próxima versión. (Trac es una herramienta utilizada para la gestión de errores en un proyecto). Mientras tanto, se han publicado varios plugins solucionándolo (están enlazados en los comentarios del trac). Yo he instalado Cleaner WordPress Gallery, que simplemente crea un fichero CSS aparte y lo enlaza en la cabecera.

Así pues, finalmente he conseguido superar satisfactoriamente el test de XHTML 1.1.

Mostrar Buzz en tu blog

Lo mejor de utilizar WordPress es que hay una comunidad muy amplia de usuarios, de modo que tarde o temprano siempre terminan apareciendo plugins para hacer todo tipo de cosas. Uno en el que llevaba pensando hace tiempo era la integración del blog con Buzz.

Después del estrepitoso fracaso de Google Wave, Buzz es la última apuesta de Google por las redes sociales. Es más bien una especie de Twitter, pero sin la absurda limitación de 140 caracteres que impone este servicio.

No sé si está teniendo demasiado éxito, pero me gusta porque me sirve para compartir y publicar enlaces de artículos interesantes que leo y que no dan de sí para una entrada en este blog. Una foto suelta, una viñeta, o una noticia con una simple frase comentándola u opinando. Nada más.

El caso es que para escribir una entrada aquí suelo dedicar un tiempo del que con el final del curso no dispongo, pero para añadir un Buzz no hace falta más de cinco minutos, así que para darle algo de vida a este blog estos días pensé que sería buena idea que se visualizasen aquí mis “buzzeos“.

Para ello, buscando Google Buzz en el repositorio de plugins de WordPress aparecen varios resultados. Instalé tres distintos, y tras probarlos, el que más me convenció fue Google Buzz ER. Me decanté por éste porque no sólo se veía mejor que los otros plug-in’s sino que puedes insertarlo donde quieras simplemente llamando a < ?php GoogleBuzzEr(); ?>. El resto sólo podías agregarlos mediante widgets.

El principal inconveniente de Gooble Buzz ER (y del resto que probé) es que no muestra correctamente: fotos, reshares, actualizaciones del blog, ni los enlaces agregados a la entrada mediante el botón que ofrece Buzz. De esos, los tres primeros apenas me importaban, pero el del enlace sí, porque es como suelo compartir los links con Buzz.

Así que entre ayer y hoy he estado cacharreando con el código y al final he conseguido que se muestren estos links. Si a alguien le interesa, hay que añadir las siguientes líneas.

Primero buscamos function gb_getData(), donde encontraremos un bucle foreach($xml->entry as $data), y allí dentro, por la línea 110, estará $mediaAttr = $media->content->attributes();. Después de esta asignación tenemos que escribir:

$tmp['mediaurl'] = $mediaAttr['url'];
$tmp['mediaAttr'] = $mediaAttr;

Con eso ya hemos obtenido los datos del xml de nuestro perfil de buzz. Ahora vamos a la función que escribe esos datos function gb_printData($data). Allí tenemos cada Buzz representado de la siguiente forma:

<div class='gber_post'>
{$v['content']}
{$v['imgSrcCont']}
/** AQUÍ **/
<span class='gber_time'>{$this->gb_showTime(strtotime($v['updated']))}, </span>
<span class='gber_comment'><a href='{$v['href']}'>comment</a></span>
</div>";

La línea de /** AQUÍ **/ la he incluido yo y es dónde habría que añadir:

<a href='{$v['mediaurl']}'>{$v['mediatitle']}_link</a>

De esta forma se mostrarán correctamente los links incluidos en el Buzz mediante el botón correspondiente. Del resto de problemas sólo he intentado solucionar los reshares y las acualizaciones de sitios agregados como el blog, pero no he sido capaz de encontrar en el xml cómo demonios están enlazados estos datos.

Google Buzz ER está publicado por Ivan Lazarevic bajo licencia GNU, de modo que pongo a disposición de quien quiera la versión actual (1.4) con las modificaciones que he detallado anteriormente. Descargar Google Buzz ER modificado.

Actualizado a WordPress 2.7

Cuando me cambié a este dominio, lo hice bajo la última versión de WordPress entonces, la 2.3.3. Desde entonces todavía no había actualizado.

Una mezcla entre pereza y la máxima “Si funciona, no lo toques” fueron las principales consecuencias.

Llevo desde que entregué el proyecto, y con el consiguiente tiempo libre, planteándome en darle un repasito al blog, y finalmente hoy me he decidido a actualizar a la nueva versión: WordPress 2.7.

Jamás había actualizado y ya ni recordaba cómo fue la primera vez que lo puse en marcha, así que como estas cosas son muy delicadas y acojonan un rato, primero me he dedicado a hacer backup del blog, tanto desde el gestor MySQL de mi hosting como desde la opción “exportar” que ofrece WordPress.

Sin embargo, todo ha ido sobre ruedas y no he tenido problema alguno. De paso he optado por actualizar todos los plugins, que la mayoría también estaban desactualizados.

La nueva interfaz es muy dospuntocero, con sus esquinitas redondeadas y bloques móviles. Aunque todavía no ubique las cosas parece más organizado y práctico, así todo será acostumbrarse a la barra lateral y olvidarse de la superior.

Me ha hecho gracia la cajetilla de “post rápido”, así que estoy escribiendo desde allí, como era previsible. No creo que la utilice mucho porque con lo que suelo enrollarme no es cómodo, pero ahí está. Como pega principal, sólo se pueden poner etiquetas, y no categorías; yo prefiero manejarme con las segundas.

Por ahora me parece que anda todo bien, pero si veis algo raro no dudeis en avisarme.

También me está picando el gusanillo de cambiar el tema, que éste ya tiene tiempo. Me sigue gustando porque es suficientemente simple, pero igual cambio a otra cosa.

No me gusta el editor de WordPress

NO

¿Pero qué diablos es esto? La entrada anterior tuve que escribirla casi entera dos veces. ¿Por qué? Porque sólo había guardado al principio y modificando las sangrías me ha borrado todo el post. He estado haciendo pruebas ahroa mismo y me ha ocurrido varias veces, al pasar del modo Visual al modo Código. No tengo muy claro en qué consiste pero es así.

Puesto que estaba haciendo una lista de plugins se me ocurrió utilizar las etiquetas para ello que tiene HTML <ul> <li> pero como no me gustaba el resultado estaba eliminándolas para volver a intentar aplicarlo de otra forma. ¿Cómo quitarlas? Pues me pareció obvio que si volvía a clicar en el simbolito de lista, crearía otra anidada dentro, pero como acabo de comprobar no es así: Si en el editor WYSIWYG pulsas el botón de lista, la primera vez la creas y la segunda la deshaces; en cambio, en modo código, si pulsas <ul> dos veces, lo que haces es, como decía la intución, crear una nueva lista anidada. Pero claro, yo no imaginaba que el editor Visual funcionase de una forma tan distinta a lo que sería normal, así que opté por utilizar el botón de eliminar sangría, o desanidar, por llamarles de alguna forma pues desconozco su nombre real: esos que son dos flechitas junto a unas líneas de párrafo. En inglés les llaman outdent e indent (hendir, en castellano) y en esta última especifíca su uso para listas y citas. Me pareció completamente lógico que este botón sirviese para lo que yo quería hacer, y por supuesto lo hizo. Sin embargo, al volver al modo código todo mi mensaje había desaparecido.

He estado haciendo pruebas con listas ahora mismo y doy fé que fue esto mismo. Al tratar de deshacer una lista en modo Visual quitando sangrías, pierdes toda la información.

También he podido comprobar que hay otro problema con las tablas, pero ya no puedo decir de qué se trata. El caso es que copio en el modo visual todo el listado de plugins que tengo y se hacen unas bonitas tablas y queda todo muy bien formateado; sin embargo, al pasar a modo código, desaparece todo el resto de la tabla salvo dos renglones, que conservan su estructura original.

Todos estos problemas intuyo que se deben a que el editor hace muchas conversiones y modificaciones que no debería hacer al pasar de modo visual a código y viceversa: incluye párrafos donde le da la gana, cierra y abre listas donde le apetece y dios sabe qué más. Quizás es que yo sea un patán con las listas, pero no he conseguido que la anterior lista de plugins me quedara como deseaba. Igual también tendría que modificar algo en la hoja de estilos porque los párrafos en este tema funcionan así, pero me había cabreado y tenía que desahogarme.