Install Theme di WordPress

Sebelum berbicara tentang bagaimana menginstal theme pada wordpress, mari kita definisikan terlebih dahulu apa yang kita sebut dengan theme pada wordpress. Saya mencoba membedakan theme pada wordpress dengan theme pada cms lainnya karena kita sering menemukan theme pada wordpress dapat melakukan lebih dari sekedar sebuah theme. Theme yang sering kita jumpai malah justru membuat kita kesulitan untuk membuat design web sesuai keinginan kita.

Apa theme itu sebenarnya….?

Mari kita definisikan berdasarkan WordPress Codex :

Secara fundamental sistem theme WordPress merupakan “kulit”dari webblog Anda. Namun pada kenyataan nya theme WordPress lebih dari sekedar “kulit”. “Kulit” dari sebuah webblog hanya mengisyaratkan bahwa hanya desain yang dapat berubah. Sedang theme pada wordpress dapat memberikan lebih banyak kontrol atas tampilan dan penyajian materi pada webblog anda.

Berangkat dari definisi ini, maka theme wordpress merupakan sebuah kontrol yang dapat memberikan sebuah presentasi pada situs Anda.

Apa yang dimaksud theme Lock-in..?

Ketika menginstal theme wordpress, penting untuk kita memperhatikan sebuah fitur-fitur yang ditawarkan. Theme Modern biasanya dapat mencakup lebih dari sekedar presentasi/ layout. Artinya, mereka memperkenalkan beberapa fungsionalitas.

Fungsi dapat didefinisikan sebagai sesuatu yang dapat mengubah perilaku theme Anda. Sebagai contoh, katakan lah Anda memiliki theme yang menawarkan search engine optimizatio pada setiap layar post editing. Sesuatu yang ditawarkan ini (search engine optimizatio) adalah sesuatu yang berada diluar dari sebuah presentasi/ layout (design), karena sesuatu yang ditawarkan ini berupa fungsi. Maka disini Anda telah berada pada theme Lock-in. Maksudnya apa…?? Ketika anda menginstal sebuah theme yang menawarkan lebih dari sekedar presentasi/ layout (seperti fungsi SEO diuraikan di atas), kemudian suatu saat anda ingin mengadakan perubahan design, maka yang anda harus lakukan adalah anda harus mencari sebuah theme yang juga menawarkan sebuah fungsi SEO, sebagaimana theme sebelumnya…Jika tidak maka apa yang anda bangun sebelumnya (fungsi SEO) akan hilang begitu saja.. nah pada kondisi inilah anda telah berada pada apa yang disebut dengan theme Lock-in.

Maka theme seharusnya hanya berbicara pada layout/ presentasi, bukan berbicara tentang fungsi, karena jika kita menginginkan sebuah tambahan-tambahan fungsi, maka pisahkan lah itu dari theme. Karena di dalam wordpress ada yang disebut dengan plugin (akan dijelaskan pada posting berikutnya) yang dapat menampung beberapa fungsi-fungsi tambahkan yang mungkin kita butuhkan.

Instal Theme..

Disini kita akan membahas langkah-langkah untuk dapat menginstal thema pada wordpress. Ada 2 cara yang dapat kita lakukan :

  1. Anda dapat menginstal theme di dalam dashboard wordpress.
  2. Anda dapat menginstal theme melalui S/FTP, kemudian mengaktifkan nya di dalam dashboard wordpress.

Download theme wordpress

Banyak sekali website yang menawarkan theme-theme wordpress secara gratis dan memiliki tampilan yang power full. Tetapi perlu diingat, mendownload sesuatu dengan gratis memiliki tingkat keamanan yang sangat rendah, sehingga sangat disarankan untuk memilah-milah website, sebelum anda memulai untuk mendownload theme pada website tertentu…

Instal didalam wordpress..

Untuk melakukannya, anda dapat menekan menu Appearance yang ada di dalam dashboard.

04-appearance-menuKemudian klik tombol Add New. Lalu tekan tombol upload theme. Kemudian pilihlah theme yang berada di komputer anda dengan menekan tombol Browse….Setelah selesai pengupload an file. tekan tombol install. Tunggu beberapa saat, lalu tekan active theme.

Untuk melakukan instal theme dengan cara ini, Anda harus memeliki akses ke server secara penuh. Anda harus mengetahui port, username dan password server/ hosting.  Dengan asumsi Anda sudah familiar dengan folder wp-admin dan theme pada wordpress. Jika Anda kurang paham dengan itu semua, cara ini kurang tepat untuk dilakukan.

Pertama yang Anda harus lakukan adalah mencari theme yang Anda sukai, seperti halnya cara pertama. Setelah itu upload file theme (biasanya file memiliki format zip) kedalam folder theme yang berada pada direktori wordpress Anda. Kemudian ekstrak file zip tersebut, dan akan menghasilkan direktori baru dengan nama sesuai dengan nama theme nya.

Setelah itu Anda masuk ke dashboard worpress. Tekan menu Appearance->Theme, maka theme yang telah kita upload akan muncul pada list theme. Pilih theme tersebut dan lakukan aktifasi theme.

10-activate-theme

Web dengan Jquery Bag. 1

Untuk memulainya, kita memerlukan file library jQuery, yang bisa kita dapatkan dari halaman download pada website resmihttp://www.jquery.com. The Starterkit jQuery menyediakan beberapa markup dan CSS untuk bekerja dengan. Setelah men-download dan mengekstrak isinya kita masukkan jquery.js ke dalam direktori yang kita inginkan.Sekarang kita bisa memulai dengan contoh yang sederhana, yaitu menampilkan text “Hello N2haq”. Kita mulai dengan halaman html kosong. Lakukan editing dengan editor kesayangan anda.

 <html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
   // we will add our javascript code here
 </script>
 </head>
 <body>
   <!-- we will add our HTML content here -->
 </body>
 </html>

Halaman ini hanya memuat library jquery.js (pastikan titik URL ke tempat Anda menyimpan salinan jquery! Contoh ini mengasumsikan bahwa anda menyimpannya dalam direktori yang sama dengan file ini). Dua komentar menunjukkan di mana kita akan memperluas template dengan kode.

Karena hampir segala sesuatu yang kita lakukan ketika menggunakan jQuery membaca atau memanipulasi document object model (DOM), maka  kita perlu memastikan bahwa selalu memulai dengan menggunakan fungsi ready.

Untuk melakukan ini, kita wajib menambahkan event ready pada setiap dokumen.

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello N2haq!");
   });
 });

Sekarang mari kita membuat sebuah contoh yang agak sulit. Tampilkan sebuah pesan peringatan ketika kita mengklik sebuah link.

Tambahkan baris berikut ke dalam <body>:

 <a href="">Link</a>

Sekarang tambahkan script pada fungsi $(document).ready

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello N2haq!");
   });
 });

Jika berhasil, maka ini akan menampilkan pesan setelah Anda mengklik pada link. Anda sekarang dapat menyisipkan script ini ke dalam file html Anda. Kemudian, buka file html Anda di browser dan klik link tersebut.  Anda akan melihat jendela pop-up dengan “Halo N2haq!”.

Mari kita bahas satu per satu script yang telah kita buat.

$ (“a”) adalah sebuah seleksi pada  jQuery, dalam hal ini, ia memilih semua elemen link (<a>). $ Itu sendiri adalah alias untuk “class” pada  jQuery, sehingga $ () membangun sebuah objek jQuery baru. Fungsi click () adalah metode dari objek jQuery, menjalankan fungsi yang tersedia saat event dilakukan.

Hal ini mirip dengan kode berikut:

 <a href="" onclick="alert('Hello world')">Link</a>

Perbedaannya cukup jelas, kita tidak perlu menulis onclick di setiap elemen tunggal. JQuery memiliki pemisahan antara struktur HTML dan javascript (JS), sama seperti ketika kita memisahkan script CSS.

CSS Box Shadow

CSS3 sekarang sudah mulai merembah dimana-mana dan ada beberapa alasan mengapa kita dapat mulai menggunakannya sekarang meskipun beberapa aktiva tidak sepenuhnya didukung oleh semua browser. Tapi kita masih dapat menggunakan beberapa dari nya dalam beberapa project. Box Shadow akan menjadi salah satu yang dapat kita gunakan sebagai contoh untuk mengimplementasi.

Buat sebuah sintaks berikut :

box-shadow:  4px 5px 6px #ccc; /*that’s all. It is simple isn’t it*/
-moz-box-shadow: 4px 5px 6px #ccc; /* gecko based browser */
-webkit-box-shadow: 4px 5px 6px #ccc; /* webkit based browser */

Ada empat parameter didalam properti diatas. Parameter pertama menunjukan nilai shadow pada posisi atas. Parameter kedua menunjukan shadow pada posisi kiri. Parameter ketiga menunjukan level blur pada shadow. Dan parameter yang keempat menunjukan warna dari shadow.
Inset

Contoh pertama, kita mencoba membuat outside shadow pada box. Tetapi properti ini juga dapat digunakan untuk inside shadow, berikut sintaks css nya :

box-shadow: inset 2px 2px 5px #000;
-moz-box-shadow: inset 2px 2px 5px #000;
-webkit-box-shadow: inset 2px 2px 5px #000;

Color Value

Parameter untuk warna akan lebih dipahami jika Anda telah memahami terlebih dahulu tentang parameter warna hex atau rgb. Coba kita perhatikan sintaks berikut :

/* hex value */
box-shadow: 2px 2px 5px #000;
-moz-box-shadow: 2px 2px 5px #000;
-webkit-box-shadow: 2px 2px 5px #000;

/* rgb value */
box-shadow: 2px 2px 5px rgb(000);
-moz-box-shadow: 2px 2px 5px rgb(000);
-webkit-box-shadow: 2px 2px 5px rgb(000);

/* rgba value */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

Kita juga dapat membuat sebuah multiple shadow dengan beberapa warna dalam satu box. Ini akan mempercantik tampilan website jika kita dapat memadukannya dengan baik. Berikut sintaks nya :

box-shadow: 5px 0px 2px #ccc,
	10px 0px 2px #aaa,
	15px 0px 2px #555,
	20px 0px 2px #bbb,
	25px 0px 2px #ddd;
-moz-box-shadow: 5px 0px 2px #ccc,
	10px 0px 2px #aaa,
	15px 0px 2px #555,
	20px 0px 2px #bbb,
	25px 0px 2px #ddd;
-webkit-box-shadow: 5px 0px 2px #ccc,
	10px 0px 2px #aaa,
	15px 0px 2px #555,
	20px 0px 2px #bbb,
	25px 0px 2px #ddd;