Comme nous le savons tous, WordPress est si étendu que vous pouvez l'utiliser pour presque tout. Il existe même des articles sur des sites aux titres loufoques, tels que 101 utilisations alternatives de WordPress. Alors j'ai pensé, hé, pourquoi pas? Je parie que beaucoup de gens veulent créer leurs propres applications Web et, essentiellement, WordPress peut le faire pour vous.. Dans ce tutoriel vidéo, nous allons faire un carnet d'adresses en ligne.

* Note de la rédaction: nous avons un traitement spécial pour vous aujourd'hui. Ce tutoriel devait à l'origine faire partie de notre programme NETTUTS +. Cependant, la mise en place du programme a pris beaucoup plus de temps que prévu initialement. Ne t'inquiète pas, ça arrive toujours! Jusque-là, profitez de celui-ci sur nous!

Ce tutoriel était une entreprise de grande envergure pour Harley. Alors s'il vous plaît, si cela ne vous dérange pas, prenez un moment pour Digg! Je vous remercie!

Lire notre interview avec Harley!

Préface

Ce carnet d'adresses va avoir les travaux. Chargement Ajax, trucs d'administration conditionnelle, le shiz. Malheureusement, cela signifie que nous devons répondre à quelques exigences, dont le thème a besoin. Une copie de jQuery pour commencer serait pratique. En plus de cela, le thème nécessite quelques images! Téléchargez ce zip, que vous développerez plus tard dans votre répertoire de thèmes. Enfin, une copie du plugin Live Search que j'ai légèrement modifiée pour des raisons CSS. Original ici

Et bien sûr, comme toujours, vous aurez besoin d'un blog WordPress en cours d'exécution auquel vous avez accès. Il existe des tutoriels sur l'exécution de Wordpress localement ici pour Windows et ici pour OS X. En raison de la nature du contenu du message, il est vivement recommandé de commencer un nouveau répertoire WordPress..

Vous devriez donc avoir: jQuery, des images, un plugin de recherche en direct et un répertoire WordPress. Super.

Étape 1 - Organiser les fichiers.

Commençons par créer les fichiers nécessaires. Dans le répertoire wp-content / themes de votre blog WordPress, créez un dossier appelé "addressBook". Ajoutez le fichier jQuery et les images dans ce nouveau dossier. Le 'live-search-popup' va dans le dossier wp-content / plugins, pour des raisons évidentes.

Maintenant que les fichiers téléchargés sont en place, nous devons créer quelques fichiers supplémentaires. Dans le répertoire du thème, créez: addressBook.js, index.php, single.php et style.css. Pendant que nous traitons ces fichiers, nous allons créer la méta de thème. Ouvrez style.css et collez + éditez ceci:

/ * Nom du thème: URI du thème AddressBook: http://net.tutsplus.com/ Description: Utilisation de WordPress comme carnet d’adresses Version: 1.0 Auteur: Harley Alexander URI de l’auteur: http://www.baffleinc.com/ * /

Vous avez maintenant créé des informations de base à reconnaître par WordPress, accédez à la page de sélection de thème (Conception> Thèmes) dans wp-admin, puis cliquez sur le nouveau bloc AddressBook. Pour l'instant (si vous utilisez une version de WP qui affiche un aperçu avant l'activation), il sera vide. Ne t'inquiète pas quand même! L'activer!

Étape 2 - Contenu du message

Maintenant que tous les fichiers sont là et organisés, nous pouvons créer des exemples de publications pour nous. Cette méthode fonctionne parce que WordPress permet l'utilisation de champs personnalisés. Les champs personnalisés ne sont que cela - une zone de contenu personnalisée à remplir. Un champ de contenu de publication est différent du champ d'étiquettes, car les champs personnalisés sont différents des champs de catégorie. Cela est si fantastique parce que cela signifie que nous pouvons joindre des informations séparées à un message sans devoir les extraire péniblement du contenu. Accédez au tableau de bord et rédigez un nouveau message..

Nous allons utiliser:

• Titre comme le nom de la personne
• Publier un contenu comme les notes pour la personne
• Les catégories en tant que groupe de la personne (travail / maison)
• Les champs personnalisés Pour la maison, le travail et les téléphones mobiles. Site Web et email, adresse et enfin une image d'eux.

Maintenant, les champs personnalisés ne sont pas aussi intimidants qu’ils semblent, vous devez leur donner un nom (clé) et du contenu (valeur). La bonne chose à leur sujet est qu’une fois qu’ils ont été utilisés une fois, vous pouvez les sélectionner à nouveau dans un menu déroulant afin de ne pas confondre les noms par accident. De plus, tous les champs personnalisés ne sont pas nécessaires. Vous pouvez donc laisser certains champs vierges si vous ne disposez pas de ces informations spécifiques (nous créerons un lien de modification / ajout ultérieurement..

Une fois que vous avez ajouté quelques publications factices, nous pouvons afficher le contenu via des fichiers de modèle..

Étape 3 - Code WordPress

Ce carnet d'adresses (surprise surprise) sera calqué sur le carnet d'adresses Apple:

Floue pour des raisons évidentes, cette image affiche également les sections correspondantes. Il est donc plus facile de visualiser tout en codant! Nous allons commencer avec index.php.

index.php

Cette page est ce que tout le monde verra d’abord quand ils viendront dans votre carnet d’adresses, il faut donc qu’elle soit informative. Comme dans l'aperçu ci-dessus, toutes les pages auront la même mise en page. Single.php aura le même aspect et la même apparence que pour créer cet effet jamais rechargé. Ceci est juste pour les navigateurs sans JS, de sorte qu'il se dégrade à 100% gracieusement. Je veux dire 100%. Le jQuery dans cela est juste pour accélérer les choses de chargement du contenu, et (éventuellement) la fonction de recherche en direct. Le carnet d’adresses doit encore fonctionner sans ces produits.!

Pour démarrer un thème WordPress, j'ai toujours quelques informations de base sur l'en-tête.

Changer ce qui est entre les balises de titre simplement «Carnet d'adresses». Sous le lien de la feuille de style, ajoutez le code suivant pour importer l'éventuel code JavaScript:

Puisque toutes les informations d'en-tête sont terminées, nous pouvons coder ensemble une mise en page structurée. Entre les balises body, ajoutez ceci:

Ces sections contiendront toutes les boucles de publication. Évidemment. Commençons par l'en-tête. Il se compose d'un h1 pour le titre et du formulaire de recherche. Remplacer le commentaire:

Carnet d'adresses
 
 
 
 
 
 

Le formulaire de recherche n'est pas encore le plugin. C'est parce que nous n'avons besoin que des résultats, non? Nous utilisons donc une fonction différente dans la section principale qui recouvre la liste d'origine pour apparaître comme si elle filtrait dans toutes les données. La plage qui entoure le texte h1 correspond à une petite icône favicon-esque située à gauche de.

La section groupes est encore plus facile et plus courte.

Groupes
 
 
"> Tous
  

La section principale, ou l'emplacement de la liste de noms, comprend la boucle et les résultats de la recherche en direct superposant cette liste. Le paramètre exclude signifie qu'il n'affiche pas 'sans catégorie' car une catégorie vide est agaçante!

prénom
 
  
">
  
 

Remarqué j'ai compacté la boucle à une très petite quantité. Habituellement, ce serait une mauvaise pratique, mais pour cette application de WordPress, ce n'est pas réellement nécessaire. Query_posts force la boucle à afficher 9999 publications au lieu de la valeur par défaut définie dans Dashboard. La fonction est incluse de manière sûre, uniquement si le plugin est activé. Ce que nous ferons maintenant. Ouvrez la section plugins du tableau de bord et activez le plugin live-search-popup. Si ce n'est pas là, vous n'avez pas téléchargé et installé le plugin. Installez le maintenant.

La zone de chargement sur la page de couverture est essentiellement vide, nous avons donc besoin d'un titre explicatif.!

Sélectionnez une entrée à afficher!

Enfin le pied de page. Ce bloc contient le plus de code et constitue la première rencontre avec un statut de connexion conditionnel! Je vais expliquer petit à petit.

 /wp-admin/post-new.php "title =" Ajouter une entrée "> /wp-admin/post.php?action=edit&post=ID ?> "title =" Modifier cette fiche ">  get_var ("SELECT COUNT (*) FROM $ wpdb-> posts WHERE post_status = 'publish'"); si (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Les deux premières balises d'ancrage sont donc conditionnelles à $ user_ID. Cette variable vérifie si un utilisateur est connecté (dans ce cas, dispose des privilèges d'administrateur), puis affiche certains boutons d'ajout et d'édition. Le php SQL étrange à la fin obtient le nombre total de cartes de contact, il s'affiche donc comme le carnet d'adresses Apple.

Voilà pour l'index! Ensuite, nous allons travailler sur single.php, alors ouvrez-le et nous commencerons!

single.php

index.php devrait toujours être ouvert, donc parce qu'essentiellement single.php a la même disposition, copiez TOUT le code index.php dans single.php et enregistrez-le..

Parce que c'est single.php, par défaut, la boucle n'affichera qu'une publication. Pour contrer cela, nous avons déjà ajouté une fonction query_posts dans index.php.

Single.php diffère de l'index principalement par le code situé entre loadArea. Au lieu du h2, la boucle remplira ceci.

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

Le contenu de la boucle, à partir d’ici, est constitué de blocs de PHP, qui sont relativement identiques (barre l’image et les notes). La chaîne $ query_string est un moyen simple et rapide de rétablir les paramètres de la boucle pour afficher un message pour single.php. La publication commence par une image.

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

Code fou! Le premier "if" vérifie si ce champ personnalisé a du contenu, en le comparant à la valeur rien. L'instruction 'if' alors vérifiée vérifie si l'administrateur est connecté et, si tel est le cas, fournit un lien pour modifier le champ personnalisé. L'étrange (… & post =ID ?> # meta-62). En utilisant l'ID de l'article, nous avons une URL changeante de manière dynamique qui reste pertinente à 100%.! La fin de l'URL sera différent pour vous! J'ai un sélecteur de DOM, mais vous pouvez utiliser firebug pour connaître les identifiants des div du champ personnalisé. La div contenant la valeur entryImg pour moi était # meta-62.

Nous devons aussi ajouter un petit titre!

Peasy facile. Suivant est le premier «bloc». Tous ces blocs sont relativement les mêmes. En fait, après le premier courriel et le premier site Web, ce ne sont que des caractères statiques..

"

Blocs Email / Site Web

ID, 'email'))! = ") ?> 
 Email: ID, 'email', true); ?> ">ID, 'email', true); ?> /wp-admin/post.php?action=edit&post=ID ?> # meta-56 "> Supprimer ou modifier  
 Email'); ?>

Utilisation intensive de champs personnalisés… L’instruction if vérifie si le champ personnalisé a du contenu, en le comparant à "ou rien". Donc, s’il ne correspond pas à rien (donc a du contenu), affichez-le. Sinon, il n’a pas de contenu. contenu, afficher un lien d'ajout / modification.

Juste en dessous de cela, copiez ce bloc et changez le "email" dans TOUTES les balises de champ personnalisées en "site web", et supprimez le "mailto:" dans la valeur href. N'oubliez pas de changer le lien #meta - ##! Le mien avait 57 ans pour le site Web. N'oubliez pas la balise forte ou la valeur de post-édition!

ID, 'website'))! = ") ?> 
 Email: ID, 'site web', vrai); ?> ">ID, 'site web', vrai); ?> /wp-admin/post.php?action=edit&post=ID ?> # meta-57 "> Supprimer ou modifier  
 Site Internet'); ?>

Téléphones / Blocs d'adresse

Tous ceux-ci sont maintenant les mêmes. Il vous suffit de changer quatre choses par bloc. Les noms de champs personnalisés, la balise forte, la valeur href du lien d'édition et le contenu. Voici le premier bloc:

ID, 'phone-home'))! = ") ?> 
 Téléphone fixe: ID, 'phone-home', vrai); ?> /wp-admin/post.php?action=edit&post=ID ?> # meta-66 "> Supprimer ou Modifier  
 Téléphone fixe'); ?>

Allez-y et dupliquez cela quatre fois, une fois pour chaque champ personnalisé. Vous devriez avoir l’un de ces blocs pour: Téléphone personnel, Téléphone professionnel, Téléphone portable et adresse..

Bloc Notes

Enfin, nous devons afficher quelques notes.

Remarque: 

Impressionnant! C'est tout le code WordPress nécessaire! Notez que le téléphone professionnel est un lien. Plus tard, nous appelons cela en CSS pour avoir une icône plus. Actuellement, cela devrait ressembler à ceci:

Étape 4 - CSS

CSS rend le site plus joli! Faisons un saut dans le vif du sujet. Nous devons commencer par une réinitialisation en blanc, une définition de corps et l’arrière-plan de l’emballage. WrapperBg.png est une capture d'écran du carnet d'adresses Apple effacé. Nous ajoutons tout ce dont nous avons besoin.

* marge: 0; rembourrage: 0; contour: 0;  body font-family: "Lucida Grande", Lucida, Verdana, sans serif;  #wrapper width: 621px; hauteur: 370px; marge: auto 50px; remplissage: 24px 40px 55px 40px; fond: url (images / wrapperBg.png); 

Déjà, si vous regardez l’aperçu, la forme de la fenêtre est déjà présente. Ensuite, nous devons trouver l'en-tête. Heureusement, je l'ai fait pour vous! Yay!

#header text-align: center; hauteur: 55px;  # en-tête h1 font-size: 12px; poids de police: normal; rembourrage: 5px;  #header h1 span background: url (images / h1Spanbg.png) no-repeat left; padding-left: 20px;  #searchform float: right; marge droite: 10px; background: url (images / searchBg.png) non répétée à gauche 1px; largeur: 135px; hauteur: 22px;  #s background: 0; bordure: 0; hauteur de ligne: 20px; largeur: 110px;  #searchsubmit background: 0; bordure: 0; hauteur: 20px; largeur: 15px; marge: 0; 

Heureusement, tout ce qui est nécessaire pour que l'en-tête soit terminé à 100%.

Nous allons maintenant appeler la section groups, qui correspond en fait aux catégories:

#wrapper h3 background: url (images / h3bg.png) repeat-x; hauteur: 16px; taille de police: 10px; text-align: center; hauteur de ligne: 16px; poids de police: normal; bordure droite: 1px gris uni;  #groups width: 161px; float: gauche;  #groups li a background: url (images / groupsBg.png) no-repeat 10px 4px;  #groups li a: survol background: url (images / groupsBg.png) no-repeat 10px 4px grey;  #groups li, #mainSection li padding: 0; taille de police: 12px; débordement caché;  ul li a text-decoration: none; la couleur noire; remplissage: 3px 0 3px 30px; marge: 0; bloc de visualisation; 

Et puis la section principale à glisser à côté de la section de groupe:

#mainSection width: 160px; float: gauche; position: relative;  #mainSection li a background: url (images / h1SpanBg.png) no-repeat 10px 5px! IMPORTANT;  #mainSection li a: survol background: url (images / h1SpanBg.png) no-repeat 10px 5px grey! IMPORTANT;  #livesearchpopup_box position: absolute; en haut: 0; gauche: 0; largeur: 158px! IMPORTANT; hauteur: 264px; bordure: 0; 

Et avec cela, tout est poussé dans ses zones respectives, sauf le pied de page. Si vous effectuez une recherche, la superposition ira sous les messages déjà présents. Nous devons donc les positionner absolument. Le dernier sélecteur ci-dessus fait cela.

La zone de chargement doit encore être stylée. Pour voir cela pleinement en action, accédez à une seule page en cliquant sur un contact. Avant que ça ressemble à ça:

#loadArea position: relative; débordement: auto; hauteur: 280px; float: gauche; largeur: 279px; remplissage: 10px 10px 0 11px; taille de police: 10px;  #loadArea strong color: grey;  #loadArea #entryImg float: left; largeur: 48px; padding-right: 10px;  #loadArea p line-height: 16px; marge en bas: 1em; clarifier les deux;  #loadArea a text-decoration: none; couleur: gris;  #loadArea span.add background: url (images / add.png) no-repeat right center; rembourrage: 3px 20px 1em; bloc de visualisation; text-align: right; marge supérieure: 1em;  #loadArea a.edit-link display: block; Flotter à droite; hauteur de ligne: 16px; background: url (images / delete.png) no-repeat right 1px; rembourrage: 0 20px;  #loadArea h2 font-size: 16px; hauteur: 55px;  p.notes border-top: 1px gris solide;  #load background: url (images / ajaxLoader.gif); largeur: 32px; hauteur: 32px; bloc de visualisation; marge: 0 auto; position: absolue; à gauche: 134px; en haut: 129px; 

Connectez-vous à wp-admin et vérifiez son apparence sur une seule page! La # charge est pour quand nous avons une certaine jQuery qui se passe. Mais comme il est ajouté dans jQuery, cela ne fait pas de mal de l'avoir ici.

Le dernier élément de la section CSS consiste à corriger le pied de page. Quelques CSS simples pour le faire. La seule chose intéressante ici est que vous devez faire flotter le nombre de cartes à droite, car si vous le positionniez à gauche, cela aurait l'air bizarre de vous connecter.

 #footer height: 20px; hauteur de ligne: 18px; taille de police: 11px; rembourrage en haut: 3px; clarifier les deux;  #footer #totCards float: right; marge droite: 130px; text-shadow: #fff 1px 1px 2px;  #footer a.addEntry margin-left: 165px;  #footer a.editButton margin-left: 145px; 

Le CSS est maintenant terminé! Cela signifie que le site devrait maintenant être pleinement fonctionnel dans un navigateur sans jQuery, essentiellement terminé. Mais chez NETTUTS, nous aimons faire un effort supplémentaire. Nous allons donc faire en sorte que les contacts soient chargés avec AJAX sur la page d'accueil au lieu de recharger la page..

Maintenant, notre défi pose quelques problèmes. Le plug-in Live-search-popup utilise Prototype et, malheureusement, le développeur n'a pas pris en compte le conflit de bibliothèque JS. Cela signifie donc que nous devons utiliser un sélecteur plus long et définir le paramètre noConflict. Pas difficile, juste un peu différent.

Ouvrez addressBook.js. Tout en haut, nous définissons le noConflict.

jQuery.noConflict ();

C'est la méthode de jQuery pour s'assurer que tout le code natif de jQuery est 100% tout seul, unique de toutes les autres bibliothèques.

Maintenant, appelez le document prêt. Comme avec tout jQuery, vous devez envelopper le code dans cette.

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

Ce tutoriel utilise une méthode de chargement similaire au tutoriel NETTUTS Comment charger et animer du contenu avec jQuery. Commençons par l'événement.

jQuery ('# posts li a'). click (function () // code de chargement…);

Nous devons maintenant définir une variable contenant tout le contenu single.php qui diffère de index.php. Ceci est tous les champs personnalisés.

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

Comme tout développeur AJAX qui se respecte, qui ne veut pas montrer qu'il peut mettre un chargeur sur son contenu! Le chargeur lui-même n'a rien à voir avec le chargement proprement dit, il est simplement affiché pendant le chargement!

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

Enfin, pour le chargement réel. Ces fonctions utilisent la variable et remplacent ce qui se trouvait dans la div #loadArea par le contenu interne 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 joué!

Si vous accédez maintenant à la page d'accueil et cliquez sur l'un des noms, le chargement se fera automatiquement! Il fait même apparaître et disparaître! J'adorerais que cela fonctionne sur les résultats du plugin live-search-popup, mais il est chargé via un prototype, ainsi tout programme jQuery appliqué ne fonctionnera pas très bien. Autrement, ceci conclut encore une autre manière d'utiliser WordPress de manière à exploiter son potentiel plus complet en tant que…!