WordPress Tutorial: Wie man ein fantastisches Page Flip Plugin erstellt

Artikel geschrieben von:
  • Inbound Marketing
  • Aktualisiert: Sep 15, 2014

Hinweis: Dieses WP-Plugin wird nicht mehr unterstützt, da der Autor vorerst nicht für uns schreibt.

Ab heute bieten wir Ihnen jede Woche ein hervorragendes Codierungs-Tutorial, in dem Sie lernen, wie Sie mit WordPress benutzerdefiniertes Material von Grundkenntnissen bis Fortgeschrittenen verwenden. Heute werden wir ein Plugin erstellen (damit Sie die grundlegenden Schritte dazu lernen), um mithilfe von JS eine Galerie zum Seitenumbruch zu erstellen.

Ich wette, Sie haben in den frühen Web-Tagen eine davon gesehen, aber diese wurden meistens mit Flash gemacht, das jetzt ziemlich veraltet ist (es hat immer noch seinen Wert, aber es ist nicht mehr die beste Option für diese Art von Dingen).

Die grundlegende Funktionalität wird ein neues erstellen Art der Galerie basierend auf ein paar Bildern und deren Größe, über Shortcode.

Lass uns dann anfangen!

Zip & Install

Der beste Weg, um es in Aktion zu sehen, ist die Installation selbst. Sie können Download hier. Installieren und aktivieren Sie das Plugin. Dann müssen Sie nur noch den Shortcode auf einer Seite hinzufügen:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width = "300" height = "225" display = "double"]

Schnellvorschau

Und das ist das Ergebnis, das Sie erhalten:

Flipbook-Effekt

Aber welche Art von schwarzer Magie geht dort vor? Nun, es ist eigentlich ganz einfach. Lass uns lernen, so etwas zu erstellen.

Die Kopfzeile

Zunächst müssen Sie einen neuen Ordner und eine neue .php-Datei erstellen. An diesem Punkt wäre es fantastisch, wenn Sie eine Testumgebung haben, so dass Sie das Zeug brechen und testen können.

Die Datei und der Ordner sollten einen einfachen und eindeutigen Namen haben, um Konflikte mit vorhandenen Plugins zu vermeiden. Dann ist der grundlegende Inhalt unserer Datei ungefähr so:

/ * Plugin Name: FlipBook Gallery Beschreibung: Erstellen Sie einen Kurzcode für Flipbook-Galerien. Version: 1.0 Autor: Web Revenue Blog Lizenz: GPL2 * /

Ganz einfach, oder? Wenn Sie diese Datei erstellt haben, wird Ihr Plugin in der Liste unter WP admin> Plugins angezeigt und Sie können es aktivieren (wenn Sie jedoch nur diesen Inhalt in Ihrer Datei haben, ändert dies nicht viel an Ihrer Site).

Skripte aufrufen

Nun müssen wir einige wichtige externe Vermögenswerte hier aufnehmen. Die für die Basisfunktionalität erforderlichen externen Dateien sind:

  • jQuery (1.9 +)
  • Turn.js-Skript
  • Grundlegendes Styling drehen

Wenn Sie einfach die Skript- und Stil-Tags dort hinzufügen, haben Sie einige Probleme. Zum Beispiel wird der doppelte jQuery-Aufruf wahrscheinlich Ihre Site beschädigen. Auch WordPress selbst wird nicht wissen, dass Sie diese Elemente erstellt haben. Wenn also ein anderes Plugin turn.js erneut aufruft oder ein anderes Styling verwendet, wird Ihre Website beschädigt.

Deshalb sollten wir immer die Funktionen wp_enqueue_script und wp_enqueue_style verwenden. Hier ist die grundlegende Verwendung:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), array ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

Wir rufen externe Artikel in 3 auf verschiedene Arten an, hier sind sie:

  • Ein vorhandenes Element aufrufen: jQuery - Wir müssen nicht viele Parameter übergeben, wenn wir sicher sind, dass WordPress dieses Skript bereits lädt. Wir sagen ihm nur: "Dude, dieses Skript MUSS hier sein, sonst wird unser Code nicht verwendet Arbeit"
  • Erstellen eines neuen Skripts - Sie müssen einige Attribute übergeben, z. B. Name, Dateispeicherort, erforderliche Elemente (in diesem Fall erfordert jQuery), Version und wenn sie in die Fußzeile oder in die Kopfzeile geladen werden (false = header, true = footer).
  • Erstellen eines neuen Stils - In etwa derselbe wie der vorherige, mit einem kleinen Unterschied im letzten Attribut, der besagt, für welches Medium dieser Stil verwendet wird

Wenn Sie externe Skripts aufrufen, sollten Sie beachten, ob mehr Code vorhanden ist, der von diesem Plugin abhängt. Das ist im Grunde das, was bestimmt, ob Ihre Datei in der Kopf- oder Fußzeile aufgerufen wird.

In unserem Fall haben wir einige zusätzliche Skripte, um die Galerie erst dann einzurichten, wenn der HTML-Code erstellt wird. Dieser wird dem Hauptteil hinzugefügt. Deshalb MÜSSEN wir dieses Skript dem Kopf hinzufügen, sonst ist die Funktion "turn" noch nicht vorhanden, wenn unser Code aufgerufen wird.

Nach diesem schönen Code müssen wir WordPress anweisen, diese als Skripte zu laden. Die Aktion "wp_enqueue_scripts" führt Folgendes aus:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Der Kurzcode

Beginnen wir mit der Aktion zum Erstellen des Shortcodes. Es ist ziemlich einfach, Sie müssen nur den Shortcode-Trigger hinzufügen und die Funktion, die ausgeführt wird:

add_shortcode ("flip_book", "create_flip_book");

Jetzt müssen wir unsere Funktion erstellen und unsere Attribute erhalten. Einige Attribute können jedoch optional sein, was bedeutet, dass wir Standardwerte für sie erstellen müssen. Wir könnten eine Menge von ifs-Tests erstellen, wenn das Attribut leer ist. Dies ist jedoch einer der Fälle, in denen der ternäre Vorgang besser als der normale if-Aufruf ist.

Ternäre Operationen sind eine Art if-Anweisung direkt im Wert der Variablen. Wenn folgt diese Struktur:

$ variable = (CONDITION)? "VALUE IF CONDITION IST TRUE": "VALUE IF CONDITION IST FALSE";

Sie können sie im ersten Teil unserer Funktion in Aktion sehen:

function create_flip_book ($ attr) {// Vorbereiten der zu bearbeitenden IDs $ array ['ids'] = explode ("", $ attr ['ids']); // Anzeigemodus $ array ['display'] = leer ($ attr ['display'])? "single": $ attr ['display']; // Standardwert // Breite $ array ['width'] = leer ($ attr ['width'])? 400: $ attr ['width']; // height $ array ['height'] = leer ($ attr ['height'])? 300: $ attr ['height'];
    // HTML und der Rest des Codes geht hier}

Dann müssen wir den HTML-Code und den grundlegenden Aufruf für unsere Bilder erstellen. Ein weiterer wichtiger Punkt ist, die Größe anzupassen, wenn wir den Magazinstil verwenden (es sollte 2x die Breite sein, da wir 2-Bilder anstelle von einem haben):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS und Black Magic?> <Div id = "flipbook"> <? Php für ($ i = 0; $ i <sizeof ($ array ['ids'])); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'full'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </ span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?>, höhe: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // einzelne Seite oder Doppelseitenbeschleunigung: true, Farbverläufe:! jQuery.isTouch,}); </ script>

Was denken Sie?

Jetzt können Sie dies nach Belieben anpassen und ändern, indem Sie weitere Optionen hinzufügen (überprüfen Sie die hervorragenden Beispiele für weitere Inspiration), passen Sie an, was für Sie nicht funktioniert, oder kombinieren Sie es mit anderen Plugins.

Haben Sie ein WordPress-Konzept, das Sie etwas mehr lernen möchten? Vielleicht möchten Sie etwas lernen? Teilen Sie uns dies per Kommentar mit und wir freuen uns, dies in einem zukünftigen Beitrag aufzunehmen!

Über Rochester Oliveira

Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.

Verbinden: