• 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 2 - Mengenal Struktur Content Wordpress (HTML Core)

27‘13
April

info80.jpg

Sebelum membuat template Anda tentu perlu mengetahui bagaimana struktur HTML wordpress. Versi wordpress yang paling baru yaitu Versi 3.x mengalami banyak perubahan struktur dari versi sebelumnya. Wordpress V3.x sudah menggunakan standard template web semantic W3C yaitu dengan tag HTML5. Selain itu template standard (bawaan) instalasi walaupun tampilannya minimalis (naked) tapi sudah menggunakan teknik desain responsif sehingga tulisan Anda dapat terbaca baik di berbagai perangkat (device)

Tampilan wordPress V3.x

Setelah instalasi worpress berhasil, saya mendapakan tampilan admin dan halaman utama wordpress sebagai berikut

Interface admin

Interface pengunjung blog

Dengan menggunakan theme default bawaan yaitu "Twenty Twelve" apabila anda geser-geser/perkecil layar browser di windows baik untuk admin atau halaman pengunjung keduanya sudah menggunakan desain yang responsif walaupun mata saya mendadak agak sakit melihat interface untuk pengunjung blog yang agak mati gaya.

Struktur HTML5 Semantic WordPress

Setelah cek dan ricek template bawaan wordpress, saya perhatikan sudah menggunakan struktur HTML 5 semantic walaupun untuk sidebar dan bagian pembungkus (wrap) content artikelnya <artikel> masih menggunakan <div> bukan tag HTML5 seperti <section>, berikut saya gambarkan ilustrasi struktur HTML yang terdapat pada wordpress V3.x theme Twenty Twelve

Berdasarkan gambar diatas, dasar (core) dari struktur wordpres terdiri dari

  • Header
  • Sidebar/Menu
  • Content
  • Footer

Dengan class dan id yang dapat anda lihat pada tag HTML dibawah

<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 -->

Bagaimana Cara kerja Theme WordPress

Coba anda buka folder theme didalam folder wp-content wordpress, Anda disana dapat menemukan banyak sekali file PHP (.php), file-file inilah yang disebut template didalam wordpress. Saat anda membuka halaman utama pengunjung anda sebetulnya mengakses satu file index.php didalam folder theme yang telah ditentukan. Lalu baris perintah program didalam index.php wordpress akan memanggil file lain untuk menghasilkan tampilan halaman pengunjung seperti tampilan mati gaya yang saya perlihatkan diawal

Pada Wordpress struktur hirarki file php yang diperlukan untuk manipulasi (drive) content adalah sebagai berikut.

Saat halaman dilihat (diload) pertama kali

  • index.php
  • header.php
  • sidebar.php
  • footer.php

Saat melihat satu halaman article (postingan)

  • single.php
  • header.php
  • sidebar.php
  • footer.php
  • comments.php

Saat melihat multi halaman seperti halaman kategori, arsip, dan pencarian.

  • index.php
  • category.php
  • 404.php
  • search.php
  • header.php
  • sidebar.php
  • footer.php

Ok, dibagian selanjutnya kita akan membuat struktur direktori template wordpress jadi kunjungi terus ya dan subscribe rss nya untuk mengetahui update article ini

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 8 - Membuat Template Single Post, Post Attachment dan 404
  2. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 3 - Struktur File dan Folder Theme
  3. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 1 - Instalasi Wordpress dan Development Tool
  4. Penyerangan BotNet Kepada Para Pengguna Wordpress
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 4 - Menyiapkan Fungsi-fungsi (Functions) Theme

Komentar

  • Mikrosound (10 Apr 2016 03:13:44)

    Wah..Makasih tutor-nya, mumpung lagi belajar ini nih...!
    Itu sampai berapa bagian ya?

  • prahman (06 Jan 2014 01:00:37)

    mantaps sekali ditunggu lanjutannya...

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