Fiyo CMS Documentations

Untuk memulai pembuatan tema perlu disiapkan file wajib dalam paket Fiyo Theme. File tersebut adalah sebagai berikut :

  • index.php
  • theme_details.php

Anda bisa memodifikasi template HTML/CSS yang sudah dibuat dengan mengganti nama file index.html menjadi index.php atau membuat kode dari awal

index.php

index.php merupakan file utama untuk memuat seluruh file yang dibutuhkan. Untuk permulaan buat folder 'mytheme' didalam folder root/themes/. Setelah itu buat file index.php dan sisipkan kode dibawah ini :

<html>
    <head><title>My Theme</title></head>
    <body>Text body</body>
</html>

Setelah itu simpan dan set di Admin Panel untuk mengaktifkan mytheme sebagai tema utama. Apakah berhasil? Jika ya mungkin bisa kelangkah selanjutnya.

Sekarang mulai untuk memuat system kedalam file tema. Sebelum itu kita perlu mengetahui kode singkat yang bisa digunakan didalam tema.

  • {sitetitle} : menampilkan judul situs sesuai format pada konfigurasi situs.
  • {homeurl} : url utama atau url homepage.
  • {sitename} : nama situs.
  • {lang} : bahasa situs.
  • {metarobots} : konfigurasi robots halaman.
  • {metadesc} : deskripsi halaman.
  • {metakeys} : katakunci halaman.
  • {module:posisi_modul} : memuat modul sesuai posisi dalam parameter.
  • {chkmod:posisi_modul} : digunakan apakah modul sesuai posisi parameter sedang aktif.
  • {/chkmod} : penutup sintak cek modul.
  • {loadApps} : memuat Apps.

Berikut adalah contoh potongan kode untuk bagian <head>.

<!DOCTYPE html>
<html lang="{lang}">
  <head>
    <meta charset="utf-8">
    <title>{sitetitle}</title>
    <meta name="description" content="{metadesc}">
    <meta name="author" content="{metaauthor}">
    <meta name="keywords" content="{metakeys}">
    <link rel='shortcut icon' type='image/x-icon' href='/css/images/favicon.ico' />
    <link rel='stylesheet' href='/css/style.css' type='text/css' media='all' />
    <script type='text/javascript' src='/js/jquery-2.0.3.min.js"></script>
</head>

Semua kode akan digenerate secara otomatis dan telah di rapikan, dimana css akan di taruh pada bagian <head> secara otomatis, baik css untuk Module dan css dari Apps. Semua aset juga akan di panggil secara otomatis apabila merujuk pada folder tertentu, misal : folder image, images, css, asset, assets, js. Semua file yang di panggil tanpa penulisan FThemePath pada versi terdahulu. File terpanggil secara otomatis di versi 2.0 untuk memudahkan konversi dari file HTML/CSS yang sudah dibuat. 

Setelah bagian head selanjutnya bagian body. Perhatikan potongan kode berikut :

<body>
   <header id='header"> 
       <div id='logo"><a href='{homeurl}">{sitenama}</a>
       <span>{sitetitle}</span></div>
   </header>
   
   <nav id='navigation">    
      {module:mainmenu}
   </nav>
   
   <div class='m-slider">
      {module:slide}
   </div>        
               
   <div class='main">      
       {chkmod:right}
          <div class='full">
             {loadApps}
          </div>
       {else:}
          <div class='left'>
             {loadApps}
          </div>
          <div class='right'>          
             {module:right}
          </div>
      {/chkmod}
   </div>
</body>

Jika dilihat menurut potongan kode diatas terdapat posisi module mainmenu, slide dan right. Pada bagian konten akan tampil lebar jika module right tidak aktif. Dan akan dibagi menjadi dua bagian jika module right ada yang aktif sesuai kontrol {chkmod:}.

Versi terbaru ini sudah meminimalkan penggunaan PHP pada bagian tema. sehingga file lebih terlihat rapi.

Setelah membuat file index.php secara lengkap sebenarnya sudah bisa digunakan secara utuh untuk Fiyo Theme. Namun, perlu theme_details.php sebagai informasi tema.

theme_details.php

isi dan modifikasi bagian theme_details sesuai informasi tema yang diperlukan. Berikut contoh file theme_details.php.

$theme_name          ='First Panel';
$theme_version       ='1.5.0';
$theme_date          ='17 August 2013';
$theme_author        ='Fiyo CMS';
$theme_author_url    ='http://portofolio.web.id';
$theme_author_email  ='firstryan@gmail.com';
$theme_image         ='theme_details.jpg';
$theme_logo          ='image/logo.png';

Terdapat variable $theme_image sebagai preview di halaman Themes Manager. isinya sudah tidak lagi baku ke tipe .gif tetapi bisa tipe apa saja tergantung parameter yang dituliskan. Anda juga bisa menambahkan parameter buatan sendiri untuk mengatur tema anda.

theme_image.gif

Buat screenshoot dari tema yang dibuat sebagai thumbnail (preview) tema. Rekomendasi berukuran 200x200 atau dengan ukuran yang presisi.

spot_position.php

Spot position pada versi terbaru sudah tidak diperlukan karena sistem sudah melakukan generate module secara otomatis

Membuat Paket Installer

Jika berniat untuk berbagi dari tema yang sudah dibuat anda perlu menyiapkan paket installer agar dapat diinstal melalui AddOns Installer. 

installer.php

buat file installer.php satu folder dengan file index.php. Dan diingat bahwa file installer akan hilang otomatis jika paket Fiyo Theme berhasil diinstall. Berikut contoh file installer.php

$addons['name']   = 'My Theme';
$addons['type']   = 'themes';
$addons['folder'] = 'mytheme';
$addons['info']   = '<h1>Ini tema buatan saya :)</h1>';

Setelah file installer terbentuk pilih semua file yang ada pada folder tema yang dibuat lalu klik kanan dan pilih kompres sebagai zip. Jadi sekarang selain terdapat file pendukung tema juga terdapat file .zip sebagai file installer yang telah dibuat.

Beri Komentar