Joomla – Javascripte per Modul laden

**DirtyWorld** · 01.04.2011 13:08

Hallo,
so nun mein erstes Joomla Tutorial.
In diesem geht es darum wie ich Javascript für jede Unterseite angepasst meinem Template hinzufüge ohne das diese global auf jeder Seite geladen werden.[PRBREAK][/PRBREAK]
Als erstes fügen wir unserer templateDetails.xml eine neue Position hinzu:

Code:

<position>script</position>

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
    <name></name>
    <creationDate></creationDate>
    <author></author>
    <authorEmail></authorEmail>
    <authorUrl></authorUrl>
    <copyright></copyright>
    <license></license>
    <version></version>
    <description></description>
    <files>
        …
        <filename>index.html</filename>
        <filename>index.php</filename>
        <filename>params.ini</filename>
        <filename>templateDetails.xml</filename>
        <filename>template_thumbnail.png</filename>
        <filename>favicon.ico</filename>
    </files>
    <positions>
        …
        <position>script</position>
    </positions>
    <params>
    </params>
</install>

Damit bekommen wir im Joomla Backend eine neue Position zum Laden von Modulen.

Um nun die Javascripte dann auch ins Template geladen werden müssen wir nun noch in der index.php, diese befindet sich im Templateordner, ein jdoc statement hinzufügen:

HTML-Code:

<jdoc:include type="modules" name="script" style="none" />

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<?php
$headerstuff=$this->getHeadData();
reset($headerstuff ['scripts']);
unset($headerstuff ['scripts'][$this->baseurl . '/media/system/js/mootools.js']);
unset($headerstuff ['scripts'][$this->baseurl . '/media/system/js/caption.js']);
$this->setHeadData($headerstuff);
?>
<!-- CSS -->
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
–
<!-- Modul Javascript -->
<jdoc:include type="modules" name="script" style="none" />
</body>
</html>

Die befindet sich am besten am Ende der Seite. Also vor dem schließenden Body-Tag.
Warum das so sinnvoll ist könnt Ihr hier nachlesen
Nun haben wir alle Vorbereitungen getroffen um das Joomla Backend zu verwenden.
Hier gehen wir nun im Menü auf „Erweiterungen>Module“ und fügen über den Link „Neu“ fenster01.jpg ein neues Modul hinzu.
fenster02.jpg

Im nun auftauchenden Auswahlmenü nehmen wir das Modul „Eigene Inhalte (Leeres Modul)“.
fenster03.jpg
Hier vergeben wir nun einen Titel, z.B. Javascipts, und wählen die vorher erzeugte Position „script“ aus. Ganz wichtig, nicht vergessen das Modul auch zu veröffentlichen!
fenster04.jpg
Damit nun die Javascripte nicht auf jeder Seite geladen werden kann man das Modul nun über die Menüzuweisung verschiedenen Menüpunkten und somit auch deren Artikel zuweisen.
fenster05.jpg
In den Editor schreibt Ihr nun eure Scripte. Wie das geht hängt von eurem Editor ab.
Im standard Joomla-Editor TinyMCE müsst Ihr auf den HTML-Button klicken. Aber Achtung vorher muss das Codecleaning ausgeschaltet werden. Hier auch mal mit den Filtereinstellungen von Joomla beschäftigen. Ich bevorzuge den JCE-Editor, auch hier muß erst Javascript erlaubt werden.
fenster06.jpg
fenster07.jpg

Nun müßt Ihr nur noch das Modul speichern und Ihr habt das Javascript in eure Seite eingebunden.
fenster08.jpg
Überprüfen könnt Ihr das nun wenn Ihr eure Vorschau neu ladet und euch den Quellcode anzeigen lasst (im Firefox strg+u, im Safari cmd+alt+u).

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
  <meta **********="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="title" content="Referenzen Test" />
  <meta name="author" content="Administrator" />
  <meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Tutorial Test</title>

  <link href="/joomla1.5/templates/tutorial_template/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<!-- CSS -->
<link rel="stylesheet" href="/joomla1.5/templates/tutorial_template/css/template.css" type="text/css" />
</head>
<body>
…
<!-- Module Javascript -->
<script src="/joomla1.5/templates/tutorial_template/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[    
    alert ('Achtung', 'blablablablablabla');
// ]]>
</script>
</body>
</html>

Das Vorgehen läßt sich natürlich nun noch etwas weitertreiben wenn Ihr z.B. jQuery und verschiedene Plugins in eurem Template verwenden wollt, könnt Ihr für jede Datei ein eigenes Modul erzeugen und alle auf die Modulposition „script“ laden. Mit dem Dropdownmenü Reihenfolge läßt dann noch steuern in welcher Reihenfolge die Scripte an die Position geladen werden sollen.

Da ich hier ja Scripte mit jQuery angesprochen habe hier noch ein Link wie Ihr die Mootoolsbibliothek und deren Caption aus Joomla entfernt ohne dass das Backend betroffen ist.

So ich hoffe euch hat das Tutorial ein wenig geholfen.

Viele Grüße,
Jan

Thema: Joomla – Javascripte per Modul laden

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Joomla – Javascripte per Modul laden

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen