Great Designers STEAL!!

Web Design — Tags: , , — jd @ 11:28 am

Añadir ¨paginacion¨ a un blog de WP

Web Design, Wordpress — Tags: , — jd @ 1:12 pm

Este año me puse varias metas, entre ellas, desarrollar mi propio theme para Wordpress, mas que todo para practicar y poder pilotear de una manera aceptable PHP. Asi que, trato de meterle mano al codigo y hacer la mayor cantidad de modificaciones a ¨pie¨, y usando la menor cantidad de plugin posibles.

Para mi otro blog, donde me pongo un ¨sombrero serio¨, he cambiado el diseño del theme que uso, y le he ido agregando algunos elementos.

Una de los puntos que tenia en mi lista de pendientes era cambiarle los links que vienen por default de ¨Anterior¨ y ¨Siguiente¨, y adding-nice-wordpress-pagination-wordpress_1241330449735agregar pagination (paginacion?? no se si así se traduce).

Buscando en varios blogs que sigo por su constante publicación de tips sobre WP, y revisando mis bookmarks encontré como agregar la tal pagination sin necesidad de instalar un plugin.

WP-PageNavi

El WP-PageNavi es un plugin bastante bueno que agrega la pagination al blog.  Una vez instalado el plugin, tenemos varias opciones para personalizar la apariencia de los links, ademas de que, tenemos la posibilidad de modificar el CSS. En Hongkiat hay un tutorial de como instalar el plugin.

Como siempre, hay gente que ya se quebró la cabeza y resolvió problemas que nos podemos encontrar, y por suerte, en Catswhocode publicaron un tutorial de como agregar la funcionalidad de la paginacion sin tener que instalar el plugin.

Agregando WP-PageNavi

Primero tenemos que descargar el plugin, descomprimirlo y copiar-pegar los archivos wp-pagenavi.php y wp-pagenavi.css en el directorio del theme. En mi caso, solo copie en el directorio el wp-pagenavi.php, y los estilos que se aplican al paginador los agregue en mi archivo CSS global, lo cual funciono bien,  pero gustos son gustos.

Segundo, hay que editar los archivos en los que se muestra el paginador; en mi theme eran home.php, archive.php y search.php. Si no sabes cuales son los archivos que incluyen el paginador, ábralos todos y busque algo parecido a esto:

< ?php next_posts_link('Previous entries') ?>
< ?php previous_posts_link('Next entries') ?>

Una vez encontrado, cámbielo por:

< ?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>

Si guardamos los archivos y actualizamos el theme, el paginador no se va a mostrar, y esto se debe a que, Wp-PageNavi es un plugin y no fue creado pensado para ser embebebido directamente en el theme. Para corregir esto, hay que abrir wp-pagenavi.php y editar el siguiente trozo de código:

function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;

Cambiándolo por:

function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
pagenavi_init(); //Calling the pagenavi_init() function

Ahora si podemos guardar el archivo en el directorio, actualizar el theme y listo, la paginacion va a aparecer donde queríamos. La apariencia de los links y demás, la modificamos mediante CSS. Asi quedo el mio

pymesdotcomcom-part-4_1241332915140

(+) Encontre otro plugin que parece funcionar bastante bien,el
WP Page Numbers.

IE y el límite maximo de 31 archivos CSS

Web Design — jd @ 1:16 pm

Buscando en Internet y leyendo sobre practicas recomendadas para escribir, comprimir y cargar CSS, me encontré con un dato curioso, y es que,  Internet Explorer no carga más de 31 archivos de CSS que se declaran mediante @import (@import url("mystyle.css");)

El hecho que IE tengo un bug no es nada nuevo (uno más a la lista), y tener que usar tantos archivos de CSS puede parecer excesivo, pero no lo es tanto si separamos los estilos para no cargar archivos de CSS en secciones que no las necesitamos, cosa que se da mucho si trabajamos en un sitio web grande, con muchas secciones y en el que los usuarios pueden customizar algunas paginas o secciones.

Como lo solucionamos?

Según lo que investigue, lo primero que debemos revisar es si necesitamos tantos archivos, y en caso de que el diseño necesite más de 31 archivos de CSS, podemos agruparlos en dos archivos y no tendríamos problemas para cargar los archivos.

Por ejemplo: si tenemos 40 archivos de CSS, podemos crear dos archivos, group1.css en el que se cargaran los primeros 20 archivos y group2.css en el que se cargaran  los otros 20 archivos de CSS.

Así tendríamos un archivo desde el que podremos importar otros archivos de CSS que se encuentren en el mismo directorio.

Código
Dentro de group1.css estaría:
@import url(body.css);
@import url(structure.css);
@import url(header.css);

(+) El problema lo encontré en MSDN Forums y en Agum

Comprimiendo archivos PHP, CSS y js

Web Design — Tags: , , — jd @ 9:56 am

Uno de los consejos que dan los que saben es que, uno debe cuidar el ancho de banda, máxime si el proveedor de hosting que contratamos nos da un limite de transferencia mensual que no podemos superar.

Aparte de optimizar todas las imágenes que incluimos en nuestro blog o sitio web, podemos echar mano de otras técnicas para que los archivos sean mas livianos, y una que de las que da mejores resultados es la compresión de archivos, sean PHP, CSS  o JavaScript (js).

En viralpatel.net postean una guía bastante completa para comprimir archivos (aplicable a blogs de Wordpress); sigo buscando más información, y otras maneras de comprimir archivos, les estoy contando.

Validando CSS, error @charset rule

Web Design — Tags: , , — jd @ 11:17 am

Una de mis herramientas favoritas, e indispensable, cuando estoy trabajando es el Web Developer ToolBar para Firefox, todavía no conozco a alguien que diseñe Sitios Web y no lo utilice.

Una de las opciones que uso muy seguido es el Validador, valido el  HTML y CSS localmente. Hoy, validando y limpiando un archivo CSS, al final me quedaba este error:

The @charset rule may only occur at the start of the style sheet. Please check that there are no spaces before it. @charset “utf-8″;”

Pase un buen rato dándole vueltas y no encontraba la solución. Casi me vuelvo loco porque después el mensaje de error decía que no estaba incluyendo el @charset.

A pesar de que googlie para ver si encontraba la solución, y la fuente del problema, me di por vencido y deje de validar localmente, y para tener una “segunda opinión” utilice el Markup Validation Service de la W3C, y adivinen que, cero errores, ni uno, el código era 100% valido!!

Después de muchas vueltas no encontre el porque del error al validar localmente usando el Web Developer, parece que es alguna pulga en el addon, pero al menos voy a poder dormir en paz sabiendo que el CSS era valido :) .

Page 1 of 212»
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2010 Don’t Be Small | powered by WordPress with Barecity