Tutorial Cara Membuat Theme WordPress Sendiri - Full Tutorial

Full description...
Author:  Yassinta Selvia Aisyah
2 downloads 467 Views 2MB Size
Report
DOWNLOAD .PDF

Recommend Documents

Membuat Menu WordPress Dengan Bootstrap – ONPHPID TutorialFull description
Cara Membuat Mic Boom SendiriFull description
oke
ronce manik-manikFull description
Maml Tutorial, How to make miui's themes? it very easy, this book contains functions about MAML and other thing to build MIUI Theme
Cara membuat abstrak
Full description
Manual de wordpress.com versión 3.x http://www.akoranga.org/general/2011/11/manual-tutorial-de-wordpress-3Descripción completa
Maml Tutorial, How to make miui's themes? it very easy, this book contains functions about MAML and other thing to build MIUI ThemeFull description
Full description
Vray 3.4 for sketchup
Deskripsi lengkap
Descripción: Vray 3.4 for sketchup
Full description
Full description
Deskripsi lengkap
Sabun mandi bikinan sendiri
Cara Membuat Ramuan Gurah Sendiri Di Rumah
Share Info Sehat AlamiFull description
Deskripsi lengkap
71 72

style.css 001 /* 002 003 Theme Name: Theme Latihan 004 Theme URL: http://www.bloggingly.com 005 Description: Theme untuk latihan 006 Version: 0.1 007 Author: Nama Saya 008 Author URL: http://namabloganda.com 009 Tags: red, fixed width, two columns, widget ready 010 011 Theme ini di desain oleh Nama Anda 012 013 */ 014 015 body{ 016 margin:0px; 017 font-family: Verdana,Arial,Helvetica,sans-serif; 018 color: #333; 019 font-size:11.4px; 020 line-height:1.58em; 021 vertical-align: baseline; 022 background:#D0BFA5; 023 } 024 025 #kontainer{ 026 width:780px; 027 margin:0 auto 0 auto; 028 } 029

030 #dalamkontainer{ 031 float:left; 032 padding:10px; 033 width:760px; 034 background:#fff; 035 } 036 037 #kepala{ 038 float:left; 039 width:740px; 040 padding:10px; 041 background:#7F663F; 042 color:#fff; 043 } 044 045 #menuatas{ 046 width:760px; 047 float:left; 048 color:#fff; 049 background:#5F3C00; 050 } 051 052 #menuatas ul{ 053 list-style:none; 054 margin:0; 055 padding:0; 056 } 057 058 #menuatas ul li{ 059 float:left; 060 display:inline; 061 padding:5px 10px 5px 10px; 062 margin:0; 063 border-right:1px solid #e2e2e2; 064 } 065 066 #badan{ 067 float:left; 068 width:500px; 069 } 070

071 #barsisi{ 072 float:left; 073 width:240px; 074 padding:10px; 075 margin:10px 0 0 0; 076 background:#efefef; 077 } 078 079 #barsisi li{ 080 list-style:none; 081 } 082 083 #barsisi li ul{ 084 padding:0px; 085 list-style:asterix; 086 } 087 088 #barsisi li ul li { 089 margin:0 0 0 15px; 090 } 091 092

/* ----------------------------------Begin Images--------------------------------*/

093 p img { 094 padding: 0; 095 max-width: 100%; 096 } 097 098 img.centered { 099 display: block; 100 margin-left: auto; 101 margin-right: auto; 102 } 103 104 img.alignright { 105 padding: 4px; 106 margin: 0 0 2px 7px; 107 display: inline; 108 } 109 110 img.alignleft { 111 padding: 4px;

112 margin: 0 7px 2px 0; 113 display: inline; 114 } 115 116 .alignright { 117 float: right; 118 } 119 120 .alignleft { 121 float: left 122 } 123 /* End Images */ 124 /* -----------------------------------------Captions--------------------------------*/ 126 .aligncenter, 125

127 div.aligncenter { 128 display: block; 129 margin-left: auto; 130 margin-right: auto; 131 } 132 133 .wp-caption { 134 background-color:#EAE9E9; 135 text-align: center; 136 padding-top: 4px; 137 margin: 10px; 138 -moz-border-radius: 5px; 139 -khtml-border-radius: 5px; 140 -webkit-border-radius: 5px; 141 border-radius: 5px; 142 } 143 144 .wp-caption img { 145 border:0; 146 margin: 0; 147 padding: 0; 148 } 149 150 .wp-caption p.wp-caption-text { 151 font-size: 11px; 152 line-height: 17px;

153 padding: 0 4px 5px; 154 margin: 0; 155 } 156 /* End captions */ 157 158 a, a:visited{ 159 color:#CF830C; 160 text-decoration:none; 161 } 162 163 a:hover{ 164 text-decoration:underline; 165 }

NEXT…………

Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #6 : Merapihkan Styling CSS ) oleh Fikri

Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :      

Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan Langkah #1 : Memahami Struktur File Theme WordPress Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css Langkah #4 : Memuat Konten Blog Ke Dalam Theme Langkah #5 : Mendesain Theme Menggunakan CSS

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress lokal anda ( http://localhost/wordpress/ ).

Well, sudah 6 langkah. langkah selanjutnya apa? Sebenarnya kami ingin terus lanjut ke langkah membuat file theme lain berdasarkan index.php sesuai dengan hirarki theme wordpress. Tapi sebelum masuk ke langkah itu, tadi kami mencoba mengakses tampilan latihantheme pada dua browser yang berbeda : FireFox ( yang kami wanti – wanti anda untuk gunakan untuk mendesain web ), dan Internet Explorer ( Browser “ajaib”. ahaha ), dan kami menyadari bahwa ada yang harus kita selesaikan *halah* terlebih dahulu :

Merapihkan Styling CSS latihantheme Jadi begini. Di jagat internet, setidaknya ada 4 jenis browser yang paling sering digunakan : Internet Explorer (IE ), Mozilla Firefox ( FF ), Opera, dan Safari. Browser yang paling banyak digunakan adalah Internet Explorer. lebih dari 70% pengakses internet menggunakan IE sebagai browsernya. Sisanya, menggunakan Firefox, Opera, dan Safari.

Masalahnya adalah : Terkadang, tampilan website yang menggunakan CSS berbeda jika diakses menggunakan satu browser dan browser lainnnya. Hal ini disebabkan karena setiap browser menggunakan “caranya masing – masing” dalam memahami definisi CSS. Note : buka wordpress lokal anda yang menggunakan latihantheme di Firefox dan Internet Explorer. Dapat perbedaannya? See? ada beberapa perbedaan yang muncul ketika latihantheme diakses menggunakan FireFox dan Internet Explorer. Well,setelah kami analisa, ketidak rapihan ini ternyata disebabkan oleh objek yang ID atau CLASS nya belum di definisikan. Maka dari itu, browser otomatis memberikan nilai default pada ID dan CLASS tersebut. Masalahnya adalah : nilai default tiap browser berbeda Oke, ini perbedaan latihantheme yang diakses menggunakan IE :    

title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran. blog title kebesaran konten list item pada sidebar “terlalu menjorok ke dalam”. Title widget yang beda ukuran

mari atasi yang satu ini sekarang

title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran. Masalah tabrak menabrak antar baris ini terjadi karena line-height title post mengikuti line-height yang kita set untuk . Cara Mengatasinya : ketik / copypaste kode ini ke style.css 1 .post h2{ 2 line-height:1.2; 3 font-size:20px; 4}

problem solved. Refresh browser anda

blog title kebesaran Menyelesaikan masalah ini cukup mudah juga. Ketik / Copypaste kode ini : 1 #kepala h1{ 2 font-size:20px;

3 margin:10px 0 10px 0; 4}

konten list item pada sidebar “terlalu menjorok ke dalam” cari #barsisi li ul{}. tambahkan margin:0; sehingga jadi seperti ini : 1 #barsisi li ul{ 2 padding:0px; 3 margin:0; 4}

Title Widget beda ukuran ketik / copypaste kode ini ke style.css 1 .widgettitle{ 2 font-size:20px; 3 margin:10px; 4}

Hoho, sekarang baik di IE atau di FF tampilannya sudah rapih. Pada post selanjutnya kita bisa meneruskan pembahasan kita pada langkah selanjutnya.

NEXT……………

Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #7 : Melengkapi File Theme ) oleh Fikri

Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :       

Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan Langkah #1 : Memahami Struktur File Theme WordPress Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css Langkah #4 : Memuat Konten Blog Ke Dalam Theme Langkah #5 : Mendesain Theme Menggunakan CSS Langkah #6 : Merapihkan Styling CSS

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress lokal anda ( http://localhost/wordpress/ ). Seperti yang sudah kami sebutkan pada langkah #1, mengenai struktur file Theme WordPress : Theme wordpress terdiri dari berbagai file. Pada 7 langkah sebelumnya, kita telah menghasilkan 3 file inti dari theme wordpress : index.php, style.css, dan function.php. Pada post kali ini, kita akan membuat file yang lainnya : header.php, comment.php, single.php, page.php, archive.php, dan search.php.

Sebentar, sepertinya ada yang terlewat. Bagaimana dengan footer.php dan home.php? Well, karena pada latihantheme ini kita tidak menampilkan footer apapun, maka tidak kita butuhkan file footer.php ini. Sedangkan untuk home.php, karena settingan index.php sudah

sesuai dengan apa yang kita butuhkan tampilan halaman depan, maka kita tidak membutuhkan home.php untuk latihantheme. Ok, Langsung saja kita bahas satu persatu. buka browser dan akses localhost/wordpress, dan buka index.php menggunakan notepad ++.

membuat header.php header.php merupakan file untuk mendefinisikan data – data pada header, lalu digunakan secara bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam. persis seperti konsep style.css : satu file yang mendefinisikan seluruh halaman, maka dari itu dibuat dalam file tersendiri, dan digunakan secara bersama – sama. tujuannya? agar tampilan seragam. begitu pula dengan header. Kalau kita analisa, apa sih yang membedakan halaman ( yang standar y ) home, post, page, tag dan categories? hanya kontennya. Sidebar, header dan footernya sama. Maka dari itu, dari pada menduplikasi konten file, lebih baik tampilan yang sama ditulis dalam satu file terpisah dan script tersebut digunakan secara bersamaan oleh semua file. Enough for the theory. Sekarang praktek : 1. buka file baru pada notepad ++. 2. buka file index.php. select kode dari baris sesudah tag <meta http-equiv=”ContentType” content=”text/html; charset=iso-8859-1″> hingga
, lalu tekan CTR + X alias cut. 3. Paste script yang tadi di cut ke file baru notepad++, lalu save dengan nama header.php 4. Kembali ke file index.php. pada bagian yang tadi kita pindahkan scriptnya ke header.php, ketik / copypaste kode ini : Penjelasan : merupakan tag wordpress yang berfungsi untuk meLOAD seluruh script yang terdapat pada file header.php OK, sekarang, file header.php beres

Membuat comment.php comment.php merupakan “kerangka” dari tampilan komentar : apa yang akan ditampilkan jika ada komentar, apa yang akan ditampilkan jika tidak ada komentar, dan apa yang ditampilkan jika sistem komentar blog anda membutuhkan pengunjung login terlebih dahulu. Sistem komentar yang akan kita gunakan ini saya ambil dari kerangka kubrick. Theme default bawaan wordpress. Buat file baru pada notepad ++, copy paste script berikut dan save dengan nama comments.php :

001 post_password)) { // jika ada password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // 006 dan passwordnya tidak sesuai dengan cookie, yang artinya pengunjung sedang tidak login. script ini yang akan muncul 007 ?> 008 009

Post ini di kunci. masukan password untuk membaca post ini



010 011 019 020 021 022 023

to “”



024 025
    026 027 028 029
  1. id="comment-"> 030 031 Says: 032 comment_approved == '0') : ?> 033 Your comment is awaiting moderation. 034 035
    036 037 "

    title=""> at     038 039 040 041
    2. 042 043 047 048 049 050
051 052



053 054 comment_status) : ?> 055 056 057 058 059

Tidak Menerima Komentar.

060 061 062 063 064 comment_status) : ?> 065

Berikan Komentar Anda

066 068 067

You must be /wp069 login.php?redirect_to=">logged in to post a comment.

070 071 072 073

method="post" id="commentform"> 074 075 076

Logged in as /wpadmin/profile.php">. /wp-login.php?action=logout" title="Log out of this account">Log out »

078 079 080

/>

083

/> 085



086

088

087

089 090 091 092



093 094



095 096



097 098

099 ID); ?> 100 101
102 103
login ?> 104 105

Wow. cukup panjang bukan? kami tidak akan menjelaskan perintah2 yang terdapat pada comments.php karena itu akan membuat post ini menjadi terlalu panjang. Namun ketika anda sudah men-savenya di notepad ++ nanti, anda akan dapat melihat penjelasan dari tag, yang kami buat di file comments.php ( berwarna hijau )

Membuat single.php single.php adalah file yang mendefinisikan apa saja yang akan di tampilkan pada halaman post ( halaman post adalah halaman yang menampilkan post dan komentarnya ). ketika anda mengakses halaman post, file ini yang digunakan sbagai kerangka halaman tersebut. Langsung saja langkahnya : 1. buat file baru di notepad ++ 2. copypaste semua konten index.php ke file baru tersebut, lalu save dengan nama single.php 3. hapus tag . mengapa dihapus? karena pada post, metadata tentang jumlah komentar tidak akan ditampilkan 4. ganti tag
dengan

5. setelah tag yang tadi kita save, ketik / copypaste tag ini :
TEPAT SETELAH TAG YANG BARU KITA GANTI TADI lalu save. single.php beres Penjelasan :   

Tag pada poin ke 3 merupakan perintah untuk menampilkan jumlah komentar Tag pada poin ke 4 merupakan link ke post selanjutnya dan post sebelumnya, dengan link berupa judul post tag pada poin ke 5 merupakan perintah untuk me load comments.php pada halaman yang ada

Membuat page.php page.php adalah file yang mendefinisikan apa saja yang akan ditampilkan pada halaman statis ( page ) wordpress. contoh : halaman about me. Ok, langsung saja langkah pembuatannya : 1. buat file baru di notepad ++ ( ctr + n )

2. copypaste semua konten single.php ke file baru tersebut, lalu save dengan nama page.php 3. hapus tag . Mengapa dihapus? karena halaman statis wordpress tidak memiliki category dan tags 4. ganti
dengan Pages: ‘, ‘

’, ‘number’); ?> 5. Save. page.php beres. Penjelasan :   

tag merupakan tag untuk memanggil category dari post tag merupakan tag untuk memanggil tags dari post tag pada poin ke 4 merupakan tag untuk memanggil link jika halamana post di “break this post”

Membuat archive.php archive.php adalah file yang mendefinisikan apa saja yang akan ditampilkan pada bagian archive, tag, dan category. Lankah cukup sederhana : 1. buat file baru di notepad ++ ( Ctr + N ) 2. copypaste semua konten index.php, ingat y, index.php, ke file baru tersebut. Lalu save dengan nama archive.php 3. ganti tag dengan 4. Save. archive.php beres Penjelasan : 

tag pada poin ke 3 merupakan tag untuk memanggil excerpt / ringkasan dari post yang dimaksud

Membuat search.php search.php adalah file yang mendefinisikan apa – apa yang tampil pada halaman “hasil pencarian”. Well, yang satu ini cukup mudah : 1. buat file baru di notepad ++ ( Ctr + N ) 2. Copypaste semua konten archive.php, lalu save dengan nama search.php 3. ketik / copypaste tag

Hasil Pencarian Untuk “”

tepat setelah tag 4. Ganti tag ini :
  • Check the spelling of the address you typed
  • If you are still having problems, please contact us
    • ”); ?> dengan “”

    search.php beres Penjelasan : tag pada poin ke 3, merupakan tag untuk memanggil keyword yang digunakan untuk pencarian tag pada poin ke 4 merupakan tag untuk memanggil kalimat yang disetting untuk keluar jika pencarian tidak menghasilkan apa – apa

    Membuat screenshot latihantheme Agar sebuah theme memiliki preview ketika di lihat dari dashboard admin wordpress, Sebuah theme perlu memiliki sebuah file image bernama snapshot dengan ukuran 300 X 250 piksel. jenis file bisa .png, jpg, atau gif. Kami mengcapture tampilan latihantheme menggunakan add ons firefox bernama screengrab, lalu meresizenya menggunakan microsoft office picture manager, lalu di letakan di direktori latihantheme. Yup, Sesederhana itu. *** Wohooo!!! akhirnya selesai sudah Seri Tutorial Cara Membuat Theme WordPress Sendiri ini. Satu pekan yang panjang eh? Beberapa dari anda mungkin merasa bahwa panduan yang disajikan oleh seri tutorial ini tidak lengkap. Well, dengan senang hati saya mengatkana bahwa ya, memang benar seri tutorial ini sengaja hanya menampilkan dasarnya saja. Mengapa? karena kebutuhan tiap orang akan theme wordpress berbeda. Maka dari itu, seri ini hanya menampilkan dasarnya saja.

    Lalu, jika saya ingin menampilkan sesuatu pada theme saya dan saya belum tahu caranya serta tidak dibahas pada tutorial ini bagaimana dong? Pertanyaan bagus. Cara yang saya gunakan untuk mengatasi ini : cari theme yang secara struktur menampilkan apa yang kita butuhkan, lalu download theme tersebut. Setelah di download, “bedah” theme tersebut, dan cari tahu tag / script apa yang digunakan theme tersebut untuk menampilkan konten2 tertentu. atau, mungkin kami bisa membantu? silahkan kontak melalui contact form saja. Anyway, hasil dari tutorial membuat theme ini, anda bisa download latihantheme disini : [Download not found]

    P.S. : Kalau menemukan bug, tolong di laporkan ke bloggingly y! thanks

    Ok, Tutorial cara membuat theme wordpress sendiri SELESAI sampai disini. Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar Enjoy!

    FINISH……….