Tag Archives: php

Cara Belajar Desain Blog Dengan Efektif

roda warna - color wheelAda satu pertanyaan mendasar yang sering muncul dibenak para blogger pemula ketika sedang asiknya blog walking menjelajah blogosphere. Melihat desain blog milik teman atau orang lain yang tampak keren dan tidak standar memang bisa bikin hati iri :)

Jadi sebenarnya ada gak sih cara yang cepat, mudah dan efektif untuk belajar mendesain blog sendiri? jawabannya TIDAK ADA. Semua butuh proses. Tapi ada tips jitu dari para desainer web tentang cara belajar desain web yang efektif, mereka sudah mempraktekkannya dan berhasil.

Apa saja hal dasar yang perlu dipelajari?

Ada 4 bahasa pemrograman standar dalam web design: HTML, CSS, JavaScript dan PHP. Langkah pertama adalah Kamu perlu bisa membedakan cara penulisan dan tag dasar dari keempat bahasa tersebut, agar Kamu tidak rancu saat mengedit skrip coding dari theme blog yang Kamu gunakan.

Untuk PHP cukup pelajari cara penulisan tag sesuai dengan CMS blog yang Kamu pakai. Misalnya WordPress, sudah memiliki tag standar (Tutorial tag WordPress Bag 1, Tutorial tag WordPress Bag 2) dalam bahasa PHP yang langsung bisa Kamu gunakan tanpa perlu susah payah membuat perintahnya sendiri.

Nah, sekarang pertanyaanya pelajari yang mana dulu?

jawabannya adalah..

HTML → CSS → PHP → JavaScript

HTML ada diurutan pertama karena merupakan bahasa pemrograman utama yang WAJIB dipelajari dalam membangun sebuah halaman blog/website. Setelah halaman dasar dibangun, CSS digunakan untuk memberikan “makeup” pada halaman. Sebagai langkah awal gunakan saja tag PHP standar bawaan dari theme blog yang sudah ada. JavaScript bisa Anda pelajari untuk membuat halaman blog lebih interaktif, tapi tidak mutlak.

Bagaimana dengan proses belajarnya?

Modifikasi → Merancang → Membuat

Tidak ada salahnya untuk terlebih dahulu mempelajari coding dari theme buatan orang lain. Jika tahap modifikasi sudah tidak lagi sulit, sudah saatnya merancang desain theme buatan sendiri. Dalam tahap ini, corat-coret layout blog diatas kertas sangat membantu designer untuk membuat desain yang memiliki konsep dengan gambaran yang jelas dari pada sekedar langsung menggambar imajinasi yang ada dikepala ke layar monitor.

Pelajari hingga 50%

Jika semangat belajar lagi tinggi, semua modul pelajaran bisa dilahap sampai kenyang habis dalam sekali waktu. Ya, bisa saja dalam satu waktu Kamu mempelajari semua bahasa keempat pemrograman desain web, namun itu tidak efektif. Banyak senior menyarankan untuk mempelajari sebuah bahasa hingga 50%, lalu pelajari bahasa baru lainnya.

Belajar Web 1
Gambar 1

Belajar Web 2
Gambar 2

Jadi ketika sebuah bahasa pemrograman sudah Kamu kuasai hingga 50%, Kamu bisa melanjutkannya ke bahasa lain sehingga setahap demi setahap kamu akan menguasai semuanya karena saling berkaitan, dan begitu seterusnya. Bagi kebanyakan orang, cara ini lebih efektif ketimbang mempelajari semuanya secara bersamaan.

Selain pemrograman, Kam juga perlu belajar untuk membuat desain grafisnya. Tahap awal bisa juga untuk mengambil elemen-elemen grafis dari Internet, yang gratis pastinya :) Banyak kok website yang menyediakan desain header, tombol, dan pernak-pernik gambar untuk blog Kamu. Gunakan software grafis yang banyak penggunanya, Misal Adobe Photoshop, karena semakin banyak penggunanya, semakin banyak juga tutorial gratis yang bisa Kamu temukan di Internet.

Selamat belajar!

Ada yang mau menambahkan? ayuk

color wheel image via tigercolor.com

Membuat Halaman Single Berwarna-Warni

Sedikit curhat.. beberapa minggu yang lalu saya kembali memperbarui beberapa bug pada theme WordPress yang saya gunakan sekarang. Terutama pada penulisan CSS yang tidak valid. Setelah saya lihat-lihat dan perhatikan lagi.. sepertinya ada beberapa bagian yang kurang sesuai dengan tema yang saya pakai sekarang yaitu tampilan ala Majalah TI.

Biasanya majalah manapun akan membuat corak desain halaman yang berbeda untuk masing-masing rubrik. Paling tidak, warna tulisan dan latar halaman yang muncul pada rubrik yang satu akan berbeda dengan rubrik yang lainnya. Sedikit putar otak akhirnya saya temukan juga solusi untuk membuat halaman permalink yang dapat berubah warna sesuai dengan kategori yang telah ditentukan.

Cukup dengan memanfaatkan perintah If pada PHP dan in_category milik WordPress, kita dapat menyuruh WordPress untuk memeriksa kategori dari permalink yang dibuka oleh pengunjung kemudian menampilkan warna yang telah kita definisikan terlebih dahulu pada CSS. Agar tidak bingung silahkan download terlebih dahulu mini theme WordPress buatan saya :). Theme tersebut hanya contoh, jadi jangan gunakan pada blog Anda karena sama sekali gak ada bagus-bagusnya :).

Screenshot tampilan permalink dari berbagai kategori yang berbeda bisa Anda lihat dibawah ini (mudah-mudahan ImageCows.net gak down lagi) :

Definisi warna telah diatur oleh file Style.Css. Pada file Single.php, kunci dari pengatur warnanya adalah skrip ini:

  1. < ?php
  2. if ( in_category('1') ) {
  3. echo "<div id='head1'>";
  4. } elseif ( in_category('2') ) {
  5. echo "<div id='head2'>";
  6. } elseif ( in_category('3') ) {
  7. echo "<div id='head3'>";
  8. } elseif ( in_category('4') ) {
  9. echo "<div id='head4'>";
  10. } else {
  11. echo "<div id='head5'>";
  12. }
  13. ?>
  14. <h3>< ?php the_category(","); ?></h3></div>

Angka 1 pada in_category('1')merupakan ID dari kategori tersebut. Pada saat permalink diakses pengunjung, skrip akan memeriksa apakah artikel tersebut berada pada kategori dengan ID 1, jika benar maka style dengan ID “Head1″ akan digunakan, jika tidak maka skrip akan
kembali memeriksa apakah artikel berada pada kategori dengan ID 2, jika benar maka maka style dengan ID “Head2″ akan digunakan, begitu seterusnya.

Jika artikel bukan berasal dari kategori dengan ID 1, 2, 3, dan 4 maka style yang digunakan adalah “Head5″. Itulah sebabnya kenapa warna latar kategori 4 dan 5 sama-sama warna hijau karena warna untuk kategori 5 tidak didefinisikan. Begitu juga untuk kategori 6, 7, dan 8 akan secara otomatis menggunakan style dengan ID Head5.

Agar tidak bingung contoh nyatanya bisa Anda lihat langsung pada bagian atas halaman artikel diblog ini.

Selamat mencoba…

Tutorial desain theme WordPress: Perintah PHP di WordPress – Bagian 2

Pada artikel Perintah PHP di WordPress – Bagian 1 kita telah membahas berbagai perintah PHP standar bawaan WordPress yang perlu kita pahami sebelum membuat theme. Beberapa perintah pada file functions.php, sidebar.php, dan footer.php belum dibahas. Nah, kali ini kita coba membedah berbagai fungsi yang ada. Tanpa basa-basi lagi ayo kita mulai!

Membuat berbagai fungsi di WordPress (functions.php)

Segala macam fungsi pada WordPress baik yang standar maupun buatan Anda sendiri harus diletakkan pada file bernama functions.php. Misalnya fitur Widget pada theme harus didefinisikan/didaftarkan terlebih dahulu melalui file ini. Bagi programmer yang sudah advance mereka sering membuat berbagai fitur baru yang ‘tidak biasa’. Misalnya pada theme yang memiliki banyak file CSS untuk style, fitur untuk memilih style (bukan theme tapi file style.css) bisa langsung dilakukan melalui halaman admin tanpa perlu mengutak-atik file tersebut. Contoh lain adalah theme yang memiliki widget lebih dari 1, bahkan Anda bisa membuat widget hingga 3 sekaligus dalam satu theme.

Kali ini file functions.php yang coba kita bedah hanya yang standar saja. Contoh dari functions.php adalah sebagai berikut.

  1. < ?php
  2. if ( function_exists('register_sidebar') )
  3. register_sidebar(array(
  4. 'before_widget' => '<li>',
  5. 'after_widget' => '</li>',
  6. 'before_title' => '<h2>',
  7. 'after_title' => '</h2>',
  8. ));
  9. ?>

LETAK SKRIP: Hanya ada pada file functions.php.

DEFINISI:

Skrip diatas adalah contoh sederhana bagaimana cara mendaftarkan widget pada sidebar di WordPress.

'before_widget' => '<li>',
'after_widget' => '</li>',

Setiap fitur WordPress yang Anda daftarkan melalui widget akan diapit oleh tag <li> dan diakhiri oleh tag </li>. Tag LI (List Item) biasa digunakan untuk mengelompokkan. Sehingga secara otomatis akan ada jarak antara fitur yang satu dengan yang lain.

'before_title' => '<h2>',
'after_title' => '</h2>',

Setiap NAMA fitur WordPress yang ditampilkan pada sidebar akan diapit oleh tag heading <h2> dan diakhiri oleh tag </h2>. Tag heading biasa digunakan pada judul. Anda juga bisa kok menggunakan H1-H6.

Membentuk Sidebar (sidebar.php)

Pada umumnya skrip dasar dari sidebar sebuah theme WordPress adalah sebagai berikut.

  1. < ?php
  2. if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  3. < ?php wp_list_pages(); ?>
  4. < ?php wp_list_categories(); ?>
  5.  
  6. <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
  7. <input type="text" name="s" id="s" size="15" /><br />
  8. <input type="submit" value="Search" />
  9. </form>
  10.  
  11. < ?php wp_get_archives('type=monthly'); ?>
  12.  
  13. <li>< ?php wp_register(); ?></li>
  14. <li>< ?php wp_loginout(); ?></li>
  15. <li><a href="<?php bloginfo('rss2_url'); ?>">Langganan RSS</a></li>
  16. <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Langganan Komentar</a></li>
  17.  
  18. < ?php endif; ?>

LETAK SKRIP: Biasanya hanya ada pada file sidebar.php. Tidak menutup kemungkinan juga digunakan pada file lainnya.

DEFINISI:

<?php
if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar() ) : ?>
/* skrip dipotong */
<?php endif; ?>

Memeriksa apakah ada widget yang diaktifkan. Jika Ya, maka sidebar akan menampilkan berbagai widget secara dinamis sesuai dengan urutan dan widget yang diaktifkan. Jika tidak maka berbagai perintah PHP yang diapit oleh skrip diatas (ditandai oleh /* skrip dipotong */) akan dijalankan.

<?php wp_list_pages(); ?>
Menampilkan daftar halaman.

<?php wp_list_categories(); ?>
Menampilkan daftar kategori artikel.

<form id="searchform" method="get"
action="<?php bloginfo('home'); ?>">
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="Search" />
</form>

Sebenarnya ini cuma skrip untuk membuat kotak pencarian. Hasil pencarian dari kata kunci yang dimasukkan akan diarahkan oleh skrip <?php bloginfo('home'); ?> yang menuju kehalaman homepage (index.php).

<?php wp_get_archives('type=monthly'); ?>
Menampilkan arsip posting dalam bentuk bulanan. Anda bisa menggantinya dengan bentuk daily (harian), postbypost (perpost dari posting terbaru), dan weekly (mingguan). Anda juga bisa membatasi jumlah posting yang ingin ditampilkan. Cukup dengan menambahkan perintah &limit=jumlah. Misal untuk menampilkan arsip dengan tipe bulanan sampai dengan 5 bulan, skripnya adalah <?php wp_get_archives('type=monthly&limit=5'); ?>.

<?php wp_register(); ?>
Menampilkan link yang mengarah kehalaman login blog. Jika sudah login maka link akan langsung menuju halaman Dashboard.

<?php wp_loginout(); ?>
Sesuai dengan namanya, berfungsi untuk menampilkan link logout dari user Anda.

<?php bloginfo('rss2_url'); ?>
Menampilkan link untuk berlangganan RSS dari artikel.

<?php bloginfo('comments_rss2_url'); ?>
Menampilkan link untuk berlangganan RSS dari komentar.

Sebenarnya masih ada banyak fungsi lainnya. tapi karena sudah ada widget Anda tidak perlu bersusah payah menuliskan skripnya. Cukup memasukkan widget dengan drag n drop melalui dashboard Anda bisa dengan mudah mengaturnya.

Membentuk footer (footer.php)

Tidak ada yang spesial dari footer karena biasanya hanya sebagai tempat untuk menampilkan hak cipta serta informasi tambahan lain seputar blog. Namun footer bukan hal yang sepele. Ada beberapa hal yang tidak boleh Anda lupakan. Pada saat mendesain header.php kita telah menuliskan tag HTML <html> dan <body>. Kedua tag tersebut belum ditutup maka tugas footer adalah menutupnya, karena jika tidak maka isi desain blog tidak akan muncul. Berikut contoh sederhana dari footer.

  1. < ?php wp_footer(); ?>

LETAK SKRIP: Hanya ada pada file footer.php

DEFINISI:

<?php wp_footer(); ?>
Fungsinya sama dengan <?php wp_head(); ?> pada header.php. Bisa dikatakan sebagai identitas untuk menandai file tersebut sesuai dengan fungsinya.

Ingin lebih banyak?

Semua penjelasan yang ada pada artikel ini menggunakan kata-kata saya sendiri, jadi mohon maklum ya kalau ada yang penjelasan yang kurang detail, lengkap, dan akurat hehehe… Kalau Anda ingin penjelasan lebih lanjut tentang SEMUA perintah dan fungsi WordPress, maka WordPress Codex merupakan tempat belajar WordPress terbaik dibanding situs/blog manapun.

Artikel berikut akan membahas tips dan trik saat menggunakan perintah-perintah yang telah Anda pelajari. Akhir kata.. Selamat Belajar!

Jangan lupa berlanggan dan komentar ya! ayuk