Cara paling mudah membuat template Joomla 3

Untuk membuat template dari joomla sebetulnya tidak sulit juga dan sangat mudah, kali ini saya akan menunjukan cara membuat template joomla dari nol, ya betul betul dari scratch. Untuk rancanganya kita akan melakukan hal simpel yaitu hanya membuat header, main content, sidebar dan footer, apabila anda ingin mengembangkan lebih lanjut pun bisa dengan berpegangan pada ini.

code

Rancangan awal dari template adalah seperti gambar dibawah ini, kita hanya memakai sementara 4 kolom saja, sederhana memang tapi dengan kreativitas dari anda, akan bisa mengembangkanya ke berbagai layout serta kolom yang anda inginkan, bahkan hingga 100 kolom jika anda ingin.

template-rancangan

Sesudah kita buat rancangan gambar dan layoutnya kita akan membutuhkan file file yang digunakan untuk membuat template, kita kelompokan per folder ada tiga 4 folder yang utama ada folder kita beri nama coba (silahkan beri nama sesuai keinginan anda) folder coba ini adalah nama template yang akan kita buat, dalam sub folder ada tiga folder lagi yaitu css, images dan js.

struktur

Sesudah buat struktur dari foldernya selanjutnya kita akan bekerja dengan filenya, pertama dan pastinya kita buat index.php kita akan memanggil css dan js disini.
Untuk indexnya adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/support/css/style.css" type="text/css" />
    <script src="/support/js/main.js" type="text/javascript"></script>
</head>
<body>
    <!-- main container -->
    <div class='main_container'>
        <!-- header -->
        <div class='header'>Header</div>
    
        <!-- Tengah digunakan untuk sidebar dan konten utama-->
        <div class='mid_container'>
    
            <!-- main content area -->
            <div class='main_content_area'>
                Konten Utama
            </div>
    
            <!-- sisi kanan -->
            <div class='right_sidebar'>
                Sisi kanan
            </div>
            
            <div style='clear:both;'></div>
    
        </div>
    
        <!-- footer -->
        <div class='footer'>
            Footer
        </div>
        
    </div>
</body>
</html>

Setelah index.php kita buat selanjutnya kita akan membuat cssnya, kita beri nama style.css. Sedangkan untuk JS nya kita beri nama main.js, karena kita belum ada javascriptnya dan saat ini kita belum butuhkan jadi kita tidak buat dulu, tapi misalkan anda ingin membuat jsnya silahkan masukan ke folder js.

Sedangkan untuk image atau gambar masukan ke folder images, misal kita masukan logo.png setelah dimasukan dan disiapkan maka template awal sudah jadi.
Selanjutnya adalah memberikan posisi modul di template kita yang sangat sederhana sekali ini pada sidebar, sedangkan main content di gunakan untuk komponen, dari sini nantinya anda dapat membuat sendiri dimana ingin meletakan posisi modulnya.

Untuk menambah posisi modul kita menggunakan jdoc, tadi kita sudah membuat pada index.php sidebar kemudian ada tulisan sisi kanan, anda ganti saja dengan  <jdoc:include type=”modules” name=”position-1″ style=”oke” /> dan lengkapnya adalah sebagai berikut :

 <!-- right sidebar -->
            <div class='right_sidebar'>
                <jdoc:include type="modules" name="position-1" style="oke" />
            </div>

kemudian untuk main content terdapat tulisan konten utama, kita ganti saja tulisan utama dengan <jdoc:include type=”component” /> ini berarti bahwa pada main content di gunakan untuk mengambil componentnya, lengkapnya :

<div class='main_content_area'>
                <jdoc:include type="component" />
            </div>

bila anda ingin menambahkan modul di atas component pun bisa, atau anda ingin menambak pesan situs yang digunakan untuk menampilkan error login dan sebagainya.

misal kita tambahkan diatas component modul 2 dan 3, kita tinggal memasukan saja seperti halnya di sisi kanan cuman pada position-1 kita ganti dengan position-2 dan position-3. Untuk lengkapnya adalah sebagai berikut :

<!-- main content area -->
            <div class='main_content_area'>
            <jdoc:include type="modules" name="position-2" style="oke" />
            <jdoc:include type="message" />
                <jdoc:include type="component" />
            <jdoc:include type="modules" name="position-3" style="oke" />
            </div>

Dari atas anda bisa lihat saya menambahkan modul baru diatas component yaitu posisi 2 dan messege sedangkan dibawah component saya menambahkan posisi 3.
Setelah kita buat semuanya langkah selanjutnya adalah membuat  template.xml, file ini kita letakan di folder induknya xml ini berisi tentang informasi tentang template yang kita buat.

Sebetulnya kalau kita kembangkan lebih jauh kita bisa memberikan konfigurasi template di file xml ini, mulai warna, font yang digunakan serta lainya. Adapun filenya xmlnya sebagai berikut :

<?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.0" type="template" client="site">
  <name>Template Sederhana</name>
  <version>1.0</version>
  <creationDate>7/07/2016</creationDate>
  <author>InMotion Hosting</author>
  <authorEmail>[email protected]</authorEmail>
  <copyright>Copyright (C) 2016 Airo Dump</copyright>
  <description>Tutorial Template Jomla</description>
  <files>
    <filename>index.php</filename>
    <folder>css</folder>
    <folder>js</folder>
    <folder>images</folder>
  </files>
  <positions>
        <position>debug</position>
        <position>position-1</position>
        <position>position-2</position>
        <position>position-3</position>
  </positions>
<config>
</config>
</extension>

Sesudah di buat file xmlnya maka template sudah bisa diinstal di joomla, untuk itu kita perlu menzip template yang ada, yaitu zip saja folder coba, selamat mencoba.

(Visited 2,520 times, 1 visits today)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

WhatsApp chat