Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Erstellen eines filterbaren Portfolios mit WordPress und jQuery

by
Length:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Lernen Sie in diesem Tutorial, wie Sie ein filterbares Portfolio mit jQuery in WordPress erstellen können, denken Sie daran, dass diese Art von Portfolio einen großen Unterschied bei Ihren Themen machen kann!


Schritt 1: Einführung

Sie können den Code aus diesem Tutorial in jedem Thema verwenden, das Sie erstellt haben oder erstellen, wir folgen einfachen Schritten und in meinem Fall verwende ich das Standard Twenty Eleven Theme und laufe auf WordPress 3.3. Okay, lass uns arbeiten!

Sie können den in diesem Lernprogramm verwendeten Code in einem beliebigen Thema verwenden, das Sie erstellt oder erstellt haben.


Schritt 2: Erstellen des Projektelements im Admin

Wir müssen einen Abschnitt in der Admin-Leiste mit dem Namen Projekt erstellen. In diesem Abschnitt erstellen Sie alle Portfolio-Einträge mit ihrem entsprechenden Thumbnail- und Demo-Link.

Öffnen Sie die Datei functions.php und erstellen Sie am Ende eine Funktion zum Registrieren des Projektelements. (Sie können die vollständige Funktion am Ende dieses Schritts sehen)

In diesem Code verwenden wir die Funktion add_action, so dass beim Laden von WordPress unsere Funktion aufgerufen wird.

Innerhalb der Funktion project_custom_init können Sie den Code hinzufügen, der einen Custom Post Type namens Project registriert.

Der obige Code fügt ein Element im Admin-Menü namens Portfolio hinzu. In diesem Abschnitt erstellen wir alle Portfolioelemente.

In der Funktion fügen wir jetzt mehr Code hinzu.

Achtung auf das 'hierarchische' Argument in der Funktion register_taxonomy, wenn Sie true eingeben, haben Sie ein System wie Kategorien für Ihre Portfolio-Elemente, aber wenn Sie false eingeben, haben Sie ein System wie Tags. Ich bevorzuge das Kategorie-Stil-System.

Oh ja! Die project_custom_init() function ist fertig! Siehe unten für den vollständigen Code dieser Funktion.

Wenn du jetzt zum Admin gehst, siehst du einen neuen Eintrag im Menü Portfolio, wie das folgende Bild:

Lassen Sie uns eine neue Funktion erstellen, die sicherstellt, dass nette Nachrichten angezeigt werden, wenn der Benutzer beispielsweise ein neues Objekt im Portfolio oder etwas Ähnliches erstellt.

Der folgende Code muss unterhalb unserer letzten Funktion und nicht innerhalb der letzten Funktion eingegeben werden.

Diese Funktion erstellt benutzerdefinierte Nachrichten für den Fall, dass ein Benutzer den Portfolio-Post ändert, siehe ein Nachrichtenbeispiel auf dem Bild unten:

Sie können sehen, dass mit nur diesem Code können Sie Tags / Kategorien zu Ihrem Portfolio hinzufügen und neue Portfolio-Elemente erstellen! Aber fügen wir noch ein Feature hinzu, eine gute Idee? Sicher!

Meta-Box für eine Demo-URL hinzufügen

In diesem Schritt fügen wir auf dem Bildschirm zum Erstellen des Portfolioelements ein Meta-Feld hinzu, in das der Benutzer eine URL auf die Website oder eine andere Seite einfügen kann.

Lassen Sie uns drei Funktionen erstellen, um diese Metabox hinzuzufügen, in der wir unsere URL für den Portfolio-Artikel speichern. Der Code geht unter die letzte Funktion, die wir erstellt haben.

Ich werde diesen Code nicht im Detail erklären, da Sie in diesem Tutorial mehr über Meta-Boxen erfahren können: Wiederverwendbare benutzerdefinierte Meta-Boxen oder einfach eine kleine Suche im WordPress-Codex oder bei Google.

Der obige Code erstellt nur eine Metabox mit einem Feld, in das der Benutzer eine URL eingeben kann. Wir brauchen all diese Funktionen, die erste initialisiert nur die Meta-Box, die zweite ist der Meta-Box-Code und die letzte ist eine Funktion, um die Daten zu speichern.

OK! Danach können wir zum nächsten Schritt übergehen und am Frontend arbeiten, denn das Backend ist fertig! Wir fügen dann den Inhalt nach.


Schritt 3: Erstellen der Portfolio-Seitenvorlage

Jetzt werden wir daran arbeiten, unsere Portfolioeinträge dem Benutzer zu zeigen! Aber zuerst müssen wir einige Kategorien erstellen und dann einige Elemente zum Portfolio hinzufügen.

In diesem Tutorial verwende ich ein zweispaltiges Portfolio-Layout, mit einigen Anpassungen an Markup und CSS können Sie viele Layouts erstellen!

Ein paar Tipps zum Erstellen eines Portfolioelements

  • Erstellen Sie zuerst die Tags / Kategorien
  • Auf der Seite "Neues Projekt hinzufügen" haben Sie einen Editor wie den Post / Page Editor, dann geben Sie einfach alle Texte und Bilder ein, die Ihr Benutzer sehen wird, wenn er auf den Link "Weitere Details" klickt
  • Um Thumbnails hinzuzufügen, verwenden wir das Featured Image, das eine Standard-WordPress-Funktion ist
  • In diesem Tutorial verwende ich Bilder mit 400px x 160px (Breite und Höhe), aber fühlen Sie sich frei, ein Bild zu verwenden, das Ihnen gefällt und das in Ihr Layout passt
  • erwenden Sie http:// vor den Links in der Metabox, damit Sie keinen Fehler 404 nicht gefunden bekommen

Ok, das erste, was wir jetzt tun müssen, ist ein neues Seiten-Template namens "Portfolio 2 Columns" zu erstellen, also los geht's!

Erstellen der Seitenvorlage

Erstens, duplizieren Sie die Datei page.php. Benennen Sie es dann in page_portfolio_2c.php um.

Wir müssen diese neue Datei bearbeiten und den folgenden Code in die erste Zeile der Datei einfügen:

Dies wird eine neue Option auf dem Seitenerstellungsbildschirm anzeigen, aber denken Sie daran, dass dieser Code in die erste Zeile der Datei eingefügt werden MUSS!

Jetzt lösche einfach den gesamten Inhalt im Inhalt div, in diesem Tutorial verwende ich das Twenty Eleven Theme und nach dem Löschen habe ich diesen Code in meiner Datei:

Wenn Sie ein eigenes Thema verwenden, löschen Sie alle Zeilen, die Inhalte von Ihrer Seite erhalten, z. B. the_content(). Wir erstellen einen benutzerdefinierten Code, also lassen Sie keinen anderen Code hier, auf der Portfolio-Seite brauchen wir nur Ihre Projekte!

Gehen Sie nun zu WordPress Admin und erstellen Sie eine neue Seite mit dem Namen "Portfolio". Vergessen Sie nicht, "Portfolio 2 Columns" im Template-Feld auszuwählen, wie in der Abbildung unten.

Fügen Sie einfach einen Titel hinzu und lassen Sie den Inhalt leer, wir brauchen ihn nicht.

Wenn Sie jetzt versuchen, auf die Seite zuzugreifen, werden nur die Kopf- und Fußzeile und der leere Inhalt angezeigt. Also, lasst uns unser filterbares Portfolio beleben!


Schritt 4: Das filterbare Portfolio von jQuery

Lassen Sie uns ein wenig über das Plugin sprechen, mit dem wir das Portfolio erstellen.

Das Plugin

In diesem Tutorial benutze ich ein Plugin namens Filterable, dieses Plugin wurde von GetHifi erstellt.

Dieses Plugin wurde ohne den Kompatibilitätsmodus von jQuery geschrieben, also habe ich es einfach geändert und die Version, die mit WordPress funktioniert, befindet sich in der Quellcodedatei für dieses Tutorial.

Das Plugin ist ein wenig alt, um genau zu sein, es ist aus dem Jahr 2009, aber es ist auf MIT-Lizenz, so dass Sie Premium-Themen, kommerzielle Websites und wo immer Sie möchten verwenden können.

Laden Sie einfach das modifizierte Skript herunter, das sich im Quellcode befindet (Link auf Tutorial oben) und fangen wir an! Wenn Sie möchten, besuchen Sie die Homepage, um mehr Details darüber zu erfahren.

Wie filterbar funktioniert

Die Verwendung von Filterbar ist sehr einfach! Der erste Schritt ist das richtige Markup, das Plugin erwartet Markup wie im folgenden Beispiel:

Hier haben wir die Filterelemente, wenn wir auf einen dieser Links klicken, dann wird die ganze Magie passieren. Wichtig: Alle Einträge benötigen eine Klasse mit demselben Text in den Attributen 'href' und 'rel'.

Und jetzt haben wir das Markup Items Markup:

Wichtig: Was hier wirklich wichtig ist, ist, dass alle Gegenstände (li) innerhalb einer (ul) sein müssen, mit anderen Worten, müssen umhüllt sein. Beachten Sie, dass wir auch ein div verwenden, wir verwenden es, weil wir die li-Elemente "floaten". Daher ist es wichtig, einen weiteren Wrapper und ein clear div zu haben, um Strukturbrüche zu vermeiden.

Danach müssen wir das filterbare Skript in unserer functions.php Datei aufrufen und das filterbare Portfolio initialisieren, indem wir die filterable() -Funktion aufrufen, wie im folgenden Code:

Aber vorerst fügen wir unser benutzerdefiniertes Markup in das li hinzu, aber wir müssen alle Filter und Klassennamen mit PHP generieren, um alle Kategorien, Portfolioeinträge und alle anderen Details aus WordPress zu erhalten! Lass uns arbeiten!

Portfolio-Filter erstellen

Lassen Sie uns zurück zur Datei page_portfolio_2c.php gehen und den Portfolio-Filter schreiben. Der Code ist tatsächlich so etwas wie der folgende Code:

Wir müssen alle Begriffe/Kategorien aus WordPress holen, einige Namen bearbeiten, die innerhalb des Klassenattributs verwendet werden, und eine ul für die erforderliche Vorlage drucken.

Wir geben den folgenden Code in das #content div ein:

Der obige Code generiert eine ul mit dem Standardelement 'All' und führt eine Schleife für Terme aus, um alle anderen Kategorien mit Einträgen zu drucken. Lassen Sie uns eine genauere Erklärung geben:

Zuerst erstellen wir eine Variable namens $terms und verwenden die Funktion get_terms(), die ein Array mit allen Termen zurückgibt. Als Parameter benötigt die Funktion einen String oder ein Array von Strings mit dem Taxonomennamen, wir übergeben das Tagportfolio, das ist der Name, den wir in unserer Datei functions.php verwendet haben. Sie können detailliertere Informationen unter get_terms() im WordPress Codex erhalten.

Dann erstellen wir eine Variable namens $count und verwenden die Funktion count(), um die Gesamtzahl der Elemente im Array zu ermitteln. Wir drucken das Standard-Markup und das Element All.

Danach überprüfen wir, ob die Variable $count größer als Null ist. Wenn ja, haben wir mindestens eine Kategorie mit zu druckenden Elementen.

Innerhalb von if erstellen wir eine foreach-Schleife, um alle Array-Werte zu erhalten, und erstellen ein anderes li-Element für jedes Element im Array $terms.

Innerhalb von foreach erstellen wir eine Variable namens $termname, um den Termnamen zu speichern. Denken Sie daran, dass wir den Text in Kleinbuchstaben ändern, da diese Variable innerhalb des Klassenattributs verwendet wird.
Dann ersetzen wir einfach jeden Leerraum durch einen - mit der Funktion str_replace ermöglicht diese Zeile die Verwendung von Kategorien/Begriffen mit mehr als einem Wort, wie zum Beispiel "WordPress Themes".
Und zuletzt drucken wir ein li-Element und verwenden unsere Variablen, um die Daten an der richtigen Stelle zu drucken.

Wenn Sie jetzt testen, sehen Sie eine Liste mit Kategorien/Begriffen mit den Namen, die Sie in WordPress Admin erstellt haben. Lasst uns jetzt an den Gegenständen arbeiten. Lasst uns jetzt an den Gegenständen arbeiten.

Anzeigen der Portfolioelemente

Lassen Sie uns nun die Portfolio-Elemente anzeigen, wir müssen dies tun, indem Sie der oben gezeigten Vorlage folgen.

Wir werden es tun, indem wir einfach den folgenden Code hinzufügen:

Viele Zeilen Code, nicht? Aber keine Sorge, ich erkläre dir den Code.

Der erste Schritt ist eine benutzerdefinierte Abfrage zu erstellen, wir machen es mit WP_Query function, ich übergebe als Parameter den benutzerdefinierten Beitragstyp "Projekt", den wir in der Datei functions.php erstellt haben. Diese Abfrage ruft alle von Ihnen erstellten Projekte ab.

Dann mache ich eine Schleife, wie wir sie zum Beispiel nach der Ausstellung normalerweise machen.

In der while-Phase führen wir den gleichen Prozess aus, der auch für die Filtererstellung verwendet wird, aber hier erstellen wir ein Array namens "Links", in dem wir alle Begriffe des Posts speichern. Beachten Sie, dass wir nun neben dem Taxonomie-Namen die Post-ID in get_the_terms() übergeben.

Dann verwenden wir Join und erstellen eine eindeutige Zeichenfolge mit allen Array-Elementen, wenn die Post-Begriffe "WordPress" und "Design" sind, wird die Variable $tax gleich "Wordpress Design" sein, wir werden dies verwenden, um das Recht hinzuzufügen Klassen, um das Portfolio filterbar zu machen.
Wenn der Beitrag keine Begriffe hat, setzen wir einfach $tax gleich einer leeren Zeichenfolge.

Danach erstellen wir eine Variable namens $infos, wo wir die Demo-URL aus unserem Custom Post Field in der Datei functions.php erhalten

Dann drucken wir einfach das Template-Markup und nutzen Funktionen wie get_the_excerpt (), the_post_thumbnail (beachten Sie, dass Sie die Dimensionen an Ihr Layout anpassen können, wenn Sie beispielsweise ein Portfolio mit drei Spalten erstellen möchten.)

Wenn Sie die Seite aktualisieren, werden alle aufgelisteten Elemente angezeigt, der Filter funktioniert jedoch weiterhin nicht. Lasst es uns reparieren!

Verwenden von Filterbar in WordPress

Jetzt verwenden wir unser Plugin. Hast du es schon heruntergeladen? Wenn ja, kopieren Sie die Datei filterable.js in den Ordner js/ und fügen Sie sie ein.

Fügen Sie in der functions.php-Datei zunächst die jQuery-Bibliothek zum "head" -Tag hinzu. Dazu verwenden wir eine benutzerdefinierte Funktion und die wp_enqueue_script-Funktion.

Fügen Sie nun in der Datei page_portfolio_2c.php und unterhalb des letzten hinzugefügten Codes, aber innerhalb des content div, den folgenden Code hinzu:

Dies verknüpft nur das Plugin mit der Seite und ruft die filterable() Funktion auf, um unser Portfolio filterbar zu machen.

Vollständiger Code


Schritt 5: Irgendein Stil

Nachdem wir nun alles, was wir brauchen, codiert haben, fügen wir unserer style.css-Datei CSS hinzu. Wenn Sie andere Dateien haben, fügen Sie einfach den Code dort hinzu.

Nun, wenn Sie noch einmal testen, erhalten Sie ein schönes filterbares Portfolio! Wow, die ganze Arbeit ist erledigt!


Fazit

Und es ist fertig! Jetzt wissen Sie, wie Sie ein fantastisches filterbares Portfolio mit einem kostenlosen jQuery-Plugin erstellen, das Sie für Ihre Arbeit verwenden können.

Ich hoffe, dass Sie den Inhalt genießen, vielen Dank für das Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.