• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 3 - Struktur File dan Folder Theme

28‘13
April

info80.jpg

Di bagian mengenal struktur HTML Wordpress, saya telah mengenalkan bagaimana kerangka HTML5 Wordpress dan cara kerja wordpress dalam memanipulasi (drive) halaman utama pengunjung dimana Wordpress menggunakan index.php untuk memanggil file-file php lainnya. Walaupun demikian pada dasarnya template wordpress minimal membutuhkan 2 file yaitu index.php dan style.css, namun tentu hasilnya juga tidak akan memuaskan dan sulit untuk menelusuri bagian-bagian template.

Pada utorial yang ke 3 (tiga) ini saya akan menunjukan kepada anda bagaimana cara bekerja dengan banyak file untuk menampilkan semua fitur yang terdapat dalam wordpress, sekarang mari kita buat file-file yang dibutuhkan.

Buatlah folder baru didalam wp-content/themes/ untuk tutorial ini saya menggunakan nama folder w3function, tapi untuk anda pilih saja nama theme yang anda sukai. Selanjutnya buat struktur file seperti dibawah ini:

  • inc (folder)
  • js (folder)
  • languages (folder)
  • layouts (folder)
  • 404.php
  • archive.php
  • comments.php
  • content.php
  • content-aside.php
  • content-page.php
  • content-single.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • no-results.php
  • page.php
  • search.php
  • searchform.php
  • sidebar.php
  • single.php
  • license.txt
  • rtl.css
  • style.css

Ya, memang banyak sekali karena kita akan membuat sebuah template wordpress yang lengkap. Semua file dan folder yang anda buat diatas tidak perlu anda isi kosongkan saja, tenangkan diri Anda kita akan isi satu persatu selama tutorial ini.

Sekarang buka file style.css anda untuk mendefiniskan deskripsi template yang akan dibuat. Dibaris paling atas tulislah keterangan berikut dengan menggunakan statement komentar CSS

/*
Theme Name: W3function Design
Theme URI: http://w3function.com/
Author: Widi Mawardi
Author URI: http://w3function.com/
Description: My first WP theme made by myself to make my WP no more Mati Gaya.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: W3functionDesign

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Saya jelaskan maksud dari masing-masing baris diatas untuk menghemat obat sakit kepala anda :D

  • Theme Name – Nama theme anda
  • Theme URL – Arah URL website dimana orang lain bisa menemukan theme anda
  • Author – Pembuat theme yaitu anda sendiri
  • Author URI – Link ke website Pembuat theme
  • Description – Keterangan/Deskripsi dari theme
  • Version – Versi theme yang di publikasikan.
  • License – Lisensi penggunaan theme
  • License URI – Link URL lisensi theme
  • Tags – Tag-tag atau kategori yang menjelaskan theme sehingga theme dapat dicari orang lain diseluruh dunia melalui website WordPress Themes Directory. Berikut ini daftar tags yang diperbolehkan.

Sebelumnya saya menunjukan kepada anda bagaimana struktur HTML termasuk ID dan Class yang digunakan sebagai berikut

<div id="page" class="hfeed site">
	
	<header id="masthead" class="site-header" role="banner">
    
    	<hgroup></hgroup>
        
        <nav role="navigation" class="site-navigation main-navigation"></nav><!-- .site-navigation .main-navigation -->
        
	</header><!-- #masthead .site-header -->
    
    <div id="main" class="site-main">
    
		<div id="primary" class="content-area">
        
			<div id="content" class="site-content"></div><!-- #content .site-content -->
		
        </div><!-- #primary .content-area -->
        
		<div id="secondary" class="widget-area"></div> <!-- #secondary .widget-area -->
		
        <div id="tertiary" class="widget-area"></div><!-- #tertiary .widget-area -->
	
    </div><!-- #main .site-main -->
    
    <footer id="colophon" class="site-footer" role="contentinfo">
    
        <div class="site-info"></div><!-- .site-info -->
	
    </footer><!-- #colophon .site-footer -->
    
</div><!-- #page .hfeed .site -->

Sekarang mari kita bagi struktur tag HTML5 diatas kedalam 4 bagian yaitu Header, Sidebar, Content, Footer. File-file yang akan terlibat dalam proses ini adalah index.php, header.php, sidebar.php, dan footer.php

Pertama-tama silahkan pindahkan tag HTML kedalam header.php dan footer.php seperti berikut

File header.php


<div id="page" class="hfeed site">
	
    <header id="masthead" class="site-header" role="banner">
    
    	<hgroup></hgroup>
        
        <nav role="navigation" class="site-navigation main-navigation"></nav><!-- .site-navigation .main-navigation -->
        
    </header><!-- #masthead .site-header -->
    
    <div id="main" class="site-main">

File footer.php

	</div><!-- #main .site-main -->
    
	<footer id="colophon" class="site-footer" role="contentinfo">
    
        <div class="site-info"></div><!-- .site-info -->
        
	</footer><!-- #colophon .site-footer -->
    
</div><!-- #page .hfeed .site -->

Selanjutnya untuk bagian sidebar.php

		<div id="secondary" class="widget-area"></div> <!-- #secondary .widget-area -->
        
        <div id="tertiary" class="widget-area"></div><!-- #tertiary .widget-area -->

Terakhir untuk bagian index.php

    
		<div id="primary" class="content-area">
        	
			<div id="content" class="site-content"></div><!-- #content .site-content -->
            
		</div><!-- #primary .content-area -->

Sekarang 4 file sudah terisi bagian-bagian tag HTML, selanjutnya pada index.php dibaris pertama gunakan fungsi PHP wordpress untuk memanggil file header.php

<?php get_header(); ?>    	

Saya tahu anda pintar dan pasti sudah bisa menebak selanjutnya apa yang harus dilakukan. Ya benar, diakhir baris index.php panggil sidebar.php dan footer.php

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Masuk ke halaman admin wordpress di local server anda lalu masuk ke Appearance anda akan melihat disana theme yang anda buat sudah bisa digunakan

Gunakan theme yang dengan bangga dan susah-susah anda buat lalu reload halaman pengunjung Wordpress di browser Anda. Nah sekarang anda sudah menggunakan source code buatan anda sendiri. Apakah sudah tampak bagus hasilnya?

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 4 - Menyiapkan Fungsi-fungsi (Functions) Theme
  2. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 5 - Sanitasi dan Validasi untuk Keamanan Theme
  3. Penyerangan BotNet Kepada Para Pengguna Wordpress
  4. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 1 - Instalasi Wordpress dan Development Tool
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 9 - Membuat Template Komentar (comment.php)

Komentar

  • majalengkawebmaster (31 Mar 2016 06:11:25)

    info yang sangat membuat saya cerah

  • infobola83 (30 Mar 2016 11:27:15)

    SyntaxHighlighter gak jalan bos..

  • jsp (06 Mar 2015 02:11:24)

    utk memanggil ngisi file indek.php yg mana lg gan ,baru belajar hehehe

  • yiha (04 Jul 2014 03:10:06)

    Alasan dipisahkan-pisahkan seperti itu untuk apa gan?
    Dan kenapa harus struktur pemisahan tidak pas seperti itu?

  • lucky (16 May 2014 02:58:46)

    kalau mau menghilangkan sidebar pada halaman posting dan bikin halaman posting fullwidth gimana gan?
    <a href="http://www.pusat-vitalitaspasutri.com/" rel="nofollow" title="[ Distributor Vimax dan Pro Extender ]"> symphony 69</a>

» Muat Komentar Sebelumnya (6 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff