Der WordPress Gallery Shortcode: Ein umfassender Überblick

() translation by (you can also view the original English article)

Wenn Sie in der Vergangenheit nicht die Möglichkeit hatten, den WordPress Gallery Shortcode zu verwenden, ist dies ein guter Ausgangspunkt für Sie. Für andere, die es verwendet haben, werden wir einige Funktionen des Shortcodes behandeln, die Sie möglicherweise noch nicht berücksichtigt haben. In diesem Tutorial werden wir einen bestimmten WordPress-Shortcode, [gallery] und die verschiedenen Verwendungsmöglichkeiten behandeln.

Einführung

WordPress verfügt über kleine Codefragmente, sogenannte Shortcodes, die in Posts, Pages und Post-Typen verwendet werden können. WordPress verfügt über viele Shortcodes, die mithilfe der hier behandelten Shortcode-API hinzugefügt werden können. Diese Shortcodes, die im Inhaltseditorbereich oder in einer Themendatei abgelegt werden, sind mit Funktionen verbunden, die beim Laden des Inhalts oder Beitrags ausgeführt werden. WordPress-Shortcodes sind flexibel und ermöglichen es Ihnen häufig, Optionen anzugeben, die die Funktionsweise des Shortcodes anpassen.

Heute werden wir speziell den [gallery] Shortcode durchgehen, aber Sie können auch unsere anderen Intro-Beiträge zur Verwendung von Shortcodes in WordPress nachlesen:

Grundlegende Verwendung

Um mit dem Shortcode [gallery] zu beginnen, gehen Sie zum Abschnitt "Beiträge" und fügen Sie einen neuen Beitrag hinzu, den wir "Gallery Post" nennen. Platzieren Sie im Editorbereich den Shortcode [gallery] (entweder in der Visual/HTML-Ansicht). Danach klicken Sie auf Veröffentlichen/Aktualisieren.

Die Seite wird aktualisiert. Wenn Sie den visuellen Editor aufrufen, wird ein gestricheltes Feld mit einem Fotosymbol in der Mitte angezeigt. Wenn Sie auf das Feld klicken, sehen Sie in der oberen linken Ecke ein weiteres Bildsymbol. Klicken Sie auf dieses Symbol und ein Dialogfenster wird angezeigt. In diesem Dialogfenster können Sie Bilder hochladen und an den Beitrag anhängen. Ziehen Sie Ihre Bilder per Drag & Drop in den Ablagebereich oder drücken Sie Dateien auswählen und wählen Sie die Fotos aus, die Sie hochladen möchten.

Nachdem Sie die Bilder hochgeladen haben, möchten Sie auf "Alle Änderungen speichern" klicken. Dadurch gelangen Sie zur Registerkarte "Gallery" im selben Dialogfenster. Sie sehen Miniaturansichten aller Bilder, die Sie gerade hochgeladen haben, sowie einige Einstellungen. Schauen Sie sich um und ändern Sie einige Einstellungen, um die verschiedenen Optionen anzuzeigen. Stellen Sie nun die Galeriespalten auf 5 ein und klicken Sie auf "Update gallery settings".

Fahren Sie nun fort und klicken Sie auf View Post. Sie sehen den Beitrag mit einem Galerie-Raster von Bildern mit 5 Spalten. Wenn Sie auf ein Bild klicken, gelangen Sie zum Bildanhang.

Galerie-Shortcode-Ausgabe

Nachdem wir gesehen haben, dass der Shortcode [gallery] funktioniert, schauen wir uns den Quellcode an und sehen, was ausgegeben wird.

<style type='text/css'>
 #gallery-1 {
      margin: auto;
 }
 #gallery-1 .gallery-item {
      float: left;
      margin-top: 10px;
      text-align: center;
      width: 20%;
 }
 #gallery-1 img {
      border: 2px solid #CFCFCF;
 }
 #gallery-1 .gallery-caption {
      margin-left: 0;
  }
</style>

Was Sie oben sehen, ist der erste Teil des Codes, den WordPress automatisch pro [gallery] Shortcode generiert. Das CSS wird automatisch für jeden verwendeten [gallery] Shortcode ausgegeben. Es gibt Standardelemente und -klassen für jede Galerie und jedes Element, das ein Bild umschließt. Wenn Sie eine zweite Galerie auf der Seite hätten, würde sie #gallery-2 ausgeben.

Unten finden Sie den Rest des Codes, den von der Galerie generierten HTML-Code. Sie können sehen, dass die Galerie in ein div eingeschlossen ist und jedes Bild und jede Beschriftung auch in Elemente eingeschlossen ist.

<div id='gallery-1' class='gallery galleryid-1 gallery-columns-5 gallery-size-thumbnail'>
	<dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='https://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-1/' title='Pretty Text'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-1-150x150.jpg" class="attachment-thumbnail" alt="Pretty Text" title="Pretty Text" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Pretty Text
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-2/' title='Berries!'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-2-150x150.jpg" class="attachment-thumbnail" alt="Berries!" title="Berries!" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Berries!
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-3/' title='Quad in River'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-3-150x150.jpg" class="attachment-thumbnail" alt="Quad in River" title="Quad in River" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Quad in River
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-4/' title='wp-tut-4'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-4-150x150.jpg" class="attachment-thumbnail" alt="Store" title="wp-tut-4" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Store
				</dd>
		</dl>
			<br style='clear: both;' />
		</div>

Shortcode-Optionen

Nachdem wir einen Einblick in die grundlegende Verwendung des Galerie-Shortcodes erhalten haben, sehen wir uns die verschiedenen Optionen zum Anpassen der [gallery] -Ausgabe an. Die [gallery] Shortcode-Optionen umfassen columns, id, size, link, include, exclude, orderby, order, itemtag, icontag und captiontag.

columns

[gallery columns="2"]

Wenn Sie im Post-Editor zur Registerkarte HTML zurückkehren, wird der Shortcode [gallery column="5"] angezeigt. Wenn wir die Spalteneinstellungen in der Galerie-Oberfläche angepasst haben, wurden diese Einstellungen an den Shortcode übergeben. Anstatt die grafische Oberfläche zu verwenden, können Sie die Einstellungen jetzt manuell über den Shortcode festlegen. Ändern wir die colums=”5” in colums=”2”. Gehen Sie jetzt zu View Post - Sie können sehen, dass es ein Raster der Galeriebilder gibt, und anstelle von 5 Bildern pro Spalte gibt es 2. Sehen wir uns die Quelle im "Gallery Post" noch einmal an und sehen, was WordPress ausgibt. Kurz vor der Galerie in der Quelle können wir das CSS sehen - bemerken Sie den Unterschied zur vorherigen CSS-Ausgabe? Dieses CSS wird automatisch vom Shortcode [gallery] generiert. Wenn Sie die Spalten ändern, werden Sie feststellen, wie sich das CSS ändert.

#gallery-1 .gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 50%;
}

Das CSS passt die Breite im Wesentlichen auf 100 / $columns an, wobei $columns entweder standardmäßig 3 oder eine im Shortcode angegebene Zahl sind.

id

[gallery id="4"]

Standardmäßig ruft der Galerie-Shortcode die Galerie ab, die der aktuellen Beitrags-ID zugeordnet ist. Wenn Sie jedoch eine ID angeben, können Sie Bilder aus einem anderen Beitrag abrufen. Um dies zu testen, fügen Sie einen neuen Beitrag hinzu und nennen ihn Andere Seite. Laden Sie verschiedene Bilder auf die Seite "Andere" hoch und klicken Sie auf "Veröffentlichen". Suchen Sie dann in der URL-Adresse des Browsers nach post=.

Merken Sie sich diese Nummer und kehren Sie dann zum Galerie-Shortcode-Beitrag zurück und fügen Sie den Galerie-Shortcode [gallery id="99"] hinzu (verwenden Sie anstelle von 99 die Nummern-ID des anderen Beitrags). Aktualisieren Sie den Gallery Shortcode-Beitrag und gehen Sie dann zu View Post. Beachten Sie, dass es jetzt zwei Galerien gibt, eine mit Bildern aus dem Beitrag "Gallery Shortcode" und die anderen Bilder aus der "Other Page". Sie können auch die Optionen für den Shortcode anpassen, Spalten ändern, Reihenfolge usw.

size

[gallery size="large"]

Die Standardgröße für die Galeriebilder ist Miniaturansicht. Weitere Optionen sind "thumbnail", "medium", "large" und "full". "thumbnail", "medium", "large" werden unter WordPress-Einstellungen > Medien angegeben. Volle Größe ist einfach die volle Größe des Bildes. Wenn wir das Settign in size="large" ändern, gibt WordPress das Bild aus und schneidet/skaliert es auf die zugehörigen Abmessungen. Die Standardgröße für WordPress ist "Max Width 1024" und "Max Height 1024", sodass Bilder skaliert und zugeschnitten werden, um dieser Größe zu entsprechen. (Randnotiz: Bilder können in WordPress nach Ihren Wünschen angepasst werden.)

*Randnotiz: Ihre Bilder werden verzerrt, wenn sie viel größer als die angegebene Größe sind.

orderby

[gallery orderby="menu_order"]

Standardmäßig sind die Bilder nach 'menu_order' sortiert (was ich sehr empfehlen kann). Andere Optionen sind 'ID', 'title' - Reihenfolge nach Titel, 'date' - Bild nach Datum hochladen Bild wurde hochgeladen, 'modified' - Bild nach Datum des letzten Datums wurde aktualisiert oder geändert & 'RAND' - Artikel nach dem Zufallsprinzip bestellen.

order

[gallery order="ASC"]

Nachdem Sie 'orderby' eingestellt haben, können Sie 'ASC' oder 'DESC' einstellen (nicht verwenden, wenn 'orderby' nicht gesetzt oder set auf 'menu_order' gesetzt ist). Wenn Sie beispielsweise möchten, dass die Bilder alphabetisch rückwärts (Z-A) nach Bildtitel aufgelistet werden, stellen Sie orderby="title" sicher und geben Sie dann order="DESC" an (Standard ist ASC). [gallery orderby="title" order="DESC"]

link

[gallery link="file"]

Standardmäßig zeigt die Galerie jeden Link zur Anhangsseite jedes Bildes an. Mit anderen Worten, jedes Bild geht im Wesentlichen zu einem einzelnen Beitrag mit dem Bild. Wenn Sie einen Link zur Quelle des Bildes (my-image-name.jpg) erstellen möchten, können Sie [gallery link="file"] übergeben.

include

[gallery include="23,39,45"]

Manchmal möchten Sie möglicherweise nur sehr spezifische Bilder einfügen. Sie können dies tun, indem Sie die Option include verwenden, [gallery include="23,39,45"] (23,39,45 sind ein Beispiel, verwenden Sie IDs, die mit Ihren Bildern übereinstimmen). Sie übergeben die ID jedes Bildes, das Sie verwenden wollen zugeordnet werden. Um die IDs der Bilder zu finden, gehen Sie zu Medien > Bibliothek und klicken Sie dann auf jedes der gewünschten Bilder.

Suchen Sie in der URL-Leiste des Browsers nach wp-admin/media.php?attachment_id= und notieren Sie diese Nummer im Galerie-Shortcode in dem oben gezeigten Format.

exclude

[gallery exclude="21,32,43"]

Diese Option ist ziemlich genau das, was es klingt. Wenn Sie den Anweisungen zum include folgen, finden Sie die IDs der Bilder, die Sie NICHT möchten, in der Galerie. Nachdem Sie die Bilder gefunden haben, die Sie nicht aufnehmen möchten (suchen Sie nur nach Bildern, die nicht an den Beitrag angehängt werden sollen) [gallery exclude="21,32,43"]. Bitte beachten Sie, wenn Sie einschließen und ausschließen, wird das Internet kaputt gehen! Okay, nicht wirklich, aber es wird nicht funktionieren! Das Ausschließen wird ignoriert und nur das Einschließen verwendet.

itemtag, icontag, captiontag

[gallery itemtag="section" icontag="div" captiontag="figure"]

Diese Optionen können tatsächlich die HTML-Elemente ändern, die WordPress mit dem Galerie-Shortcode ausgibt. Die Standardoptions-Tags lauten wie folgt: itemtag="dl", icontag="dt", captiontag="dd". Im Wesentlichen lautet der Standard-Galerie-Shortcode für diese Optionen [gallery itemtag="dl" icontag="dt" captiontag="dd"]. Angenommen, wir wollten die HTML-Tags ändern, wir könnten leicht das Element übergeben, das wir bevorzugen, also könnten wir so etwas wie [gallery itemtag="section" icontag="div" captiontag="figure"] verwenden. Probieren Sie diese Optionen aus und Sie können den Unterschied in der Ausgabe sehen.

<div id='gallery-1' class='gallery galleryid-1 gallery-columns-2 gallery-size-thumbnail'><section class='gallery-item'>
		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-1/' title='Pretty Text'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-1-150x150.jpg" class="attachment-thumbnail" alt="Pretty Text" title="Pretty Text" /></a>

		</div>
			<figure class='wp-caption-text gallery-caption'>
			Pretty Text
			</figure></section><section class='gallery-item'>
		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-2/' title='Berries!'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-2-150x150.jpg" class="attachment-thumbnail" alt="Berries!" title="Berries!" /></a>
		</div>
			<figure class='wp-caption-text gallery-caption'>
			Berries!
			</figure></section><br style="clear: both" /><section class='gallery-item'>

		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-3/' title='Quad in River'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-3-150x150.jpg" class="attachment-thumbnail" alt="Quad in River" title="Quad in River" /></a>
		</div>
			<figure class='wp-caption-text gallery-caption'>
			Quad in River
			</figure></section><section class='gallery-item'>
		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-4/' title='wp-tut-4'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-4-150x150.jpg" class="attachment-thumbnail" alt="Store" title="wp-tut-4" /></a>
		</div>

			<figure class='wp-caption-text gallery-caption'>
			Store
			</figure></section><br style="clear: both" />
		<br style='clear: both;' />
	</div>

Thematisierung der Galerie

Wenn Sie ein Thema erstellen oder anpassen, gibt es einige Primärklassen, auf die Sie achten möchten. Dies sind Klassen, die die Galerie jedes Mal im HTML ausgibt, wenn ein [gallery] Shortcode verwendet wird.

Galerie Wickeln

Der "Galerie Wickeln" umschließt jede Instanz des Shortcodes [gallery]. Das heißt, wenn Sie den Shortcode [gallery] dreimal verwenden, ist dieser Wickeln dreimal im Quellcode vorhanden. Jedes Mal, wenn die [gallery] in einem Beitrag verwendet wird, wird die Ausgabe-ID erhöht.

<div class="gallery galleryid-1 gallery-columns-3 gallery-size-large" id="gallery-1"><div>

.gallery - umschließt jede in einem Beitrag enthaltene Galerie
.galleryid-{$id} - erhöht sich, wenn die zweite [gallery] dann {$id} 2 wäre
.gallery-columns-{$columns} - ändert sich je nach Spaltenoption
.gallery-columns-{$size} - ändert sich je nach Größenoption

Andere Elemente

.gallery-item - umschließt jedes Galeriebild und jede Bildunterschrift
.gallery-icon - innerhalb von .gallery-item umschließt den Anker mit dem Bild (Datei oder Link) und dem Bild
.gallery-caption - Umschließt den Bildunterschriftstext innerhalb von .gallery-item

Verbesserung unserer Galerie CSS

Nachdem wir nun die Grundlagen des Shortcodes [gallery], die verschiedenen Optionen und die verfügbaren CSS/Klassen verstanden haben, wollen wir herausfinden, wie wir das bereits vorhandene CSS verbessern können. (Für diesen und den nächsten Abschnitt gehen wir davon aus, dass Sie die Grundlagen von CSS verstehen.) Im TwentyEleven-Thema sieht die Standardgalerie wie die Galerie aus den Screenshots in den vorherigen Abschnitten aus.

WordPress gibt bereits das grundlegende CSS für das Layout aus, aber wir können etwas mehr Stil hinzufügen, um der Galerie zusätzliche Pizza zu verleihen. Öffnen Sie in dem Thema, mit dem wir arbeiten (für TwentyEleven /wp-content/themes/twentyeleven/style.css oder andere Themen /wp-content/themes/*themename/style.css) die Datei style.css in einem Editor und fügen Sie dies hinzu Code bis zum Ende des Stylesheets.

.gallery .gallery-item{
	position:relative;
}

.gallery .gallery-caption{
	position:absolute;
	bottom:4px;
	text-align:center;
	width:100%;
}

.gallery .gallery-icon img{
	border-radius:2px;
	background:#eee;
	box-shadow:0px 0px 3px #333;
	padding:5px 5px 40px 5px;
	border:solid 1px #000;
}

Wenn wir die Klassen des Elements kennen, können wir auf die spezifischen Teile der Galerie abzielen. Mit diesem Styling können wir jedes der Bilder gezielt ansprechen und ihnen ein polaroidisches Aussehen verleihen

Überschreiben von Galerie-CSS

In einigen Fällen möchten Sie möglicherweise das vorhandene CSS für den Shortcode [gallery] überschreiben. Da wir die Elemente und das CSS kennen, das die [gallery] ausgibt, könnten wir, wenn wir wollten, das CSS leicht überschreiben - wir könnten dies tun, indem wir die CSS-Spezifität verwenden. Da es nur eine Ebene der Spezifität gibt und die einzige angegebene ID #gallery-1 ist (1 für die erste Galerie, und die Nummerierung für jede Galerie im Beitrag wird fortgesetzt), können Sie das CSS überschreiben, indem Sie einfach eine übergeordnete ID suchen (für TwentyEleven #content funktioniert) und geben Sie dann auch .gallery an, da es sich um eine Klasse handelt, die an jede Galerie angehängt ist.

#content .gallery {
	/* This style would override the default #gallery-1 styling */
	margin:0px;
	display:none;
}

Natürlich ist oben ein grundlegendes Beispiel für das Überschreiben des CSS, aber Sie verstehen das Wesentliche!

Abschluss

Der integrierte [gallery] Shortcode für WordPress ist sehr praktisch und bietet alle möglichen Optionen zum Einrichten einer benutzerdefinierten Galerie. Es ist nicht perfekt, wie wir zuvor auf einem Bildschirm gesehen haben, aber es funktioniert sehr gut. Bleiben Sie auf dem Laufenden und lernen Sie in den kommenden Wochen, wie Sie den Galerie-Shortcode mit Lightbox- und Slider-Optionen umrüsten können!