En este tutorial, lo guiaré a través del proceso de creación de un hermoso formulario de "Registro", utilizando Fancybox, jQuery y, por supuesto, WordPress. Como verás, el proceso es bastante sencillo..

Paso 1. El marcado

Primero, coloquemos nuestro botón en la parte superior de la página, reemplazando la descripción predeterminada en el tema.

 
Registro

Observe que en el botón de registro, href (# register-form) tiene la misma ID que el formulario a continuación. También estamos usando la clase ".show" para llamar a FancyBox con jQuery.

Necesitamos nuestra base; vamos a crear nuestro marcado. Abra header.php y coloque este fragmento de código en el lugar que desee.

 
  
 
 
Registra tu cuenta
 Regístrate con nosotros y disfruta.! 
 
    
 
Una contraseña le será enviada por correo electrónico a usted.
 
 
 

Tenga en cuenta que estoy usando display: none para ocultar el formulario inicialmente.

---

Paso 2. CSS

El CSS es bastante simple; Simplemente estoy diseñando un diseño de formulario rápido en PhotoShop.

El formulario, menos el estilo, se ve así: (tenga en cuenta que he eliminado la pantalla: ninguno en el marcado para comprobar mis estilos)

Vamos a comenzar a diseñar nuestra caja..

 div # register-form width: 400px; desbordamiento: oculto; altura: 230px; posición: relativa; fondo: # f9f9f9 url (images / secure.png) no se repite 260px 40px; Familia tipográfica: Helvetica Neue, Helvetica, Arial! important; 

Continuando, ahora voy a estilo de las entradas de texto, agregando un poco de fantasía.

 div # register-form input [type = "text"] display: block; borde: 1px sólido #ccc; margen: 5px 20px; relleno: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; ancho: 200px; Familia tipográfica: Helvetica Neue, Helvetica, Arial! important;  div # register-form input [type = "text"]: hover border-color: # b1b1b1;  div # entrada de formulario de registro [tipo = "texto"]: foco -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc; 

Ahora, voy a diseñar el botón, agregar un estado flotante y reemplazar el botón predeterminado con una imagen.

 div # register-form input [type = "submit"] # register background: url (images / register.jpg) no-repeat; borde: 0; Limpia los dos; cursor: puntero; altura: 31px; desbordamiento: oculto; posición: relativa; izquierda: 295px; texto-sangría: -9999px; superior: 42px; ancho: 92px;  div # register-form input [type = "submit"] # register: hover background-position: 0 -32px; 

Finalmente, añadimos un poco de estilo general..

 div # register-form span display: block; margen inferior: 22px;  div # register-form div.title margin-left: 15px div # register-form div.title h1, div # register-form div.title span text-shadow: 1px 1px 0px #fff div # register- forme div.title h1 margen: 7px 0;  p.statement posición: absoluta; abajo: -2px; izquierda: 10px; tamaño de letra: .9em; color: # 6d6d6d; text-shadow: 1px 1px 0px #fff; 

Voila! Tenemos nuestra forma. Ahora, avancemos con la funcionalidad jQuery..

---

Paso 3. jQuery

Primero, debemos incluir jQuery dentro de WordPress. Para lograr esto, necesitamos colocar el siguiente fragmento de código antes de la etiqueta dentro del archivo header.php. Recuerde, como WordPress utiliza jQuery, no queremos cargarlo dos veces!

Descarga Fancybox y colócalo en tu carpeta de WordPress. Para organizar un poco más las cosas, he creado una carpeta "Incluye".

A continuación, abra su archivo footer.php y coloque lo siguiente antes de que finalice el etiqueta

Y ahora, llamemos al método fancybox; Pega esto después del código anterior y antes de la etiqueta de cierre del cuerpo..

 jQuery (document) .ready (function () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade'); ;

Hemos terminado Nuestra forma ha sido creada; Por último, solo necesitamos pasar la información de WordPress necesaria para que funcione correctamente..

---

Paso 4. WordPress

No hay nada lujoso aquí; solo necesitamos dos fragmentos de WordPress, ocultos dentro del archivo wp-login.php.

El primer fragmento:

Y:

El código final debería verse así:

 
  
 
 
Registra tu cuenta
 Regístrate con nosotros y disfruta.! 
 
     
 
Una contraseña le será enviada por correo electrónico a usted.
 
 
 

Tenga en cuenta que es realmente importante, y necesario, tener user_login como nombre y como ID en su entrada de texto; lo mismo es cierto para la entrada de correo electrónico. De lo contrario, no funcionará.

Y con eso, hemos terminado.!

Conclusión

Con un toque de código y algunos ajustes, hemos logrado crear un "Formulario de registro" de gran apariencia para nuestros usuarios. Qué piensas?