Wie eine Fotogalerie in Ihre Wordpress Blog einfügen
Sie können die Wordpress-Insert Media-Fenster verwenden, um eine vollständige Foto-Galerie in Ihre Beiträge einfügen. Laden Sie alle Ihre Bilder und dann, statt des Einsatzes in Pfosten Schaltfläche klicken, klicken Sie auf die Galerie Neues Link auf der linken Seite des Einsatzes Media-Fenster. Die Galerie erstellen Fenster öffnet sich und zeigt alle Bilder, die Sie auf Ihrer Website hochgeladen haben.
Gehen Sie wie folgt vor, um eine Foto-Galerie in einem Blog-Post einzufügen:
In der Galerie Fenster erstellen, wählen Sie die Bilder, die Sie in Ihrer Galerie verwenden möchten.
Klicken Sie auf jedes Bild einmal, um es auszuwählen, für den Einsatz in der Galerie. Eine ausgewählte Bild zeigt ein kleines Häkchen in der rechten oberen Ecke.
Klicken Sie auf die Schaltfläche Neue Galerie erstellen.
Die Galerie bearbeiten wird geöffnet.
(Optional) Fügen Sie einen Titel für jedes Bild durch diesen Bildbereich in der Beschriftung klicken und eine Beschriftung oder kurze Beschreibung für das Bild eingeben.
(Optional) Legen Sie die Reihenfolge der Bilder in der Galerie erscheinen mit der Drag-and-Drop-Option auf der Galerie bearbeiten Seite.
Klicken Sie auf und dann per Drag & Drop Bilder, um die Reihenfolge zu ändern.
(Optional) Legen Sie die folgenden Optionen im Rahmen des Gallery Abschnitt Einstellungen auf der rechten Seite der Galerie bearbeiten Seite:
Link zu: Media-Datei oder Anlage Seite.
Zufällig Auftrag: Wählen Sie die Reihenfolge zufällig zu verteilen, in dem die Bilder in der Galerie angezeigt werden.
Galerie Spalten: Wählen Sie, wie viele Spalten der Bilder, die Sie in Ihrer Galerie erscheinen soll.
Klicken Sie auf die Einfügen Schaltfläche Galerie.
Wordpress fügt in den Beitrag ein Stück Shortcode, der wie folgt aussieht: [Galerie ids "1,2,3"].
(Optional) Ändern Sie die Reihenfolge des Auftretens der Bilder in der Galerie, sowie das Markup (HTML-Tags oder CSS-Selektoren).
Verwenden Sie die Wordpress Galerie Short verschiedene Aspekte der Anzeige der Galerie in Ihrem Beitrag zu ändern:
captiontag: Ändern Sie das Markup, das die Bildbeschriftung umgibt durch die Galerie Shortcode zu verändern. Zum Beispiel, [Galerie captiontag = "div"] Orte Markierungen rund um die Bildunterschrift. (Der Tag ist ein Block-Level-Element betrachtet und erzeugt einen separaten Behälter für den Inhalt.)
Wenn Sie die Galerie angezeigt werden sollen, auf einer eigenen Zeile, die [Galerie captiontag = "p"] 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 (Thumbnail-Symbol) des Bildes durch Veränderung der Galerie Shortcode zu so etwas wie [Galerie icontag = "p"], welche 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, um etwas zu verändern Short wie [Galerie ItemTag = "span"], die Orte Markierungen um jedes Element in der Galerie. Die Standard-Markup für das ItemTag ist dl.
Sortieren nach: Definiert die Reihenfolge, in der die Bilder in Ihrer Galerie angezeigt werden. Ändern der Reihenfolge verwendet, um die Miniaturbilder in der Galerie angezeigt werden durch Veränderung der Galerie Shortcode zu so etwas wie [Galerie orderby = "menu_order ASC"], das zeigt die Thumbnails in aufsteigender Reihenfolge von Menüs. Ein weiterer Parameter, den Sie verwenden können, ist ID_order ASC, das zeigt die Thumbnails in aufsteigender Reihenfolge nach ihren IDs.
| Galerie Funktionscode | Ausgabe |
|---|---|
| [Galerie Spalten = "4" size = "Medium"] | Ein Vier-Säulen-Galerie enthält mittelgroße Bilder |
| [Galerie Spalten = "10" id = "215" size ="Miniaturansicht"] | 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 das Bild captionis umgeben von Tags issurrounded |
Definieren Sie den Stil der Tags in Ihrem CSS-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. Klicken Sie auf die Registerkarte Entwurf in Ihrer Wordpress-Dashboard und klicken Sie dann auf das Thema Editor Subreiter das Stylesheet für Ihr Thema zu bearbeiten.
Hier ist ein Beispiel dafür, was man mit dem Stylesheet hinzufügen können (style.css) Für Ihre aktuelle Thema:
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 an Ihrem Sheet (style.css) Vorlage zu speichern.
Die Abbildung zeigt einen Beitrag mit einer Fotogalerie angezeigt, die vorhergehenden Schritte und CSS Beispiel im Standard-Wordpress-Theme mit: Twenty Twelve.
Matt Mullenweg, Mitbegründerin der Wordpress-Plattform, erstellt eine sehr umfangreiche Fotogalerie von der integrierten in der Galerie Optionen in Wordpress. Überprüfen Sie diese fabelhafte Fotogalerie aus.
