Wie man eine Fotogalerie in ein Wordpress-Seite oder Blog-Post einfügen
Sie können die Wordpress-Medien einfügen Seite verwenden, um eine vollständige Foto-Galerie in Ihre Seiten einzufügen (oder Pfosten). Gehen Sie wie folgt vor, um eine Foto-Galerie in eine Seite einfügen (oder Post):
Auf der Seite (oder Post), in dem Sie eine Galerie einzufügen, laden Sie Ihre Bilder.
Auf der neuen Seite (oder Neuer Beitrag hinzufügen) Seite, klicken Sie auf Hinzufügen Schaltfläche Medien.
Die Medien einfügen Dialogfeld erscheint.
Klicken Sie auf die Galerie erstellen Link auf der linken Seite des Dialogfelds Medien einfügen.
Die Registerkarte Galerie erscheint nur für Beiträge oder Seiten, die ein oder mehrere Bilder hochgeladen haben.
Diese Registerkarte zeigt Miniaturansichten aller Bilder, die Sie für Ihre Seite hochgeladen haben (oder Post).
Klicken Sie auf die Neue Galerie Schaltfläche Erstellen.
Dieser Schritt öffnet die Galerie bearbeiten Seite, wo Sie die Bilder per Drag & Drop können die Reihenfolge zu bestimmen, in der sie auf Ihrer Website erscheinen soll.
Im Abschnitt Galerie Einstellungen, stellen Sie die Anzeigeoptionen für die Galerie:
Link zu: Wählen Sie Media-Datei (die physikalische Bilddatei) oder Anhang Seite (eine Seite, die nur das Bild zeigt selbst).
Zufällige Reihenfolge: Wählen Sie diese Option, um die Bilder in zufälliger Reihenfolge angezeigt werden.
Spalten: Wählen Sie, wie viele Spalten der Bilder, die Sie in Ihrer Galerie angezeigt werden sollen.
Klicken Sie auf die Insert-Galerie Schaltfläche am unteren Rand des Dialogfelds.
Wordpress kehrt in die Neue Seite hinzufügen (oder hinzufügen Neuer Beitrag) Seite. Sie können sehen, dass Wordpress in die Seite eingefügt hat (oder Post) ein Stück kurz Code (Ein Ausschnitt aus Code, der verwendet Wordpress bestimmte Funktionen auszuführen, wie zum Beispiel der Galerie-Anzeige), die wie folgt aussieht:
[Galerie]
Hinweis: Sie müssen die HTML-Ansicht (klicken Sie auf die Registerkarte HTML), um den Code zu sehen.
(Optional) In der Seite (oder Post) Bearbeitungsfeld in der HTML-Ansicht können Sie die Reihenfolge des Auftretens der Bilder in der Galerie zu ändern, sowie das Markup (HTML-Tags oder CSS-Selektoren), indem Sie den folgenden kurzen Code eingeben:
captiontag: Ändert das Markup, das die Bildbeschriftung umgibt durch die Galerie kurzen Code zu verändern. Beispielsweise,
[Galerie captiontag = "div"]
Orte Markierungen rund um die Bildunterschrift. (Der Tag, der ein Block-Element betrachtet wird, erzeugt einen separaten Behälter für den Inhalt.)
Um die Galerie zu haben scheinen auf einer eigenen Zeile, verwenden Sie den folgenden Code:
[Galerie captiontag = "p"]
Dieser Code Orte
Tags um der Bildunterschrift. Die Standard-Markup für das captiontag Option ist dd.icontag: Definiert den HTML-Markup um jedes einzelne Miniaturbild in Ihrer Galerie. Ändern Sie den Markup um die icontag (Bildsymbol) des Bildes durch die Galerie kurzen Code zu verändern, etwas wie folgt aussehen:
[Galerie icontag = "p"]
Dieser Code Orte
Tags um jede Miniaturansicht Symbol. Die Standard-Markup für icontag ist dt.ItemTag: Definiert den HTML-Markup um jedes Element in Ihrer Galerie. Ändern Sie den Markup um die ItemTag (Jedes Element) in der Galerie durch die Galerie kurzen Code zu verändern, etwas wie folgt aussehen:
[Galerie ItemTag = "span"]
Dieser Code legt Tags um jedes Element in der Galerie. Die Standard-Markup für das ItemTag ist dl.
Sortieren nach: Legt die Reihenfolge fest, dass die Bilder in der Galerie angezeigt werden soll. Ändern der Reihenfolge verwendet, um die Miniaturbilder in der Galerie angezeigt werden durch die Galerie kurzen Code zu verändern, etwas wie folgt aussehen:
[Galerie orderby = "menu_order ASC"]
Dieser Code zeigt die Thumbnails in aufsteigend Menü bestellen. Ein weiterer Parameter, den Sie verwenden können, ist ID_order ASC, das zeigt die Thumbnails in aufsteigender Reihenfolge nach ihren IDs.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Vorschau Änderungen-, um eine Vorschau, wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen Sie Ihre Seite zu veröffentlichen.
Galerie Funktionscode Ausgabe [Galerie Spalten = "4" size = "Medium"] Ein Vier-Säulen-Galerie enthält mittelgroße Bilder [Galerie Spalten = "10" id = "215" size = # 148-Thumbnail # 148-] Eine zehn Spalte Galerie Thumbnail-Bilder enthält, zog mit der ID Blogeintrag fromthe 215 [Galerie captiontag = "p" icontag = "span"] Ein Drei-Säulen (Standard) Galerie, in der jedes Bild von Tags und der Bildunterschrift issurrounded von Tags umgeben ist
Gehen Sie wie folgt vor, um das Stylesheet für Ihr Thema zu bearbeiten, um die Galerie Stile in der CSS zu umfassen:
Vom Armaturenbrett, Aussehen-Themen-Editor auswählen und dann CSS-Stylesheet öffnen.
Definieren Sie den Stil der Tags in Ihrem Stylesheet.
Die Tags erstellen ein Inline-Element. Ein Element in einem Tag enthalten bleibt auf der gleichen Linie wie das Element vor it- kein Zeilenumbruch gibt. Sie brauchen ein wenig Kenntnisse über CSS, die Tags zu ändern. Hier ist ein Beispiel dafür, was man mit dem Stylesheet hinzufügen können (style.css) Für Ihre aktuelle Thema den Stil der Tags zu definieren:
span.gallery-icon img {padding: 3px; Hintergrund: weiß-border: 1px solid black-margin: 0 5px;}Platzieren Sie dieses Bit von CSS im Stylesheet (style.css) Ihrer aktiven Thema automatisch platziert eine 1-Pixel-schwarzen Rand um jede Miniaturansicht, mit 3 Pixeln Polsterung und einem weißen Hintergrund. Die linken und rechten Rand sind 5 Pixel breit, schön Abstand zwischen den Bildern in der Galerie zu schaffen.
Klicken Sie auf die Update-Datei, um die Änderungen zu Ihrem Stylesheet zu speichern (style.css) Vorlage.
Hier ist ein Foto-Galerie die vorangegangenen Schritte und die CSS-Beispiel im Standard Zwanzig Dreizehn Thema verwenden. Hier ist der Kurzcode Galerie:
[Galerie icontag = "span" size = "Thumbnail"]
Matt Mullenweg, Mitbegründer der Wordpress-Plattform, erstellt eine umfangreiche Fotogallerie durch die eingebaute in der Galerie Optionen in Wordpress.
Einige nützliche Wordpress-Plugins arbeiten im Tandem mit der Wordpress-Galerie-Funktion.