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, an die Sie möglicherweise noch nicht gedacht haben. In diesem Tutorial werden wir einen bestimmten WordPress-Shortcode, [Galerie] und die verschiedenen Verwendungsmöglichkeiten behandeln.
Einführung
WordPress hat kleine Codeausschnitte, genannt Kurzwahlnummern, das kann in Posts, Pages und Post Types verwendet werden. WordPress verfügt über viele Shortcodes, die mithilfe der hier beschriebenen Shortcode-API hinzugefügt werden können. Diese Shortcodes, die im Inhaltseditorbereich oder in einer Motivdatei abgelegt werden, sind mit Funktionen verbunden, die ausgeführt werden, wenn der Inhalt oder Beitrag geladen wird. WordPress-Shortcodes sind flexibel, sodass Sie häufig Optionen angeben können, um die Funktionsweise des Shortcodes anzupassen.
Heute werden wir den Shortcode der [gallery] genauer durchgehen, aber Sie können auch unsere anderen Intro-Posts zur Shortcode-Verwendung in WordPress nachlesen:
Erste Schritte mit WordPress Shortcodes
Kurztipp: Verwenden von Shortcodes in der Themenentwicklung
Schnelltipp: Verbessern von Shortcodes mit der Funktion has_shortcode ()
Verwenden von Shortcodes zur Beschleunigung des Postings bei beliebten Diensten
Grundlegende Verwendung
Um mit dem Shortcode für [gallery] zu beginnen, gehen Sie zum Abschnitt "Posts" und fügen Sie einen neuen Post hinzu, den wir "Gallery Post" nennen. Platzieren Sie im Editorbereich den Kurzcode [gallery] (in der Visual / HTML-Ansicht). Danach drücken Sie Publish / Update.
Die Seite wird aktualisiert. Wenn Sie in den Visual Editor wechseln, wird jetzt ein gestricheltes Feld mit einem Fotosymbol in der Mitte angezeigt. Wenn Sie auf das Feld klicken, wird oben links ein anderes Bildsymbol angezeigt. Klicken Sie auf dieses Symbol und ein Dialogfenster wird angezeigt. In diesem Dialogfeld können Sie Bilder hochladen und an den Beitrag anhängen. Ziehen Sie Ihre Bilder entweder 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, klicken Sie auf "Alle Änderungen speichern". Dadurch gelangen Sie zur Registerkarte "Galerie" in demselben Dialogfenster. Sie sehen Miniaturansichten aller Bilder, die Sie gerade hochgeladen haben, sowie einige Einstellungen. Schauen Sie sich um, ändern Sie einige Einstellungen, um die verschiedenen Optionen anzuzeigen. Passen Sie nun die Spalten der Galerie auf 5 an und drücken Sie "Galerie-Einstellungen aktualisieren"..
Nun gehen Sie vor und drücken Sie auf Beitrag anzeigen. Sie sehen den Beitrag mit einem Galerie-Raster von Bildern mit 5 Spalten. Wenn Sie auf ein Bild klicken, gelangen Sie zum Bildanhang.
Galerie-Kurzcode-Ausgabe
Nachdem wir nun gesehen haben, dass der [gallery] -Kürzel funktioniert, schauen wir uns den Quellcode an und sehen, was ausgegeben wird.
Was Sie oben sehen, ist der erste Teil des Codes, den WordPress automatisch nach [Galerie] Shortcode generiert. Das CSS wird automatisch für jeden verwendeten [Galerie] Shortcode ausgegeben. Es gibt Standardelemente und Klassen für jede Galerie und jedes Element, das ein Bild umgibt. Wenn Sie eine zweite Galerie auf der Seite hätten, würden Sie # gallery-2 ausgeben…
Unten ist der Rest des Codes, der von der Galerie generierte HTML-Code. Sie können sehen, dass die Galerie in eine verpackt ist div und jedes Bild und jede Bildunterschrift ist ebenfalls in Elementen eingeschlossen.
Hübscher Text
Beeren!
Quad im Fluss
Geschäft
Shortcode-Optionen
Nachdem wir nun einen Eindruck von der grundlegenden Verwendung des Kurzcodes für die Galerie erhalten haben, wollen wir uns nun die verschiedenen Optionen zur Anpassung der [Galerie] -Ausgabe ansehen. Die [gallery] Shortcode-Optionen umfassen Säulen, Ich würde, Größe, Verknüpfung, umfassen, ausschließen, Sortieren nach, Auftrag, itemtag, icontag, und captiontag.
Säulen
[Galerie Spalten = "2"]
Wenn Sie im Post-Editor zur Registerkarte "HTML" zurückkehren, sehen Sie den Kurzcode "[Galeriesäulen =" 5 "]. Beim Anpassen der Spalteneinstellungen in der Galerieoberfläche wurden diese Einstellungen an den Shortcode übergeben. Anstatt die grafische Oberfläche zu verwenden, geben Sie die Einstellungen nun manuell über den Shortcode an. Ändern wir die Spalten = "5" in Spalten = "2". Jetzt gehen Sie auf Beitrag anzeigen - Sie können sehen, dass es ein Raster der Galerie-Bilder gibt, und statt 5 Bilder pro Spalte gibt es 2. Lassen Sie uns die Quelle erneut im "Galerie-Beitrag" anzeigen und sehen, was WordPress ausgibt. Direkt vor der Galerie in der Quelle können wir das CSS sehen - den Unterschied zur vorherigen CSS-Ausgabe beachten? Dieses CSS wird automatisch durch den Shortcode [gallery] generiert. Wenn Sie die Spalten ändern, werden Sie feststellen, wie sich das CSS ändert.
Das CSS passt die Breite im Wesentlichen auf 100 / $ -Spalten an, wobei $ -Spalten entweder standardmäßig 3 sind oder eine im Shortcode angegebene Zahl .
Ich würde
[Galerie]
Standardmäßig ruft der Kurzcode der Galerie die Galerie ab, die der aktuellen Beitrags-ID zugeordnet ist. Wenn Sie jedoch eine ID angeben, können Sie Bilder aus einem anderen Beitrag ziehen. Um dies zu testen, können Sie einen neuen Beitrag hinzufügen und andere Seite nennen. Laden Sie einige andere Bilder auf die Other-Seite hoch und klicken Sie auf Veröffentlichen. Dann oben in der Browser-URL-Adresse nach post = suchen.
Erinnern Sie sich an diese Nummer und gehen Sie dann zum Gallery Shortcode-Beitrag zurück, und fügen Sie dann den Galerie-Shortcode [Galerie] hinzu (verwenden Sie die Nummern-ID des anderen Beitrags anstelle von 99). Aktualisieren Sie den Galerie-Kurzcode und gehen Sie auf Beitrag anzeigen. Beachten Sie, dass es jetzt zwei Galerien gibt, eine mit Bildern aus dem "Gallery Shortcode" -Posten und die anderen Bilder von der "Anderen Seite". Sie können auch die Optionen für den Kurzcode anpassen, Spalten ändern, Reihenfolge usw.
Größe
[gallery size = "large"]
Die Standardgröße für die Galerie-Bilder ist die Miniaturansicht. Andere Optionen umfassen "Miniatur", "Mittel", "Groß" und "Voll". "Miniaturansicht", "Mittel", "Große Größen werden unter WordPress-Einstellungen> Medien festgelegt. Die volle Größe ist einfach die volle Größe des Bildes. Wenn wir die Einstellung in Größe =" Groß "ändern, gibt WordPress das Bild aus und beschneidet / Skalieren Sie es auf die zugehörigen Abmessungen. Die Standardgröße für "groß" für WordPress ist "Max Width 1024 & Max Height 1024", sodass Bilder skaliert und auf diese Größe zugeschnitten werden wollen.)
* Anmerkung: Ihre Bilder werden verzerrt, wenn sie viel größer als die angegebene Größe sind.
Sortieren nach
[gallery orderby = "menu_order"]
Standardmäßig werden die Bilder nach 'menu_order' (was ich Ihnen sehr empfehlen sollte) sortiert. Zu den anderen Optionen gehören 'ID', 'title' - nach Titel geordnet. , 'Datum' - Sortiert nach dem Datum, zu dem das Bild hochgeladen wurde, 'Modifiziert' - Sortiert nach dem letzten Datum, an dem das Bild aktualisiert oder geändert wurde, und 'RAND' - Artikel werden zufällig sortiert.
Auftrag
[gallery order = "ASC"]
Nachdem Sie 'orderby' eingestellt haben, können Sie 'ASC' oder 'DESC' einstellen (nicht verwenden, wenn 'orderby' nicht eingestellt ist oder 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 sicher, dass orderby = "title" und dann auch order = "DESC" (Standardeinstellung ist ASC).. [gallery orderby = "title" order = "DESC"]
Verknüpfung
[Galerie Link = "Datei"]
Standardmäßig werden die Galerie-Bilder jeweils mit der Anhangsseite jedes Bildes verknüpft. Mit anderen Worten, jedes Bild geht im Wesentlichen an einen einzelnen Beitrag mit dem Bild. Wenn Sie einen Link zur Bildquelle (my-image-name.jpg) herstellen möchten, können Sie diese weitergeben [Galerie Link = "Datei"].
umfassen
[gallery include = "23,39,45"]
Manchmal möchten Sie möglicherweise nur sehr bestimmte Bilder einfügen. Dies können Sie mit der Include-Option tun, [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 zuordnen möchten. Um die IDs der Bilder zu finden, gehen Sie zu Medien> Bibliothek und klicken Sie dann auf die gewünschten Bilder.
Suchen Sie in der Browser-URL-Leiste nach wp-admin / media.php? Attachment_id =, notieren Sie sich diese Nummer und verwenden Sie sie im Kurzcode der Galerie in dem oben angegebenen Format.
ausschließen
[gallery exclude = "21,32,43"]
Diese Option ist so ziemlich genau das, was sie klingt. Wenn Sie den Anweisungen für folgen umfassen, Finden Sie die IDs der Bilder, die Sie finden NICHT will in der Galerie. Nachdem Sie die Bilder gefunden haben, die nicht enthalten sein sollen (suchen Sie nur nach Bildern, die nicht an den Beitrag angehängt werden sollen). [gallery exclude = "21,32,43"]. Bitte beachten Sie, wenn Sie ein- und ausschließen, wird das Internet brechen! Okay nicht wirklich, aber es wird nicht funktionieren! Es wird das Ausschließen ignorieren und nur das Include verwenden.
Diese Optionen können tatsächlich die HTML-Elemente ändern, die WordPress mit dem Kurzcode für die Galerie ausgibt. Die Standardoptions-Tags lauten wie folgt: dl ", icontag =" dt ", captiontag =" dd ". Im Wesentlichen ist der Standard-Kurzcode für diese Optionen [gallery itemtag = "dl" icontag = "dt" captiontag = "dd"]. Angenommen, wir wollten die HTML-Tags ändern, wir könnten das Element, das wir bevorzugen würden, problemlos weitergeben, also könnten wir so etwas verwenden [gallery itemtag = "section" icontag = "div" captiontag = "figure"]. Probieren Sie diese Optionen aus und Sie können den Unterschied in der Ausgabe sehen.
Hübscher Text
Beeren!
Quad im Fluss
Geschäft
Gestaltung der Galerie
Wenn Sie ein Design erstellen oder anpassen, gibt es einige Hauptklassen, nach denen Sie Ausschau halten möchten. Hierbei handelt es sich um Klassen, die von der Galerie bei jeder Verwendung eines [galeries] shortcodes in HTML ausgegeben werden.
Galerie Wrap
Der "Gallery Wrap" umschließt jede Instanz des [gallery] -Kurzcodes. Das heißt, wenn Sie den Abkürzungscode [gallery] dreimal verwenden, ist dieser Umbruch dreimal im Quellcode vorhanden. Bei jeder Verwendung der [Galerie] in einem Beitrag wird die Ausgabe-ID erhöht.
.Galerie - umschließt jede in einem Beitrag enthaltene Galerie
.galleryid - $ id - Inkremente, wenn second [gallery], dann wäre $ id 2
.Galerie-Spalten - $ Spalten - ändert sich je nach Spaltenoption
.Galerie-Spalten - $ size - ändert sich je nach Größenoption
Andere Elemente
.Galerie-Eintrag - umschließt jedes Galeriebild und die Bildunterschrift
.Galerie-Symbol - Innen .Galerie-Eintrag, fügt den Anker in ein Bild (Datei oder Link) und ein Bild ein
.Galerie-Beschriftung - Innen .Galerie-Eintrag, umschreibt den Bildtext der Beschriftung
Verbesserung unserer Galerie CSS
Nun, da wir die Grundlagen des [gallery] shortcodes, der verschiedenen Optionen und der verfügbaren CSS-Klassen verstehen, 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-Design sieht die Standardgalerie wie in der Galerie aus den Screenshots in den vorherigen Abschnitten aus.
WordPress gibt bereits das grundlegende CSS für das Layout aus, aber wir können noch mehr Stil hinzufügen, um der Galerie zusätzlichen Schwung zu verleihen. In dem Thema, mit dem wir arbeiten (für TwentyEleven /wp-content/themes/twentyeleven/style.css oder anderen Themes /wp-content/themes/*themename/style.css), fügen Sie die style.css in einem Editor hinzu Code am Ende des Stylesheets.
Wenn wir die Klassen des Elements kennen, können wir die spezifischen Teile der Galerie ansprechen. Mit diesem Styling können wir jedes der Bilder anvisieren und ihnen einen Polaroid-Look verleihen
Galerie-CSS überschreiben
In einigen Fällen möchten Sie möglicherweise das vorhandene CSS für den Kurzcode [gallery] überschreiben. Da wir die Elemente und die CSS-Ausgabe der [gallery] kennen, können wir CSS leicht überschreiben, indem wir CSS-Spezifität verwenden. Da gibt es nur eine Ebene der Spezifität und die einzige angegebene ID ist # gallery-1 (1 für die erste Galerie und die Nummerierung wird für jede Galerie im Beitrag fortgesetzt) Sie können das CSS einfach überschreiben, indem Sie eine übergeordnete ID suchen (für TwentyEleven #content-Werke) und dann auch angeben .Galerie, da es eine Klasse ist, die jeder Galerie angehängt ist.
#content .gallery / * Dieser Stil würde den Standard-Stil von # gallery-1 überschreiben. * / margin: 0px; Anzeige: keine;
Offensichtlich oben ist ein grundlegendes Beispiel für das Überschreiben von CSS, aber Sie erhalten den Kernpunkt!
Fazit
Der eingebaute [galerie] shortcode für WordPress ist praktisch und bietet viele Optionen, um eine benutzerdefinierte Galerie einzurichten. Es ist nicht perfekt, wie wir früher auf einem Bildschirm gesehen haben, aber es funktioniert sehr gut. Bleiben Sie dran und erfahren Sie in den nächsten Wochen, wie Sie den Kurzcode der Galerie mit Lightbox- und Slider-Optionen umrüsten!
Share
Accentsconagua