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

Ein Portfolio mit mehreren Layouts im WordPress erstellen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Wordpress wird als Content-Management-System häufig zum Erstellen von Portfolio-Websites verwendet. Mit der Entwicklung des Designs und der Funktionen der Benutzeroberfläche ist ein neuer Trend entstanden: Anzeige von Portfolioelementen in verschiedenen Layouts. Dieses Tutorial beschreibt den Prozess des Erstellens eines dedizierten Portfolio-Abschnitts im Backend von WordPress und der Verwendung von jQuery und CSS3, um das Portfolio auf elegante Weise anzuzeigen.


In diesem Tutorial werden wir die leistungsstarken Funktionen von WordPress wie benutzerdefinierte Beiträge und benutzerdefinierte Taxonomien ausführlich nutzen und eine Funktion zum Abrufen unserer eigenen benutzerdefinierten Auszüge schreiben.


Schritt 1 - Installieren von Wordpress und Initialisieren des Themas.

Der erste Schritt bei der Erstellung unserer Portfolio-Website ist die Installation von Wordpress. Das ist eine einfache Aufgabe, und noch besser, die meisten Webhosts bieten Installationsprogramme mit einem Klick an. Wenn Sie mit diesem Thema noch nicht vertraut sind, finden Sie hier eine großartige Anleitung, die Sie bei der Installation unterstützt.

Nach der Installation müssen wir unser benutzerdefiniertes Thema erstellen, das unser Portfolio anzeigt. Es gibt verschiedene Methoden zum Erstellen benutzerdefinierter Themen. Einige ziehen es vor, eine neue leere weiße Vorlage zu erstellen, während andere untergeordnete Themen der neuen TwentyTen-Vorlage erstellen. In diesem Tutorial verwenden wir das Starker-Thema von Elliot Jay Stocks. Es ist ein völlig leeres Thema ohne Styling. Es ist eine großartige Basis, um auf unserem Thema aufzubauen. Bearbeiten Sie die Datei styles.css und ändern Sie den oben genannten Themennamen. Um das Thema zu installieren, fügen Sie einfach den Themenordner in den Ordner wp-content > themes ein. Sobald das Thema installiert ist, können Sie es aktivieren, indem Sie zur Themenseite gehen.


Schritt 2 - Planen des Layouts

Unsere Portfolio-Site wird nicht viele Daten enthalten. Eine einfache Portfolio-Site enthält Bilder der Projekte, einige Tags zur Identifizierung der Projekte und eine kurze Beschreibung der einzelnen Projekte. Das Multi-Layout-Thema funktioniert so, dass der Benutzer zwischen einem Raster und einem Listenlayout wählen kann. Wie bei vielen verfügbaren Websites mit mehreren Layouts wird keine andere Seite geladen, wenn der Benutzer auf die Listenansicht oder die Rasteransicht klickt. Stattdessen verwenden wir AJAX, um den neuen Viewer asynchron zu laden. Dies ist das grundlegende Design, wie unsere Portfolio-Site im Grid-Modus angezeigt wird:

Sobald der Benutzer auf das Steuerelement der Listenansicht klickt, ändert sich das gesamte Layout reibungslos in eine Listenansicht, die den Titel des Projekts, die damit verbundenen Tags und eine kurze Beschreibung enthält.


Schritt 3 - Einrichten des Backends

Für unser Portfolio müssen wir einen benutzerdefinierten Beitragstyp namens "Projekt" registrieren. Wir können jeden Aspekt eines WordPress-Beitrags anpassen. Zum Beispiel können wir die beteiligten Beschriftungen ändern, verschiedene Funktionen für den Beitrag auswählen, wie Kommentare, Miniaturansichten, Auszüge usw.

Um einen benutzerdefinierten Beitrag zu implementieren, bearbeiten Sie die Datei functions.php im theme ordner. Es enthält viel vordefinierten Code, da das nackte Starkers-Thema einige Funktionen der Standard-TwentyTen-Vorlage bietet. Sei nicht ängstlich oder verwirrt. Sie können den folgenden Code entweder unten oder oben in der Datei functions.php anhängen.

Lassen Sie am Ende der Datei functions.php keinen leeren Platz frei.

Wir verknüpfen unsere benutzerdefinierte Funktion auf folgende Weise mit der Initialisierungsaktion(init):

Diese project_custom_init-Methode wird verwendet, um den benutzerdefinierten Beitragstyp in der WordPress-Datenbank zu registrieren.

Hier erfahren Sie ausführlich, wie Sie einen benutzerdefinierten Beitragstyp registrieren.

Die Methode register_post_type erfordert einen Namen für den benutzerdefinierten Beitrag und eine Reihe von Argumenten, die die Merkmale des benutzerdefinierten Beitrags definieren. Zunächst müssen wir die Beschriftungen für den benutzerdefinierten Beitrag definieren. Diese Labels werden für den benutzerdefinierten Beitrag im WordPress-Administrator verwendet.

Nachdem wir die Beschriftungen definiert haben, müssen wir die Argumente für den benutzerdefinierten Beitragstyp definieren. Das zuvor definierte Label-Array wird ebenfalls ein Argument sein. Sobald die Argumente definiert sind, registrieren wir den benutzerdefinierten Beitragstyp als "project".

Erstellen Sie benutzerdefinierte Nachrichten für den Beitrag "project"

Optional können wir auch benutzerdefinierte Nachrichten für den benutzerdefinierten Beitragstyp hinzufügen. Diese Nachrichten werden im WordPress-Dashboard angezeigt, wenn wir den benutzerdefinierten Beitrag bearbeiten oder aktualisieren. Wir können dies tun, indem wir einen Filter für die nachträglich aktualisierten Nachrichten auf folgende Weise erstellen:

Registrieren einer benutzerdefinierten Taxonomie

Als nächstes müssen wir eine benutzerdefinierte Taxonomie für die Tags definieren, die für jedes der Portfolioelemente verwendet werden sollen. Weitere Informationen zur Registertaxonomiemethode finden Sie hier.

Kehren Sie zu Ihrem WordPress-Dashboard zurück und öffnen Sie die Medieneinstellungen auf der Registerkarte Einstellungen. Hier müssen Sie die Standardgröße für die Miniaturansichten der Portfolio-Bilder festlegen. In der Seitenleiste werden Sie außerdem feststellen, dass der benutzerdefinierte Beitragstyp "Projekt" zusammen mit der benutzerdefinierten Taxonomie "Tags" erfolgreich registriert wurde. Wir können die Standardgröße für Miniaturansichten mithilfe der Methode set_post_thumbnail registrieren, aber ich werde einen anderen Weg zeigen, um dies zu erreichen. Weitere Informationen zum programmgesteuerten Festlegen der Größe von Post-Thumbnails finden Sie hier.

Erstellen Sie Demo-Portfolio-Elemente

Erstellen Sie einige Demo-Portfolio-Elemente, indem Sie zu Projekten gehen und auf Neu hinzufügen klicken. Wir benötigen einen Titel für das Projekt, den Inhalt und eine Miniaturansicht. Wir können sehen, dass auch ein Tag-Abschnitt angezeigt wurde, und bestätigen, dass unsere benutzerdefinierte Taxonomie erfolgreich registriert wurde. Fügen Sie auch einige Tags für die Portfolioelemente hinzu.


Schritt 4 Codieren und Stylen der Vorlage

Codierung der statischen Vorlage

Um das Thema zu erstellen, erstellen wir zunächst eine statische HTML / CSS3-Vorlage für die Website. Dies trennt die beiden Aufgaben, die Website mit dem Design in Einklang zu bringen und den Inhalt aus der Datenbank abzurufen. Das direkte Codieren des Themas kann für Anfänger manchmal etwas verwirrend sein - insbesondere, wenn das Thema viele Inhalte enthält. Erstellen Sie drei Ordner mit dem Namen
"css", "images" bzw. "js". Die allgemeine Struktur für den Hauptinhaltsbereich sieht folgendermaßen aus:

Stil von der Vorlage

Dieser Prozess hängt von Ihnen ab. Sie können mit verschiedenen Farben und Bildern experimentieren, um Ihren Anforderungen zu entsprechen. Aber für diese Vorlage werden wir ein dunkles Grunge-Thema erstellen und lustiges CSS3 verwenden, um diese subtilen Hover-Effekte und Transparenz zu erzielen. Das Aufteilen des Designs in Bilder ist eher. Daher werde ich hier nicht auf die Details eingehen.

Das grundlegende Design für den Hauptcontainer und die Layout-Steuerelemente lautet wie folgt

Im Folgenden sind die allgemeinen Stile für die Projektliste aufgeführt. Wir werden später für jeden Rasterlayoutmodus und einen Listenlayoutmodus abhängig von der aktuellen Klasse der Folioliste ein spezifisches Styling durchführen.

Beachten Sie auch, dass wir nicht die allgemeine Opazitätsmethode verwenden, um Transparenz mit CSS3 zu erzielen. Die Verwendung der Deckkraftmethode wirkt sich auch auf die untergeordneten Elemente des übergeordneten Containers aus, auf den die Deckkraft angewendet wird. Stattdessen verwenden wir die RGBa-Methode, um dem Container Hintergrundfarben hinzuzufügen, und verwenden den Alpha-Wert, um die Transparenz des Containers zu steuern.

Weitere Informationen zur RGBa-Eigenschaft finden Sie in diesem fantastischen Artikel.

Dies hat keinen Einfluss auf die Transparenz der untergeordneten Elemente. Wir müssen auch IE-spezifischen CSS-Code erstellen, um die Alpha-Transparenz zu unterstützen.

In der HTML-Struktur werden Sie feststellen, dass der Portfolio-Liste eine Klasse zugeordnet ist.

Grundsätzlich wird die Klasse "Raster/grid" verwendet, um die Liste in einer Rasteransicht anzuzeigen, und die Klasse "Liste/list" wird verwendet, um die Liste in einer Listenansicht anzuzeigen. Im Rastermodus ist der gesamte zusätzliche Inhalt für den Benutzer ausgeblendet, und im Listenmodus ist der gesamte Inhalt für den Benutzer sichtbar. Wir haben zwei separate Styling-Sätze für jeden Modus. Die Stile für den Rastermodus lauten wie folgt:

Listenmodusstile sind wie folgt. Zu jedem Zeitpunkt ist nur einer der Raster- oder Listenstile aktiv.

Verwenden Sie jQuery, um Effekte hinzuzufügen

Als nächstes verwenden wir die jQuery-UI, um die Klasse der Folioliste in Bezug auf die vom Benutzer angeklickte Layoutschaltfläche zu ändern. Wir erkennen das Klickereignis der Layoutsteuerungsschaltflächen, rufen die aktuelle Klasse und die neue zu aktivierende Klasse ab und verwenden dann die Klassenmethoden add und remove, um die Klassen zu ändern. Wir haben auch eine Reihe von Parametern, die die Geschwindigkeit der Ereignisse definieren.


Schritt 5 Integration mit dem WordPress-Theme

Nachdem wir die statische Version der Site fertiggestellt haben, können wir sie in wenigen Minuten in das WordPress-Theme integrieren. Alles, was wir tun müssen, ist, die Beiträge mit einem wp_query-Objekt mit einer Abfrage nach dem benutzerdefinierten Beitragstyp zu durchlaufen. Anschließend platzieren wir den Inhalt an der entsprechenden Position in der Vorlage.

Bearbeiten Sie header.php

Zuerst müssen wir die Vorlage header.php ändern und unsere benutzerdefinierten JavaScript-Dateien einschließen. In diesem Tutorial wird jQuery mit der CDN-Version von Google aufgenommen. Wir werden die von WordPress bereitgestellte jQuery abmelden und Googles CDN-Version von jQuery registrieren. Fügen Sie das folgende Snippet in Ihre Datei functions.php ein.

Verschieben Sie die zuvor für die statische Vorlage erstellten Ordner css, js und images in den WordPress-Themenordner. Fügen Sie die benutzerdefinierte Datei der jQuery-Benutzeroberfläche und die Hauptskriptdatei in den Header ein. Stellen Sie sicher, dass es unterhalb der wp_head-Methode eingefügt wird.

Erstellen Sie die Hauptvorlage

Jetzt können Sie entweder eine andere Vorlage im Thema erstellen - zum Beispiel page-home.php - oder Sie können die index.php ändern, die bereits im Themenordner vorhanden ist. Wenn Sie die erstere Methode wählen, dann:

  • Erstelle eine Seite
  • Legen Sie die Seitenvorlage als die gerade erstellte Vorlage fest.
  • Gehen Sie zu den Leseeinstellungen auf der Registerkarte settings.
  • Wählen Sie die Homepage als statische aus.
  • Wählen Sie die gerade erstellte Seite als Homepage aus.

Die Vorlage enthält zuerst den Header, den Sie mit der Methode get_header() aufrufen können, und dann den Hauptinhalt, den Sie in der Vorlage selbst codieren. Zuletzt die Fußzeile, die Sie über die Methode get_footer() einfügen können.

Der folgende Code zeigt, wie Sie mit dem Objekt wp_query eine benutzerdefinierte Abfrage erstellen können.

Wir verwenden eine Variable, count, um die Anzahl der Elemente in der Liste zu zählen. Wir brauchen dies, weil wir nur vier Elemente in jeder Zeile behalten und jedem vierten Listenelement eine Klasse 'rightmost' zuweisen. Die Klasse 'rightmost' eliminiert jeden rechten Rand zu den Listenelementen. Alternativ können wir in unserer CSS-Datei den Selektor li:nth-child(4n) verwenden.

Der folgende Code zeigt, wie wir die Beiträge durchlaufen und den Inhalt nach Bedarf einfügen können.

Innerhalb der Schleife fügen wir den Inhalt auf normale WordPress-Weise ein, wobei wir natürlich das Objekt $loop wp_query verwenden. Der folgende Code zeigt, wie wir die Miniaturansicht des Projektbeitrags abrufen und in die Vorlage einfügen können. Notieren Sie sich genau, wie wir die Variable $count verwenden, um die Klasse 'rightmost' in jedes vierte Listenelement einzufügen.

Nun kommt der Inhaltsbereich, in dem wir den Titel, die Tags und die Kurzbeschreibung einfügen und den Auszug für den Beitrag mit einer benutzerdefinierten Auszugsmethode abrufen müssen. Das Einfügen des Titels ist ziemlich einfach, ebenso wie die Tags. Denken Sie daran, dass wir zuvor eine benutzerdefinierte Taxonomie mit dem Namen Tags erstellt haben.

Sie werden feststellen, dass wir nicht die von WordPress bereitgestellte allgemeine Methode the_excerpt() verwenden. Stattdessen definieren wir unsere eigene benutzerdefinierte Methode, indem wir einige Filter hinzufügen. Die allgemeine Auszugsmethode gibt eine größere Auszugslänge zurück, als wir benötigen. Daher die benutzerdefinierte Version. Wir ändern auch den am Ende des Standardauszugs hinzugefügten Text "Continue Reading ..." und ersetzen ihn durch "Read More". Das folgende Snippet erfüllt unseren Zweck. Diese benutzerdefinierte Auszugsmethode ist in vielen Situationen nützlich.


Schritt 6 Abschluss

Die oben beschriebene Methode zum Erstellen eines Portfolios mit mehreren Layouts ist recht einfach und verwendet grundlegende CSS- und jQuery-Tricks, um das Ergebnis zu erzielen. Noch besser ist, dass diese Techniken auf eine Vielzahl von Projekten angewendet werden können. Andere Techniken in diesem Tutorial, wie benutzerdefinierte Beitragstypen, benutzerdefinierte Taxonomien und das Hinzufügen von Filtern zur Auszugsmethode, können auch auf verschiedene andere innovative Arten verwendet werden!

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.