Upload
agus-bejo-slamet-untung
View
33
Download
1
Tags:
Embed Size (px)
DESCRIPTION
TUTORIAL-MEMBUAT-TEMPLATE-WORDPRESS-BLOG
Citation preview
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"
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
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
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
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
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
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:
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
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
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
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.
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
HEADER
Script Header ini bisa lu pisahin ke halaman header.php, dan panggil pada hal indexna dengan script tag :
? Meta TAG
Script Tag:
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
? Page NavigasiScript Tag:
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
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
SIDEBAR:
Tag Side bar ini hanya untuk pemanggilan saja, sedangkan uraian struktur na ada
pada halaman tutor berikutna
Script Tag:
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
FOOTER:
Tag Footer ini hanya untuk pemanggilan saja, sedangkan uraian struktur na ada
pada halaman tutor berikutna
Script Tag:
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
Bagian3
Code Editing: Template Wordpress Blog
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:
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
) :
else : ?>
Categories
Valid XHTMLValid CSSXFNWordPress
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
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
Bagian4
Code Editing: Template Wordpress Blog
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
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
Bagian5
Code Editing: Template Wordpress Blog
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
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
or
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
Leave a Reply
You must be
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
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
Wow , sampe sini dah beres strktur file dan script tag template WP baru lu.. tinggal
lu packing, dan kopiin ke folder:
RootWP/wp-content/themes/nama-folder-template/
Wah selesai juga tutor na.. hehe.. gue berharap banget tmen2 bisa merespon diforum tanya jawab dr.emi
Wassalam, hairul azami
Secangkir kopi hangat disaat merenung:......
(dibuat pas lagi kecewa ma kerjaan yg sekarang dikantor, judulna :'Percuma Kerja Rajin, Bisa Segala Rupa, Kalo Ga di Hargaii...Huh Saat saat yang
membosankan.., Tapi gue coba bertahan dulu dah...') ..