Category: Wordpress

Membuat tampilan web responsive: dengan meta tag ‘viewport’

Posted on | by DJ Apra | 11 Comments on Membuat tampilan web responsive: dengan meta tag ‘viewport’
image courtesy http://www.quirksmode.org/

Pernah kah membuat tampilan website yang sangat bagus kelihatannnya di desktop, namun menjadi kurang ‘pas’ di browser mobile atau malah berantakan? nah buat temen-temen yang ingin membuat design web template yang fleksible di semua browser, meta tag viewport ini sangat berguna mengatasi hal tersebut.

Sebenarnya konsep viewport ini dicetuskan oleh apple (CMIIW) untuk produk2nya termasuk IOS pada ipod/iphone dan ipad, namun diterapkan juga oleh browser-browser lainnya. (Apple memang pelopor yah hehe)

Untuk gampangnya, sebagai contoh tampilan yang dilihat adalah tabel berukuran 980px. Coba langsung tambahkan kode-kode berikut diantara < HEAD>, dan apa yang akan terjadi?

< meta name="viewport" content="width=device-width" >

Ipad pada posisi landscape mempunyai resolusi 980px, dan pada posisi portrait akan memiliki resolusi 768px,maka jika ipad diputar dari landscape ke portrait. Tabel berukuran 980px akan menyusut skalanya menjadi muat di 768px, jadi bukan ukuran tabelnya yang berubah, tetapi skalanya, maka tulisannya akan terlihat mengecil.

< meta name="viewport" content="width=320" >

Ini sangat berguna jika kamu merancang tampilan khusus untuk device tertentu saja. Untuk iphone misalnya.

< meta name="viewport" content="initial-scale=1" >

Berapapun ukuran resolusi browser, tampilan akan 100%. Pada kasus ipad rotation tadi, maka tampilan akan sedikit terpotong pada mode portrait karena skalanya tetap 980px.

< meta name="viewport" content="maximum-scale=1" >

Menentukan maksimum zoom-in yang bisa dilakukan, kalo ini kan 1, berarti gak bisa di zoom-in lagi deh.

< meta name="viewport" content="user-scalable=no" >

User tidak bisa zoom-in dan zoom-out.

Satu hal lagi yang layak dicoba, meta tag viewport memungkinkan lebih dari satu content dimasukkan, cukup dipisahkan dengan tanda koma ‘,’. contohnya:

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

Saya setuju dengan kata-kata author dari artikel ini (yang juga jadi referensi saya untuk post ini) : Membuat tampilan web responsive, bukan semata-mata serunya melihat tampilan berubah ketika browser di besar-kecilkan resolusi-nya. Tetapi juga mengakomodasi tampilan untuk dapat tampil nyaman di bermacam device, browser dan resolusi 🙂

Informasi lebih lengkap lagi juga ada di websitenya apel somplak di sini

Makasih udah baca, makasih juga udah mau nyebarin informasi yang semoga bermanfaat, makasih sekali lagi kalo mau juga klik pesan sponsor (hehe)

Selamat mencuba! Mohon koreksi kalo tulisan saya ada yang salah yah 🙂

Membuat auto post artikel wordpress ke Facebook dan Twitter tanpa plugin

Posted on | by DJ Apra | 13 Comments on Membuat auto post artikel wordpress ke Facebook dan Twitter tanpa plugin

Bagaimana posting otomatis (autopost) artikel wordpress kita ke facebook dan twitter yah? jadi setiap kali publish artikel, otomatis juga posting di facebook dan twitter. Gak usah pake plugin juga ternyata bisa loh! yuk lanjut bacanya, saya kasih tahu ilmunya yang saya dapet dari temen-temen murah hati 🙂 Continue reading →

Membuat wordpress custom page template sederhana sendiri

Posted on | by DJ Apra | 5 Comments on Membuat wordpress custom page template sederhana sendiri

Ingin membuat page khusus di wordpress tanpa sidebar sehingga tampilan menjadi lebar? atau malah tanpa menu? custom page template wordpress adalah solusinya, dan berikut adalah cara membuat page template wordpress sederhana.

Caranya membuat page template wordpress adalah dengan membuat satu file .php dan harus diletakkan dalam folder theme wordpress kamu.

Sebelumnya, saya mau jawab pertanyaan umum yang memicu kebutuhan untuk membuat custom page template ini. Dimana sih sebenarnya worpress mengatur tampilan untuk page? atau apa file yang mengatur tampilan worpress page?

Jika didalam folder theme wordpress kamu ada yang namanya page.php, yak itulah pelakunya 🙂

Tapi kalau kamu rubah page.php, akan merubah juga semua tampilan default page wordpress kamu. Nah gimana caranya supaya hanya page halaman tertentu dari wordpress kamu saja yang berubah?

Ada cara otomatis atau cara manual, penggunaannya sangat tergantung kebutuhan masing-masing akan keperluan custom page template.(Otomatis artinya, worpress akan langsung menggunakan file tersebut sebagai template. Manual artinya, kamu harus meng ‘assign’ template pada halaman yang inginkan)

1. Cara otomatis adalah, dengan melakukan penamaan file .php sesuai dengan id dari page, atau slug dari page. formatnya adalah:

page-id
page-slug

misalnya: halaman yang akan menggunakan custom page template ini adalah halaman ‘portfolio’ dimana id-nya = ’15’ dan slug-nya =’portfolio’. Maka nama file-nya harusnya: ‘page-15.php‘ atau ‘page-portfolio.php‘.

2. Cara manual? yah penamaannya bebas, tapi usahakan pakai prefix tertentu supaya kamu bisa bedain yang mana file template mana yang bukan. Kalau kamu punya 10 template dengan masing-masing nama file punya prefix, pasti lebih enak lihatnya di ‘file manager’ 🙂

Sudah tahu kira-kira mau pakai cara yang mana?

Nah sekarang diapain file .php nya?

< ? php /* Template Name: Template Portfolio ? >

Dengan menuliskan kode php tersebut, wordpress otomatis membaca file tersebut adalah sebuah page template. Gak percaya? buat yang pilih cara otomatis bisa langsung refresh halaman kamu. Dan buat yang pilih cara manual, kamu assign dulu templatenya ke halaman kamu, save dan refresh halamannya sekarang.

Kalau halaman kamu putih semua, berarti kamu sudah berhasil membuat custom wordpress page template! selamat, selamat *tiup terompet……..hehe

Trus diapain lagi? ya terserah deh. Untuk coba-coba kamu kopi paste aja semua yang ada di page.php ke halaman page template yang baru kamu buat, lalu mulai pretelin tuh satu-satu fungsi yang ada. (Saya kemarin begini belajar bikin custom page template-nya hihihi).

mau hilangin sidebar? cari fungsi ini, trus di comment ‘//’ atau dihapus

get_sidebar()

Pasti sudah gak sabar mau coba hilangin yang lain 🙂

Semoga informasi membuat page template wordpress custom ini bermanfaat, makasih yang udah baca.

Yang mau tau lebih detil silahkan kesini aja: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

Yang mau share juga silahkan, berbagi itu kan sama saja memberi 🙂

Mengatasi WordPress Post Caption Error

Posted on | by DJ Apra | Leave a Comment on Mengatasi WordPress Post Caption Error
Picture thanks to: http://i47.photobucket.com/albums/f152/kristarella/WP_captions_hyphen-on.png

Pernah ngalamin Caption image pada wordpress error? berarti kita senasib. Aneh memang, karena sepertinya jarang sekali ada yang wordpress-nya error masalah caption image ini. Tapi dibawah ini ada solusinya:

Sudah lihat gambar diatas kan? yah itu adalah tampilan kalau image kamu ada teks captionnya dan ternyata error – wordpress post caption error namanya (*apalah artinya sebuah nama). Emang bisa kena caption error kayak gini? saya pernah kena loh hehe. Dan untungnya ada yang ngalamin juga dan berbagi informasi, jadi saya juga bisa berbagi disini 🙂

Ternyata, ini salah satu akibat yang diakibatkan karena bentrok plugin. Dan menurut sumber jawaban saya itu karena plugin ‘social share / bookmark’. Saya pernah menginstall plugin ‘sexy bookmark’ dan ada fitur ‘beta’ nya yang saya aktifkan. Begitu saya ‘de-activate’ langsung mulus lagi deh tuh wordpress caption image-nya. Caption image kembali nongol pada tempat seharusnya, yaitu dibawah image hehe. Tidak ada lagi ‘post caption error’ di wordpress sayahhhh *horee

Kalau teman-teman ada yang pernah ngalamin hal yang serupa namun mempunyai pendekatan berbeda dalam mengatasi ‘post caption error’ ini, bagi-bagi dong disini. Atau silahkan bagi-bagi keluar deh, siapa tau menolong orang. Berbuat kebaikan hadiahnya masuk surga loohh *hammer

 

Cara memasukkan image dalam RSS WordPress

Posted on | by DJ Apra | 2 Comments on Cara memasukkan image dalam RSS WordPress

Ingin menampilkan image ke dalam RSS feed instalasi WordPress seperti yang dimiliki situs ini? Bisa dong, begini nih caranya:

Sebenarnya pertanyaan mengenai bagaimana cara memasukkan image atau gambar kedalam RSS wordpress ini terlebih dahulu saya ajukan ke grup FB ini : https://www.facebook.com/groups/446839725362315/ dan akhirnya ada momod group juga teman kantor yang baik hati dan budiman membantu saya memberikan solusi untuk menampilkan image kedalam RSS dari blog WordPress saya.

Konsepnya dalam memasukkan image kedalam RSS adalah: menambah ‘content’ RSS yang digenerate WP dengan image.

Langsing saja saudara-saudara, saya tampilkan source code yang berfungsi menambahkan image kedalam RSS, di bawah ini:

function rssdenganimage($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = ' ' . get_the_post_thumbnail( $post->ID, 'large', array( 'style' => 'width: 100%; margin: 10px;' ) ) . ' ' . $content;

}
return $content;
}

add_filter('the_excerpt_rss', 'rssdenganimage');
add_filter('the_content_feed', 'rssdenganimage');

get_the_post_thumbnail : Untuk mengambil post feature image, didalam array bisa ditambah value ‘size’ =>’small’  jika mau menentukan besar image yang mau ditampilkan dalam RSS

the_excerpt_rss dan the_content_feed penjelasan lebih lanjut bisa ditemukan di Codex WordPress.

Akhirnya saya bisa mendapatkan tampilan RSS wordpress sedikit lebih cantik dan informatif, dengan adanya image di dalam RSS feed WordPress saya

Semoga artikel saya bermanfaat buat teman-teman 🙂 silahkan share jika suka, atau klik banner di website ini *hammer