Cómo usar Dashicons en WordPress

Desde WordPress 3.8 tenemos a nuestra disposición los maravillosos Dashicons pero ¿sabes cómo utilizarlos?

Los Dashicons son iconos a partir de fuentes que se pueden utilizar en publicaciones, temas, plugins o incluso la interfaz de administración de WordPress para sustituir a imágenes, mucho más pesadas. Además, los Dashicons son totalmente escalables en tamaño al ser vectores, por lo que se adaptan de maravilla a todo tipo de resoluciones de pantalla sin perder calidad.

Ahora bien, usarlos no es tan fácil como contarlo.

Añadir soporte de Dashicons

Antes de nada debes hacer que tu tema soporte Dashicons, para lo que debes ir al fichero functions.php del mismo y añadir lo siguiente:

WordPress ya soporta Dashicons así que para otros usos no necesitas nada más. Esto es necesario para que el tema muestre Dashicons.

Cómo añadir Dashicons en temas y plugins

Si vas a añadir, por  ejemplo, tipos de entrada personalizadas en un tema de tu creación lo ideal es que las distingas mediante un icono específico que las distinga del resto.

El primer paso es ir a la página oficial de Dashicons de WordPress, donde elegirás el icono a utilizar haciendo clic sobre el mismo para, a continuación copiar el código que necesitas para incorporarlo en tu tema, normalmente en CSS, aunque también ofrece obtener el HTML o incluso el glifo.

Apuntas el nombre del icono y lo añades a la función de tu tipo de entrada personalizada, así:

La etiqueta o descripción es la que tu quieras, solo tienes que definir la variable menu_icon con el nombre del Dashicon elegir, en el ejemplo “dashicons-book-alt”.

Lo que conseguimos es que nuestro tipo de entrada personalizada se identifique en el escritorio de WordPress con un bonito icono de un libro.

Si lo que queremos es añadir un icono distintivo a una página de ajustes de un plugin el proceso es parecido. Lo primero es elegir el icono, como antes, y a continuación añadimos el nombre del mismo a nuestra función del plugin que añada la página de ajustes, por ejemplo. Algo así:

 Cómo usar Dashicons en un menú personalizado de WordPress

Pero no solo para desarrolladores están hechos los Dashicons, sino que podemos usarlos donde queramos. Un uso muy interesante sería en un menú personalizado, que quedará mucho más chulo si lo acompañamos de  un bonito icono.

Una vez elegido el icono a utilizar, de nuevo de la página de Dashicons vista al principio de este artículo, en esta ocasión copiamos el código HTML.

Lo siguiente es aplicar la segunda variante del truco que ya vimos para usar imágenes en los menús personalizados de WordPress, solo que en este caso el código a utilizar será el que nos facilita la página de Dashicons, así de simple.

A modo de recordatorio, el proceso es este:

  1. Crea un elemento nuevo de menú en el que en la denominada Etiqueta de navegación, en vez de poner el típico texto, simplemente pega el código HTML del Dashicon.
  2. La URL del elemento del menú será el que tu quieras, por supuesto.
  3. Guarda los cambios.

Cómo usar Dashicons en cualquier otro sitio

Creo que es bastante obvio que puedes usar Dashicons en cualquier parte. Copiando el código HTML puedes añadirlos para ilustrar tus publicaciones, como elementos meta en tu tema mediante CSS o HTML, lo que quieras.

Si vas a utilizarlos como elemento común en tu tema simplemente crea una clase CSS para su uso posterior en el tema, y si los usas puntualmente simplemente utiliza el HTML donde quieras mostrarlos.

Para incorporar un Dashicon en tu CSS podría ser algo así:

Para tus publicaciones, puedes copiar y pegar el HTML del icono a usar o, si los usas mucho, incluso instalar un plugin como JM Dashicons Shortcode que te facilita la inserción de iconos en tus entradas o páginas.

desde Ayuda WordPress http://ift.tt/1E2ZIy3
via IFTTT

Crea tu propio plugin SEO

Siempre estamos con la discusión de cuál es el mejor plugin de SEO, que si el de Yoast porque tiene más cosas, que si el All in one SEO pack porque no falla nunca, que si Fernando está loco, que si meto las tags manualmente, etc. Pero ¿y si creas el tuyo propio? Así que basta de debates estériles y discusiones inútiles de a ver quién la tiene más larga y manos a la obra a crear un plugin SEO básico que añada las descripciones meta y un título para Open Graph con su descripción a la cabecera de las … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1iO0oZo
via IFTTT

Formulario multi pasos con CSS y Jquery

Vamos a ver la forma de crear una sencillo formulario  del tipo multipaso, muy útil cuando tenemos formularios muy extensos o con demasiados campos, utilizaremos Jquery easing para animar la transición de las diferentes etapas o partes de las que se compondrá y le daremos el toque artístico con un poco de CSS (no esperen mucho, no soy bueno para el CSS).

Bueno lo primero sera confeccionar nuestro formulario, para ello utilizaré el siguiente código, el cual no presenta secretos.

En primer lugar definimos la cantidad de pasos para confeccionar una barra de progreso, para mantener informado al usuario y evitar que deje el formulario abandonado y perdamos trafico,  en este ejemplo serán 3 (Configurar tu cuenta, Perfil Social y Detalles Personales).

La barra de progreso sera una simple etiqueta ul  con un id llamado progreso, con sus correspondientes etiquetas li (tantas como pasos tenga el formulario) [highlight color=yellow]no olvidar asignar la clase active al primer li[/highlight] que mediante jQuery y CSS posteriormente la dotaremos de vida.

Luego de definir los step o pasos del formulario, creamos diferentes campos fieldsets para contener cada paso y dentro todo lo que se requiera (inputs, h2, h3, p, label, etc).

En cada fieldset, adicional a los campos que requiramos, debemos agregar un input tipo button para avanzar de paso en paso y otro para retroceder (según corresponda), por tanto en este ejemplo necesito agregar uno el primer fieldset para avanzar, dos al segundo y uno para retroceder en el ultimo junto a uno tipo submit.
Si probamos el código obtendremos una simple pagina de fondo blanco con un formulario donde veremos todos los campos así.

formulario_sin_estilo

Un toque de sensibilidad

Ahora lo principal es hacer mas vistoso nuestro formulario, para ello sacamos nuestros dotes artísticos (mas de alguien fumara algo para encontrar su inspiración xD) y nos zambullimos en CSS, yo no tengo estudios formales en CSS, pero la web es basta y repleta de información al respecto, al final de este articulo les dejare algunos link relacionados para el que desee profundizar alguno de los temas tratados en este post.

Primero importaremos una fuente tipografica desde el CDN de fuentes de google, yo usare la fuente Montcerrat, pero pueden usar la que estimen, desde google fonts podran navegar, buscar y elegir la que mas les agrade.

Un pequeño reset de estilos al documento,  sera muy básico.

Altura del documento html y aplicamos un combo de imagen como patern + gradient, cave señalar que la mayoría de CSS que usaremos, no aplica en internet explorer, esto debido a su incompatibilidad con esta versión de CSS 3 (pero bueno a quien le importa esos dinosaurio xD).

A pesar que mencione que no funcionaba bien en internet explorer  debemos asegurarnos que los otros navegadores entiendan nuestra codificación de estilos y para ello utilizaremos los prefijos para sus respectivos motores de render:

[checklist]
  • -webkit- : Para la familia Chrome / Chromium y Safari
  • -moz- : Para Mozilla Firefox y derivados
  • -o- : Para Opera (o si, aun existe)
  • -ms-: Para internet explorer 9 (pero linear-gradient no funciona bien en ie)
[/checklist] Aplicamos la fuente importada
Ahora el formulario y su contenido
Solo resta la parte superior del formulario, donde se marcan los pasos:
Con esto hemos terminado la parte “artistica” de nuestro formulario. Si probamos nuestro formulario notaran que se ve bien esteticamente, que solo vemos la primera parte del formulario, pero al darle click al boton Next, no pasa nada, ahora le daremos vida con un poco de JQuery.

Crearemo un nuevo archivo con extension js, llamenlo como quieran, yo lo llamare funciones.js

Ahora si hemos terminado, si desean que su formulario envié deben editar la ultima función del script.

Adicionalmente deben refererciar al plugin easing porque ocuparemos uno de sus metodos para animar nuestro formulario.

A continuacion les dejare un enlace con una demo de este formulario y un link donde podrán descargar el ejemplo completo listo para usar o editar a su conveniencia.

Referencias

[box type=mojo size=large]

w3schools.com: http://www.w3schools.com/css/css3_gradients.asp

Google Fonts: https://www.google.com/fonts

la imagen que use de gradient : http://www.colourlovers.com/

[/box]

Demo

Ver Demostración

Descargar ejemplo

[download id="609"]

Efecto Loading mientras carga nuestra pagina web

Crear un efecto de “cargar página” o “loading” en JQuery mientras se van cargando todos los elementos de la página web es realmente sencillo (aunque cuando me toco por primera vez hacerlo, no me lo parecía xD) gracias a la función load() de jQuery.

Ahora un ejemplo sencillo y básico que puedes customizar con css de mil formas.

  • Insertamos un div con id “cargando” al principio o final de la etiqueta body de nuestra página web:

 

Y desde aquí ya va todo el contenido (divs, imágenes, etc…) de tu pagina …

  • Un poco de CSS al div que aparecerá primero por encima del resto de los elementos (con posición absoluta obviamente) hasta que se carguen todos los elementos del documento, que es cuando este div desaparecerá.
  • Escribimos un pequeño script dentro del “head” de nuestro documento, generalmente:
Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación y destreza con CSS puedes hacer un cargador de página mucho más original (Puedes crear diferentes imágenes de loading en http://www.ajaxload.info/).

Importante: La parte crucial de este sencillo loading es el uso de $(window).load() en lugar del clasico $(Document).ready()

para que lo tengan mas claro pueden crear un documento html con imágenes y ver como se comportan ambas.

Descargar ejemplo completo:

[download id="602"]