Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

JoomlaSchnipsel

Dies ist ein Tutorial, dass ein Basiswissen liefern soll (und meines auffrischen), wie alles so funktioniert, ungefähr, oder doch nicht und warum eigentlich dann doch irgendwie... Es beschäftigt sich nicht mit CSS, HTML, Modulpositionen etc. im Detail. Es geht um den Template-HEAD (nicht die Header-Position für einen Slider ;-) ). Vieles beruht auf "mach mal und probier dann selbst".

Anlass für dieses Tutorial, war eine der vielen Anfragen in einem Joomla-Portal, wo ein Anfänger mithilfe eines relativ untauglichen Video-Tutorials, das aber trotzdem ein paar Hundert Daumen hatte, versuchte, sich in die Joomla3-Templateentwicklung einzuarbeiten und das mit Bootstrap 3 (so sah das Tutorial das vor), während Joomla noch mit Bootstrap 2 unterwegs ist. Der Hinweis, sich mal mit dem joomlaeigenen Protostar-Template zu beschäftigen und erst mal BS 3 zu vergessen, wurde in etwa so beantwortet, dass das Protostar zu kompliziert sei.

Problem des Fragenden war schlicht, dass seine händisch eingefügten SCRIPT- und LINK-Tags nicht funktionierten wie erwartet, auch bei seinem vollkommen reduzierten Template nicht, weil Joomla zusätzlich Kram in den HEAD-Tag packt, womit der/die TE wohl nicht gerechnet hatte, das aber irgendwie auch gar nicht sah .

In diesem 1. Teil versuche ich klar zu machen, was in so einem Joomla3-Template-HEAD eigentlich passiert und warum so viel unerwartet. Wieso da Sachen drin stehen, die der Templateersteller gar nicht "angefordert" hat und die deshalb Konflikte machen könnten.

Wenn es weitere Teile geben sollte, mache ich wohl weiter mit Overrides für den HEAD.

Vorbereitungen

Installiere ein Joomla 3.4.1

https://github.com/joomla/joomla-cms/releases ist eine verlässliche Quelle. Nimm das Paket Joomla_3.4.1_Stable-Full_Package.zip.

Selbstverständlich kannst du auch eine neuere Version versuchen. Das Tutorial geht aber von 3.4.1 aus, was z.B. den Override unten anbelangt. Kann man nicht wissen, was in Joomla zwischenzeitlich so passiert ist und uns stören könnte...

Seit Joomla 3.7 hat sich etwas bei der Verwendung der unten beschriebenen JHtml-Methoden script und stylesheet geändert. Beachte hierzu die blauen Info-Einschübe. Beachte, dass die 3.7-Varianten nicht rückwärtskompatibel sind, also in Versionen kleiner 3.7 NICHT funktionieren.

Bei der Installation (!)
  • nur Pflichtfelder füllen, also die mit Sternchen,
  • keine Demodaten mitinstallieren.
Nach der Installation deutsche Sprache installieren und als Standard festlegen

Deutsche Sprache nach Joomla-Installation nachinstallieren und als Standardsprache festlegen

Templatekopie anlegen

Template-Editor im Backend finden

Du kannst die Dateien natürlich auch mit eigenen Werkzeugen bearbeiten, aber für dieses Tutorial ist der Editor im Joomla-Backend ganz praktisch.

Erweiterungen > Templates > Klicke in Spalte Template(!), nicht Spalte Stil, auf den Templatenamen Protostartest.

Hinweis zu Pfaden

In den Code-Beispielen unten sieht man häufig ein /joomla34/, was bei dir wahrscheinlich anders lautet, wenn du wie ich eine lokale Joomla-Installation mit XAMPP (1.8.1 empfohlene Version derzeit) verwendest oder gar nicht da ist. Denks dir weg...

Template-Grundgerüst

Jetzt machen wir unser neues Template Protostartest gleich kaputt. Wir reduzieren es auf ein minimales Grundgerüst.

templates-anpassen.jpg
templates-anpassen.jpg

Öffne die /templates/protostartest/index.php und reduziere sie wie folgt. Fast alles raus. Dann speichern.

<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="<?php echo $this->language; ?>"
      lang="<?php echo $this->language; ?>"
      dir="<?php echo $this->direction; ?>">
<head>

</head>
<body>

</body>
</html>

Gehe ins Frontend und rufe deine gänzlich weiße Seite auf. Zeige dir den HTML-Quelltext der Seite an, z.B. durch Rechtsklick auf die Seite und

seitenquelltext-anzeigen2.jpg
seitenquelltext-anzeigen2.jpg

Wir sehen, dass Joomla bereits einige Arbeit erledigt hat, bspw. die aktuelle Seitensprache eingesetzt hat. Und auch die passende Schreibrichtung ltr (left to right).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="de-de"
      lang="de-de"
      dir="ltr">
<head>
</head>
<body>
</body>
</html>

Wenn man unter Erweiterungen > Sprachen > Installiert-Site die Standardsprache auf Englisch umstellt

englisch-standardsprache.jpg
englisch-standardsprache.jpg

sieht man im Quelltext nach neu laden den Unterschied

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en-gb"
      lang="en-gb"
      dir="ltr">
<head>
</head>
<body>
</body>
</html>

Bei mehrsprachigen Seiten (multilangual) schon mal praktisch, wo das alles automatisch passiert, je nachdem in welcher Sprache die aktuelle Seite ist.

HEAD-Daten von Joomla einsetzen lassen

Damit sind Zeilen zwischen den Tags <head> und </head> gemeint. Wir ergänzen unser Grundgerüst um eine einzelne Zeile:

<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="<?php echo $this->language; ?>"
      lang="<?php echo $this->language; ?>"
      dir="<?php echo $this->direction; ?>">
<head>
  <jdoc:include type="head" />
</head>
<body>
</body>
</html>

Dieses <jdoc:include type="xyz" /> ist ein typisches Joomlading in Templates. Man findet es in einem "normalen" Joomla-Template an diversen Stellen. Uns reicht im Moment das Ding mit dem type="head", der nebebei erwähnt, in einem Template nur 1x vorkommen darf im Unterschied zu anderen Typen.

Wir werfen wieder einen Blick in unseren neuen Quelltext im Frontend:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="de-de"
      lang="de-de"
      dir="ltr">
<head>
    <base href="http://localhost/joomla34/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Home</title>
  <link href="http://localhost/joomla34/index.php" rel="canonical" />


  <link href="/joomla34/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/joomla34/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/joomla34/templates/protostartest/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <script src="/joomla34/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/joomla34/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/joomla34/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/joomla34/media/system/js/caption.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery(window).on('load',  function() {
 new JCaption('img.caption');
});
  </script>
</head>
<body>
</body>
</html>

Die ersten paar Zeilen im HEAD sind OK, sag ich mal (ich habe sie mit ein paar Leerzeilen abgesetzt), ein BASE-Tag, ein paar META-Tags, ein TITLE-Tag, ein Canonical-LINK (der in aktuelleren Joomla-Versionen nicht immer auftaucht), etwas weiter unten im Wust ein favicon.ico. So was gehört in eine Webseite, mal mehr mal weniger.

Aber dann: Was soll das? Alles "zugemüllt" mit <link... und <script... - Kram, was diverse Javascript-Dateien und feed-Schmarrn einbindet, manchmal auch noch CSS-Dateien, obwohl unsere Seite nach wie vor weiß ist, keine Inhalte hat, die das brauchen könnten.

Tja, und da sind wir beim Thema. Nicht unser Template hat dieses Zeugs angefordert (hätte es natürlich auch können, sehen wir später), sondern irgendeine Erweiterung oder mehrere, die diese Dateien benötigen, haben Zeilen in ihrem PHP-Code sonst wo, die den HEAD vorab befüllen, den Joomla im Template dann via <jdoc:include type="head" /> ausgibt.

Erweiterung? Wo denn? Hab doch gar nicht...

Wenn Du im Menü Menüs nachsiehst, stellst du fest, obwohl wir ein Joomla ohne Demodaten installiert haben, dass es dennoch 1 Startseiteneintrag gibt, vom Typ Hauptbeiträge und der wird von der Komponente, der Erweiterung com_content (Inhalte) "abgewickelt". Das ist also unser Übeltäter. Irgendwo (das Problem!) in ihrem Code gibt die Befehle aus, den HEAD mit sonstwas zu befüllen.

main-menu-home.jpg
main-menu-home.jpg

Dieser Menüeintrag "erwartet" quasi, dass er auf der Startseite zur Anzeige kommen wird und damit er gut aussieht und richtig funktioniert, befüllt er den HEAD mit JavaScript, gelegentlich auch CSS, mal per Dateien, die eingebunden werdem, mal mit Inline-Scripten (siehe oben jQuery(window).on('load', function()... ) oder -Styles. Er, bzw. die Erweiterung dahinter, verlässt sich dabei nicht auf das Template, das diesen Kram vielleicht oder vielleicht auch nicht ebenfalls lädt.

Dass im Template eine entscheidende Zeile für die Anzeige des Komponenten-Contents fehlt, weiß weder der Menüeintrag noch Joomla zum Zeitpunkt, wo der HEAD gefüllt wird.

Also, Erweiterungen, Module, Komponenten, Plugins können am Template vorbei, HEAD-Daten einfügen, egal, ob man das nun als Template-Ersteller will oder nicht oder braucht oder sonstwas. Sch... Joomla!

Also mal raus mit dem Kram (zumindest bei unserer rudimentären Seite schaffen wir das)

Gehe in den oben gezeigten Home-Menüeintrag, dort in den Tabulator Integration und stelle Feedlink auf Verbergen.

Blick in den Seitenquelltext. Schon sind 2 Zeilen weniger, die beiden feed-Zeilen.

Gehe in den Template-Editor > Tabulator Overrides erstellen > Klicke com_content > dann auf featured (was Haupteinträge bedeutet und zu dem obigen Menüeintrag gehört). Der Override wird automatisch erstellt, in deinem Template-Ordner /html/.

Beachte, um Verwirrung zu vermeiden: Auch, wenn sich dieses Override jetzt im Templateordner befindet, ist das KEINE Templatedatei im eigentlichen Sinne. Sie gehört zur Erweiterung. Wenn wir Overridedateien bearbeiten, bearbeiten wir die Komponente sozusagen. Oder pauschaler, da ja nicht nur Komponenten-Overrides erstellt werden können, sondern bspw. auch für Module, Layouts, (wenige) Plugins: bearbeiten wir die Erweiterung, sozusagen.

Dann weiter in den Tabulator Editor > Öffne links den Ordner /html/, darin /com_content/featured/ und öffne die Datei default.php zum Bearbeiten im Editor.

Deaktiviere wie im Bild zu sehen 1 Zeile PHP-Code durch ein vorangestelltes Gatterzeichen (oder heißt es Rautezeichen?).

caption-deaktivieren.jpg
caption-deaktivieren.jpg

Speichern und Blick in den Seitenquelltext, den du neu geladen hast. Wow! Kleine Code-Aktion, große Wirkung:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="de-de"
      lang="de-de"
      dir="ltr">
<head>
    <base href="http://localhost/joomla34/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Home</title>
  <link href="http://localhost/joomla34/index.php" rel="canonical" />
  <link href="/joomla34/templates/protostartest/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

</head>
<body>
</body>
</html>

Dieses JHtml::_('behavior.caption'); ist nur eine mögliche Zeile von vielen ähnlichen in Joomla, die sowohl JQuery als auch weitere Dateien und Script-Schnipsel lädt. Mal mehr, mal weniger, um eine bestimmte Funktionalität auf der Seite verfügbar zu machen. Schicke (na ja, man kann streiten) MouseOver-Tooltips z.B.

Unseren Override lassen wir so wie er ist, also mit deaktivierter Zeile und können ihn verlassen.

Eine weitere Demo: Gehe nach Erweiterungen > Module > Neu > und lege ein Modul vom Typ Suchindex an, setze es auf Position Banner. Unter Menüzuweisung stelle Auf allen Seiten ein.

In der index.php des Templates fügen wir schnell mal eine Modulposition banner ein, indem wird eine entsprechende Zeile in den BODY einfügen. Wieder so ein jdoc:include type.

...
<body>
  <jdoc:include type="modules" name="banner" style="xhtml" />
</body>
...

Seite im Frontend neu laden und Blick in den Quelltext. Man sieht, dass dieses Modul auch Bootstrap-JavaScript geladen hat (bootstrap.min.js). Eben, weil es es braucht und sich nicht auf das Template verlassen will.

Deaktiviere das Modul wieder, und alles "ist wieder gut" im Seitenquelltext. Kein "Kram" mehr.

Die magische JHtml-Klasse

Nachdem uns jetzt keine Erweiterung mehr dazwischenpfuscht und nur noch das Template regiert, füge wie folgt die Zeile von oben in das Template ein, also die, die wir im Override deaktiviert hatten. In den PHP-Block vor der sogenannten DOCTYPE-Deklaration.

<?php
defined('_JEXEC') or die;

JHtml::_('behavior.caption');

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="<?php echo $this->language; ?>"
      lang="<?php echo $this->language; ?>"
      dir="<?php echo $this->direction; ?>">
<head>
  <jdoc:include type="head" />
</head>
<body>
  <jdoc:include type="modules" name="banner" style="xhtml" />
</body>
</html>

Die Wirkung ist die selbe. Auch im Template eingesetzt, holt sich diese Zeile, die eine bestimmte Funktionalität bereit stellt, ggf. seine CSS-Dateien, Java-Scriptdateien, Inline-Script...

Und was ist, wenn wir die Zeile sowohl im Template haben als auch in unserem Override von oben? Lädt dann Joomla alles doppelt? Probiere es aus und aktiviere die Zeile im obigen Haupteinträge-Override wieder, indem du das Gatterzeichen wieder entfernst und speicherst.

caption-aktivieren.jpg
caption-aktivieren.jpg

Blick in den Seitenquelltext sagt uns: Nein, Joomla lädt nichts doppelt.

Und das ist das "Geniale" an diesen Zeilen. Ich kann sie überall dort vorsorglich einsetzen, versehentlich sogar mehrfach, wo ich nicht sicher sein kann, dass Template oder irgendwelche anderen Erweiterungen sie bereits eingesetzt haben.

Setze nun das Gatterzeichen in den Haupteinträge-Override wieder ein, damit wir "im Template wieder unter uns sind".

Das geht sogar noch weiter. Wenn man sich den Seitenquelltext mal ansieht, lädt unsere Zeile JHtml::_('behavior.caption'); auch JQuery (jquery.min.js), eine ab Joomla 3 nicht mehr wegzudenkende JavaScript-Bibliothek.

Wenn man nur die JQuery-Bibliothek benötigt, also ohne dies caption.js, kann man das mit folgender, alleiniger Zeile erreichen

JHtml::_('jquery.framework');

Will man die Bootstrap-Bibliothek (ebenfalls ab Joomla 3 kaum mehr wegzudenken)

JHtml::_('bootstrap.framework');

Die lädt wiederum JQuery gleich mit, weil ohne macht Bootstrap kaum Sinn. Verwirrung (nur so lange, wie es einen noch verwirrt. Ist halt mal so...)

Spiel mal mit folgendem Gerüst herum und deaktiviere JHtml-Zeilen wechselweise, indem du jeweils das Gatterzeichen vor die Zeilen setzt oder nicht (und das Speichern der index.php nicht vergisst, wie ich eben). Du wirst feststellen, dass JQuery immer nur 1x geladen wird (3 <script...-Zeilen sind dafür nötig), obwohl mehrere der Zeilen für sich diese Bibliothek anfordern und eben ggf. weitere Dateien. Kannst auch die Zeilen mal verdoppeln, ob dann was doppelt geladen wird... Oder umsortieren.

<?php
defined('_JEXEC') or die;

JHtml::_('behavior.caption');
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
JHtml::_('bootstrap.loadCss');
JHtml::_('stylesheet', 'media/mediamanager.css', array(), true);
JHtml::_('behavior.framework', true);

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="<?php echo $this->language; ?>"
      lang="<?php echo $this->language; ?>"
      dir="<?php echo $this->direction; ?>">
<head>
  <jdoc:include type="head" />
</head>
<body>
  <jdoc:include type="modules" name="banner" style="xhtml" />
</body>
</html>

Seit Joomla 3.7. lautet die Zeile 8 so:

JHtml::_('stylesheet', 'media/mediamanager.css', array('relative' => true));

Kannst zusätzlich das Suchindex-Modul und/oder den Featured-Override wieder "scharf schalten". Vergiss danach für folgende Schritte das Deaktivieren nicht!

Es gibt keine Ladekonflikte. Sch... Joomla! Schlaues Joomla!

So, jetzt lass mal alle Zeilen auf einmal aktiv und wirf einen Blick in den Seitenquelltext:

...

<link rel="stylesheet" href="/joomla34/media/media/css/mediamanager.css" type="text/css" />
<link rel="stylesheet" href="/joomla34/media/jui/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/joomla34/media/jui/css/bootstrap-responsive.min.css" type="text/css" />
<link rel="stylesheet" href="/joomla34/media/jui/css/bootstrap-extended.css" type="text/css" />
<script src="/joomla34/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/joomla34/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/joomla34/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/joomla34/media/system/js/caption.js" type="text/javascript"></script>
<script src="/joomla34/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/joomla34/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/joomla34/media/system/js/core.js" type="text/javascript"></script>
<script src="/joomla34/media/system/js/mootools-more.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).on('load',  function() {
 new JCaption('img.caption');
});
</script>

...

Du stellst fest, dass Joomla sich auch um die richtige Reihenfolge kümmert. Sowohl Trennung CSS-Block, dann JS-Dateien-Block, dann erst Inline-Kram als auch "kluge" Sortieung, in den Blöcken selbst. Besonders wichtig ist das bei den JavaScript Dateien. Wenn Bootstrap (BS) von JQuery abhängt, wenn BS also JQuery "braucht", dann muss JQuery vor BS geladen werden.

Und auch dieses Mootools (immer weniger in Gebrauch in Joomla 3) MUSS nach JQuery geladen werden, nicht, weil Mootools das JQuery benötigt, sondern, weil die beiden Bibliotheken sich nur dann nicht "beißen", wenn die Reihenfolge befolgt wird. Die hebeln sich sonst gegenseitig aus...

Du siehst, arbeitet man joomlakonform, wird einem viel Forscherei abgenommen. Selbstverständlich kann man auch <sript>- und <link>-Zeugs zusätzlich "händisch" in sein Template einsetzen, aber es muss eben an der richtigen Stelle sein. Und wozu etwas einbinden, was Joomla eh schon dabei hat und simpel richtig im HEAD einsetzt. Der häufigste Fehler übrigens, nicht nur in Templates. Egal, nicht Thema jetzt.

Also, JavaScript-Dateien müssen meist in der richtigen Reihenfolge geladen werden, damit sie alle nebeneinander funktionieren können. Macht man hier was falsch, kann die ganze Seite kollabieren, weil sich solche JavaScript-Fehler evtl. fortpflanzen. Slider und Captcha und Dingsbums funktionieren nicht mehr, obwohl die gar nichts dafür können, sondern irgendein kleines Scroll-To-Top-Script, das unachtsam eingesetzt wurde.

Das selbe (bzw. ähnlich, aber längst nicht so dramatisch) gilt für die 3 Bootstrap-CSS-Dateien, die uns Joomla schon in korrekter Reihenfolge ausgibt.

Aber, wenn du mal die beiden Zeilen, die lediglich CSS-Dateien laden umsortierst, da ändert sich die Reihenfolge dann doch.

JHtml::_('stylesheet', 'media/mediamanager.css', array(), true);
JHtml::_('bootstrap.loadCss');

Seit Joomla 3.7. lauten die 2 Zeilen so:

JHtml::_('stylesheet', 'media/mediamanager.css', array('relative' => true));
JHtml::_('bootstrap.loadCss');

Also im Kopf behalten: Es gibt auch Situationen, in denen man sich durchaus Gedanken über die Reihenfolge der JHtml-Zeilen machen sollte/muss.

JHtml stylesheet (CSS) und script (JS)

2 JHtml-Zeilen stelle ich noch vor und, was man damit machen kann. Deaktiviere dafür die anderen Zeilen mit dem Gatterzeichen und füge dann dies ein:

JHtml::_('stylesheet', 'com_finder/indexer.css', array(), true);

Das array() muss uns mal nicht jucken. Gehört halt da hin, wenn man danach noch dieses true eingeben muss, was in diesem Fall unbedingt nötig ist!

Seit Joomla 3.7. lautet die Zeile wie folgt. Der Zweck des true ist damit etwas offensichtlicher und das "blöde" leere array() kann weg bleiben.

JHtml::_('stylesheet', 'com_finder/indexer.css', array('relative' => true));

Da steht als 2. Parameter (Argument) ein Pfad com_finder/indexer.css . Jetzt kannst du gerne mal suchen gehen, ob du die Datei indexer.css in deinem Joomla irgendwo findest in einem Ordner /com_finder/. Is mal nich. Aber im Seitenquelltext steht wundersamerweise ein Pfad mit einem einleitenden media/ und einem css/ dazwischen

media/com_finder/css/indexer.css

und tatsächlich, der existiert in meiner Joomla-Installation inklusive Datei. Das true macht also, dass Joomla im Ordner media/ sucht, und darin im Ordner com_finder/css . Wenn es darin die Datei gibt, alles gut, Datei einbinden. Wenn nicht, passiert nichts.

Probier ich also zum Vergleich mal diesen richtigen Pfad

JHtml::_('stylesheet', 'media/com_finder/css/indexer.css', array(), true);

Seit Joomla 3.7. lautet die Zeile wie folgt.

JHtml::_('stylesheet', 'media/com_finder/css/indexer.css', array('relative' => true));

Nix ist. Im Seitenquelltext wird nichts angezeigt.

Ändere jetzt das true in ein false und Juhuu, CSS-Datei-Einbindung ist wieder da, weil Joomla sich nicht einen Pfad zusammenbastelt wie zuvor, sondern direkt den eingegebenen Pfad prüft. Auch hier wäre es so, dass nichts angezeigt wird, wenn die eingeg. CSS-Datei nicht existiert. Kannst ja mal einen Tippfehler reinmachen (soll gar nicht selten vorkommen beim Programmieren ;-) ).

Hinweis: Statt der ausgeschriebenen Variante mit false, kann man auch kurz schreiben

JHtml::_('stylesheet', 'media/com_finder/css/indexer.css');

Natürlich ist so jeder Pfad erlaubt, bspw. JHtml::_('stylesheet', 'templates/protostartest/css/template.css');

So, und jetzt fügen wir beide Zeilen ein, von denen wir ja wissen, dass sie einzeln funktionieren und beide die selbe Datei einbinden.

JHtml::_('stylesheet', 'com_finder/indexer.css', array(), true);
JHtml::_('stylesheet', 'media/com_finder/css/indexer.css');

Seit Joomla 3.7. lauten die Zeilen wie folgt.

JHtml::_('stylesheet', 'com_finder/indexer.css', array('relative' => true));
JHtml::_('stylesheet', 'media/com_finder/css/indexer.css');

Ergebnis: Die CSS-Datei wird nur 1x eingebunden!

Das Analogon für JavaScript- Dateien ist übrigens JHtml::_('script', 'templates/protostartest/js/template.js'); mit einem Unterschied. Sollte das true nötig sein, ist das 3. Argument nicht array(), sondern true oder false.

Probier einfach diese Zeilen einzeln aus, mal mit true, mal mit false. Siehst dann schon:

Bis Joomla 3.6!

JHtml::_('script', 'templates/protostartest/js/template.js', true, false);
JHtml::_('script', 'templates/protostartest/js/template.js', false, false);
JHtml::_('script', 'com_finder/sliderfilter.js', false, true);
JHtml::_('script', 'com_finder/sliderfilter.js', true, true);
JHtml::_('script', 'media/com_finder/js/sliderfilter.js', true, false);
JHtml::_('script', 'media/com_finder/js/sliderfilter.js', false, false);

Seit Joomla 3.7. lauten diese Zeilen wie folgt.

JHtml::_('script', 'templates/protostartest/js/template.js', array('framework' => true, 'relative' => false));
JHtml::_('script', 'templates/protostartest/js/template.js', array('framework' => false, 'relative' => false));
JHtml::_('script', 'com_finder/sliderfilter.js', array('framework' => false, 'relative' => true));
JHtml::_('script', 'com_finder/sliderfilter.js', array('framework' => true, 'relative' => true));
JHtml::_('script', 'media/com_finder/js/sliderfilter.js', array('framework' => true, 'relative' => false));
JHtml::_('script', 'media/com_finder/js/sliderfilter.js', array('framework' => false, 'relative' => false));

Oder seit Joomla 3.7. in gekürzter Form, die exakt das Selbe macht, da sowohl die Option 'framework' als auch 'relative' per Voreinstellung auf false steht.

JHtml::_('script', 'templates/protostartest/js/template.js', array('framework' => true));
JHtml::_('script', 'templates/protostartest/js/template.js');
JHtml::_('script', 'com_finder/sliderfilter.js', array('relative' => true));
JHtml::_('script', 'com_finder/sliderfilter.js', array('framework' => true, 'relative' => true));
JHtml::_('script', 'media/com_finder/js/sliderfilter.js', array('framework' => true));
JHtml::_('script', 'media/com_finder/js/sliderfilter.js');

Überlegt man ein bisschen, wird einem klar, wird meine eingebundene Datei, sei es nun CSS oder JS, nicht in der Reihenfolge angezeigt, wie ich erwarte, ist mir vielleicht eine andere Stelle im Code, vielleicht in einer anderen Erweiterung zuvorgekommen?

addScript (JS), addStyleSheet (CSS)

Und zum Ende noch eine Variante einzelne CSS oder JS einzubinden. Eigentlich der direktere Weg zum Ziel... Verwende ich häufiger als JHtml für einzelne Dateien. Wohl auch Gewohnheitssache.

JHtml::_('script', 'templates/protostartest/js/template.js');
JHtml::_('stylesheet', 'templates/protostartest/css/template.css');

$doc = JFactory::getDocument();
$doc->addScript('templates/protostartest/js/template.js');
$doc->addStyleSheet('templates/protostartest/css/template.css');

Die ersten beiden JHtml kennen wir ja schon. Und die beiden letzten machen in diesem Fall das selbe. Und auch hier wird nicht doppelt geladen.

Selbst rumprobieren mit zeilenweise Gatterzeichen... Eigene zusätzliche Zeilen ausdenken, prüfen... Zeilen umsortieren.

Vielen Dank an Re:Later (Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!) für das bereitstellen dieses Tutorials auf meiner Seite!

PHP Joomla Frontend Template Tutorial