Twitter @ItDoorlu

Effekte durch Shortcodes  – am Beispiel eines Joomla Templates

Als Beispiel für mögliche Effekte durch Shortcodes wird das Joomla Radon Template genommen.

Welche Effekte das sind, können Sie dem Inhaltsverzeichnis entnehmen. So haben Sie auf die Schnelle einen Überblick, welche Effekte hier besprochen werden. Dadurch können Sie auch entscheiden, ob darunter Effekte sind, die für Sie (eventuell) interessant sind.

Die hier angesprochenen Effekte durch Shortcodes stellen natürlich nur eine kleine Auswahl aller möglichen Effekte dar. Schließlich können andere Templates oder spezielle Plugins noch weitere Shortcodes und damit weitere Effekte anbieten.

Das Template Radon ist schließlich nicht das einzige Joomla Template, das Shortcodes anbietet. Aber irgendein Template muß man schließlich zu Demonstrationszwecken verwenden.

Auch In WordPress können Shortcodes zum Einsatz kommen.  So sorgt z. B. der Shortcode  dafür,

 

daß auf der Startseite von ItDoor ein Symbol für RSS Feed zu sehen ist.

Möglicher Leserkreis für Effekte durch Shortcodes

Wenn man mal von dem Spezialfall absieht, daß jemand das Template Radon benutzt, ist dieser Fachartikel für all diejenigen interessant, die ein Gefühl dafür bekommen wollen, welche Effekte beispielsweise mit der Hilfe von Shortcodes möglich sind.

Wer ohne Programmierkenntnisse eine Joomla Website betreiben möchte, für den können Shortcodes durchaus eine sinnvolle Alternative sein.

Die Shortcodes bei anderen Templates können einen anderen Code haben. Wenn Ihnen Ihr Template Shortcodes anbietet, werden Sie schnell feststellen, ob und in welcher Weise der Code dieser Shortcodes von den Codes der Shortcodes Ihres Templates abweicht.

Zudem können andere Templates mehr oder auch weniger Shortcodes anbieten. Wie unten aufgezeigt wird, bietet das Template Radon 11 verschiedene Arten von Shortcodes an.

Benutzen Sie ein Template, das keine Shortcodes anbietet, eröffnet sich mit diesem Fachartikel die Möglichkeit, daß Sie entscheiden können, ob Ihnen Shortcodes so wichtig sind, daß Sie das Template wechseln.

Letztendlich geht es in diesem Fachartikel auch um die Leserinnen und Leser, die sich mit dem Thema Joomla Shortcodes noch gar nicht beschäftig haben. Aber gerne mal etwas zu diesem Thema lesen möchten.

Vereinfacht ausgedrückt steckt hinter jedem Shortcode eine Funktion. Eine Art kleines Plugin, da durch einen kleinen Code seine (große) Wirkung entfaltet.

Die vom Template Radon angebotenen Shortcodes

Bei dem Template „Radon“ gibt es bereits nach der Installation einen Menüpunkt für Shortcode.

Berührt man mit der Maus den Menüpunkt „Shortcode“ sieht das dann so aus:

Verfahrensansatz

Bei den hier vorgestellten Shortcodes ist aus Gründen der Vereinfachung und Vergleichbarkeit immer der gleiche Ansatz gewählt worden.

Ich gebe den Shortcode in einen Artikel ein. Dieser Artikel wird mit einem Menü Item verbunden, das natürlich einem Menü zugeordnet ist. Dieses Menü wiederum hat ein Modul, damit definiert ist, auf welcher Position das Menu Item auf der Website erscheint.

Dieses kleine Kapitel wird vor die Besprechungen der einzelnen Shortcodes gesetzt, damit nicht bei bei jedem Shortcode der Verfahrensansatz wiederholt werden muß.

Für diejenigen, für die die Beschreibung der Vorgehensweise zu kurz ist, kann auf folgende Fachartikel verwiesen werden.

Joomla horizontales Menü bzw. horizontale Menüpunkte

Joomla Menüpunkte - weitere Menüpunkte einem Menü zuordnen

Joomla Menü Position zuweisen - verschiedene Positionen

Joomla Menü erstellen - Die einzelnen Schritte

Shortcode Accordion

Das ist der allgemeine Shortcode für  Accordion in diesem Template.

[accordion]
[accordion_item title=’ITEM_TITLE‘]ADD_CONTENT_HERE[/accordion_item]
[accordion_item title=’ITEM_TITLE‘]ADD_CONTENT_HERE[/accordion_item]
[accordion_item title=’ITEM_TITLE‘]ADD_CONTENT_HERE[/accordion_item]
[/accordion]

Einbau eines Accordions in die Website

In einen Artikel setze ich den Shortcode für mein Beispiel für Accordion.

Ich klicke auf den Menüpunkt für  meinen Artikel „Beispiel für Accordion“.

So sieht dann auf der Website das Accordion aus.

Je nachdem auf welches Kapitel man klickt, sieht man den Text zu diesem Kapitel. Das ist der Accordion Effekt.

Mit einem Accordion kann man also unter anderem einen Text in einem Artikel auf diese Art und Weise in Kapitel unterteilen

Shortcode Carousel

Das ist der allgemeine Shortcode für Carousel in diesem Template.

[carousel]

[carousel_item]add image here

Powerful templates framework to develop Joomla base website faster!

[/carousel_item]

[/carousel]

In einen Artikel setze ich diesen Shortcode für mein Beispiel für Carousel. Und zwar über <<Tools-Source Code>

<p>[carousel]

[carousel_item]<img style=“border: 0;“ src=“images/sampledata/parks/animals/342-KB.jpg“ alt=““ width=“550″ height=“550″ border=“0″ />

 

Bildunterschrift 1

[/carousel_item]

[carousel_item]<img style=“border: 0;“ src=“images/sampledata/parks/animals/Elefant-3.jpg“ alt=““ width=“550″ height=“550″ border=“0″ />

 

Bildunterschrift 2 

[/carousel_item]

[carousel_item]<img style=“border: 0;“ src=“images/sampledata/parks/animals/429-KB.jpg“ alt=““ width=“550″ height=“550″ border=“0″ />

 

Bildunterschrift 3

[/carousel_item]

[/carousel]</p>

 

Hinter [carousel_item] stehen die Angaben zum Bild.

Wie erhält den Pfad zu dem Bildern? Eine Möglichkeit ist den angezeigten Pfad beim Upload der Bilder zu benutzen.

In diesem Beispiel erhält man den Pfad <<sampledata/parks/animals/429-KB.jpg>> und setzt einfach davor <<images/>>.

Nach

 

Hier in diesem Beispiel werden die Slides 1bis 3 durchlaufen. Nach dem Slide 3 wird wieder bei Slide 1 begonnen. Das ist der Carousel Effekt.

Shortcode Tab

 

Das soll der allgemeine Shortcode für Tabs sein.

 

[tab]

[tab_item title=“ITEM_TITLE“]ADD_CONTENT_HERE[/tab_item ]

[tab_item title=“ITEM_TITLE“]ADD_CONTENT_HERE[/tab_item ]

[tab_item title=“ITEM_TITLE“]ADD_CONTENT_HERE[/tab_item ]

[/tab]

In Wirklichkeit sieht der Shortcode eher so aus.

<p>[row]</p>

<p>[col class=“span3″]</p>

<p>[tab id=“tab1″ class=“Test“ button=“nav-tabs“]

[tab_item title=“Tab1″]Text von Tab1.[/tab_item]

[tab_item title=“Tab2″]Text von Tab2.[/tab_item]

[tab_item title=“Tab3″]Text von Tab3.[/tab_item][/tab]</p>

<p>[/col]</p>

<p>[/row]</p>

Bekommen Sie das ohne Programmierkenntnisse analog hin?

So kann das dann auf der Joomla Website aussehen.

Je nachdem auf welchen Tab Sie klicken, erhalten Sie einen anderen Text.

Shortcode Icon

Es gibt es Shortcodes für 361 verschiedene Icons bei diesem Template.  Hier eine kleine Auswahl.

Zu Demonstrationszwecken verwende ich diesen Shortcode <<[icon name=“icon-glass“]>>

So sieht das dann in dem Artikel mit dem Shortcode für dieses Icon aus.

Auf der Joomla Website ergibt sich infolgedessen dieses Bild.

Shortcode Column

Dies ist der allgemeine Shortcode für Column.

[row id=“ROW_ID“ class=“ROW_CLASS“]

[col class=“span4″]ADD_CONTENT_HERE[/col]

[col class=“span4″]ADD_CONTENT_HERE[/col]

[col class=“span4″]ADD_CONTENT_HERE[/col]

[/row]

Der von mir erstellte Shortcode sieht so im Artikel (Tools-Source Code)

<p>[row class=“show-grid“]

 [col class=“span3″] Text Spalte 1.[/col]

[col class=“span3″] Text Spalte 2.[/col]

[col class=“span3″] Text Spalte 3.[/col]

[/row]</p>

Infolgedessen ergibt sich dann dieses Bild auf der Joomla Website.

Shortcode Gallery

Dies ist der Shortcode für Gallery laut diesem Template.

Ich habe daraus ein einfaches Beispiel gemacht.

So ist der Shortcode für das Beispiel:

Wie erhält den Pfad zu dem Bildern? Eine Möglichkeit ist den angezeigten Pfad beim Upload der Bilder zu benutzen.

In diesem Beispiel erhält man den Pfad <<sampledata/parks/animals/429-KB.jpg>> und setzt einfach davor <<images/>>.

Oder man geht im Bilderordner mit der rechten Maustaste auf ein Bild und wählt „Verknüpfung kopieren“ aus.

Von diesem Link nimmt man den Teil, der bei <</images>> beginnt.

Wer genauer wissen will, wie man Bilder hochlädt, kann das in dem Facharrtikel „Joomla Bilder hochladen – Bilderordner“ nachlesen.

Bei diesem Beispiel sieht man entweder alle Bilder auf einmal oder jedes Bild einzeln.

Wie der Name des Tabs schon sagt, sieht man bei „Show all“ alle 3 Bilder zusammen.

Klickt man auf den Button „Image“2 sieht man nur das zweite Bild.

Image2 muß ohne Leerzeichen geschrieben werden, sonst sieht man dieses einzelne Bild nicht. Diese Namensregel gilt ebenfalls für die anderen Einzelbilder.

Shortcode Video

Das ist die Grundstruktur des Shortcodes für ein Video.

[spvideo]          [/spvideo]

In diese Lücke setzen Sie den Link von Youtube. Wie gelangt man an diesen Link von Youtube?

Sie suche sich auf Youtube einen Song aus, der Ihnen gefällt oder zu Ihrer Joomla Website paßt.

Sie klicken mit der rechten Maustaste auf Video-URL kopieren.

In diesem Fall erhalten Sie diese Video-URL.

Diese Video-URL mußte ich als Bild einfügen. Denn sonst hätte ich direkt die Video-URL  gar nicht zeigen können, weil damit bereits die Integration des Youtube Videos bereits beendet war. Was bedeutet, daß ich auf der Website von ItDoor keinen Shortcode für das Einfügen einer Video-URL von Youtube benötige. Vielleicht geht es bei Ihrem Template/Theme auch ohne Shortcode für das wirksame Einfügen einer Video-URL von Youtube?

Wenn man einen Shortcode benötigt, dann sieht der fertige Shortcode im Artikel so aus.

[spvideo]https://youtu.be/6Fqozggi-44[/spvideo]

Anschließend speichern Sie diesen Artikel ab. Danach rufen Sie diesen Artikel mit dem Video Shortcode über einen Menüpunkt auf.

So könnte das dann auf der Joomla Website aussehen.

Falls es nicht funktioniert, dann schauen Sie bei „Tools –Source Code“ nach.

ob der Shortcode dort so enthalten ist.

<p>[spvideo]https://youtu.be/6Fqozggi-44[/spvideo]</p>

Ihre Website wird übrigens in seiner Performance durch das Youtube Video nicht belastet, da das Video nicht belastet, da das Video auf dem Server von Youtube abgespielt wird. im Fall von Youtube ist die Belastung einer fremden Website ausdrücklich erlaubt.

Shortcode Button

Diese Arten von Buttons werden bei diesem Template angeboten.

So sieht die Rohversion für die Shortcodes dieser Buttons aus.

[row] [col class=“span6″] [button type=“default“ size=““ link=“#“]Default[/button]

[button type=“primary“ size=““ link=“#“]Primary[/button]

[button type=“info“ size=““ link=“#“]Info[/button]

[button type=“success“ size=““ link=“#“]Success[/button]

[button type=“warning“ size=““ link=“#“]Warning[/button]

[button type=“danger“ size=““ link=“#“]danger[/button]

[button type=“inverse“ size=““ link=“#“]Inverse[/button]

[button type=“block btn-primary“ size=“large“ link=“#“]Block level button[/button] [/col] [col class=“span6″] [button type=“default“ size=“large“ link=“#“]Large button[/button]

[button type=“primary“ size=“large“ link=“#“]Large button[/button]

[button type=“default“ size=““ link=“#“]Default button[/button]

[button type=“primary“ size=““ link=“#“]Default button[/button]

[button type=“default“ size=“small“ link=“#“]Small button[/button]

[button type=“primary“ size=“small“ link=“#“]Small button[/button]

[button type=“default“ size=“mini“ link=“#“]Mini button[/button]

[button type=“primary“ size=“mini“ link=“#“]Mini button[/button] [/col] [/row]

Wie Sie wahrscheinlich entdeckt haben, fehlt es überall an einem Link, denn in allen Fällen steht hier <<“ link=“#“>>.

Mit der Folge, daß nichts passiert, wenn man auf einen dieser Buttons klickt.

Der Button „Warning“ als Beispiel

Ich nehme den Button „Warning“ als Beispiel. Damit habe ich eine Überleitung zum nächsten Kapitel „Shortcodes für Alerts“

Das ist der Shortcode für den Button „Warning“ ohne Link.

[button type=“warning“ size=““ link=“#“]Warning[/button]

 

Das ist der Shortcode für den Button „Warning“ mit Link.

[button type=“warning“ size=““ link=“index.php?option=com_content&view=article&id=39″]Warning[/button]

• Als Grundausrüstung reicht dieser Shortcode

In dem Artikel mit der ID 39 ist der Text und der Shortcode für den Warning Alert enhalten.

Das sieht in dem Artikel so aus:

[alert type=“alert“]

Überschrift für Warnung!

Bitte nicht abspeichern! [/alert] [alert type=“warning“ style=“width:85%“]

Wie finde ich den Link zu einem Artikel in einem Einzelfall?

Eine Möglichkeit ist es ein Menu Item anzulegen und dieses Menu Item mit dem Artikel zu verlinken.

Diesen Link habe ich dann in den Shortcode für den Button „Warning“ kopiert und dabei natürlich das Zeichen „#“ gelöscht (siehe oben). Da damit das Menu Item seinen Dienst getan hat, lösche ich es wieder.

Auf diese Art und Weise erhält man natürlich auch andere Links. Je nachdem mit was man das Menu Item verknüpft. Das muß schließlich nicht immer ein einzelner Artikel sein.

Für die etwas fortgeschrittenere Lösung ist Voraussetzung, daß Sie wissen, daß der Link zu Artikeln ohne Artikel ID immer so aussieht.

index.php?option=com_content&view=article&id=

Folglich brauchen Sie dann nur noch die ID des Artikels.

Diese finden Sie rechts in der Artikelübersicht. Menüfolge: „Content-Articles“.

Wenn Sie jetzt hingehen würden und im Shortcode für den Button „Warning“ die ID 39 gegen die ID 40 austauschen würden, dann erhalten Sie bei einem Klick auf den Button „Warning“ statt dem Text für die Warnung den Text für Error.

Effekt des Buttons „Warning“ auf der Joomla Website

Aber wir wollen natürlich bei dem Button „Warnung“ den Warnungstext erhalten.

Daher wird hier der Shortcodeum die ID 39 ergänzt.

[button type=“warning“ size=““ link=“index.php?option=com_content&view=article&id=39″]Warning[/button]

Nach dem Klick auf den Button „Warning“ kann das dann so auf der Joomla Website so aussehen.

Zugegeben, das Beispiel mit Button „Warning“ ist nicht optimal. Schließlich soll eine Warnung in vorher definierten Fällen automatisch kommen und nicht erst dann, wenn man einen Button drückt.

Aber die Wirkungsweise der Shortcodes für Buttons wurde erklärt. Zudem soll hier nur eine Übersicht über mögliche Effekte durch Shortcodes gegeben werden. Ferner soll gezeigt werden, wie weit man als Noncoder bei Shortcodes kommen kann. Trotz dieser Einschränkungen wäre  ich hier in einem Word Dokument an dieser Stelle immerhin schon auf Seite 21.

Obwohl ich oben schon die allgemeine Vorgehensweise erwähnt habe, möchte ich an dieser Stelle nochmal auf Folgendes hinweisen.

Der Shortcode für den Warning Button ist in einem Artikel vorhanden, der mit einem Menu Item verknüpft ist. Dieses Menu Item ist wiederum einem Menü zugeordnet, das einem Modul zugewiesen ist, damit das Menu Item eine Position auf der Website hat.

Shortcodes für Alerts

Zu diesem Punkt äußere ich mich nur ungern. Schließlich sind Alerts mit einem Ereignis zu koppeln. Wann in welchen Fällen z. B. soll es eine Warnung geben und wann in welchen Fällen soll z. B. ein Error erzeugt werden, der alle weiteren Handlungen abblockt. Das ist bei diesem Template nicht unmittelbar erkennbar.

Dennoch hier 4 Beispiele für Shortcodes ohne Ereigniskoppelung.

Beispiel für einen Shortcode Alert Warning.

[alert type=“alert“]

Überschrift für Warnung!

Bitte nicht abspeichern! [/alert] [alert type=“warning“ style=“width:85%“]

Das ist ein Beispiel für einen Shortcode Alert Error.

[alert type=“alert“]

Überschrift für Error!

Stop! Das ist nicht möglich! [/alert] [alert type=“error“ style=“width:99%“]

Das sieht von der Struktur aus, wie der Alert für Warnungen.

Hier ist ein Beispiel für einen Shortcode Alert Success.

[alert type=“alert“]

Überschrift für Success

Gut gemacht![/alert] [alert type=“success“ style=“width:65%“]

Für einen Alert Information kann der Shortcode so aussehen.

[alert type=“alert“]

Überschrift für Informationsmeldung

Dies ist eine Information[/alert] [alert type=“info“ style=“width:50%“]

Shortcode Testimonial

In Anlehnung an  Wikipedia wird ein Testimonial dafür benutzt, daß eine Person, die der Zielgruppe meist bekannt ist, auf ein Produkt, eine Dienstleistung, eine Idee oder Institution hinweist, um damit die Glaubwürdigkeit der Werbebotschaft zu erhöhen.

Dies ist ein Beispiel für den Shortcode für Testimonials.

[testimonial name=“Tom junior“ designation=“Programmierer“]Text von Testimonial. [/testimonial]

So könnte das dann auf der Joomla Website aussehen.

Die Überschrift ist der Titel des Artikels.

In diesem Shortcode darf nicht mittendrin  ein Absatz (<p> </p> ) enthalten sein. Es darf also nicht mittendrin in diesem Zeichensatz die Eingabe/Return/Enter-Taste gedrückt werden.

Shortcode Map

In dem von diesem Template angebotenen Artikel „Map“ steht dieser Shortcode.

[spmap lat=“23.743193″ lng=“90.388281″ zoom=“8″ maptype=“ROADMAP“]

So sieht das dann auf der Joomla Website aus.

Allerdings ist diese Karte gefühlt nur für eine Zehntelsekunde zu sehen. Danach verschwindet die Karte und es gibt stattdessen folgende Meldung:

 

Hoppla! Ein Fehler ist aufgetreten.

Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details dazu entnimmst du der JavaScript-Konsole.

In der Javascript Konsole stehen dann in der Tat einige Fehlermeldungen. Es ist aber nicht meine Aufgabe hier etwas zu reparieren. Zudem will ich nur einen Überblick über mögliche Effekte durch Shortcodes geben.

Fazit:

Shortcodes können eine schöne Sache sein, um Effekte auf der Website zu erzeugen. Einige Shortcodes sind leicht zu verstehen und daher auch einfach an die individuellen Bedürfnisse anzupassen.

Andere Shortcodes dagegen wie der Shortcode für „Map“ sind für Ungeübte  ohne entsprechende Dokumentation kaum anzupassen. Welche deutschsprachige Website will schließlich auf der Map „Bangladesch“ zeigen?

Ganz davon abgesehen, daß das Beispiel des Templates nicht richtig funktioniert.

Auch wenn hier ganz klar einige Grenzen aufgezeigt worden sind,  finde ich dennoch, daß man mit Shortcodes als Noncoder relativ weit kommen kann.  Insbesondere dann, wenn es noch eine ordentliche Dokumentation dazu gibt.

Das war es dann zum Thema Effekte durch Shortcodes – am Beispiel eines Joomla Templates.

Liste Fachartikel zum Thema Joomla von ItDoor

Andere Themenblöcke bei ItDoor

Software für Aktien und andere Wertpapiere

IT Wörterbücher von ItDoor

zu den Fachartikeln zum Thema Word von ItDoor für eilige Leser

zur Startseite von ItDoor