Wie wir alle wissen, ist WordPress so umfangreich, dass Sie es für fast alles verwenden können. Es gibt sogar Artikel auf Websites mit verrückten Titeln wie 101 alternative Verwendungsmöglichkeiten für WordPress. Also dachte ich, hey, warum nicht? Ich wette, viele Leute möchten ihre eigenen Web-Apps erstellen, und im Grunde kann WordPress das für Sie tun. In diesem Video-Tutorial, Wir werden ein Online-Adressbuch erstellen.

* Anmerkung des Herausgebers: Wir haben heute einen besonderen Leckerbissen für Sie. Dieses Tutorial sollte ursprünglich Teil unseres NETTUTS + -Programms sein. Das Programm hat jedoch lange gedauert, als wir ursprünglich erwartet hatten. Keine Sorge, es kommt noch! Bis dahin genießen Sie dieses auf uns!

Dieses Tutorial war für Harley ein gewaltiges Unterfangen. Also bitte, wenn es Ihnen nichts ausmacht, nehmen Sie sich einen Moment Zeit, um Digg damit zu beginnen! Vielen Dank!

Lesen Sie unser Interview mit Harley!

Vorwort

Dieses Adressbuch wird die Arbeiten haben. Ajax-Laden, bedingtes Admin-Zeug, das Shiz. Dies bedeutet leider, dass wir einige Anforderungen erfüllen müssen, ein paar Dinge, die das Thema benötigt. Eine Kopie von jQuery zu Beginn wäre praktisch. Darüber hinaus benötigt das Thema ein paar Bilder! Laden Sie diese ZIP-Datei herunter, die Sie später in Ihrem Designverzeichnis erweitern können. Zum Schluss noch eine Kopie des Live Search Plugins, die ich aus CSS-Gründen leicht bearbeitet habe. Original hier

Und wie immer benötigen Sie einen WordPress-Blog, auf den Sie Zugriff haben. Es gibt Tutorials zum lokalen Ausführen von Wordpress für Windows und hier für OS X. Aufgrund der Art des Post-Inhalts empfehle ich dringend, ein neues WordPress-Verzeichnis zu erstellen.

Sie sollten also Folgendes haben: jQuery, Bilder, Live-Such-Plugin und ein WordPress-Verzeichnis. Super.

Schritt 1 - Dateien organisieren.

Beginnen wir mit dem Erstellen der notwendigen Dateien. Erstellen Sie im Verzeichnis "wp-content / themes" Ihres WordPress-Blogs einen Ordner mit dem Namen "Adressbuch". Fügen Sie die jQuery-Datei und die Bilder diesem neuen Ordner hinzu. Das "Live-Search-Popup" wird aus offensichtlichen Gründen in den Ordner "wp-content / plugins" verschoben.

Jetzt, da die heruntergeladenen Dateien vorhanden sind, müssen wir einige weitere Dateien erstellen. Erstellen Sie im Designverzeichnis: addressBook.js, index.php, single.php und style.css. Während wir uns mit diesen Dateien beschäftigen, erstellen wir das Design-Meta. Öffne style.css und füge diese ein:

/ * Themenname: Adressbuch-Theme-URI: http://net.tutsplus.com/ Beschreibung: Verwenden von WordPress als Adressbuch Version: 1.0 Autor: Harley Alexander Author-URI: http://www.baffleinc.com/ * /

Jetzt haben Sie einige grundlegende Informationen für WordPress erstellt, die Sie erkennen können. Navigieren Sie zur Design-Auswahlseite (Design> Designs) in wp-admin und klicken Sie auf den neuen Adressbuchblock. Fürs Erste (wenn Sie eine Version von WP verwenden, die vor der Aktivierung eine Vorschau anzeigt), bleibt sie leer. Mach dir keine Sorgen! Aktivieren Sie es!

Schritt 2 - Inhalt veröffentlichen

Nun sind alle Dateien vorhanden und organisiert, und wir können einige Beispielposts für uns erstellen. Der Grund für diese Methode ist, dass WordPress benutzerdefinierte Felder zulässt. Benutzerdefinierte Felder sind genau das - der benutzerdefinierte Inhaltsbereich muss ausgefüllt werden. Ein Post-Inhaltsfeld unterscheidet sich vom Feld "Tags", da sich benutzerdefinierte Felder von den Kategorienfeldern unterscheiden. Der Grund, warum das so fantastisch ist, liegt darin, dass wir einem Beitrag separate Informationen anhängen können, ohne sie schmerzhaft aus dem Inhalt herausfischen zu müssen. Navigiere zum Dashboard und schreibe einen neuen Beitrag.

Wir werden verwenden:

• Titel als Name der Person
• Inhalt veröffentlichen wie die Notizen für die Person
• Kategorien als Gruppe der Person (beruflich / zuhause)
• Benutzerdefinierte Felder Für zu Hause, für die Arbeit und für Mobiltelefone. Website und E-Mail-Adresse, Adresse und schließlich ein Bild davon.

Jetzt sind die benutzerdefinierten Felder nicht so gewaltig, wie sie klingen. Sie müssen ihnen einen Namen (Schlüssel) und einen Inhalt (Wert) geben. Das Coole an ihnen ist, dass sie, sobald sie einmal verwendet wurden, aus einem Drop-Down-Menü erneut ausgewählt werden können, um Namen nicht versehentlich zu verwechseln. Außerdem ist nicht jedes benutzerdefinierte Feld erforderlich. Sie können also einige Felder leer lassen, wenn Sie nicht über diese spezifischen Informationen verfügen. Später, wenn wir sie erhalten, erstellen wir tatsächlich einen Link zum Bearbeiten / Hinzufügen.

Nachdem Sie ein paar Dummy-Posts hinzugefügt haben, können wir den Inhalt über Vorlagendateien anzeigen.

Schritt 3 - WordPress-Code

Dieses Adressbuch (Überraschungsüberraschung) wird aus dem Apple-Adressbuch modelliert:

Aus naheliegenden Gründen unscharf, zeigt dieses Bild auch an, welche Abschnitte welche sind, sodass es einfacher ist, sich beim Kodieren zu visualisieren! Wir beginnen mit index.php.

index.php

Diese Seite ist das, was jeder zuerst sehen wird, wenn er in Ihr Adressbuch kommt. Es muss also informativ sein. Wie bei der Vorschau oben haben alle Seiten dasselbe Layout - Single.php hat das gleiche Erscheinungsbild und den gleichen Effekt wie der Effekt, der nie wieder geladen wird. Dies gilt nur für JS-lose Browser, so dass sie zu 100% elegant abgebaut wird. Ich meine 100%. Die jQuery hier dient nur dazu, das Laden des Inhalts und (eventuell) der Live-Suchfunktion zu beschleunigen. Das Adressbuch muss jedoch auch ohne diese Waren funktionieren!

Um ein WordPress-Theme zu beginnen, habe ich immer einige grundlegende Header-Informationen.

Ändern Sie zwischen den Titel-Tags einfach "Adressbuch". Fügen Sie unter dem Stylesheet-Link den folgenden Code hinzu, um den eventuellen JavaScript-Code einzufügen:

Da alle Header-Informationen erstellt wurden, können wir ein strukturiertes Layout zusammen codieren. Fügen Sie zwischen den Body-Tags Folgendes hinzu:

Diese Abschnitte enthalten alle Nachschleifen. Offensichtlich. Beginnen wir mit der Kopfzeile. Es besteht aus einem h1 für den Titel und dem Suchformular. Ersetzen Sie den Kommentar:

Adressbuch
 
 
 
 
 
 

Das Suchformular ist noch nicht das Plugin. Dies liegt daran, dass wir nur die Ergebnisse benötigen, richtig? Wir verwenden also eine andere Funktion in der mainSection, die die ursprüngliche Liste so überdeckt, dass sie so aussieht, als würde sie alle Daten filtern. Der Bereich, der den h1-Text umschließt, ist so, dass wir links von ein kleines Favicon-artiges Symbol hinzufügen können.

Der Gruppenabschnitt ist noch einfacher und kürzer.

Gruppen
 
 
"> Alle
  

Die mainSection oder der Name der Namensliste besteht aus der Schleife und den Live-Suchergebnissen, die diese Liste überlagern. Der Ausschlussparameter bedeutet, dass er nicht 'unkategorisiert' anzeigt, da eine leere Kategorie ärgerlich ist!

Name
 
  
">
  
 

Ich habe bemerkt, dass ich die Schleife auf eine sehr kleine Menge verdichtet habe. Normalerweise wäre dies eine schlechte Praxis, aber für diese Anwendung von WordPress ist dies nicht unbedingt erforderlich. Die Abfrageposts erzwingt, dass die Schleife 9999 Posts anstelle des Dashboard-Standardwerts anzeigt. Die Funktion ist nur auf sichere Weise enthalten, wenn das Plugin aktiviert ist. Was machen wir jetzt. Öffnen Sie den Plug-In-Bereich des Dashboards und aktivieren Sie das Live-Search-Popup-Plug-In. Ist dies nicht der Fall, haben Sie das Plugin nicht heruntergeladen und installiert. Installiere es jetzt.

Die loadArea auf der Startseite ist im Wesentlichen leer, wir brauchen also nur einen erklärenden Titel!

Wählen Sie einen Eintrag zum Anzeigen aus!

Zum Schluss die Fußzeile. Dieser Block hat die meiste Menge an Code und ist die erste Begegnung mit bedingtem Anmeldestatus! Ich erkläre das Stück für Stück.

 /wp-admin/post-new.php "title =" Eintrag hinzufügen "> /wp-admin/post.php?action=edit&post=ICH WÜRDE; ?> "title =" Diese Karte bearbeiten ">  get_var ("SELECT COUNT (*) FROM $ wpdb-> posts WHERE post_status = 'publish'")); wenn (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Die ersten beiden Ankertags sind also von $ user_ID abhängig. Diese Variable prüft, ob ein Benutzer angemeldet ist (in diesem Fall mit Administratorrechten) und zeigt dann einige Schaltflächen zum Hinzufügen und Bearbeiten an. Der seltsame SQL-PHP-Code am Ende enthält die Gesamtzahl der Kontaktkarten, sodass er wie das Apple-Adressbuch angezeigt wird.

Das war's für den Index! Als nächstes arbeiten wir an single.php, also öffne es und wir fangen an!

single.php

index.php sollte noch geöffnet sein. Kopieren Sie daher ALLE index.php-Codes in single.php und speichern Sie sie, da es sich im Wesentlichen um dasselbe Layout handelt.

Da es single.php ist, wird die Schleife standardmäßig nur einen Beitrag anzeigen. Um dem entgegenzuwirken, haben wir bereits eine Funktion query_posts in index.php hinzugefügt.

Single.php unterscheidet sich vom Index hauptsächlich durch den Code zwischen loadArea. Anstelle von h2 füllt die Schleife dies aus.

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

Der Loop-Inhalt besteht ab hier aus PHP-Blöcken, die relativ identisch sind (Balken des Bildes und der Notizen). Der $ query_string ist eine kurze und schmutzige Art, die Parameter der Schleife auf die Anzeige eines Posts für single.php zurückzusetzen. Der Beitrag beginnt mit einem Bild.

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

Verrückter Code! Das erste 'if' prüft, ob dieses benutzerdefinierte Feld einen Inhalt hat, indem es mit dem Wert von nothing verglichen wird. Die dann eingebettete 'if'-Anweisung prüft, ob der Administrator angemeldet ist. Falls ja, enthält er einen Link zum Bearbeiten des benutzerdefinierten Felds. Der seltsame (… & post =ICH WÜRDE; ?> # meta-62). Durch die Verwendung der Beitrags-ID haben wir eine sich dynamisch ändernde URL, die 100% relevant bleibt! Das Ende der URL wird anders für dich sein! Ich habe einen DOM-Selektor, aber Sie können Firebug verwenden, um die IDs der Divs des benutzerdefinierten Felds herauszufinden. Das div, das den entryImg-Wert für mich enthielt, war # meta-62.

Wir müssen auch einen kleinen Titel hinzufügen!

Kinderleicht. Als nächstes kommt der erste "Block". Alle diese Blöcke sind relativ gleich. Nach der ersten E-Mail und Website handelt es sich lediglich um statische Zeichen.

"

E-Mail- / Website-Blöcke

ID, 'email'))! = ") ?> 
 Email: ID, 'email', wahr); ?> ">ID, 'email', wahr); ?> /wp-admin/post.php?action=edit&post=ICH WÜRDE; ?> # meta-56 "> Entfernen oder Bearbeiten  
 Email'); ?>

Häufige Verwendung von benutzerdefinierten Feldern… Die if-Anweisung prüft, ob das benutzerdefinierte Feld einen Inhalt hat, indem es gegen "oder nichts" geprüft wird. Wenn es also nichts bedeutet (also Inhalt hat), wird es angezeigt. Andernfalls gibt es keine zeigen Sie einen Link zum Hinzufügen / Bearbeiten an.

Direkt darunter kopieren Sie den Block und ändern die "E-Mail" in ALLEN benutzerdefinierten Feld-Tags in "Website". Beenden Sie den Wert "mailto:" im href-Wert. Vergiss nicht den #meta - ## Link zu ändern! Mein war 57 für das Website-Feld. Vergessen Sie auch nicht das starke Tag oder den Bearbeitungswert!

ID, 'Website'))! = ") ?> 
 Email: ID, 'Website', wahr); ?> ">ID, 'Website', wahr); ?> /wp-admin/post.php?action=edit&post=ICH WÜRDE; ?> # meta-57 "> Entfernen oder bearbeiten  
 Webseite'); ?>

Telefone / Adressblöcke

Alle diese sind jetzt gleich. Sie müssen nur vier Dinge pro Block ändern. Die benutzerdefinierten Feldnamen, das starke Tag, der Href-Wert und der Inhalt des Bearbeitungslinks. Hier ist der erste Block:

ID, 'phone-home'))! = ") ?> 
 Festnetztelefon: ID, 'Zuhause', wahr); ?> /wp-admin/post.php?action=edit&post=ICH WÜRDE; ?> # meta-66 "> Entfernen oder bearbeiten  
 Festnetztelefon'); ?>

Kopieren Sie dies viermal, einmal für jedes benutzerdefinierte Feld. Sie sollten einen der folgenden Blöcke für Folgendes besitzen: Telefon zu Hause, Büro, Mobiltelefon und Adresse.

Notizblock

Zum Schluss müssen noch einige Notizen angezeigt werden.

Hinweis: 

Genial! Das ist alles, was der WordPress-Code benötigt! Beachten Sie, dass das Arbeitstelefon ein Link ist. Später werden wir dies in CSS mit einem Plus-Symbol formatieren. Momentan sollte es so aussehen:

Schritt 4 - CSS

CSS macht die Seite hübsch! Lass uns direkt hinein springen. Wir müssen mit einem Dirty-Reset, Body Defenition und dem Hintergrund des Wrappers beginnen. WrapperBg.png ist ein Screenshot des Apple Adressbuchs, das gelöscht wurde. Wir fügen alles hinzu, was wir brauchen.

* Marge: 0; Polsterung: 0; Umriss: 0;  body Schriftfamilie: "Lucida Grande", Lucida, Verdana, serifenlos;  #wrapper width: 621px; Höhe: 370px; Marge: 50px auto; Polsterung: 24px 40px 55px 40px; Hintergrund: URL (images / wrapperBg.png); 

Wenn Sie sich die Vorschau ansehen, ist die Fensterform bereits vorhanden. Als nächstes müssen wir den Header herausfinden. Zum Glück habe ich es für dich getan! Yay!

#header text-align: center; Höhe: 55px;  #header h1 Schriftgröße: 12px; Schriftgewicht: normal; Polsterung: 5px;  #header h1 span background: url (images / h1Spanbg.png) no-repeat left; Polsterung links: 20px;  #searchform float: right; Rand rechts: 10px; Hintergrund: URL (images / searchBg.png) no-repeat left 1px; Breite: 135px; Höhe: 22px;  #s Hintergrund: 0; Grenze: 0; Zeilenhöhe: 20px; Breite: 110px;  #searchsubmit background: 0; Grenze: 0; Höhe: 20px; Breite: 15px; Marge: 0; 

Glücklicherweise ist das alles, was nötig ist, um die Kopfzeile zu 100% fertigzustellen.

Jetzt gestalten wir den Gruppenabschnitt, der eigentlich die Kategorien darstellt:

#wrapper h3 background: url (images / h3bg.png) repeat-x; Höhe: 16px; Schriftgröße: 10px; Text ausrichten: Mitte; Zeilenhöhe: 16px; Schriftgewicht: normal; Rand rechts: 1px durchgehend grau;  #groups width: 161px; Schwimmer: links;  #groups li a background: url (images / groupsBg.png) no-repeat 10px 4px;  #groups li a: hover hintergrund: url (images / groupsBg.png) no-repeat 10px 4px grau;  #groups li, #mainSection li padding: 0; Schriftgröße: 12px; Überlauf versteckt;  ul li a Textdekoration: keine; Farbe schwarz; Polsterung: 3px 0 3px 30px; Marge: 0; Bildschirmsperre; 

Und dann den Hauptabschnitt, der neben dem Gruppenabschnitt eingefügt wird:

#mainSection width: 160px; Schwimmer: links; Position: relativ;  #mainSection li a background: url (images / h1SpanBg.png) no-repeat 10px 5px! WICHTIG;  #mainSection li a: hover hintergrund: url (images / h1SpanBg.png) no-repeat 10px 5px grau! WICHTIG;  #livesearchpopup_box position: absolut; oben: 0; links: 0; Breite: 158px! WICHTIG; Höhe: 264px; Grenze: 0; 

Und damit wird alles in seine jeweiligen Bereiche geschoben, mit Ausnahme der Fußzeile. Wenn Sie suchen, wird die Überlagerung unter den bereits vorhandenen Beiträgen angezeigt. Wir müssen sie also absolut positionieren. Die letzte Auswahl oben macht dies.

Der Ladebereich muss noch gestaltet werden. Um dies vollständig in Aktion anzuzeigen, klicken Sie auf einen Kontakt, um eine einzelne Seite anzuzeigen. Bevor es so aussieht:

#loadArea position: relativ; Überlauf: Auto; Höhe: 280px; Schwimmer: links; Breite: 279px; Auffüllen: 10px 10px 0 11px; Schriftgröße: 10px;  #loadArea strong color: grey;  #loadArea #entryImg float: left; Breite: 48px; Polsterung rechts: 10px;  #loadArea p Zeilenhöhe: 16px; Rand unten: 1em; Lösche beide;  #loadArea a Textdekoration: keine; Farbe Grau;  #loadArea span.add background: url (images / add.png) keine Wiederholung der rechten Mitte; Polsterung: 3px 20px 1em; Bildschirmsperre; Textausrichtung: rechts; Rand oben: 1em;  #loadArea a.edit-link display: block; schweben rechts; Zeilenhöhe: 16px; Hintergrund: URL (images / delete.png) no-repeat right 1px; Polsterung: 0 20px;  #loadArea h2 Schriftgröße: 16px; Höhe: 55px;  p.notes border-top: 1px durchgehend grau;  #load background: url (images / ajaxLoader.gif); Breite: 32px; Höhe: 32px; Bildschirmsperre; Marge: 0 auto; Position: absolut; links: 134px; oben: 129px; 

Melden Sie sich beim WP-Admin an und prüfen Sie, wie es auf einer einzelnen Seite aussieht! Die #load ist für, wenn etwas jQuery passiert. Da es jedoch in jQuery angehängt ist, schadet es nicht, es hier zu haben.

Der letzte Teil des CSS-Abschnitts besteht darin, die Fußzeile zu korrigieren. Einige einfache CSS, um dies zu tun. Das einzig Interessante dabei ist, dass Sie die Anzahl der Karten nach rechts verschieben müssen, als würden Sie sie von links positionieren, wenn Sie angemeldet sind.

 #footer height: 20px; Zeilenhöhe: 18px; Schriftgröße: 11px; Polsterauflage: 3px; Lösche beide;  #footer #totCards float: right; Rand rechts: 130px; Text-Schatten: #fff 1px 1px 2px;  #footer a.addEntry margin-left: 165px;  #footer a.editButton margin-left: 145px; 

Das CSS ist jetzt fertig! Das bedeutet, dass die Site in einem Browser ohne jQuery jetzt voll funktionsfähig sein sollte, im Wesentlichen abgeschlossen. Aber hier bei NETTUTS gehen wir gerne die extra Meile. Wir arbeiten also daran, die Kontakte mit AJAX auf der Homepage zu laden, anstatt die Seite neu zu laden.

Nun wirft unsere Herausforderung einige Probleme auf. Das Live-Such-Popup-Plugin verwendet Prototype, und der Entwickler hat den Konflikt mit der JS-Bibliothek leider nicht berücksichtigt. Dies bedeutet, dass wir einen längeren Selektor verwenden und die Einstellung noConflict definieren müssen. Nicht schwer, nur ein bisschen anders.

Öffnen Sie addressBook.js. Ganz oben definieren wir den noConflict.

jQuery.noConflict ();

Dies ist die Methode von jQuery, um sicherzustellen, dass der native Code von jQuery 100% ist. tout seule, einzigartig von allen anderen Bibliotheken.

Nun zum Aufruf des Dokuments. Wie bei jeder jQuery müssen Sie den Code hier einschließen.

jQuery (document) .ready (function () // jQuery-Code hier);

Dieses Lernprogramm verwendet eine ähnliche Methode zum Laden des NETTUTS-Lernprogramms zum Laden und Animieren von Inhalten mit jQuery. Beginnen wir mit der Veranstaltung.

jQuery ('# postet li a'). click (function () // Code laden…);

Nun müssen wir eine Variable definieren, die den gesamten Inhalt von single.php enthält, der sich von index.php unterscheidet. Dies sind alle benutzerdefinierten Felder.

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

Wie bei jedem selbstbewussten AJAX-Entwickler, der nicht zeigen möchte, dass er seinen Inhalten einen Loader hinzufügen kann! Der Lader selbst hat nichts mit dem tatsächlichen Laden zu tun, er wird nur während des Ladens angezeigt!

jQuery ('# load'). remove (); jQuery ('# loadArea'). anhängen (''); jQuery ('# load'). fadeIn (300);

Zum Schluss noch das eigentliche Laden. Diese Funktionen verwenden die Variable und ersetzen den Inhalt von #loadArea div durch den Inhalt von single.php.

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

Gut gemacht!

Wenn Sie jetzt zur Startseite navigieren und auf einen der Namen klicken, wird dieser automatisch geladen! Es wird sogar ein- und ausgeblendet! Ich würde es sehr schätzen, wenn ich an den Ergebnissen des Live-Search-Popup-Plugins arbeite, es wird jedoch über Prototyp geladen, sodass jedes angewendete jQuery nicht so gut funktioniert. Andernfalls wird hiermit ein weiterer umfassender Weg beschlos- sen, mit dem WordPress in vollem Umfang genutzt werden kann als… so ziemlich alles!