Tutorial Membuat Template Wordpress Blog

5/28/2018 Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat AdvanceAuthor : dr.emi

Tutorial versi PDF Semoga bermanfaat, AminDikeluarkan dan disusun oleh www.dremi.info Hairul Azami [email protected] media pembelajaran Offline

TUTORIAL MEMBUAT TEMPLATE WORDPRESS BLOG

Kategori: Webmaster Tingkat Advance

Penulis: Hairul Azami

Dipersilahkan untuk diperbanyak, dibajak :-) , dikopi dan disebarluaskan

Karena Ilmu itu untuk diamalkan jadi

Letakkanlah Ilmu itu di Depan JIDAT Kamu,agar orang lain dapat mempelajari dan MELIHAT ilmu kamu"




Bagian1

INTRODUCTIONS

Setelah dalam kurun waktu yang cukup lama, project ini sempat tersendat sendat

pembuatanna karena satu dan lain hal.., yakni Wordpress Glassy Three - BlogTheme, dalam konteks design and code editing.

Wah puas rasana gue dah bisa ngeberesin template dan tutor na, seperti biasa

jangan liat panjang lebar na uraian tutor, tapi netter semua cuma butuh beberapasupport things yang bakal ngasi lu inspirasi dan semangat selalu...hakahakakaakakawww...

Hmmmmm.....mulai dari mana yak?

Woke...!! kalo kmaren gue ngasi tutor cara bikin layout na Wordpress Glassy Threeaja di Adobe Photoshop, sekarang kita akan belajar cara mengaplikasikanna kedalam Wordpress Blog Theme.

Woittt!!!! siapin dulu dah :

1. Kopi segala rasa...hehee..2. Rokok StarMild ... Lidah buaya Edition, eh salah Special Buaya Darat Edition..

hihiiikkiiikkk...

3. Lagu kebangsaaan Punk Raya, hehe..Session - The OffSpring [Album: 1993 -Ignition]..

4. Kali ini cewe gue lagi mudik, jadi gue rada leluasa ga ada yang

ngerecokin..hihiii..mahap ya deee...ga maksud kwok...

Kondisi: kali ini layout yang dah dibikin dalam keadaan sudah di slice, jadi tinggal diedit di Dreamweaver na (dalam File HTML+IMAGES).

Struktur File Template Wordpress Blog

Struktur File Template Wordpress Blog berada di dalam folder wp-content/themes:

imageslokasi file gambar template

404.phpfile handler untuk query yang nilaina ZERO (NULL), digunakan juga untuk HandlerCannot Find Page pada root themes

comments.phpfile template untuk proses komentar pengunjung




footer.php

file template untuk footer, disesuaikan dengan kebutuhan designer

favicon.ico

icon indentitas halaman web template

gpl.txt

GNU GENERAL PUBLIC LICENSE , sebuah lisensi dari sono nya, yang mesti lusertakan dalam folder template na

index.phpfile template utama wordpress template, konten dan proses utama kegiatan bloggingada di halaman ini, mulai post entry dan comments total.

screenshot.pngpreview theme Image berukuran 300X250 px, untuk ditampilkan di halaman Admin

WP, sebagai preview halaman na.

searchform.php

file yang bertugas mentransfer daa inputan proses searching konten blog.

sidebar.phpbiasana diletakkan di sebelah kiri atau kanan pada halaman WP Blog, untuk

menampilkan entry data Category, Meta Blog, dapat di modifikasi dengan memanggilThe Last Entry Post, dan paling sering di gunakan untuk meletakkan generate codedari Amazing Google Adsense, Links, dan Banner.

style.css

sebagain identifikasi apakah sebuah themes itu valid atau tidak, jika style inidihilangkan maka themes tidak akan berfungsi, karena secara keseluruhan WP Blog

menggunakan konsep design web modern, yakni dengan banyak menerapkan StyleDIV ID pada tag tag na.

header.phpuntuk bagian header blog, tergantung kebutuhan lu, kalo gue pada tutor ini ga guepisahin antara header dan kontent body utama blog layout na.

Fungsi Standar Template Wordpress Blog

Sedangkan fungsi standar yang di load dalam WP Blog Page na terletak di file wp-includes/template-functions-xxxxxx.php:

bloginfo('name');// fungsi: menampilkan nama Blog




wp_title();

// fungsi: menampilkan judul blog

bloginfo('version');// fungsi: menampilkan versi Wordpress Blog

bloginfo('stylesheet_url');// fungsi: memanggil root style css (default location)/rootThemes/style.css

bloginfo('rss2_url');

// rel alternative link untuk RSS 2.0

bloginfo('atom_url');// rel alternative link untuk rss+xml Atom 0.3

bloginfo('template_url');// fungsi: menampilkan lokasi url template Blog

bloginfo('pingback_url');// link Ping Back URL Blog

wp_get_archives('type=monthly&format=link');

// fungsi: struktut variable Halaman Archive Blog

bloginfo('template_directory');

// fungsi: memanggil lokasi direktori template yang akan dibuat

the_permalink();// fungsi: menampilkan Query Permanen Link untuk Post Entry

comments_popup_link(__('No Comment'), __('1 Comment'), __('%Comments'), 'commentslink', __('Comments off'));

// fungsi: menampilkan link untuk komentar, biasana diletakkan di bagian awal /akhir posting

Struktur Variable na:




comments_popup_link(__('Var_Komentar Kosong'), __('Var_Komentar = 1'),

__('Var_Query Jumlah Komentar > 1'), 'Var_Style', __('Var_Intrupsi KomentarDitutup'));

edit_post_link(__('Edit'), '', '');

// fungsi: menampilkan Link Edit Posting jika Admin sedang login dan berada dihalaman Blog (di luar halaman Admin).

Struktur Variable na:

edit_post_link(__('Var_Link Text'), 'Var_Option Start Link', 'Var_Option Ending

Link');

comments_template();

// fungsi: memanggil template halaman comments.php

get_header();// fungsi: memanggil halaman header.php

get_sidebar();

// fungsi: memanggil halaman sidebar.php

get_footer();// fungsi: memanggil halaman footer.php

wp_specialchars($s, 1); // struktur Var: wp_specialchars($query, 1);// fungsi default special karakter untuk validasi inputan WP Form template

Hmmmmmmm............ sedangkan untuk kamus Style na (CSS) ga gue jelasin,karena konsep nya sama kaya bikin style-style CSS biasa...yaaa kaya jenis font,posisi DIV Tag, besar huruf, warna dan sebagainya.

Naaaaah ..... Untuk kamus default fungsi struktur halaman WP Blog na cukup sampedisana, kalo lu mau lebih lanjut lagi, buka2 aja file2 fungsi di folder wp-includes

atau wp-adminna




Bagian2

Code Editing: Template Wordpress Blog

Pertama siapkan dulu Folder WP Theme na, misalkan dre-wg3-greendidalamnakita akan meletakkan file - file struktur halaman Template na,

Membuat index.php (load => Header, Content, SideBar)

Gue dah siapin halaman index.php yang udah di slice dan di edit di Dreamweaver ,kalo awalna berektensi index.html (dari ImageReady), Save As dulu ke index.php

Diatas merupakanpemetaan posisi fungsi standar halaman blog yang akan diload

oleh index.php. Hmmm gampang aja broo.. lu cuma cukup menyesuaikan script tag

untuk me-load fungsi - fungsi yang telah disediakan WP untuk template na, sepertiyang diuraikan pada hal. 1 tutor ini. Langsung aja bro lu ketik-ketik dah ni script na.




HEADER

Script Header ini bisa lu pisahin ke halaman header.php, dan panggil pada hal indexna dengan script tag :

? Meta TAG

Script Tag:




? Page NavigasiScript Tag:




SIDEBAR:

Tag Side bar ini hanya untuk pemanggilan saja, sedangkan uraian struktur na ada

pada halaman tutor berikutna

Script Tag:




FOOTER:

Tag Footer ini hanya untuk pemanggilan saja, sedangkan uraian struktur na ada

pada halaman tutor berikutna

Script Tag:




Bagian3


Membuat sidebar.php (load => strktur hal. SideBar)

Buat halaman php baru , save ke dalam file sidebar.php.

Struktur Defult script na, bisadi modifikasi sesuai selera makan lu, heheheh...seriusamat seeehhh... nyantai broo...!!! kakakakwww.....

Script Tag:




) :

else : ?>

Categories

Valid XHTMLValid CSSXFNWordPress




Bagian4


Membuat footer.php (load => strktur hal. Footer)

Buat halaman php baru , save ke dalam file footer.php.

Bagian in iterserah lu mau diisi apa aja, yang jelas jangan lupa cantumin linkwordpress.org, author, dan copright Template na

Script Tag:

by




Bagian5


Membuat comments.php (load => strktur hal. comments)

Buat halaman php baru , save ke dalam file comments.php.

Bagian ini bisa lu edit juga, tampilan komen entry na

Script Tag:

to ''

Subscribe to comments with




or

Date post:	19-Oct-2015
Category:	Documents
Upload:	agus-bejo-slamet-untung
View:	33 times
Download:	1 times

Tutorial Membuat Template Wordpress Blog

Documents