Source: http://planetawordpress.org/tag/css/
Timestamp: 2013-05-20 22:13:03+00:00

Document:
CSS | Planeta WordPress
Posted by planetawordpress on mayo 20, 2013 Comentarios desactivados
&lt;div class=&quot;relacionadas&quot;&gt;
&lt;div class=&quot;miniaturarelacionada&quot;&gt;
Imágenes en los menús personalizados de WordPress
Posted by planetawordpress on mayo 5, 2013 Comentarios desactivados
Los menús personalizados son una auténtica maravilla, aunque hayan supuesto la desaparición del gestor de enlaces. Permiten poner a nuestro gusto los menús de navegación en WordPress mediante una interfaz visual, algo que antes solo era posible modificando código manualmente.
Con menús personalizados podemos añadir elementos a la barra de navegación de nuestro tema fácilmente, eso si, habitualmente solo con texto, pero eso se puede mejorar, y vamos a ver 3 maneras de añadir imágenes a los menús personalizados.
1. Añadir imágenes mediante clases CSS
Es el método menos sencillo, pero también el más personalizable, pues las posibilidades son infinitas, solo dependen de tus conocimientos de CSS.
Para crear un elemento de menú que sea una imagen mediante este método el proceso es el siguiente:
Crea una clase CSS para cada imagen o icono que vayas a usar en un menú. Aquí desarrolla tu habilidad e imaginación.
Ve a “Apariencia -> Menús”, despliega las “Opciones de pantalla” y marca la casilla denominada “Clases CSS”
Añade el elemento de menú personalizado con la URL y etiqueta que desees
Despliega el elemento recién añadido y en el nuevo campo denominado “Clases CSS” pone el nombre de la que se aplicará a ese elemento concreto
Guarda los cambios del menú … que siempre se te olvida
Y así para cada elemento que quieras añadir.
Es el método más complicado pero también el mejor pues la personalización puede ser total.
2. Añadir imágenes poniendo la URL de la imagen
Este método es un poco “ñapa” pero funciona de maravilla y es fácil de usar.
Lo que tienes que hacer es crear un nuevo enlace de menú de URL personalizada, pero en vez de poner un texto normal en el campo de etiqueta pones el código HTML con el que mostrarías la imagen en cuestión que quieras mostrar, o sea, algo cómo … &lt;img title=&quot;Texto emergente de mi imagen&quot; src=&quot;http://misitio.es/imagenes/imagen.png&quot; /&gt;
Lo añades al menú y ya está, simple y efectivo. El elemento de menú se verá un poco raro al tener una etiqueta tan larga y extraña pero funciona de maravilla.
Por el puntillo friki que tiene es al método que tengo más cariño.
3. Añadir imágenes al menú con un plugin
Este método, cómo ya podrás imaginar, es sencillo a más no poder. Solo tienes que instalar un plugin llamado Nav menu images y empezar a usarlo. Ahora bien, no todo es tan bonito cómo parece.
A ver, no te asustes, que funcionar funciona, solo que requiere algún paso más del que imaginarás, pues en principio, al no tener página de ajustes ni nada parecido parece que no has instalado nada.
Instalas y activas el plugin
Añades un elemento de enlace personalizado al menú como harías habitualmente
Guardas los cambios en el menú (si, ahora, tu hazme caso)
Abres el elemento de menú recién añadido y verás un enlace bajo el campo de etiqueta para añadir una imagen al menú. Dale un clic
Se abre el cargador de medios de WordPress, eliges una imagen y la asignas
Guardas de nuevo los cambios
En realidad, cómo habrás visto, es sencillo, pero no es muy obvio que haya que guardar dos veces el menú, por lo que seguro que muchos han desinstalado el plugin antes de tiempo pensando que no funcionaba.
Bueno, y ya está, tu dirás qué método te ha gustado más, o incluso si conoces alguna manera más de hacer esto.
Posted by planetawordpress on febrero 17, 2013 Comentarios desactivados
Cambiar el color de fondo al seleccionar texto en WordPress
Posted by planetawordpress on febrero 6, 2013 Comentarios desactivados
Pues si, la diferencia está en los detalles, y si nos ponemos a personalizar nuestra web nunca hay límites a la hora de ofrecer una experiencia de diseño uniforme a nuestros visitantes.
Para rizar el rizo de la personalización y el diseño consistente, Brian Gardner nos anima a “tunear” el color de fondo con el que se decora un texto al seleccionarlo cuando visiten nuestro WordPress.
La idea es que, mediante CSS, ese color esté dentro de la paleta de nuestro diseño, y no el color por defecto del sistema del visitante. ¿Cómo se hace?, pues bien sencillo, sólo tienes que añadir una nueva clase CSS a tu hoja de estilos, normalmente con el nombre style.css y situada en la carpeta del tema activo donde, dentro de la sección del body, añadiremos lo siguiente:
En el ejemplo el código hexadecimal para el color (#ff6200) es un bonito color naranja, que deberás cambiar al que se ajuste a tu diseño.
El selector ::selection está soportado por IE9+, Opera, Google Chrome y Safari. El otro selector, ::-moz-selection es el que soporta Firefox, de ahí que tengamos que añadir ambos.
¿Te ha gustado el truco?, ¿lo vas a incorporar en tu WordPress?
Posted by planetawordpress on enero 3, 2013 Comentarios desactivados
Parece ser que está confirmada una grave vulnerabilidad XSS (Cross Site Scripting) en el plugin JetPack, por la que tu sitio puede quedar expuesto a inyecciones de código. Según se ha avisado en los foros de soporte, de lo que me ha avisado José Conti, el plugin JetPack está utilizando una versión...
Posted by planetawordpress on noviembre 11, 2012 Comentarios desactivados
})(); &lt;/script&gt;
//Importaci&oacute;n de fuentes Google
“Retiniza” tu tema WordPress
Posted by planetawordpress on noviembre 4, 2012 Comentarios desactivados
Apple ha introducido en muchos de sus dispositivos el concepto de visualización llamado “Retina display“, mediante el cual un dispositivo mostrará el doble (por lo menos) de resolución de otro similar, gracias a las pantallas de alta calidad que usan, por ejemplo, los últimos iPhone, iPad y ordenadores MacBook.
Si has probado uno de estos dispositivos con pantalla retina habrás comprobado que la resolución de las tipografías y las imágenes es realmente espectacular.
Para tener una web “retina ready” hay que tener en cuenta varios aspectos, los principales son estos:
Imágenes a mayor resolución, algo fácil de añadir mediante varios métodos que veremos más adelante.
Iconos y botones mediante CSS, para poder mostrar diferentes versiones según el dispositivo.
Favicons, lo más fácil, pues solo tienes que subir un favicon a 32×32 pixels en vez del estándar a 16×16
Y, cómo no, en WordPress podemos estar preparados para ofrecer una versión “retina ready” de nuestra web, para lo que tenemos varias posibilidades, algunas realmente sencillas. Vamos a ver algunas opciones, unas más fáciles que otras …
…Plugins WordPress…
WP Retina 2x: Este plugin convierte nuestro WordPress en “retina ready“, al menos en lo que a imágenes se refiere. Ofrece dos modos distintos de servir imágenes a tus visitantes, pudiendo elegir el que se adapte mejor a tu alojamiento y entorno. También dispone de soporte para WordPress multisitio.
El plugin, una vez activo, crea los archivos de imagen necesarios para dispositivos con pantalla Retina. Si la resolución de las imágenes originales no fuera lo suficientemente alta te muestra un aviso en la Librería Multimedia para que subas imágenes a mayor resolución.
Desde el primer momento, el plugin reconoce el dispositivo desde el que se esté visualizando tu web y mostrará la versión de las imágenes adecuada al mismo, siendo la de mayor resolución en el caso de los de pantalla Retina.
Simple WP Retina: otro estupendo plugin que cambia, cuando tu web se ve desde un dispositivo con pantalla retina, a la versión @2x de las imágenes.
Para ello, el plugin crea versiones @2x de las imágenes de las entradas y también para las miniaturas. No hay nada que configurar, pero también tienes que instalar el plugin regenerate thumbnails una vez instalado Simple WP Retina y ejecutar el regenerado de miniaturas, el resto es automático.
Por supuesto, te ahorrará tiempo y esfuerzos utilizar un tema que ya esté listo para pantallas retina, como Responsive (gratuito) u otro montón que puedes encontrar (ya de pago)
… Redimensionado mediante CSS …
Esto ya existe, no tienes que instalar ni aprender nada. La idea es sencilla: servir imágenes al doble de resolución pero redimensionadas a la mitad. El dispositivo con pantalla Retina mostrará la imagen a su tope de resolución, la única pega es que siempre cargas la imagen a tope de resolución, aunque no sea necesario en dispositivos sin pantalla Retina.
Vamos, que lo que tienes que hacer es adquirir la costumbre de siempre subir las imágenes al doble de resolución de las que las vas a mostrar en tu tema y redimensionarlas ,usando los atributos “width” y “height“, todas a la mitad al insertarlas.
En definitiva, sería algo así para una imagen de resolución 640×400:
<img src="http://midominio.com/wp-content/uploads/2012/11/03/pedazo_de_foto.png" width="320" height="200" />
Un modo de conseguir lo mismo que con los anteriores métodos es mediante el script Retina.js. Una vez lo descargues del sitio oficial el proceso es este:
Sube el archivo retina.js a tu servidor
Añade el script necesario al archivo footer.php de tu tema activo, antes de la etiqueta </body>:
<script type="text/javascript" src="/scripts/retina.js"></script>
Lo que hace el script es asumir que usas el modificador de alta resolución recomendado por Apple (@2x) para identificar variaciones de imágenes de alta resolución en tu web y, de este modo, si insertas una imagen llamada, digamos pedazo_de_foto.png, entonces buscar una llamada pedazo_de_foto@2x.png que será la que mostrará a dispositivos con pantalla retina. Así que ya sabes lo que toca: subir siempre la susodicha, o en su defecto utilizar el truco de LESS CSS cómo se explica en la web oficial de Retina.js.
… Fuentes iconizadas …
Una de las cosas más horribles al “retinizar” una web son las fuentes, pues la redimensión las muestra horriblemente pixelizadas. Para solucionar esta importante faceta podemos utilizar la técnica @font-face, muy implantada a partir de Twitter bootstrap, y bastante fácil de añadir a nuestro WordPress mediante Font awesome, que permite instalar iconos de fuentes tipográficas en forma de vectores que, sin recargar enormemente tu web, mostrarán una versión a alta calidad que se verán de maravilla en pantallas Retina.
Una vez descargues Fong Awesome haz lo siguiente:
Copia la carpeta “Font Awesome” en tu servidor
Copia los archivos font-awesome.less o font-awesome.css en la carpeta de tu tema WordPress activo.
Abre el archivo CSS subido y edita la URL de la fuente para que apunte a la carpeta donde subiste Font Awesome
Otro modo de hacerlo es crear tu propia tipografía con servicios como Font builder y luego implementar las nuevas fuentes en tu sitio creando clases CSS que usen @font-face.
Bueno, como verás hay de todo, desde lo más sencillo hasta modos especiales para desarrolladores. Lo que parece que está claro es que la web tiende a retinizarse poco a poco y hay que tener en cuenta estas técnicas si queremos que nuestra web creada con WordPress sea competitiva y aporte valor añadido a estos dispositivos con pantalla Retina que cada vez se usan más.
Posted by planetawordpress on octubre 23, 2012 Comentarios desactivados
Los menús personalizados son una de las maravillas de WordPress que, desde hace varias versiones, nos permiten personalizar nuestro tema sin necesidad de tocar código.
Para el usuario final hasta aquí bien …
Pero también para los desarrolladores de temas son una oportunidad, aunque a veces también un problema, afortunadamente con solución.
Me refiero a que si desarrollas tu tema y en el código defines un menú, en cuando el usuario elabore su propio menú personalizado “matará” tu código, perdiendo algunas utilidades que le podrían gustar, o incluso ser imprescindibles, como enlaces a Twitter o incluso a la suscripción por RSS, todo con unas bonitas clases CSS o iconos.
Así que hace falta algo de reciclaje también para el desarrollador de temas WordPress y, para evitar esto, empezar a incorporar desde ya menús personalizados por defecto en sus temas.
Si estás animado entonces lo que tendrás que empezar a hacer es incluir en el fichero functions.php de tu tema algo como lo de este ejemplo:
/* Men&uacute; personalizado y activo por defecto
add_action('load-themes.php', 'aw_register_custom_menu');
function aw_register_custom_menu() {
register_nav_menu( 'main_menu', __('Men&uacute; principal') );
if ( isset( $_GET['activated'] ) &amp;&amp; $_GET['activated'] ) {
if ( !is_nav_menu( 'Men&uacute; principal' ) ) {
$menu_id = wp_create_nav_menu( 'Men&uacute; principal' );
$menu_home = array( 'menu-item-type' =&gt; 'custom', 'menu-item-url' =&gt; get_home_url('/'),'menu-item-title' =&gt; 'Inicio', 'menu-item-attr-title' =&gt; 'Home' );
$menu_twitter = array( 'menu-item-type' =&gt; 'custom', 'menu-item-url' =&gt; get_home_url('/'),'menu-item-title' =&gt; 'Twitter', 'menu-item-attr-title' =&gt; 'Twitter', 'menu-item-classes' =&gt; 'twitter' );
$menu_subscribe = array( 'menu-item-type' =&gt; 'custom', 'menu-item-url' =&gt; get_home_url('/'),'menu-item-title' =&gt; 'Suscripci&oacute;n', 'menu-item-attr-title' =&gt; 'Suscripci&oacute;n', 'menu-item-classes' =&gt; 'subscribe' );
wp_update_nav_menu_item( $menu_id, 0, $menu_home );
wp_update_nav_menu_item( $menu_id, 0, $menu_twitter );
wp_update_nav_menu_item( $menu_id, 0, $menu_subscribe );
'main_menu' =&gt; $menu_id,
Huelga decir que deberás modificar el código para que se ajuste a tus necesidades y gustos, igual que crear las clases CSS adecuadas, pero esa es la idea.
Lo que obtienes es que cuando un usuario o cliente active tu tema ya tendrá activo tu menú personalizado por defecto y así, en vez de borrar lo que había, lo podrá personalizar igualmente a su gusto, pero sin perder el “feeling” que tu le imprimiste en tu código.
Posted by planetawordpress on octubre 22, 2012 Comentarios desactivados
Posted by planetawordpress on octubre 18, 2012 Comentarios desactivados
Cuando subimos una imagen a WordPress para incluirla en una entrada o página el código insertado en la entrada tiene elementos innecesarios, normalmente ya cubiertos por el CSS, propio de WordPress o del mismo tema que usemos.
Por supuesto, podemos modificar este código posteriormente, eliminando lo que sobra, pero si por eso fuera no escribiríamos, estaríamos todo el día corrigiendo errores tontos del software que usamos, en este caso WordPress.
De lo que estoy hablando es de que cuando subes una imagen y la insertas desde WordPress lo que obtienes es un código más o menos así:
&lt;a href=&quot;http://misitio.com/wp-content/uploads/2012/10/imagenchula.png&quot;&gt;&lt;img src=&quot;http://misitio.com/wp-content/uploads/2012/10/imagenchula-550x820.jpg&quot; alt=&quot;&quot; width=&quot;550&quot; height=&quot;820&quot; class=&quot;alignnone size-large wp-image-29105&quot; /&gt;&lt;/a&gt;
Igual no lo sabes pero sobran algunas “tags“, pues parte del código de la imagen es en realidad innecesario, especialmente el que define el ancho y alto de la imagen, ya que también lo está gestionando la clase CSS “alignnone“ que incluye WordPress automáticamente, pues determina las dimensiones de la imagen.
Dicho esto, si limpiamos manualmente un poco el código, valdría exactamente igual de este modo (de hecho es mejor):
&lt;a href=&quot;http://misitio.com/wp-content/uploads/2012/10/imagenchula.png&quot;&gt;&lt;img src=&quot;http://misitio.com/wp-content/uploads/2012/10/imagenchula-550x820.jpg&quot; alt=&quot;esto es mi imagen chula&quot; class=&quot;alignnone size-large wp-image-29105&quot; /&gt;&lt;/a&gt;
Pero como ya he dicho antes, se supone que usamos WordPress para escribir cosas y compartirlas, no para dedicarle más tiempo al código que a la propia redacción de contenidos ¿no?.
Pues entonces, si te parece, podemos evitarnos esa tarea y automatizar la “limpieza” de código innecesario en nuestro WordPress, simplemente añadiendo unas líneas a nuestro plugin de funciones o al archivo functions.php del tema que tengamos activo, estas:
//Eliminar tags in&uacute;tiles de ancho/alto a im&aacute;genes subidas
Cuando guardemos los cambios, a partir de ese momento se eliminarán los elementos de ancho y alto de las imágenes que subas para incluirlas en entrada y páginas, pero también para las que hayas definido como miniaturas en tus entradas, y también en las imágenes destacadas.
Fácil y, sobre todo, barato.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución