Menús responsivos en WordPress
jQuery Responsive Select Menu
Este plugin crea un «selectable» con las opciones de tu menú, y te permite ocultar uno u otro con media query
http://wordpress.org/plugins/jquery-responsive-select-menu/screenshots/
WP Responsive Menu
Este plugin crea un bonito menu lateral, que solo se muestra cuando la pantalla esta a ancho que tu determinas. Si quieres verlo en funcionamiento ve a mamarosabeach.com y reduce el tamaño de tu navegador.
Convertir todos los “li” con “a” dentro, en botones en jQuery
Es bastante habitual, cuando trabajamos con una plantilla WordPress, que un tema pinte los elementos de un menu como «LI» con etiquetas «A» dentro, por ejemplo: <li><a>mi menú</a></li>
También es habitual encontrarse que las propiedades CSS que hacen que nuestro enlace se vea como un botón, están aplicada al LI y no al A. Por tanto…. todo el LI parece un botón, pero solo el texto «mi menú» es clicable.
Esto bien puede solucionarse con estilos… pero también puede solventarse en un plis con este sencillo jQuery que hace que la etiqueta LI también sea clicable:
Crear una plantilla para una página CMS en Magento
Atención: las mayúsculas son cuentan, aseguraos de que todo concuerda.
- 1. Crear el bloque: app/code/local/Paquete/Plantilla/etc/config.xml
<!--?xml version="1.0"?--> <label>Esta es mi página personalizada</label> page/mi-pagina-personalizada.phtml
Poned vuestros propios nombres en «Paquete», «Plantilla», y todas las instancias de «Mi página personalizada».
- 2. Activarlo creando: app/etc/modules/Paquete_Plantilla.xml
<!--?xml version="1.0"?--> local true[...]
Línea interna de traducción en Magento
Aunque Magento se pueda traducir mediante CVS hay una opción que nos permite hacerlo directamente desde la página, ya sea en la parte de administración o en el frontend.
Para activarla, debemos ir al panel de administrador, en el menú superior ir a Sistema, y en el panel lateral Avanzado > Desarrollador.
En la pestaña Línea interna de traducción encontraremos las opciones “Activado para el Frontend» y «Activado para el administrador».
Si tenemos esta opción activa veremos que aparecen recuadros rojos alrededor de todos los elementos que podemos traducir. Si nos situamos encima aparecerá el icono de un libro.
[...]Curso de HTML y CSS (para IDEP)
Anatomía de una etiqueta
Dando por entendido que html es un lenguaje de marcado, en el que el contenido que ha de ser modificado visualmente ha de estar encerrado en una etiqueta, lo siguiente es hacer una «disección» de la etiqueta, a través de la cual podremos ver las distintas maneras que tenemos de apuntar a ella para darle formato.
Este es un texto de ejemplo en el que solamente <div id=»destacado» class=»botón destacado»>esta parte está encerrada en una etiqueta</div> y el resto no.
[...]Ordenar post en WordPress
Hay muchos plugins para reordenar post que han sido introducidos en orden cronológico, pero no no han de ser mostrados de esta forma sino «a gusto del cliente».
Mi preferido es: post-types-order entre otras cosas, porque también ordena los «custom post».
Hacer BackUp en WordPress con WP-DB-Backup
El plugin para hacer Backup de nuestra BBDD por excelencia, permite programar copias semanales que nos llegaran x mail.
Una vez instalado, para hacer un Backup, deberemos ir a:
Tools -> Backup -> Backup Options.
Seleccionar «Email backup to», escribir nuestro email y darle al botón «backup now»
Inspector de elementos
Los inspectores de elementos nos permiten señalar las etiquetas que estructuran nuestro contenido directamente en la ventana del navegador, mostrándonos qué parte del css es la responsable de dar formato a dicho contenido, y modificar (añadir, quitar y modificar propiedades, o «reglas» completas) para cambiar su visualización a tiempo real (sin tener que ir al editor de código a modificar nuestro css, y luego recargar la página para ver cambios).
Firefox trae un depurador propio integrado, y puede incluir Firebug, solo con descargarlo del enlace getfirebug.com
[...]Nociones básicas de HTML (para IDEP)
Hemos visto que el html es un lenguaje de marcado, en el cual podemos «etiquetar» nuestra información en distintos trozos, permitiéndonos luego, asignarle una apariencia a los elementos encerrados en una etiqueta.
Un ejemplo (abstracto y ficticio) seria el siguiente:
«Este es un párrafo ordinario, solo esto se ve <rojo>rojo.</rojo>El resto… se ve normal.»
En un ejemplo de este tipo, las características que conforman la apariencia del texto marcado por la etiqueta «rojo» se definiría en un documento a parte (vinculado al documento html) en el que las propiedades se enumerarían de la siguiente manera:
[...]CSS, flotación a la derecha
Los contenedores de la web, se representan de distinta manera en función del tipo de etiqueta utilizada para estructurar contenido.
Por defecto, la mayoría de contenedores no «obedecen» las ordenes de ancho, alto y posición.
Una forma sencilla de «setear» el comportamiento de todas las etiquetas de la pagina para hacer que todas se adapten al tamaño de lo que tienen dentro o representen correctamente un ancho y un alto es hacer que «floten» unas al lado de las otras (siempre que quepan).
También podemos decirles a todas que salten de linea, los que nos ayudará a acomodar de una manera mas sencilla el contenido de la web.
[...]