Mostrando entradas con la etiqueta WORDPRESS. Mostrar todas las entradas
Mostrando entradas con la etiqueta WORDPRESS. Mostrar todas las entradas

jueves, 16 de junio de 2011

Galeria de imagenes JS, jQuery

Galería de imágenes usada compatible con WordPress.
Por ejemplo, cuando se muestran las entradas completas, mostrar todas las imágenes de golpe, puede hacer muy largo el post, o mandar la información demasiado debajo.
Añadiendo la llamada en wp-content/themes/miPlantilla/single.php
Yo para solucionar eso, he usado el frameWork GALLERIA.
A descargar desde aquí.
Sigue las instrucciones para instalar en tu web (básicamente es descomprimir la carpeta en tu raíz de ficheros de tu página, si no te aclaras con el inglés o con el manejo de ficheros/rutas).
En mis archivo misScript.js he añadido esto:

jQuery('#gallery').galleria({
width: 450,height: 350,
imageCrop: true,
transition: 'fade',
extend: function(options)
{
Galleria.log(this);
Galleria.log(options);
this.bind('image',function(e)
{
Galleria(e);
Galleria.log(e.imageTarget);
jQuery(e.imageTarget).click(this.proxy(function()
{
this.openLightbox();
}));
});
}
});

Lo puedes copiar y pegar.
Crea un div con el id='gallery', y las imágenes de dentro ya las redimensiona y hace casi todo el plugin por si solo.
Para adecuar mejor la galería a tu web, donde pone width y height, son los pixeles en ancho y alto que va a oocupar la galería, los puedes modificar tanquilamente.

Es muy recomendable que las imágenes no difieran mucho en tamaño original al que luego vayan a tener en la galería (ganar velocidad) y NO deben ser más pequeñas, si no se quiere perder calidad (se nota mucho).

Hay un template (plantilla) por defecto para descargar gratuita, y otras 3 de pago más completas.
En la web, si te apetece, también explican cómo crear tus propias plantillas y un par de opciones de configuración básicas de la descargada.

lunes, 13 de junio de 2011

Traducir Formulario Comentarios o búsqueda WordPress

Básicamente, para hacerlo de una manera rápida y sencilla (que no óptima) se puede ir directamente al fichero que se encuentra en : ./wp-content/themes/nombre_plantilla/comments.php

Hay primero recomendaría hacer una copia del archivo, no vaya a ser que toquemos algo que no debiéramos (vamos, hacer eso habitualmente si no se está seguro de lo que se hace).
Este archivo, varía según la plantilla usada, pero lo normal es que mida rondando las 100 líneas... y lo más habitual, es que el contenido en plan "Name (required)" o "You must be logged" estén escritos tal cual, o como parámetros en funciones para ser impresos por pantalla, simplemente modificando ese contenido por el mensaje en nuestro idioma y subir el archivo modificado a nuestra web ya debería de estar.

Recomiendo probar después todos los campos de los formularios, porque es posible que algún mensaje se nos haya "colado" y no lo hayamos traducido correctamente.

También tener en cuenta que habrán partes que se cargan en nuestro portal (normalmente) al verse las entradas en sus secciones o página principal, como " 0 Comments" y cosas así, eso se carga desde otros ficheros que también habría que modificar el contenido que queramos, cómo son "single.php" para las páginas de una entrada y demás (dependiendo de la plantilla).

Para modificar el formulario de búsqueda, el archivo a modificar es:
wordpress/wp-content/themes/mi_plantilla/search.php
y así modificar por ejemplo las etiquetas de sugerencia si no se encuentra nada y poner lo que queramos.

jueves, 9 de junio de 2011

Plantilla Completísima WordPress.


Bueno, para la última web que me han mandado hacer,que es un portal (que ya publicaré cuando esté al 100%) gastrocultural, cómo últimamente, es utilizando WordPress, y la plantilla me la han dado, el problemilla es que es pagando (aunque no mucho).
Se llama "DEADLINE" y aquí hay una demo , aunque ya os digo, que si la pilláis (cómo pasa con la mayoría así de completa) no espéreis instalar un wordpress, instalar la plantilla y que aparezca así de buenas a primeras.
Lógicamente, lo primero es crear unas categorías y unas entradas de ejemplo, así como alguna página en plan "Quienes somos", "Nosotros" o algo así típico.
Iré poniendo paso por paso las siguientes configuraciones:



1º Qué sale y cómo en el menú 'top', justo en el borde superior del navegador y lo mismo para el menu de navegación principal, el de debajo de nuestro logo.
2º Qué orden, qué se muestra, y cómo en el slide central, y en los bloques que le siguen.
3º El sidebar de la derecha, cómo está organizado, cómo poner contenido propio.
4º Que poner en el footer, y cómo modificar algunas cosillas para que salgan en castellano, cómo la página de no encontrar nada del buscador.
5º Crearemos a partir de los custom fields (campos personalizados) y un plugin (WP-custom-fields-search) un buscador bastante personalizado, que será distinto en cada página/ seccion/ categoría que estemos, buscando lo que queramos donde queramos (más o menos) dentro de nuestro contenido bien organizado.

Luego ya iré poniendo cositas, como:
  • poner el Like Box de facebook.
  • el plugin para compartir con redes sociales los posts.
  • los últimos tweet.
  • comentar usando cuentas de FB.
  • añadir un Captcha fácilmente para evitar el Spam por lo menos.
  • crear un slide para la cabecera de nuestra propia plantilla con Jquery
  • y etc de cosillas que me vayan pidiendo.
Al tajo.

miércoles, 11 de mayo de 2011

Modificar origen de determinadas imágenes con Javascript

He estado haciendo un blog para unos fotógrafos en wordpress, con la plantilla f8-static (esta muy bien, por cierto, y es gratuita).
Bueno mi problema, fue que subían imágenes, a un tamaño, y la plantilla me las modificaba desde un fichero al que no tenía acceso en ese momento que tenía que solucionarlo, así que como tenía las imágenes en el servidor subidas correctamentes, y la plantilla creaba otras miniaturas, mi solución (un tanto salvaje) a sido:
-Recoger el vector con las imágenes del objeto DOM.
-Buscar las imágenes que contienen la cadena 'XXX' en su origen.
-Modificar la cadena, poniendo bien de donde se lee la imagen.


<script type="text/javascript">
var posicion = 0;
var origen = "";
var i=0;
document.write("tienes: " + document.images.length + "<br />");

for (i = 1; i <= document.images.length; i++)
{
posicion = document.images[i].src.indexOf('XXX');
if(posicion > 0)
{
origen = document.images[i].src.substr(0,posicion -1) + ".jpg";
document.images[i].src = origen;
}
}
</script>


Con este código también aprobechamos para repasar conceptos básicos de JS como las variables, el bucle "for" y el acceso a las imágenes del comunento HTML.