Share
prettyPhoto ist ein Lightbox-Plugin von Stéphane Caron. Heute lernen wir, wie Sie das Plugin mit Ihren WordPress-Themes verschicken.
Die Verwendung einer integrierten Lightbox-Option, anstatt Benutzer dazu zu zwingen, ein Plugin herunterzuladen, hat viele Vorteile für Designautoren. Für mich ist es möglich, den Leuchtkasten nach meinen WordPress-Themen zu gestalten. Es ist auch eine nette Funktion, die den Benutzern Ihres Themas zur Verfügung steht. Natürlich sollten Sie ihnen auch eine Option zum Deaktivieren der Funktion geben. Mit dem gesagt, lass es uns tun.
Gehen Sie zu den Margen von for-errors.com und laden Sie das Plugin herunter. Sobald Sie es verstanden haben, werden wir eine neue Verzeichnisstruktur für das Plugin erstellen, um uns die Sache zu erleichtern.
Zuerst löschen wir einige Dinge, die wir nicht brauchen. Löschen Sie im Bilderordner alles außer dem prettyPhoto-Ordner und dessen Inhalt. Löschen Sie im Stammordner die Datei xhr_response.html und index.html. Verschieben Sie nun jquery.prettyPhoto.js aus dem Ordner js in den Stammordner des Plugins und löschen Sie den Ordner js.
Benennen Sie den Ordner schließlich in prettyPhoto um und laden Sie den Ordner in das Verzeichnis Ihres Themes hoch. Wahrscheinlich verfügen Sie bereits über ein Verzeichnis für js oder scripts, also laden Sie das Verzeichnis hoch. In diesem Tutorial nehmen wir an, es befindet sich in your-theme / js
Bevor wir die Plugin-Dateien in unserem Theme laden, müssen wir jQuery laden. Wir werden die von Google gehostete Version von jQuery mit der auf Digging in Wordpress freigegebenen Methode verwenden. Fügen wir also den Funktionsausschnitt in unsere functions.php ein.
Accentsconagua
if (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); function register_scripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', "http". ($ _SERVER ['SERVER_PORT'] == 443? "s": ""). ": //ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js ", false, null); wp_enqueue_script ('jquery'); wp_register_script ('prettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / jquery.prettyPhoto.js")); wp_enqueue_script ('prettyPhoto_script'); wp_register_script ('customprettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / customprettyPhoto.js")); wp_enqueue_script ('customprettyPhoto_script'); Möglicherweise möchten Sie die Vor- und Nachteile der Verwendung eines CDNs für jQuery berücksichtigen. WordPress wird mit einer Kopie von jQuery geliefert, die Verwendung der gehosteten Version von Google kann jedoch die Leistung Ihrer Website verbessern. Wenn Sie ein Designautor sind, würde ich die mitgelieferte Version verwenden. Sehen Sie sich die Diskussion in einem anderen Tutorial an, damit Sie sich selbst entscheiden können.
Sie werden feststellen, dass wir eine weitere Datei mit dem Namen customprettyPhoto.js hinzugefügt haben. Hier werden wir das Plugin mit unseren Post-Images spielen und initialisieren lassen. Also lassen Sie uns diese Datei erstellen und in Ihrem prettyPhoto-Verzeichnis ablegen. OK, lass uns prettyPhoto initialisieren.
Wir müssen eine Reihe von jQuery hinzufügen, um den Anker-Tags, die unsere Post-Bilder umgeben, die erforderliche prettyPhoto-Klasse prettyPhoto hinzuzufügen. Da es sich um jQuery handelt, verwenden wir es, um dies zu erreichen. Fügen Sie folgendes direkt nach $ (document) .ready (function () ein, wo wir sicherstellen, dass die Seite geladen wird.
$ ('. entry-content a'). has ('img'). addClass ('prettyPhoto'); Ersetzen Sie .entry-content durch den Klassennamen oder die ID, mit der Sie Ihren Beitragsinhalt verpackt haben, und Sie sollten die Klasse erfolgreich allen Links hinzugefügt haben, die Ihre Beitragsbilder einschließen. Wenn Sie sich die Dokumentation zu prettyPhoto angesehen haben, werden Sie feststellen, dass ein rel-Attribut verwendet wird. Stattdessen haben wir eine Klasse verwendet. Dadurch werden Validierungsfehler in unserem HTML-Code verhindert, da rel-Attribute nur bestimmte zulässige Werte gemäß der HTML5-Spezifikation haben können.
Als nächstes möchten wir die Beschreibungsoption von prettyPhoto aktivieren. Wir müssen eine kleine Hürde überwinden, nämlich, dass prettyPhoto möchte, dass wir den Ankertags, die für die Beschreibungen verwendet werden, Titelattribute hinzufügen, aber WordPress fügt den Image-Tags Titel hinzu. Um dieses Problem zu lösen, schreiben wir ein paar Zeilen jQuery, die den Titel des Bildtitels übernehmen und den gleichen Titel im Ankertag setzen, der das Bild umschließt.
$ ('. entry-content a img'). click (function () var desc = $ (this) .attr ('title'); $ ('. entry-content a'). has ('img') .attr ('title', desc);); Hier wird eine Funktion ausgelöst, wenn der Benutzer auf ein Beitragsbild klickt. Wir schnappen uns das Titel-Tag des Bildes und bringen es an den Anker. Dieser Schritt macht es den Benutzern Ihrer Themes viel einfacher, Beschreibungen hinzuzufügen. Wenn Sie die Funktionalität insgesamt deaktivieren möchten, stellen Sie sicher, dass der Ankertitel leer ist. Wenn er völlig fehlt, da in diesem Feld nicht einmal ein leerer Titel vorhanden ist, zeigt prettyPhoto stattdessen nur "undefined" an.
Wir müssen das CSS für prettyPhoto zum Design hinzufügen. Gehen Sie zurück zu Ihrer Datei "functions.php" und fügen Sie die folgende Zeile oben ein:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Da wir die Bilder und CSS in ihren ursprünglichen Ordnern und relativ zueinander aufbewahren, wie sie ursprünglich waren, müssen wir uns keine Sorgen um defekte Bilder machen.
Schauen wir uns an, wie Sie Bildunterschriften und Titel hinzufügen, die unser prettyPhoto verwenden wird. Wenn Sie das Bild oben betrachten, können Sie die Beziehung zwischen dem Alt-Tag des Bilds nach dem Bild und dem Link-Titel-Tag sehen, das beim Hinzufügen eines Bilds zu einem Beitrag oder einer Seite festgelegt werden kann.
Und das ist es, wir haben prettyPhoto erfolgreich zu unserem Thema hinzugefügt. Lesen Sie die Plugin-Dokumentation, um weitere Informationen und Verwendungsmöglichkeiten zu erhalten. PrettyPhoto kann mehr als nur Bilder verarbeiten, es funktioniert mit Videos, Ajax und mehr. Es wird auch mit einer Handvoll Themen geliefert, die zu Ihrem Thema passen oder zumindest einen guten Ausgangspunkt bieten.
