Download Themes WordPress AboutTiyo.web.ID di GitHub

Beberapa hari yang lalu saya menerima mention di twitter @abouttiyo dari seseorang yang minta ijin untuk clone themes yang saya pakai. Saya jadi heran, download themes WordPress blog AT ini sudah saya umbar sejak lama di GitHub, kenapa masih perlu minta ijin dan susah – susah membuat clone sendiri :D

Sudah sejak beberapa bulan lalu themes blog yang sekarang saya pakai ini bisa didapatkan source codenya dari sana, saya juga sebenarnya tidak banyak melakukan perubahan terhadap themes underscores yang menjadi starter themes saya dalam memulai men-design themes ini.

Adapun preview dari themes yang saat ini ada di github adalah seperti ini;

Download Themes WordPress AboutTiyo.web.ID

Perubahan Themes WordPress AT dari Underscores.me

Beberapa perubahan yang saya lakukan pada themes blog ini dari Underscores terutama pada tampilannya saja, namun daftar lebih banyak perubahan itu antara lain adalah sebagai berikut;

Customisasi utama dari Underscores yang ada di themes ini bisa ditemukan di theme.css yang menjadikan warna, ukuran dan semuanya berbeda dari themes asli.

Perbedaan dengan yang saat ini saya pakai

Ada juga sedikit perbedaan dari themes yang sekarang ada di sini dan disana, yang sekarang kamu lihat disini jenis hurufnya sudah saya ganti dengan font lainnya yang lebih enak dibaca karena menggunakan jenis font sans-serif yang tidak menggunakan lekuk – lekuk rumit.

Kalau sebelumnya body copy dari blog ini menggunakan font ‘Rosario’, sekarang saya menggunakan font yang disebut dengan ‘Muli’ sebenarnya mudah saja untuk mengganti font ini, tapi demi membedakan antara blog saya dengan orang lain yang menggunakan themes saya saya tidak menggantinya dengan font terbaru ini :P

Kalau kamu mau melakukan perubahan yang sama tentang jenis font yang berbeda ini, bisa juga dilakukan dengan mengganti baris ke 23 di header-php dan baris ke-10 di themes.css dengan jenis font yang kamu kehendaki.

 Download  Themes WordPress AboutTiyo?

Kalau kamu mau mencoba themes yang saya pakai ini, bisa coba download themes WordPress AboutTiyo.web.ID ini sekarang. Saya tidak menuntut apa – apa dari kamu, kalau kamu sekedar ingin mengucapkan thanks silahkan di komentar. Kalau mau tanya dan ingin ikut mengembangkan juga silahkan lakukan edit versi kamu lalu submit commit ke saya ya nanti :)

VMSTUD Plat HD 11 Sony Creative Software Inc.

Menggunakan Web Fonts untuk Mempercantik Blog

Menggunakan Web Fonts adalah salah satu cara kita untuk menampilkan blog kita dengan lebih konsisten. Konsisten dalam artian tampilan hurufnya akan sama, karena dengan menggunakan web fonts huruf yang kita pakai di blog adalah huruf yang ada di Internet.

Dengan menggunakan web fonts kita tidak harus memakai fonts yang ada di komputer/gadget pembaca blog kita. Jadi, andaikan komputer yang digunakan user adalah sebuah MacOSX, Windows 98 atau Windows 8, Fedora Linux atau Ubuntu, tampilan huruf di blog kita akan sama.

Mudeng? Anggap saja demikian ya :D

Penting ya menggunakan web fonts itu?

Penting nggak peting juga sih, tergantung kita maunya bagaimana, kalau mau blog tampilan hurufnya kosisten ya tidak ada pilihan lain. Tapi ada juga konsekuensinya, yaitu loadingnya akan nambah lama, entah itu seper sekian ribu detik (mili seconds). Berbeda dengan saat kita pasrahkan untuk menggunkan jenis huruf lokal di komputer, misal untuk teks kita pakai “serif” dan untuk heading kita pakai “Sans-serif“.

Menggunakan Web Fonts

Terlepas dari itu semua, saya sendiri melihatnya sebagai sebuah trend yang sudah sangat umum dipakai, bahkan kamu secara sadar atau sadar, baik menggunakan WordPress.com atau Blogger sudah pernah menggunakannya juga sebelumnya. So, menggunakan web fonts is penting banget, titik, dilarang protes lagi :P

Bagaimana cara menggunakan web fonts?

Kalau kamu menggunakan WordPress.com saya rasa tidak bisa menggantinya sendiri. Kalau kamu menggunakan WordPress Self-hosted seperti saya disini atau juga blogspot, menggunakan web fonts bisa dicoba.

Tapi sebelum melangkah, saya sampaikan, kalau kamu tidak terbiasa dengan mengedit HTML dan CSS, anda perlu perhatian ekstra, biar tidak salah nanti prakteknya.

Kita juga tidak akan menggunakan web fonts yang disediakan Google saja, walaupun memang koleksinya paling banyak, tapi pengguna Google Web fonts juga tidak kalah banyak. Walau resource dan server Google ada dimana – mana, tidak menutup kemungkinan karena saking banyaknya loading fonts dari sana lebih lama. Masih ada penyedia web fonts lainnya seperti Adobe® Edge Web Fonts, Fonts.com dan myfonts.comwebink.com dan masih banyak lagi.

Cara memasukkan web fonts dalam halaman blog;

Dalam memasukkannya, rata – rata sama, walau ada sedikit perbedaan, tapi prinsip dasarnya ada dua langkah, yaitu memanggil webfonts itu dari servernya, lalu mengaplikasikannya dalam CSS themes yang kita pakai.

Kode untuk memanggil web fonts dari servernya, gunakan salah satu cara dari ketiga metode berikut;

<link href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//use.edgefonts.net/rosario:n4,i4,n7,i7;league-gothic:n4.js"></script>
@import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs);

Untuk baris pertama dan kedua itu dimasukkan dalam header blog (diantara tag <head> dan tag </head>) lalu yang ketiga dengan dimasukkan dalam file CSS themes kita. Pada contoh itu yang pertama menggunakan Google Web Fonts (CSS), yang kedua menggunakan Adobe Edge Web Fonts (JavaScript).

Sedang cara ketiga kita masukkan di stylesheet (CSS) dari themes yang kita pakai. Biasanya dimasukkan di awal file.

Sedang untuk menggunakan web fonts itu, kita masukkan dalam property CSS kita seperti berikut. misal ini untuk mengatur jenis font di heading dan paragraf.

//heading
h1, h2, h3, h4 {font-family: 'Mouse Memoirs', sans-serif;}
//paragraf
p{font-family:'Rosario', serif;}

Perbedaan penyedia web fonts

Untuk Google Web fonts dan Adobe memberikan layanan untuk menggunakan web fonts ini secara cuma – cuma. Meski Adobe mempunyai produknya yang serupa tapi berbayar, typekit. Typekit, bisa dicoba untuk 1 website dengan 2 fonts, jumlah view per bulan dibawah 25.000.

Sedang Fonts.com dan saudaranya myfonts.com memeberi peluang untuk mencoba layanannya dengan free account, dengan batas maksimal 25.000 page view dalam sebulan. WebInk di lain sisi memberikan peluang dengan lebih banyak view, karena WebInk membatasi hingga 25.000 Visitor, bukan viewer halaman.

Kebanyakan website penyedia web fonts tersebut juga bisa kita gunakanuntuk berburu font gratis, walau ada font yang berbayar sekalipun, dalam satu keluarga/bundling ada versi yang gratis juga, katakanlah keluarga Museo.

Web fonts apa yang saya pakai?

Sebelum menulis posting ini, saya dari kemarin sudah mencoba – coba bereksperimen untuk menggunkan web fonts yang berbeda dari yang sebelumnya saya pakai. Kalau sebelumnya saya menggunakan web fonts dari Google, sekarang saya mencoba web fonts dari Adobe.

Saya tahu ini adalah sebuah toturial basic, singkat dan kurang detil. Tapi tujuan utama posting ini memang untuk pengenalan dan juga membuka wawasan bagi yang sudah tahu, kalau penyedia web fonts itu ternyata sekarang makin banyak.

Kalau ada yang tertarik sah – sah saja nanti ditanyakan di komentar kok :)

Widget Visibility WordPress, Sebuah Tutorial Singkat

Widget visibility WordPress, atau kenampakan widgets adalah sebuah fitur yang sangat berguna untuk mengatur tampilan sebuah widgets/sidebar pada blog. Dengan widgets visibility yang saya tahu keberadaannya setelah WordPress 3.6 ini kita bisa memunculkan dan menyembunyikan sebuah widget hanya pada keadaan tertentu saja.

Contohnya adalah seperti widgets rekomendasi hosting terbaik Indonesia yang berada paling tas di sidebar blog ini. Widget itu hanya muncul pada halaman posting, berarti saat single.php dari themes yang dipakai. Jika anda berada selain di artikel tunggal, katakanlah halaman web design murah, kategori personal dan tag web hosting terbaik indonesia, widget itu tidak akan terlihat.

Mengatur Widget Visibility WordPress

Widget Visibility WordPressCaranya memunculkannya sangat sederhana, karena bisa langsung kita temukan dengan meng-klik tombol visibility yang ada di samping tombol save untuk setiap wdget yang ada di WordPress. Yang sedikit tricky adalah penggunaannya :)

1. Memunculkan widget pada posting saja

Widget Visibility WordPress - Muncul di Posting

Untuk memunculkan sebuah widget pada semua posting, tentunya yang pertama anda memilih show pada pilihan logikanya, lantas pilih page dan is tulisan. Dalam Bahasa Indonesia berarti kita meminta WordPress menampilkan widget jika halaman yang dimunculkan berupa tulisan.

Kalau anda ingin menyembunyikannya, maka tinggal dibalik logikanya jadi hide.

2. Memunculkan Widget pada kategori tertentu

Widget Visibility WordPress - muncul pada kategori

Pertama kali menyembunyikan widget itu pada halaman arsip nampaknya bagus, bisa mengurangi jumlah link pada halaman. Tapi ternyata widget itu sangat sesuai jika pengunjung melihat kategori tentang blogging di blog ini, maka untuk memunculkannya saya bisa menambahkan aturan baru seperti di atas.

Selain page (halaman yang dimuat) dan kategori, ada pula logika yang berkaian dengan arsip author, tag dan tanggal (arsip harian, bulanan, tahunan), semua bergantung imaginasi anda!

Manfaat Widget Visibility WordPress

Lantas kalau begitu bagaimana cara mengunakan fitur iin dengan baik? Pertanyaan bagus. Banyak tujuan yang bisa kita capai dengan kemampuan widgets visibility WordPress ini.

1. Meningkatkan on page SEO Blog

Salah satu faktor on page SEO yang bagus adalah jumlah link sebuah halaman yang tidak lebih dari 200 buah, ada yang bilang antara 100-150. Dengan menggunakan widgets visibility WordPress saya menyembunyikan widgets tersebut untuk mengurangi jumlah yang ada di halaman arsip, kenapa?

Karena halaman arsip seperti kategory dengan 7 posting akan memiliki jumlah link lebih banyak dari sebuah posting saja. Saya melihat per posting ada minimal 4 link, jadi total 28 link untuk bagian arsip itu saja, satu posting dengan jumlah link seperti itu tentunya tidak akan pernah kita buat khan, jarang sekali.

2. Memberikan widget yang lebih sesuai

Penerapan seperti pada poin kedua memberikan kita peluang untuk memunculkan widget yang lebih sesuai dengan halaman yang dimunculkan. Seperti menampilkan widget berdasar penulis jika blog diisi banyak orang, maka tiap penulis bisa memasang banner dengan link affiliasinya sendiri di blog mana saja.

Kalau mau menukar – nukar banner berdasar kategori juga sangat mungkin nampaknya, saya juga belum banyak bereksplorasi.

Widget WordPress di masa depan

Ke depan, para developer inti WordPress juga akan menampilkan widgets dengan cara yang berbeda, tampilan yang sekarang kita miliki ini sudah monoton sejak versi 2.8 kalau tidak salah, dan diperbaharui sedikit di versi 3.0.

Saya harap sedikit informasi tentang widget visibility WordPress ini bisa berguna bagi semua teman blogger pembaca blog ini, selamat pagi, salam :)

Membuat Website Sendiri dengan WordPress Kurang dari 1 Jam

Membuat website bagi kebanyakan orang adalah perkara yang sangat susah. Ada banyak anggapan yang terlalu menakutkan tentang cara membuat website, mulai dari hal teknis seperti hosting dan domain, tidak tahu bahasa pemrograman seperti HTML, PHP dan JavaScript serta berbagai alasan tanpa pembuktian sebelumnya yang lain.

Namun kali ini saya mau memberitahu anda yang sebaliknya, bahwa membuat website itu perkara mudah. Tidak harus tahu bahasa pemrograman apapun. Bahkan jika keperluan yang saya sebutkan di awal posting ini anda persiapkan terlebih dahulu proses membuat website tidak perlu menghabiskan waktu lebih dari satu jam!

Persiapan Membuat Website Sendiri dengan WordPress

1. Nama Website/Domain

Untuk membuat website mudah dengan WordPress, ada beberapa hal yang perlu dipersiapkan. Yang pertama adalah ide, mau diberi nama apa website anda nantinya. Saya pertama kali membuat website sempat bingung dan memikirkannya berhari-hari, kalau tidak salah ada dua pilihan dulu antara mustikreatip.com dan maskamty.net.

Ada beberapa petunjuk praktis dalam memilih nama, kalau mau digunakan sebagai website personal/pribadi, biasanya menggunakan nama anda adalah pilihan yang bagus. Tapi sebisa mungkin nama website itu simple dan mudah diingat dan menggambarkan anda, bisa nama panggilan atau nick, saya masih ingin membuat website dengan hanya 4 karakter, tapi belum ada ide :D

Kalau mau membuat website untuk bisnis, jika bisnis/badan usaha anda memiliki nama lebih dari satu kata, hindari penggunaan tanda hypen (-). Kenapa? Nama situs dengan menggunakan hypen terkesan tidak profesional, jika ada prospek yang hendak menggunakan jasa anda kemungkinan akan pergi.

Jadi misalnya usaha anda adalah percetakan, design dan grafis dengan nama Green Studio gunakan greenstudio.com, bukan green-studio.com. Siapkan juga nama backup seandainya nama idaman anda diambil orang dulu.

2. Metode Pembayaran Cepat

Untuk membuat website, sudah jelas kita butuh nama website/domain, dan kita wajib membelinya. Jadi untuk mempercepat pembelian domain ini, saya sarankan anda untuk memggunakan pembayaran yang bisa dengan cepat dilakukan. Kalau mau diurutkan dari yang tercepat, internet banking, sms banking, lalu ATM. Tapi kalau tidak ada semua, transfer ke bank juga mudah dan cepat, cuma harus antri mungkin yang relatif lama :)

Membeli Domain dan Hosting

Sekarang mari kita beli domain dan hostingnya, saya sudah membuat posting tentang cara membeli domain dan hosting, tapi karena mungkin akan ada perbedaan saya buatulang detailnya disini. Untuk pembelian domain dan hosting ini mungkin waktu 1 jam terasa memaksa, karena berkaitan dengan kecepatan anda action juga verifikasi setelah anda membayar, tapi untuk membuat website itu sendiri saya pastikan kurang dari 1 jam.

1. Pesan Nama Website

Langkah pertama tentu saja membeli domain, setelah sudah punya angan – angan tentang website yang akan dibuat nanti namanya apa, langsung saja kita pesan nama tersebut ke penyedia hosting.

Masterweb adalah pilihan saya, buka masterweb dulu. Saya sarankan anda mengikuti dari sini agar tidak terlewat nantinya. Tampilannya akan seperti ini;

cara membuat website

Ketik nama website anda, lalu klik cek ketersediaan. Kalau belum diambil orang akan langsung muncul status “tersedia! Pesan Sekarang” dengan warna hijau seperti diatas. Langsung saja klik tombol pesan sekarang.

2. Pilih Hosting

Setelah mengikuti proses di atas akan muncul halaman seperti ini di bawah ini. Ada peringatan tanpa hosting (tempat menyimpan file – file anda nantinya).

cara membuat website - domain/hosting

Kita akan menggunakan WordPress, dan kita butuh tempat untuk menyimpan file – file ini nantinya. Jadi klik peringatan tersebut untuk menambahkan hosting. Kemudian akan muncul halaman seperti berikut;

membuat website - hostingAda dua hal yang perlu diperhatikan, paket hosting seperti MWN BISNIS A CPANEL seperti di atas, penamaan paket seperti bisnis, eksekutif, platinum menggambarkan kualitas layanan paket hosting. Paket hosting kelas bisnis adalah paket yang paling sesuai bagi kebanyakan orang yang berniat bisnis, tapi jika anda ingin mencoba tak ada salahnya memilih kelas impresive yang ada di bawah, lebih murah.

Yang kedua adalah siklus pembayaran, anda bisa memilih tiap 3 bulan, 6 bulan, tahunan, 2 tahun atau bahkan 3 tahun sekali. Tahunan adalah yang paling sederhana menurut saya, bayarnya tidak terlalu banyak, juga tidak perlu sering – sering memperpanjang dibanding yang 3 bulanan misalnya.

Sudah dipilih? Langsung klik Pesan Sekarang! Akan muncul pilihan untuk menggunakan domain untuk membuat website yang kita pilih sebelumnya dengan hosting yang baru saja kita pilih, seperti inilah halamannya, klik tombol klik untuk lanjut.

cara membuat website - hosting+domain

Selanjutnya akan ada banyak pilihan dalam membeli domain dan hosting sebelum membuat website anda ini, tidak usah takut dan tidak perlu diperhatikan, langsung ke akhir halaman dan tentukan dimana nanti server untuk hosting anda, lanjutkan dengan klik tombol tambah ke keranjang belanja.

cara membuat website - tentukan server

Dan akan muncul gambar seperti gambar yang kedua tadi, agak berbeda sedikit karena sudah ada hosting, klik update keranjang.

cara membuat website - hosting

Setelahnya kita tiba di halaman checkout seperti di bawah ini, jika ada kode promosi klik saja, siapa sih yang tidak suka dengan diskon, bayar lebih murah ya jelas mau ya :D

cara membuat website - checkout hostingSetelah klik tombol checkout di atas, akan ada proses pendaftaran diri anda sebelum membuat website ini. Isi semua data yang wajib diisi, lalu selesaikan pendaftaran dengan klik tombol selesaikan pesanan. Proses pembelian domain dan hosting akan selesai di sini.

3. Membayar hosting dan domain

Setelah pendaftaran selesai dan anda sudah masuk client area, anda akan memiliki daftar invoice seperti berikut,

cara membuat website - client area hosting

Klik view invoice yang akan membawa anda pada halaman beikutnya.

cara membuat website - Invoice  detail

Seperti yang saya sampaikan sebelumnya, membayar dengan metode pembayaran secepat mungkin sangat bisa, silahkan pilih salah satu dari daftar rekining diatas untuk transfer. Setelah selesai tranfer lakukan konfirmasi pembayaran dengan klik konfirmasi pendaftaran.

Akan ada 2 halaman lagi, tapi saya rasa saya tidak perlu menampilkan di sini, halamannya mudah dimengerti kok. Sertelah ini biasanya akan ada konfirmasi email, dan anda perlu menunggu beberapa saat untuk menunggu proses konfirmasi selesai.

INTI; Membuat Website dengan WordPress dibawah 1 Jam

Dan inilah pokok yang saya sebutkan di atas, membuat website itu mudah, tidak perlu satu jam.

Masuk CPanel

Langsung saja masuk ke cpanel anda dengan membuka mustikreatip.com/cpanel (misal seperti contoh di sini). Akan ada tampilan seperti seperti ini untuk memasukkan user dan password anda, biasanya informasi login ada dalam client area dan juga dikirim ke email anda.

membuat website - cpanel

Buka Fantastico

membuat website - fantastico

Pilih, lalu Install WordPress

membuat website dengan WordPress

 

Isi data website

Fantastico install WordPress

 

Karena anda membuat website  pertama kali, kosongkan saja nama folder karena jika mengikuti gambar diatas, nanti website yang dibuat akan berada di abouttiyo.web.id/test/. Isikan administrator username selain admin karena ini username yang rawan pembajakan, lalu buat password yang susah ditebak namun mudah diingat. Username dan password yang lemah membuat situs anda mudah dihack orang. Isian selanjutnya terserah anda.

Klik Install WordPress, dan klik tombol selanjutnya pada halaman konfirmasi berikutnya. Selamat anda sudah berhasil membuat website tercinta anda!

Membuat Website WordPress Jadi

 

Tinggal buka mustikreatip.com atau nama lain yang sudah anda pilih sendiri. Silahkan masuk, ganti themes, mengubah setting, install plugins, import tulisan dari blog lama (kalau ada) dan menulis apa yang menjadi kesukaan anda.

Kesimpulan Cara Membuat Website dengan WordPress

Seperti yang saya sampaikan di awal, untuk membuat website sendiri anda tidak perlu tahu tentang bahasa pemrograman apapun. Pengetahuan teknis tentang hosting dan domain yang anda perlukan  juga sudah saya beberkan di sini.

Menggunakan WordPress adalah pilihan ideal untuk mebuat situs/website. Karena WordPress adalah sebuah platform yang sangat fleksibel, open source, banyak sekali referensi yang bisa didapat. Selain themes gratis yang kadang terasa terlalu sederhana, ada juga banyak sekali themes yang memiliki design menawan dan keren seperti studiopress atau themeforest.

Dengan memiliki domain dan hosting sendiri juga berarti menjadikan anda memiliki kontrol penuh dengan brand anda di internet, berbeda dengan blog gratis yang bisa saja sewaktu – waktu menghentikan layanannya. Selain itu kredibilitas anda juga akan semakin bagus dengan memiliki domain sendiri.

Demikian, semoga membantu, jika ada yang ditanyakan silahkan disampaikan dalam kolom komentar :)

Portable Server untuk Mempercepat Proses Design WordPress Themes

Dalam membuat sebuah design themes WordPress dan juga aplikasi web berbasis PHP lainnya kita pastinya perlu menginstall web server dahulu di komputer kita. Ada beberapa solusi dalam menginstall web server, bisa satu per satu, mulai dari PHP, MySQL dan baru web server seperti Apache atau Nginx.

Bisa juga dengan menggunakan software yang berisikan ketiga tool tersebut semuanya seperti Xampp atau Ampps. Pilihan lainnya adalah dengan menggunakan portable server, yang kita tidak perlu menginstall apapun di komputer kita, cukup ekstrak paket portable server tersebut jalankan, buat database dan install WordPress.

Dan kali ini saya akan membeberkan tentang beberapa portable server yang sudah pernah saya gunakan dalam rangka membuat WordPress themes untuk blog saya. Saya lebih suka server portable karena tidak repot dan tidak menambah beban CPU kecuali sedang dijalankan. Ok langsung saja inilah:

3 Portable Server untuk Mempercepat Proses Design WordPress Themes

1. USBWebserver

Saya pernah sesekali menggunakan USBWebServer, seperti namanya, kita cukup ekstrak paket yang kita download dari situsnya, lalu kita tingal menjalankannya dengan membuka file usbwebserver.exe yang ada di root foldernya. Lalu tingal copy file WordPress di folder root dan buka localhost di port 8080, http://localhost:8080/.

2. wemp

Kalau anda lebih suka menggunakan nginx daripada Apache, ada pilihan portable server lain yaitu wemp. Beberapa program yang sudah termasuk dalam wemp adalah nginx 1.2.8 (server), mariadb 5.5.30 (database), php 5.4.13, wincache 1.3.4  (caching), adminer 3.6.3 (database tool), sqlbuddy 1.3.3 (database tool alternative).

3. Uniform Server

Portable Server WordPress

Uniform Server adalah portable server yang saya kenal pertama kali dan paling sering saya pergunakan sampai sekarang. Versi terakhir adalah Coral 8.8.2 yang di dalamnya sudah termasuk Apache2, Perl5, PHP5, MySQL5 dan phpMyAdmin.

Selain support PHP ada juga bahasa pemrograman perl yang didukung server ini, bagi yang mau belajar mengunakan CMS Django sepertinya bisa juga mengunakan server ini. Yang membuat saya memilih Uniform Server daripada USBWebserver adalah tampilan url yang lebih manis saja, cukup localhost tanpa port, dan saya lebih terbiasa.

Selain itu juga ada paket yang disebut dengan mini server, yang isinya adalah paket server untuk CMS tertentu. Mini Server WordPress sudah berisi Apache, PHP dan MySQL lengkap dengan WordPress yang bisa dijalanakan. Selain WordPress ada juga  mini server Joomla, Xoops, phpBB dan MediaWiki.

Tips: Biar Lebih Cepat Lagi

Kalau mengunakan Portable Server masih dirasa kurang dan mau lebih cepat lagi sebelum membuat themes WordPress. Karena masih harus install WordPress berkali – kali ada caranya yang lebih efisien.

Yaitu dengan mengaktifkan fitur multisite dari WordPress. Caranya bisa dilihat di WordPress Codex, tidak butuh waktu lama. Setelahnya tinggal buat site baru setiap ada proyek design themes wordpress baru.

Cara Mudah Menjadikan Themes Blog WordPress Responsive

Sudah dalam beberapa bulan terakhir saya tidak bisa 100% fokus untuk melakukan satu hal saat berhadapan dengan komputer. Di samping ganguan datang dari Facebook dan sebagainya, saya juga sering mencuri – curi kesempatan untuk membuat sebuah design blog yang baru. Design yang baru, buat blog saya yang terbaru.

Saya adalah orang yang selalu mengkritisi design blog saya, dan saya juga banga dengan design karya sendiri. Jadi ya rasanya belum bisa tidur nyenyak dan fokus menulis kalau belum tercipta sebuah design yang bagus. Dan beberapa pekan yang lalu saya membaca sebuah artikel tentang 7 WordPress Theme Framework gratis bagi developer di wpmudev dan mendownload beberapa framework yang ada di sana.

Berikut adalah sedikit pandangan tentang framework yang sudah saya coba sebelum kita berlanjut ke materi utama mengedit themes agar jadi responsive.

Buat kamu yang belum tahu apa itu responsive design, terlalu! Responsive design, menurut saya adalah tampilan design blog yang kontennya menyesuaikan gadget yang digunakan untuk melihat sebuah design blog. Biasanya penyesuaiannya adalah dengan menjadikan lebar design otomatis menyesuaikan lebar layar ganget, baik dengan memperkecil atau memindah sebuah layout (sidebar misalnya) ke tempat lain.

WordPress Themes Framework Trial

OK langsung saja, inilah WordPress Themes Framework yang sebenarnya sudah pernah dengar sebelumnya, namun baru kemarin mencoba lihat lagi.

1. Gantry WordPress Theme Framework

Salah satu WordPress themes framework yang menarik adalah Gantry. Karena didesign oleh developer yang sudah tidak diragukan lagi, selain bekerja untuk WordPress, Gantry juga bisa dipakai pada CMS Joomla. Tampilannya designnya responsive, semua tampilan diluar bisa dikontrol dari panel yang ada di dalam.

Yang tidak saya sukai dari Themes Framework besar seperti ini adalah panel setting yang jumlahnya terlalu banyak maka saya bingung untuk mengunakannya. Mengunakan panelnya saja bingung, apalagi hacking codenya :P Disamping source code yang dihasilkan juga terlihat terlalu crowded menurut saya.

2. Whiteboard WordPress Theme Framework

Whiteboard menawarkan sebuah themes dengan berbagai function tambahan  yang sangat membantu blogger, salah satunya adalah menambahkan link komentar pada user yang melihat tulisan kita di RSS feed yang meningkatkan interaksi dalam komunitas blog kita. Ada juga pengamanan dengan menghapus versi wordpress di <head> tag blog dan menghilangkan detil kesalahan saat gagal login.

Saya sempat mulai hangat dalam mengedit themes ini, melakukan beberapa editing dengan perubahan pangilan style dan js dari function.php juga. Namun ketika saya merubah lessframework yang digunakan ke versi 4, semua design elemen kacau, dan dokumentasi yang minim saya balik kanan.

3. Underscores Theme

Underscores adalah themes karya tim Automattic, pihak yang menggembangkan WordPress, dalam upaya membuat design baru tadi, saya sudah menggunakan themes ini. Namun selama ini juga tidak kunjung jadi sebuah design yang benar – benar saya inginkan.

Progress saya kemarin adalah membuat themes ini responsive terlebih dahulu. Caranya adalah dengan mengambil media query dari lessframework whiteboard.  Detilnya nanti saya sampaikan.

4. Komentar tentang Themes Framework Lainnya

Themes framework lainnya tidak saya coba kemarin karena beberapa alasan. Bones, harus belajar LESS dulu agar benar – benar efektif dalam prosesnya. HTML5Reset, terlalu lama sudah tidak diupdate, sekitar 2 tahun. Hybrid, Saya suka, dan SEO themes ini memang bagus, tapi pengalaman saya menggunakannya di sevenroots.com membuat saya tidak menyentuhnya dulu. Ashford, Saya tidak suka saja.

Cara Menjadikan Themes Blog Responsive

Sekarang kita ke pokok pembahasan, caranya nanti adalah dengan mengunakan media query (penerapan styling berbeda pada layar user yang berbeda) dengan lessframework pada Underscores Theme. Adapun langkahnya adalah sebagai berikut.

1. Kenali Source Code

Semua yang mau membuat custom themes wajib tahu source codenya, caranya bisa dengan mengunakan inspect element bawaan Google Chrome, klik kanan -> inspect element atau tekan F12. Kalau dengan Firefox saya sarankan menggunakan Firebug. Contoh tampilannya nanti seperti ini:

Themes Source Code

Perhatikan pada bagian yang saya beri kotak, ada beberapa div disana, dengan class hfeed, site-header, site-main, content-area, widget-area dan site-footer. Markup diatas secara default memiliki styling degan hasil seperti ini;

WordPress Themes Blog Responsive - Page design element2. Ambil Less Framework

Setelah punya gambaran source code mana yuang menghasilkan elemen apa, maka sekarang kita ambil Less Framework. Berikut adalah media query yang perlu kita perhatikan.

@media only screen and (min-width: 768px) and (max-width: 991px) {

}
@media only screen and (max-width: 767px) {

}
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

3. Rubah Blog jadi Responsive

Setiap @media diatas mengatur tampilan elemen pada range lebar device masing masing. @media pertama untuk tablet, @media kedua untuk mobile, dan @media ketiga untuk mobile dengan layar yang lebih lebar. Kita nantinya akan memasukkan class yang sudah disebut diatas dalam setap  @media sehingga mungkin akan jadi seperti ini:

a. Tampilan tablet

@media only screen and (min-width: 768px) and (max-width: 991px) {
.hfeed{width:95%;}
.site-header{width:100%;display:block;} 
.site-main{width:100%;display:block;}
.content-area{width:62%;float:left;display:inline;}
.widget-area{width:30%;float:right;display:inline;}
.site-footer{width:100%;display:block;}
}

Penjelasan:

  • class .hfeed, lebar(width) 95% dari seluruh tampilan layar
  • class .siteheader, .site-main dan .site-footer lebar 100% dari .hfeed (lihat diagram, mereka di dalam hfeed), display:block berarti elemen setelahnya berada di bawahnya.
  • class content-area, lebar 62%, float:left berarti berada di kiri halaman, display:inline bearti elemen selanjutnya sejajar dengannya.
  • class widget-area, lebar 30%, float:right berarti berada di bagian kanan halaman, display:inline. Lebar content + widget area tidak boleh >100% kalau ingin tetap sejajar.

Untuk 2 ukuran layar lainnya mungkin adalah seperti berikut media querynya. Penjelasannya bisa anda perkirakan sendiri, karena tidak jauh berbeda. Untuk elemen dengan width:100% tanpa display block sebenarnya juga tidak apa – apa.

b. Tampilan Mobile

@media only screen and (max-width: 767px) {
.hfeed{width:95%;}
.site-header{width:100%;} 
.site-main{width:100%;}
.content-area{width:100%;}
.widget-area{width:100%;}
.site-footer{width:100%;}
}

c. Tampilan Mobile Wide

@media only screen and (min-width: 480px) and (max-width: 767px) {
.hfeed{width:95%;}
.site-header{width:100%;} 
.site-main{width:100%;}
.content-area{width:62%;float:left;display:inline;}
.widget-area{width:30%;float:right;display:inline;}
.site-footer{width:100%;}
}

Update: sebelumnya tambahkan pula script berikut di header agar web browser pada mobile device langsung menampilkan halaman blog anda sesuai dengan ukuran layarnya, tidak berusaha menampilkan blog anda seperti web untuk desktop, yang biasanya menjadikan tulisan nampak lebih kecil.

<meta name="viewport" content="width=device-width, initial-scale=1" />

WordPress Themes Blog Responsive itu Mudah

Seperti yang anda lihat, untuk membuat sebuah wordpress themes blog responsive itu sebenarnya mudah, hanya butuh 3 langkah di atas. Walau memang itu cuma sebuah awal dengan merubah layout, tapi sudah cukup untuk menjadikan blog responsive kok, selanjutnya kalau masih bingung bisa deh ditanya di komentar :D

Cara di atas sebenarnya bukan untuk blog saja, semua halaman html bisa jadi responsive juga dengan cara ini. Eh ya, blog ini sekarang juga sudah responsive juga, bisa di cek deh dengan mengecilkan window browser kamu :)

Perbedaan WordPress.com dan WordPress.org (Self-Hosted)

Beberapa hari lalu ada teman yang bertanya apakah bisa mengupload sebuah video melalui sunting posting dalam blog gratisan WordPress.com? Awalnya saya ragu, tapi kalau dari pengalaman saya dulu di sini pernah sekali upload video dan bisa maka saya jawab bisa, tapi ternyata untuk blog gratis dengan embel – embel .wordpress.com dibelakangnya tidak bisa ya?

Singkat cerita, diskusi berlanjut pada keinginannya untuk ikut pindah dari blog WordPress.com  menjadi blog yang memiliki hosting dan domain sendiri, pengen seperti punya saya nampaknya :D

Namun sebelum jadi pindahan saya memberikan beberapa gambaran tentang perbedaan WordPress.com dan WordPress.org, kebetulan kemarin dapat posting sumber dari wpmudev.

Perbedaan WordPress.con dan WordPress.org

Pembahasan tentang perbedaan WordPress.con dan WordPress.org ini akan saya mulai dari menjelaskan keduanya, lalu cara mengunakannya.

Siapa WordPress.org?

Sama – sama merupakan anak dari Automattic, WordPress.org adalah situs yang menjadi pusat segala hal tentang WordPress itu sendiri. Mulai dari download WordPress, forum tanya jawab dan dokumentasi hingga ribuan plugin dan themes gratis bisa didapatkan disana. WordPress.org adalah situs komunitas, yang tidak mencari penghasilan.

Menggunakan WordPress.org (Self-Hosted)

Untuk mengunakan WordPress self hosted, anda harus membeli domain dan hosting terlebih dahulu. Domain .com dan .net biasanya harganya 90 ribu/tahun. Sedang paket hosting dari penyedia  seperti masterweb bisa bervariasi, bergantung space penyimpanan, jumlah database dan bandwidth.

Hosting luar negeri biasanya unlimited baik space, bandwidth dan kadang masih ada free domain, westhost dan midphase misalnya, menarwarkan paket hostingnya mulai kurang dari $3/bulan.

Setelah beli domain dan hosting dan anda memiliki akses ke server, tinggal download dan install WordPress. Diperlukan sedikit waktu untuk belajar beberapa hal, namun saya jamin apa yang anda pelajari di sini akan sangat berguna nantinya.

Semua hal yang berkaitan dengan blog anda berada sepenuhnya pada anda. Anda bebas mau menambahkan berbagai plugin dan theme yang anda sukai selama servernya masih mampu, walau saran saya sih menggunakan resource lebih sedikit itu lebih baik.

Siapa WordPress.com?

WordPress.com adalah sebuah layanan blogging gratis yang banyak dipakai oleh jutaan blogger di dunia. Layanan blogingnya gratis, namun penguna memiliki berbagai keterbatasan yang akan saya sampaikan nanti. WordPress.com adalah sebuah situs yang menjalankan bisnis, sama halnya seperti Facebook.

Bisnis WordPress.com

Layanan gratis WordPress.com yang dinikmati semua pengunanya juga membutuhkan biaya tentunya. Maka pihak WordPress melakukan beberapa strategi bisnis, diantaranya adalah:

  • Menempatkan iklan pada blog yang ada di sana, untuk membuang iklan ini anda harus membayar $30/tahun.
  • Menjual themes premium dalam daftar themes yang bisa dipakai penggunanya. Harganya bervariasi, rata – rata sekitar $30 – $70.
  • Domain mapping, yang memungkinkan penggunaan domainsendiri.com pada blog anda di sana, harganya $30/tahun.
  • Space upgrade, setiap blog di WordPress.com memperoleh kuota 3GB, jika ingin menambahkan space 10 GB maka diharuskan membayar $20/tahun.

Mengunakan WordPress.com

Untuk mengunakan jasa WordPress.com anda bisa hidup dengan domain namaku.wordpress.com dengan berbagai keterbatasannya. Atau memilih membayar biaya untuk berbagai upgrade seperti di atas yang bisa sampai lebih dari 1 juta rupiah per tahun. Sangat mahal untuk kebanyakan blogger di Indonesia.

Dengan semua upgrade itu, anda masih memiliki batasan yang sampai kapan pun tidak akan terlepas, seperti keterbatasan themes dan plugin yang bisa dipakai karena tidak bisa menambah sendiri. Juga tidak adanya aksis FTP pada server WordPress.

Infograpic Perbedaan WordPress.com dan WordPress.org

Ringkasnya tentang artikel pembahasan perbedaan WordPress.com dan WordPress.org dapat dilihat secara jelas dalam infograpic yang disediakan wpmudev berikut ini juga:

Perbedaan WordPress.con dan WordPress.org

 Kesimpulan Perbedaan WordPress.com dan WordPress.org

Dari papapran tentang perbedaan di atas,  bisa kita simpulkan kalau mengunakan WordPress.com memang mudah, tak perlu tahu apa – apa tentang pemrograman juga bisa. Namun kemudahan itu harus dibayar relatif mahal. Pun dengan upgrade yang sudah kita lakukan masih juga ada beberapa batasan.

WordPress self hosted jauh lebih murah, dan memberikan kebebasan kepada kita. Akan tetapi kita harus belajar sedikit tentang setup dan sedikit pemrograman. Setelah blog kita berjalan sekalipun kita masih harus menjaga blog agar selalu up to  date dengan selalu melakukan update, baik plugin, themes atau WordPress itu sendiri.