Drupal 7.x. Wie man Shortcodes nutzt

Von diesem Tutorial erfahren Sie, wie man Shortcodes in Drupal 7.x Vorlagen nutzt.

Drupal 7.x. Wie man Shortcodes nutzt

Shortcodes sind eigentlich Makros, die im Textinhalt auf der Website benutzt werden. Mit Hilfe von diesem Makros kann man den Text ändern und einen ausgewählten Teil durch das Theme-Engine formatieren. Die Shortcodes werden benutzt, um Dutzende von Codezeilen zum Durchführen von Aktionen nicht zu schreiben.

Um die Shortcodes nutzen zu können, überzeugen Sie sich, ob die Module Shortcode und TM Shortcodes aktiviert wurden.

Die Liste der verfügbaren Shortcodes können Sie im Bereich Text format (Full HTML) beim Erstellen eines Knotens sehen:

Lassen Sie uns die Shortcodes ausführlich anschauen:

1. [clear][/clear] fügt das HTML Element (div oder span) ein, das den Wert float für den festgelegten Teil des Textes löscht und dadurch Blockpositionen reguliert. Der Shortcode enthält die folgenden Attribute:

   • class – zusätzliche Klasse;

   • id – die ID des Elementes (id);

   • type – der Typ des Elementes: Block (div, d) oder Zeile (span, s).

   Sie können einfach [clear /] nutzen, um das Leerzeichen in den Text einzufügen. Es funktioniert in Analogie zu dem HTML-Tag <br />, der den Zeilenumbruch einfügt.

2. Mit Hilfe von [col][/col] kann der Inhalt in einigen Spalten dargestellt werden. Der Shortcode enthält die folgenden Attribute:

   • align – die Ausrichtung der Spalten: right – die Spalte wird auf der rechten Seite des Außenblockes angezeigt, center – die Spalte wird in der Mitte des Außenblockes angezeigt;

   • class – zusätzliche Klasse des Elementes;

   • clear – löscht schwebenden Blöcke: clear-both – beiderseitig, clear-left – nur links, clear-right – nur rechts;

   • last – für die letzte Spalte muss der Wert “1” sein;

   • width – Spaltenbreite: 1-2 – Hälfte, 1-3 – der dritte Teil, 2-3 – zwei Drittel, 1-4 – ein Viertel, 3-4 – ein Dreiviertel, 1-5 – ein Fünftel, 2-5 – zwei Fünftel, 3-5 – drei Fünftel, 4-5 – vier Fünftel, 1-6 – ein Sechstel oder 5-6 – fünf Sechstel des Außenblockes.

   Es ist empfohlen diesen Shortcodes innerhalb des Shortcodes [clear][/clear] zu nutzen.

   Zum Beispiel:

   [clear type="div"]
   	[col width="1-2"]Spalteninhalt[/col]
   	[col width="1-2"]Spalteninhalt[/col]
   	[col width="1-3"]Spalteninhalt[/col]
   	[col width="2-3"]Spalteninhalt[/col]
   	[col width="1-4"]Spalteninhalt[/col]
   	[col width="3-4"]Spalteninhalt[/col]
   	[col width="1-5"]Spalteninhalt[/col]
   	[col width="4-5"]Spalteninhalt[/col]
   	[col width="2-5"]Spalteninhalt[/col]
   	[col width="3-5"]Spalteninhalt[/col]
   	[col width="1-6"]Spalteninhalt[/col]
   	[col width="5-6" last="1"]Spalteninhalt[/col]
   [/clear]
   

   

3. [counter][/counter] stellt animierte Zähler dar. Der Shortcode enthält die folgenden Attribute:

   • class – zusätzliche Klasse;

   • number – eine ganze Zahl, die größer als Null ist;

   • timer – berechnet die Geschwindigkeit von 0 bis festgelegtes datum in Millisekunden.

   Der Inhalt des Shortcodes dient als Name.

   Zum Beispiel:

   [counter number="300" timer="30" class="custom-class1"]Zähler1[/counter]
   [counter number="600" timer="30" class="custom-class2"]Zähler2[/counter]
   [counter number="900" timer="30" class="custom-class3"]Zähler3[/counter]
   

   In diesem Shortcode haben wird Farben der Zahlen im Zähler geändert, indem wir die CSS Regel mit dem Attribut “Farbe” der zusätzlichen Klasse “custom-class” hinzufügen. Schauen Sie sich das Bildschirmfoto unten an:

   

4. [icon][/icon] stellt das Icon FontAwesome dar. Das Framework nutzt die Version FontAwesome 4.1.0. Der Shortcode enthält die folgenden Attribute:

   • class – die Klasse des Icons FontAwesome;

   • number – der Link (URL), wenn Sie den Link zum Icon hinzufügen möchten.

   Zum Beispiel:

   [icon class="fa-smile-o"]Lächeln Sie jeden Tag[/icon]
   [icon class="fa-star"]Greifen Sie nach den Sternen[/icon]
   [icon class="fa-coffee"]Kaffeepause[/icon]
   

   

   Die Liste der verfügbaren Icons können Sie auf dieser Seite finden.

5. [piegraph][/piegraph] stellt das Kreisdiagramm dar – der Fortschrittsbalken. Der Shortcode enthält die folgenden Attribute:

   • barcolor – die Farbe des Hauptbereiches;

   • class – zusätzliche Klasse des Elementes;

   • linewidth – Bereichsbreite, eine beliebige ganze Zahl;

   • percent – der Fortschrittsbalken in Prozent (0-100);

   • trackcolor – die Farbe des oberen Bereiches (der Fortschrittsbalken);

   • width – das Diameter vom Fortschrittsbalken, eine beliebige ganze Zahl.

   Der Inhalt des Shortcodes dient als Name.

   Zum Beispiel:

   [piegraph percent="30" width="200" barcolor="#D864D8" trackcolor="#cccccc" linewidth="3"]Kreisdiagramm 1[/piegraph]
   [piegraph percent="60" width="200" barcolor="#95E495" trackcolor="#cccccc" linewidth="3"]Kreisdiagramm 2[/piegraph]
   [piegraph percent="90" width="200" barcolor="#33CCCC" trackcolor="#cccccc" linewidth="3"]Kreisdiagramm 3[/piegraph]
   

   

6. [progressbar][/progressbar] stellt den Fortschrittsbalken dar. Der Shortcode enthält die folgenden Attribute:

   • class – zusätzliche Klasse des Elementes;

   • percent – der Fortschrittsbalken in Prozent (0-100).

   Zum Beispiel:

   [progressbar percent="30"]Fortschrittsbalken1[/progressbar]
   [progressbar percent="60"]Fortschrittsbalken2[/progressbar]
   [progressbar percent="90"]Fortschrittsbalken3[/progressbar]
   

   

7. [gmap][/gmap] fügt die Google Karte ein. Der Shortcode enthält die folgenden Attribute:

   • class – zusätzliche Klasse;

   • lat_coord – Breite;

   • lng_coord – Länge;

   • zoom_value – die Anfangszoomstufe der Karte. Nutzen Sie die Werte von 1 bis 20;

   • zoom_wheel – aktiviert das Scrollrad auf der Karte. Nutzen Sie die Werte “yes” oder “no”.

   Zum Beispiel:

   [gmap lat_coord="55.861263" lng_coord="-4.251604" zoom_value="15" zoom_wheel="no"][/gmap]
   

   

   Sie können dieses Tutorial nutzen, um die richtigen Koordinaten für Ihren Shortcode der Google Karte zu definieren: Drupal 7.x. Google Map configuration.

Mehrere Shortcodes (außer [gmap] und [icon]) enthält das Attribut “class”. Mit Hilfe von diesem Shortcode kann man benutzerdefinierte Stile über den CSS Code hinzufügen. Sie können auch diese Shortcodes kombinieren, um das gewünschte Seitenlayout zu erstellen.

Dieses Tutorial ist jetzt zu Ende. Sie können jetzt selbst die Shortcodes in Drupal 7.x Vorlagen nutzen.

Sie können auch das ausfuhrliche Video-Tutorial nutzen:

Drupal 7.x. Wie man Shortcodes nutzt