Webmaster & Internet
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.
Als erstes fügen wir unserer templateDetails.xml eine neue Position hinzu:
Code xml:
1 | <position>script</position> |
Code xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?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>
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“
ein neues Modul hinzu.
Im nun auftauchenden Auswahlmenü nehmen wir das Modul „Eigene Inhalte (Leeres Modul)“.
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!
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.
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.
Nun müßt Ihr nur noch das Modul speichern und Ihr habt das Javascript in eure Seite eingebunden.
Ü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 http-equiv="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>
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
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
tutorials.de-Systemmitteilung