WordPress: conocer el numero de queries usadas

Si estas optimizando el código php de tu theme WordPress y quieres conocer el “número total de queries” que se han utilizado en cada página y el “tiempo (segundos) que tardan en cargar tu blog“…

Puedes utilizar este código php para tu theme, y colocarlo por ejemplo en tu footer.php o el archivo donde quieres que se muestre la información, y que solo si estas logueado como administrador se pueda ver:

Refrescar página cada “x” segundos

Para refrescar o actualizar una determinada página web cada “x” segundos basta con usar el siguiente meta tag http-equiv dentro de las etiquetas <head><head/> de tu página web y cambiar el valor de “content” por los segundos que quieras.

En este ejemplo se refrescaría la página cada 1 min (60 seg):

CSS3: invertir colores

Para conseguir el efecto de invertir colores a un elemento o imagen usamos la propiedad “filter” con el valor “invert” aplicando el % de fuerza que queramos. Funciona tanto con elementos con estilos de color sólidos, imágenes y svg.

Estos efectos de filtro al principio eran solo posibles para SVG. Recordar que aparte existen más filtros css3 como son: desenfoque, escala de grises, brillo, contraste y tono.

Creamos la siguiente clase con el valor “invert” al 100%:

Y en este caso para verlo en acción sobre una foto:

Foto Normal:

Foto con el filtro “invert”:

(*) A fecha de creación de este post no era soportado aún por IE, pincha aquí para ver el soporte en la actualidad de la propiedad “filter” de css3

.htaccess: Restringir acceso por IP

Código de .htaccess de Apache para restringir el acceso a una url / dominio por dirección IP.

Un ejemplo, vamos a bloquear o restringir el acceso a la web a todos los usuarios excepto para las 2 siguientes ips:

También se puede hacer por diferentes rangos de ips, si no quieres poner de 1 en 1 o si son muchas y siguen un rango común (Ej. todas desde 192.168.1.0 a 192.168.1.22):

CSS3 animation: mantener el último fotograma

Supongamos que haces una animación en CSS3 y quieres que al finalizar se mantenga en el último fotograma o keyframe de la animación.

Por defecto en las animaciones css una vez finaliza la animación, el elemento es restaurado de nuevo a su estilo original.

Hay una propiedad de animation que se llama -fill-mode, que define los valores que se aplican a la animación cuando ya no se está ejecutando. En nuestro caso, queremos que aplique al último keyframe (“to” o “100%”), para ello usaremos el valor “forwards“.

Para verlo lo mejor con un ejemplo básico. Vamos hacer una caja que aparezca y desaparezca durante 2 seg. un total de 5 veces y que una vez finalice la animación en el 5º pase se mantenga en último keyframe (opacity:1):