Kapitel 26 – Templates entwickeln

Alle Template-Quelltexte aus dem Buch zum einfachen Copy&Paste.

 

26.1.2 Bootstrap kennenlernen

Einfaches HTML5-Grundgerüst

<body>
    <div class="container">
        <header>
            Websitename
        </header>
        <nav class="navbar">
            <div class="navbar-inner">
                Menünavigation 
            </div>
        </nav>
        <div class="row-fluid">
            <main class="span9">Contentbereich</main>
            <div class="span3">Seitenleiste</div>
        </div>
        <footer>
            Fußzeile
        </footer>
    </div>
</body>

26.2.2 XML-Manifest – »templateDetails.xml«

„templateDetails.xml“: erste Version des Template-XML-Manifests mit Modulpositionen und Referenzen zu im Templatepaket enthaltenen Dateien

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
    <name>IhrTemplateName</name>
    <creationDate>2015-06-20</creationDate>
    <author>Vorname Nachname</author>
    <authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</authorEmail>
    <authorUrl>http://IhrDomainName.de</authorUrl>
    <copyright>Vorname Nachname 2015</copyright>
    <license>GNU/GPL</license>
    <version>0.1.0</version>
    <description>IhrTemplateName</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>header</position>
        <position>sidebar</position>
        <position>footer</position>
    </positions>
</extension>

26.2.3 HTML-Templatebasis – »index.php«

„index.php“: fundamentales Template mit PHP- und Joomla-spezifischen Includes per „<?php echo $variable; ?>“ und „<jdoc:include>“. Beachten Sie die Joomla-3.5-Aktualisierung im Vergleich zum Buch: Statt $this->baseurl wird JURI::base() eingesetzt zur Ermittlung der Domain-URL.

<?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; ?>" >
    <head>
        <jdoc:include type="head" />
        <link rel="stylesheet" href="/<?php echo JURI::base(); ?>templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
    </head>
    <body>
        <jdoc:include type="modules" name="header" /> 
        <jdoc:include type="component" />
        <jdoc:include type="modules" name="sidebar" />
        <jdoc:include type="modules" name="footer" />
    </body>
</html>

26.2.5 HTML5 und Bootstrap einsetzen

„index.php“: erweiterte Templatedatei mit HTML5-Elementen und Bootstrap-Klassen. Beachten Sie die Joomla-3.5-Aktualisierung im Vergleich zum Buch: Statt $this->baseurl wird JURI::base() eingesetzt zur Ermittlung der Domain-URL.

<?php defined( '_JEXEC' ) or die;
    $app = JFactory::getApplication();
    $sitetitle = $app->get('sitename');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
        <?php
            JHtmlBootstrap::loadCss();
            $doc = JFactory::getDocument();
            $doc->addStyleSheet(JURI::base() . 'templates/' . $this->template . '/css/template.css');
        ?>
        <jdoc:include type="head" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    </head>

    <body>
        <div class="container">
            <header>
                <p class="sitetitle"><a href="/" title="Home"><?php echo $sitetitle; ?></a></p>
            </header>
            <nav class="navbar">
                <div class="navbar-inner">
                    <jdoc:include type="modules" name="header" /> 
                </div>
            </nav>
            <div class="row-fluid">
                <main class="span9"><jdoc:include type="component" /></main>
                <div class="span3 sidebar"><jdoc:include type="modules" name="sidebar" /></div>
            </div>
            <footer>
                <jdoc:include type="modules" name="footer" />
            </footer>
        </div>
    </body>
</html>

26.2.6 CSS-Datei – »template.css«

„template.css“: Beispielstyles des Reisetemplates V0.2.0

.navbar {
    margin-top: 36px;
}

p.sitetitle {
    margin-top: 36px;
    font-size: 42px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
}

main {
    padding: 12px;
}

.sidebar,
footer {
    margin-bottom: 12px;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #D4D4D4;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067);
    background-color: #FAFAFA;
}

main img {
    margin-bottom: 12px;
    width: 100%;
}

main p {
    clear: both;
}

26.3.1 Templatekonfiguration integrieren

„templateDetails.xml“: Konfigurationsergänzung des Reisetemplates V0.2.0

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
    <name>IhrTemplateName</name>
    <creationDate>2015-06-20</creationDate>
    <author>Vorname Nachname</author>
    <authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</authorEmail>
    <authorUrl>http://IhrDomainName.de</authorUrl>
    <copyright>Vorname Nachname 2015</copyright>
    <license>GNU/GPL</license>
    <version>0.1.0</version>
    <description>IhrTemplateName</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>header</position>
        <position>sidebar</position>
        <position>footer</position>
    </positions>
    <config>
        <fields name="params">
            <fieldset name="advanced">
                <field name="googleFontName" 
                    class="" 
                    type="text"
                    default="Cardo|Source+Sans+Pro"
                    label="Google Font"
                    description="Type in any Google font combination separated by a pipe sysmbol, e.g Cardo|Source+Sans+Pro" />
                <field name="logoFile" 
                    class="" 
                    type="media" 
                    default=""
                    label="Site Logo"
                    description="Pick a site logo from the media library" />
            </fieldset>
        </fields>
    </config>
</extension >

„index.php“: Version 0.3.0 des Reisetemplates liest Parameter aus der Templatekonfiguration aus. Beachten Sie die Joomla-3.5-Aktualisierung im Vergleich zum Buch: Statt $this->baseurl wird JURI::base() eingesetzt zur Ermittlung der Domain-URL.

<?php defined( '_JEXEC' ) or die;
    $app = JFactory::getApplication();
    $sitetitle = $app->get('sitename');
    $logo = $this->params->get('logoFile');
    $logoHtml = ($logo) ? '<img src="' . $logo . '" alt="' . $sitetitle . '" style="vertical-align: text-bottom;" />&nbsp;' : '';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
        <?php
            JHtmlBootstrap::loadCss();
            $doc = JFactory::getDocument();
            $doc->addStyleSheet(JURI::base() . 'templates/' . $this->template . '/css/template.css');
        ?>
        <jdoc:include type="head" />
        <link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    </head>
    <body>
        <div class="container">
            <header>
                <p class="sitetitle"><a href="/" title="Home"><?php echo $logoHtml; ?><?php echo $sitetitle; ?></a></p>
            </header>
            <nav class="navbar">
                <div class="navbar-inner">
                    <jdoc:include type="modules" name="header" /> 
                </div>
            </nav>
            <div class="row-fluid">
                <main class="span9"><jdoc:include type="component" /></main>
                <div class="span3 sidebar"><jdoc:include type="modules" name="sidebar" /></div>
            </div>
            <footer>
                <jdoc:include type="modules" name="footer" />
            </footer>
        </div>
    </body>
</html>

„template.css“: Zuordnung der per „<link>“ importierten Google-Schriften zu HTML-Elementen

body {
    font-family: "Source Sans Pro", serif;
}

h1,
h2,
h3 {
    font-family: "Special Elite", serif;
}

.navbar {
    margin-top: 36px;
}

p.sitetitle {
    margin-top: 36px;
    font-size: 42px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
    font-family: "Special Elite", serif;
}

main {
    padding: 12px;
}

.sidebar,
footer {
    margin-bottom: 12px;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #D4D4D4;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067);
    background-color: #FAFAFA;
}

main img {
    margin-bottom: 12px;
    width: 100%;
}

main p {
    clear: both;
}

Sponsoren