Normalerweise verwenden Leute Plugins wie NextGen Gallery, um diesen Effekt zu erzielen. Neben der Verwendung von Plug-Ins von Drittanbietern können Sie auch WordPress-eigene Funktionen nutzen, um den gleichen Effekt zu erzielen. Zuvor müssen wir jedoch ein gewisses Verständnis von WordPress und HTML/CSS haben.
Endeffekt des Fotoalbums
Bevor wir beginnen, bestimmen wir den endgültigen Effekt:
Wenn der Benutzer auf die Albumseite klickt, werden auf der Seite verschiedene Cover in einem Raster angezeigt, um die Alben verschiedener Monate darzustellen. Jeden Monat erstellen wir ein Fotoalbum, das alle Fotos dieses Monats enthält.
Wenn der Benutzer auf das Albumcover klickt, wird ihm eine exklusive Seite für das Album angezeigt, auf der Sie ein paar Hintergrundinformationen schreiben und alle Fotos im Album auflisten können.
Wenn Benutzer auf ein einzelnes Foto klicken, gelangen sie zur eigenen Seite jedes Fotos, wo sie den Titel jedes Fotos, Informationen über die Person, die es aufgenommen hat, und verwandte Links sehen können.
Wenn die gesamte Website zur Anzeige von Fotoalben genutzt wird, können Sie das Standard-Postformat verwenden. Wenn Sie jedoch noch einen Blog haben, müssen Sie einen benutzerdefinierten Beitragstyp verwenden.
Lass uns ein Fotoalbum erstellen
Zuerst müssen Sie ein websitespezifisches Plug-in (oder sogar ein projektspezifisches Plug-in) erstellen.
Wenn Sie einen benutzerdefinierten Beitrag verwenden möchten, sollten Sie einen Code generieren und ihn in das spezielle Plug-in der Website einfügen.
Um einen Rastereffekt zu erzeugen, müssen Sie als Nächstes die Größe des angehängten Bildes in WordPress festlegen.
Zum Beispiel: Nachdem wir die Bildgröße festgelegt haben, müssen wir auch Felder zum Medien-Upload-Verzeichnis hinzufügen. Auf diese Weise können Sie jedes Bild mit dem Namen des Fotografen und seiner URL hochladen.
Sobald dieser Schritt abgeschlossen ist, können wir weitere Fotoalben hinzufügen. Laden Sie alle Bilder hoch, die Sie dem Album hinzufügen möchten. Bringen Sie dann ein anderes Fotocover an und machen Sie es zum Hauptbild. Sie können Hintergrundinformationen in die Inhaltsspalte des Beitrags schreiben.
Da Sie nun mehrere Fotoalben im Hintergrund hinzugefügt haben, können wir Code hinzufügen, damit es ausgeführt wird. Angenommen, Ihr benutzerdefinierter Beitragstyp heißt „Alben“, dann erstellen Sie einen neuen Vorlagenordner mit dem Namen „archive-albums.php“. Fügen Sie die gewünschte Kopf- und Fußzeile, Seitenleiste und andere Designelemente ein und erstellen Sie dann eine neue Beitragsschleife.
In dieser PL werden wir alle Anhänge im selben Beitrag auflisten, jedoch nicht die Miniaturansichten, die mit einer einzelnen Seite verlinkt sind.
Wir werden auch die Miniaturansicht des Hauptbeitrags (d. h. das Albumcover) hinzufügen und es dann mit einem Hyperlink zu einer einzelnen Beitragsseite (d. h. der Albumseite) verknüpfen.
Wir werden eine Listenmethode verwenden, um Rasterbilder zu erstellen. Dieses Programm sieht so aus:
Was beim Haupt-CSS-Stil wirklich jeder berücksichtigen muss, ist die Klassifizierung des Albumrasters, damit wir jedes Bild an der richtigen Position im Raster platzieren können, um den gewünschten Stil zu erreichen.
Als nächstes müssen Sie eine neue Vorlage für einen einzelnen Anhang erstellen. Dies wird die Seite sein, die Benutzern in Zukunft angezeigt wird, damit sie jedes Bild sehen können. Hier sehen Nutzer den Titel des Bildes, den Namen des Fotografen und dessen Link. Es steht jedem frei, einzelne Vorlagen nach seinen Wünschen anzupassen.
Angenommen, Ihr benutzerdefinierter Beitragstyp heißt „Album“, müssen Sie eine neue Datei „single-albums.php“ erstellen und alle gewünschten Programmkopfzeilen, Endzeilen, Symbolleisten oder andere Designelemente hinzufügen alle.
Führen Sie im Loop-Element grundsätzlich die gleiche Verarbeitung durch wie in der Archivalbum-Vorlage. Bevor Sie jedoch das Hauptbild und die Anhänge hinzufügen, müssen Sie auch einen Albumtitel und eine Beschreibung hinzufügen. Dieser Schritt kann durch Hinzufügen von Code wie folgt durchgeführt werden:
Okay! Du bist fertig!
Wie WordPress automatisch echte statische Seiteneinstellungen generiert:
Die Methode ist sehr einfach. Sie müssen lediglich ein WordPress-Plugin namens cos-html-cache herunterladen und installieren.
COS-HTML-Cache ist ein sehr effektives WordPress-Seiten-Caching-Plugin, das WordPress-Websites reaktionsfähiger macht. Basierend auf der URL-Umschreibung generiert das Plug-in automatisch echte HTML-Dateien. Wenn ein Benutzer oder Suchmaschinen-Spider Ihre pseudostatische Seite besucht, aktualisiert das Plug-in automatisch die HTML-Datei und die zugehörigen Artikeländerungen.
Sie können im WordPress-Backend Plug-in > Plug-in installieren auswählen, cos-html-cache eingeben, nach der Installation suchen und diese schließlich aktivieren. Oder gehen Sie auf die WordPress-Website, um das komprimierte Paket „cos-html-cache“ herunterzuladen, dekomprimieren Sie es, laden Sie es per FTP in das Verzeichnis /wp-content/plugins/ hoch und aktivieren Sie es dann im Hintergrund.
Nachdem das Plug-in erfolgreich installiert wurde und wirksam wird, generiert es nicht sofort statische HTML-Dateien. Es generiert oder aktualisiert automatisch HTML-Dateien, wenn ein Benutzer das nächste Mal eintritt oder ein Spider sie besucht. Wenn Sie schnell eine HTML-Datei erstellen und den Effekt sehen möchten, können Sie die Erkennung toter Links in den Webmaster-Tools nutzen und einen Spider imitieren, der Ihre Website besucht.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Fotoalbum in WordPress, ohne ein Plugin zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
