Kako izdelati Joomla predlogo - kreiranje datotek

Za lažje razumevanje bomo najprej ustvarili prazno predlogo in jo namestili v že inštalirano Joomlo. Predlogo bomo postopoma gradili.

Ustvarimo osnovno strukturo in kreiramo datoteke

Potrebujemo mapo css in images ter nekaj datotek.

/css/style.css
/images
/html
favicon.ico
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png

Kaj določene datoteke počnejo?

style.css (lahko jo poimenujete tudi drugače) - tu je zapisana oblika spletne strani

index.php - glavna datoteka v kateri je vsa logika prikaza

templateDetails.xml - potrebna za instalacijo

template_preview.png - predogled v administraciji (ca 600x400px)

template_thumbnail.png - pomanjšana slika predogleda (ca 200x150px)

mapa images - vsebuje slike za ozadja, gumbe CTA elemente, ikone ...

mapa html - vsebuje vse preglasitve privzetih Joomla pogledov

favicon.ico - je ikona, prikazana v zavihku brskalnika. Za začetek jo lahko kopirate kar iz Protostar predloge.

Za uspešno instalacijo moramo najprej vpisati ustrezne podatke v templateDetails.xml. Odpremo datoteko v urejevalniku in kopiramo spodnjo kodo.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">
<name>sijoomla</name>
<version>1.0</version>
<creationDate>4/1/2016</creationDate>
<author>SiJoomla</author>
<authorEmail></authorEmail>
<authorUrl>http://www.sijoomla.com</authorUrl>
<copyright>SiJoomla</copyright>
<license>GNU/GPL</license>
<description>SiJoomla Joomla 3 template</description>
<files>

<filename>favicon.ico</filename>
<filename>index.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>

</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>bottom</position>
<position>header</position>
<position>footer</position>
<position>banner</position>
<position>breadcrumbs</position>
<position>debug</position>
<position>menu</position>
<position>fullwidth</position>
<position>feature</position>
<position>advert1</position>
<position>advert2</position>
<position>advert3</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
</positions>

</extension>

Datoteko shranimo z xml končnico.

Na vrsti je index.php datoteka. Odpremo nov dokument v urejevalniku in kopiramo spodnjo kodo.

 <?php
/*------------------------------------------------------------------------
# author SiJoomla
# Copyright © SiJoomla All rights reserved.
# @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Website http://www.sijoomla.com
-------------------------------------------------------------------------*/// no direct access
defined ('_JEXEC') or die ('resticted aceess');

$doc = JFactory::getDocument();
JHtml::_('bootstrap.framework');

$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<jdoc:include type="head" />

<!-- Custom styles for this template -->

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css" />

</head>

<body class="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">
<!--Top-->
<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="top" style="none" />
</div>
</div>
</div>
<?php endif; ?>
<!--Top end-->
<div id="header">
<nav class="navbar navbar-default"> <!-- dodaš lahko navbar-fixed-top -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img style="width:200px; height:auto; " src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/logo.png" alt="Logo">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<?php if ($this->countModules('menu')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="menu" style="none" />
</nav>
<?php endif; ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<!--fullwidth-->
<?php if($this->countModules('fullwidth')) : ?>
<div id="fullwidth">
<div class="row">
<jdoc:include type="modules" name="fullwidth" style="block"/>
</div>
</div>
<?php endif; ?>
<!--fullwidth end-->
<!--Feature-->
<?php if($this->countModules('feature')) : ?>
<div id="feature">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="feature" style="block" />
</div>
</div>
</div>
<?php endif; ?>
<!--Feature end-->
<div id="component">
<div class="container">
<!-- Content -->
<div class="row">
<?php if ($this->countModules('left')) : ?>
<div id="sidebarleft" class="span3 col-md-3">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>
<div id="content" class="<?php echo $span;?>">
<?php if($this->countModules('breadcrumbs')) : ?>
<div id="breadcrumbs">
<div class="row">
<jdoc:include type="modules" name="breadcrumbs" style="block" />
</div>
</div>
<?php endif; ?>

<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('right')) : ?>
<div id="sidebarright" class="span3 col-md-3">
<jdoc:include type="modules" name="right" style="block" />
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Content end -->
<!-- bottom -->
<?php if($this->countModules('bottom')) : ?>
<div id="bottom">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="bottom" style="block" />
</div>
</div>
</div>
<?php endif; ?>
<!-- bottom end -->
<!-- footer -->
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="footer" style="block" />
</div>
</div>
</div>
<?php endif; ?>
<!-- footer end -->
<div id="copy">
<div class="container">
<div class="row">
<span class="copyright"> &copy; <?php echo date('Y'); ?> Your Company. All Rights Reserved. Designed By <a target="_blank" href="http://www.sijoomla.com">SiJoomla</a></span>
</div>
</div>
</div>

</body>
</html>

 Datoteko shranimo s php končnico. Razlago kode bomo predelali kasneje.

Ustvarimo še style.css in jo zaenkrat shranimo kar prazno. Ustvarimo še vse potrebne mape in dodamo ostale datoteke, navedene zgoraj.

Zdaj imamo dovolj za prvo namestitev predloge. Vse datoteke zapakiramo v sijoomla.zip in predlogo namestimo. Označite nameščeno predlogo kot privzeto in preverite kako izgleda na prvi strani. Zaenkrat ne preveč vzpodbudno.

V nadaljevanju - Zdaj gre pa zares

© SiJoomla. Vse pravice pridržane.

Pridobi dodatna znanja!

Izobraževanja in delavnice, pomoč in inštrukcije za Joomlo, seminarji za podjetja.

 

Že imate spletno stran izdelano z Joomla CMS? Potrebujete več znanja pri administraciji spletnega mesta?

Ponujamo individualna izobraževanja za Joomlo.

Preverite

x