Como todos sabemos, WordPress es tan extenso que puedes usarlo para casi cualquier cosa. Incluso hay artículos en sitios con títulos locos como 101 usos alternativos para WordPress. Así que pensé, hey, ¿por qué no? Apuesto a que muchas personas quieren crear sus propias aplicaciones web y, en esencia, WordPress puede hacerlo por usted.. En este video tutorial, Vamos a hacer una libreta de direcciones en línea..

* Nota del editor: Tenemos un regalo especial para usted hoy. Este tutorial fue pensado originalmente para ser parte de nuestro programa NETTUTS +. Sin embargo, el programa ha demorado más en implementarse de lo que originalmente habíamos anticipado. No te preocupes, todavía está llegando! Hasta entonces, disfruta de este con nosotros.!

Este tutorial fue una tarea masiva para Harley. Así que, por favor, si no te importa, ¡tómate un momento para Digg! Gracias!

Lee nuestra entrevista con Harley.!

Prefacio

Esta libreta de direcciones va a tener las obras. Ajax cargando, cosas de administración condicional, el shiz. Esto, desafortunadamente, significa que debemos cumplir con algunos requisitos, algo que el tema necesita. Una copia de jQuery para empezar sería útil. Además de esto, el tema necesita algunas imágenes! Descarga este zip, que luego expandirás en tu directorio de temas. Finalmente, una copia del complemento de Live Search que he editado ligeramente por razones de CSS. Original aquí

Y, por supuesto, como siempre, necesitará un blog de WordPress al que tenga acceso. Hay tutoriales sobre cómo ejecutar Wordpress localmente aquí para Windows, y aquí para OS X. Debido a la naturaleza del contenido de la publicación, recomiendo comenzar un nuevo directorio de WordPress.

Por lo tanto, debe tener: jQuery, imágenes, complemento de búsqueda en vivo y un directorio de WordPress. súper.

Paso 1 - Organizar archivos.

Vamos a empezar por crear los archivos necesarios. En el directorio wp-content / themes de tu blog de WordPress, crea una carpeta llamada 'libreta de direcciones'. Agregue el archivo jQuery y las imágenes en esta nueva carpeta. El 'live-search-popup' va en la carpeta wp-content / plugins, por razones obvias.

Ahora que los archivos descargados están en su lugar, necesitamos crear algunos archivos más. En el directorio de temas, cree: addressBook.js, index.php, single.php y style.css. Mientras tratamos con estos archivos, crearemos el meta del tema. Abre style.css y pega + edita esto:

/ * Nombre del tema: URI del tema de la libreta de direcciones: http://net.tutsplus.com/ Descripción: Uso de WordPress como versión de la libreta de direcciones: 1.0 Autor: Harley Alexander URI del autor: http://www.baffleinc.com/ * /

Ahora que ha creado información básica para que WordPress la reconozca, navegue hasta la página de selección de Temas (Diseño> Temas) en wp-admin y haga clic en el nuevo bloque de la Libreta de direcciones. Por ahora (si está utilizando una versión de WP que muestra una vista previa antes de la activación) estará en blanco. ¡Pero no te preocupes! Activalo!

Paso 2 - Publicar contenido

Ahora que todos los archivos están allí y organizados, podemos pasar a crear algunas publicaciones de muestra para nosotros. La razón por la que este método funciona es porque WordPress permite campos personalizados. Los campos personalizados son solo eso: el área de contenido personalizado que se debe completar. Un campo de contenido de publicación es diferente al campo de etiquetas, ya que los campos personalizados son diferentes a los campos de categoría. La razón por la que esto es tan fantástico es porque significa que podemos adjuntar partes separadas de información a una publicación sin tener que sacarlas del contenido de forma dolorosa. Navega al panel de control y escribe una nueva publicación..

Estaremos usando:

• Título como el nombre de la persona
• Publicar Contenido como las notas para la persona
• Categorías como grupo de la persona (trabajo / hogar)
• Campos Personalizados Para el hogar, trabajo y teléfonos móviles. Sitio web y correo electrónico, dirección y finalmente una imagen de ellos..

Ahora los campos personalizados no son tan desalentadores como suenan, debe darles un nombre (clave) y algo de contenido (valor). Lo bueno de ellos es que, una vez que se han utilizado una vez, puede volver a seleccionarlos en un menú desplegable para no confundir los nombres por accidente. Además, no todos los campos personalizados son necesarios, por lo que puede dejar algunos espacios en blanco si no tiene esa información específica (más adelante, cuando tengamos la temática, crearemos un enlace de edición / adición).

Después de haber agregado un par de publicaciones ficticias, podemos pasar a mostrar el contenido a través de archivos de plantilla.

Paso 3 - Código de WordPress

Esta libreta de direcciones (sorpresa sorpresa) estará basada en la libreta de direcciones de Apple:

Borrosa por razones obvias, esa imagen también muestra qué secciones son cuáles, ¡así que es más fácil de visualizar mientras se codifica! Empezaremos con index.php.

index.php

Esta página es lo que todos verán por primera vez cuando vengan a su libreta de direcciones, así que debe ser informativo. Al igual que en la vista previa anterior, todas las páginas tendrán el mismo diseño: Single.php tendrá la misma apariencia que el efecto que nunca se vuelve a cargar. Esto es solo para los navegadores sin JS, por lo que se degrada al 100% con gracia. Me refiero al 100%. El jQuery en esto es solo para acelerar la carga del contenido, y (eventualmente) la función de búsqueda en vivo. La libreta de direcciones aún debe funcionar sin estos productos, aunque!

Para comenzar con un tema de WordPress, siempre tengo información básica sobre el encabezado.

Cambie lo que hay entre las etiquetas de título a simplemente 'Libreta de direcciones'. Debajo del enlace de la hoja de estilo, agregue el siguiente código para ingresar el código JavaScript eventual:

Dado que toda la información del encabezado está terminada, podemos pasar juntos a la codificación de un diseño estructurado. Entre las etiquetas del cuerpo, agregue esto:

Estas secciones contendrán todos los post loops. Obviamente. Vamos a empezar con el encabezado. Consiste en un h1 para el título y el formulario de búsqueda. Reemplace el comentario:

Directorio
 
 
 
 
 
 

El formulario de búsqueda no es en realidad el complemento todavía. Esto es porque solo necesitamos los resultados, ¿verdad? Así que usamos una función diferente en la sección principal que se superpone a la lista original para que aparezca como si se estuviera filtrando a través de todos los datos. El intervalo que envuelve el texto h1 es para que podamos agregar un pequeño ícono favicon-esque a la izquierda de.

La sección de grupos es aún más fácil y más corta..

Los grupos
 
 
"> Todos
  

La sección principal, o donde va la lista de nombres, consiste en el bucle y los resultados de búsqueda en vivo que superponen esta lista. El parámetro de exclusión significa que no se muestra "sin categorizar" porque una categoría vacía es molesta!

Nombre
 
  
">
  
 

Noté que he compactado el bucle a una cantidad muy pequeña. Por lo general, esto sería una mala práctica, pero para esta aplicación de WordPress no es realmente necesario. El query_posts obliga al bucle a mostrar 9999 publicaciones en lugar del conjunto predeterminado del Panel. La función se incluye de forma segura, solo si el complemento está activado. Lo que haremos ahora. Abra la sección de complementos del Panel de control y active el complemento de búsqueda en vivo emergente. Si no está allí, entonces no ha descargado e instalado el complemento. Instálalo ahora.

El loadArea en la página principal está esencialmente vacío, así que solo necesitamos un título explicativo!

Seleccione una entrada para ver!

Finalmente el pie de página. ¡Este bloque tiene la mayor cantidad de código y es el primer encuentro con el estado de inicio de sesión condicional! Te explicaré poco a poco.

 /wp-admin/post-new.php "title =" Agregar entrada "> /wp-admin/post.php?action=edit&post=CARNÉ DE IDENTIDAD; ?> "title =" Editar esta carta ">  get_var ("SELECT COUNT (*) FROM $ wpdb-> posts WHERE post_status = 'publish'"); si (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Así que las dos primeras etiquetas de anclaje son condicionales en $ user_ID. Esta variable verifica si un usuario ha iniciado sesión (en este caso que tiene privilegios de administración), luego muestra algunos botones de agregar y editar. El php extraño de SQL al final obtiene el número total de tarjetas de contacto, por lo que se muestra como la libreta de direcciones de Apple.

Eso es todo por índice! A continuación, trabajaremos en single.php, así que ábrelo y empezaremos.!

single.php

index.php aún debe estar abierto, por lo que esencialmente single.php es el mismo diseño, copia TODO el código de index.php a single.php y guárdalo.

Debido a que es single.php, por defecto, el bucle solo mostrará una publicación. Para contrarrestar esto, ya hemos agregado una función query_posts en index.php.

Single.php difiere del índice principalmente con el código que se encuentra entre las zonas de carga. En lugar de h2, el bucle completará esto.

 
 <-- vast loop goes here. VAST. --> 
 < endwhile; endif; ?>

El contenido de Loop, de aquí en adelante, consiste en bloques de PHP, que son relativamente idénticos (barra la imagen y las notas). $ Query_string es una forma breve y sucia de revertir los parámetros del bucle para mostrar una publicación para single.php. La entrada comienza con una imagen..

ID, 'entryImg'))! = ") ?>    /wp-admin/post.php?action=edit&post=CARNÉ DE IDENTIDAD; ?> # meta-62 ">    

Código loco! El primer 'if' comprueba si ese campo personalizado tiene algún contenido, comparándolo con el valor de nada. La declaración "if" anidada se comprueba para ver si el administrador ha iniciado sesión y, si es así, proporciona un enlace para editar el campo personalizado. El raro (… y post =CARNÉ DE IDENTIDAD; ?> # meta-62). Al utilizar la ID de publicación, tenemos una URL que cambia dinámicamente y se mantiene relevante al 100%! El final de la URL. Será diferente para ti! Tengo un selector de DOM, pero puede usar Firebug para averiguar las ID de los divs del campo personalizado. El div que contenía el valor de entryImg para mí era # meta-62.

Necesitamos agregar un pequeño título también!

Pan comido. El siguiente es el primer 'bloque'. Todos estos bloques son relativamente iguales. De hecho, después del primer correo electrónico inicial y el sitio web, solo son caracteres estáticos.

"

Bloques de correo electrónico / sitio web

ID, 'correo electrónico'))! = ") ?> 
 Email: ID, 'correo electrónico', verdadero); ?> ">ID, 'correo electrónico', verdadero); ?> /wp-admin/post.php?action=edit&post=CARNÉ DE IDENTIDAD; ?> # meta-56 "> Eliminar o Editar  
 Email'); ?>

Uso intensivo de campos personalizados ... La instrucción if comprueba si el campo personalizado tiene algún contenido, comparándolo con "o nada". Por lo tanto, si no es igual a nada (por lo tanto tiene contenido), muéstrelo. De lo contrario, no tiene ningún contenido, mostrar un enlace de agregar / editar.

Justo debajo de esto, copie ese bloque y cambie el 'correo electrónico' en TODAS las etiquetas de campo personalizadas al 'sitio web', y elimine el 'mailto:' en el valor href. ¡No olvides cambiar el enlace #meta - ##! El mío fue 57 para el campo del sitio web. No olvides la etiqueta fuerte o el valor de edición de publicación tampoco!

ID, 'sitio web'))! = ") ?> 
 Email: ID, 'sitio web', verdadero); ?> ">ID, 'sitio web', verdadero); ?> /wp-admin/post.php?action=edit&post=CARNÉ DE IDENTIDAD; ?> # meta-57 "> Eliminar o Editar  
 Sitio web'); ?>

Teléfonos / Bloques de direcciones

Todos estos son ahora los mismos. Solo necesitas cambiar cuatro cosas por bloque. Los nombres de los campos personalizados, la etiqueta segura, el valor href del enlace de edición y el contenido. Aquí está el primer bloque:

ID, 'phone-home'))! = ") ?> 
 Teléfono de casa: ID, 'teléfono-casa', verdadero); ?> /wp-admin/post.php?action=edit&post=CARNÉ DE IDENTIDAD; ?> # meta-66 "> Eliminar o Editar  
 Teléfono de casa'); ?>

Continúe y duplique esto cuatro veces, una para cada campo personalizado. Debe tener uno de estos bloques para: Teléfono residencial, Teléfono del trabajo, Teléfono móvil y Dirección.

Bloque de notas

Finalmente, necesitamos mostrar algunas notas..

Nota: 

¡Increíble! ¡Eso es todo el código de WordPress necesario! Observe cómo el teléfono del trabajo es un enlace. Más adelante, aplicaremos estilo a CSS para que tenga un icono más. Actualmente debería verse así:

Paso 4 - CSS

CSS hace que el sitio se vea bonito! Saltemos a la derecha en eso. Necesitamos comenzar con un restablecimiento sucio, la definición del cuerpo y el fondo de la envoltura. WrapperBg.png es una captura de pantalla de la libreta de direcciones real de Apple borrada. Añadimos todas las cosas que necesitamos en la parte superior..

* margen: 0; relleno: 0; esquema: 0;  body font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  #wrapper width: 621px; altura: 370px; margen: 50px auto; relleno: 24px 40px 55px 40px; fondo: url (images / wrapperBg.png); 

Ya, si nos fijamos en la vista previa, la forma de la ventana ya está allí. A continuación, tenemos que averiguar el encabezado. Por suerte, lo he hecho por ti! Hurra!

#header text-align: center; altura: 55px;  #header h1 font-size: 12px; fuente-peso: normal; relleno: 5px;  #header h1 span background: url (images / h1Spanbg.png) sin repetición a la izquierda; relleno-izquierda: 20px;  #searchform float: right; margen derecho: 10px; fondo: url (images / searchBg.png) no-repetir izquierda 1px; ancho: 135px; altura: 22px;  #s fondo: 0; borde: 0; línea de altura: 20px; ancho: 110px;  #searchsubmit background: 0; borde: 0; altura: 20px; ancho: 15px; margen: 0; 

Afortunadamente, eso es todo lo que se necesita para hacer el encabezado 100% hecho.

Ahora vamos a diseñar la sección de grupos, que en realidad son las categorías:

#wrapper h3 background: url (images / h3bg.png) repeat-x; altura: 16px; tamaño de fuente: 10px; text-align: center; línea de altura: 16px; fuente-peso: normal; borde derecho: 1px gris sólido;  #groups width: 161px; flotador izquierdo;  #groups li a background: url (images / groupsBg.png) no se repite 10px 4px;  #groups li a: hover background: url (images / groupsBg.png) no se repite 10px 4px gris;  #groups li, #mainSection li padding: 0; tamaño de fuente: 12px; desbordamiento: oculto;  ul li a text-decoration: none; de color negro; relleno: 3px 0 3px 30px; margen: 0; bloqueo de pantalla; 

Y luego la sección principal para deslizarse al lado de la sección de grupo:

#mainSection width: 160px; flotador izquierdo; posición: relativa;  #mainSection li a background: url (images / h1SpanBg.png) no se repite 10px 5px! IMPORTANTE;  #mainSection li a: hover background: url (images / h1SpanBg.png) no se repite 10px 5px gris! IMPORTANTE;  #livesearchpopup_box position: absolute; arriba: 0; izquierda: 0; ancho: 158px! IMPORTANTE; altura: 264px; borde: 0; 

Y con eso, todo es empujado en sus respectivas áreas, excepto el pie de página. Si busca, la superposición irá debajo de las publicaciones que ya están allí. Así que tenemos que posicionarlos absolutamente. El último selector de arriba hace esto..

El área de carga aún necesita ser estilizada. Para ver esto completamente en acción, vaya a una sola página haciendo clic en un contacto. Antes de que se vea así:

#loadArea posición: relativa; desbordamiento: auto; altura: 280px; flotador izquierdo; ancho: 279px; relleno: 10px 10px 0 11px; tamaño de fuente: 10px;  #loadArea strong color: gris;  #loadArea #entryImg float: left; ancho: 48px; derecho de relleno: 10px;  #loadArea p line-height: 16px; margen inferior: 1em; Limpia los dos;  #loadArea a text-decoration: none; color gris;  #loadArea span.add background: url (images / add.png) no se repite en el centro de la derecha; relleno: 3px 20px 1em; bloqueo de pantalla; text-align: right; margen superior: 1em;  #loadArea a.edit-link display: block; flotar derecho; línea de altura: 16px; fondo: url (images / delete.png) sin repetición derecha 1px; relleno: 0 20px;  #loadArea h2 font-size: 16px; altura: 55px;  p.notes border-top: 1px gris sólido;  #load background: url (images / ajaxLoader.gif); ancho: 32px; altura: 32px; bloqueo de pantalla; margen: 0 auto; posición: absoluta; izquierda: 134px; arriba: 129px; 

Inicie sesión en wp-admin y verifique cómo se ve en una sola página. El #load es para cuando tengamos algo de jQuery. Pero como se adjunta dentro de jQuery, no hace ningún daño tenerlo aquí..

El último bit de la sección de CSS es para arreglar el pie de página. Algunos CSS simples para hacer esto. Lo único interesante aquí es que tienes que hacer flotar el número de cartas a la derecha, ya que si lo posicionas desde la izquierda, parecería extraño cuando hayas iniciado sesión..

 #footer altura: 20px; línea de altura: 18px; tamaño de fuente: 11px; acolchado superior: 3px; Limpia los dos;  #footer #totCards float: right; margen derecho: 130px; text-shadow: #fff 1px 1px 2px;  #footer a.addEntry margin-left: 165px;  #footer a.editButton margin-left: 145px; 

¡El CSS ya está hecho! Eso significa que el sitio ahora debería ser completamente funcional en un navegador sin jQuery, esencialmente terminado. Pero aquí en NETTUTS, nos gusta ir más allá. Así que trabajaremos para que los contactos se carguen con AJAX en la página de inicio en lugar de volver a cargar la página..

Ahora nuestro reto plantea algunos problemas. El plugin live-search-popup usa Prototype, y lamentablemente el desarrollador no consideró el conflicto de la biblioteca JS. Entonces, esto significa que tenemos que usar un selector alargado y definir la configuración de noConflicto. No es difícil, solo un poco diferente..

Abra addressBook.js. En la parte superior, definimos el noConflicto..

jQuery.noConflict ();

Este es el método de jQuery para asegurarse de que todo el código nativo de jQuery sea 100% tout seule, único de todas las otras bibliotecas.

Ahora para la llamada de documento listo. Al igual que con cualquier jQuery, necesita envolver el código en este.

jQuery (document) .ready (function () // jQuery Code here);

Este tutorial utiliza un método similar para cargar el tutorial de NETTUTS Cómo cargar y animar contenido con jQuery. Empecemos con el evento..

jQuery ('# posts li a'). click (function () // loading code ...);

Ahora necesitamos definir una variable que contenga todo el contenido de single.php que difiere de index.php. Esto es todos los campos personalizados.

var cardContent = jQuery (this) .attr ('href') + '# inner-content';

Al igual que con cualquier desarrollador de AJAX que se respete a sí mismo, ¡quien no quiere mostrar que puede poner un cargador en su contenido! El cargador en sí no tiene nada que ver con la carga real, solo se muestra mientras la carga está en curso!

jQuery ('# load'). remove (); jQuery ('# loadArea'). append (''); jQuery ('# load'). fadeIn (300);

Por último, para la carga real. Estas funciones usan la variable y reemplazan lo que estaba en la división #loadArea con el contenido interno de single.php.

jQuery ('# loadArea'). fadeOut (300, loadTheContent); function loadTheContent () jQuery ('# loadArea'). load (cardContent, ", showNewContent ()); function showNewContent () jQuery ('# loadArea'). fadeIn (600, hideLoader); function hideLoader () jQuery ('# load'). fadeOut ('normal'); return false;

Bien hecho!

Si navega a la página de inicio ahora y hace clic en uno de los nombres, ¡se cargará automáticamente! ¡Incluso se desvanece dentro y fuera! Me encantaría que esto funcione en los resultados del complemento de búsqueda en vivo, sin embargo, se carga a través de un prototipo, por lo que cualquier aplicación de jQuery no funcionará demasiado bien. De lo contrario, esto concluye otra forma extensa en la que WordPress puede ser utilizado en todo su potencial como ... Casi cualquier cosa!