Home / WordPress / Cara Membuat Tampilan Posting Unik Di WordPress

Cara Membuat Tampilan Posting Unik Di WordPress

Cara Membuat Tampilan Posting Unik Di WordPress – Mungkin saja kita merasa jenuh dengan tampilan posting default tema yang kita gunakan. Langkah ini bisa saja dengan mengganti tema. Namun tentunya jika kita mengganti tema, maka keseluruhan tampilan posting akan sama juga. Sedangkan kita menginginkan membuat tampilan posting yang berbeda dari tampilan posting lainnya. Membuat tampilan posting yang berbeda ini akan kelihatan unik dari biasanya. Anda bisa lihat posting-posting blog yang bertemakan blogazine atau blog desain gaya majalah. Maka setiap posting artikel, akan tampil berbeda-beda.

Baca Juga : Bingung Membuat Breadcrumb WordPress?

Syarat utamanya untuk membuat tampilan posting unik atau berbeda-beda ini Anda harus sedikit paham dengan struktur kode tema yang digunakan. Karena disini kita akan bermain-main dengan kode selector id dan class. Semua ini tidak perlu Anda harus paham dan mengerti betul cara memainkannya. Anda cukup menggunakan jurus ATM saja Amati, Tiru, dan Modofikasi. Mencoba dan terus mencoba. Dan jika Anda ragu menerapkannya, Anda bisa mencobanya dulu menggunakan WordPress Offline.

Cara merubah tampilan posting default WordPress ini agar kelihatannya unik adalah Anda harus menambahkan kotak box custom CSS. Dengan box custom CSS ini kita bisa leluasa mengatur tampilan posting sesuai dengan keinginan. Caranya untuk menambahkan kotak box custom CSS adalah tempatkan kode PHP berikut di file functions.php tema yang Anda gunakan. Penempatan kode PHP ini bisa melalui cPanel atau wp-admin dashboard. Pasang kode sebelum kode penutup ?> yang terdapat di file functions.php.

/*----------------------------------------------------------------*/ 
/* Custom CSS
/*----------------------------------------------------------------*/
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
 add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
 add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
 global $post;
 echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
 echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
 if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
 if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
 $custom_css = $_POST['custom_css'];
 update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
 if (is_page() || is_single()) {
 if (have_posts()) : while (have_posts()) : the_post();
 echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
 endwhile; endif;
 rewind_posts();
 }
}

Jika sudah menempatkan kode diatas, maka nanti dibawah area posting akan tampil sebuah kotak area baru dengan nama Custom CSS. Nanti kotak custom CSS tersebut tinggal Anda mainkan sesukanya dengan menambahkan kode-kode tertentu sesuai kebutuhan.

cara-membuat-tampilan-posting-unik-di-wordpress-1

Cara Membuat Tampilan Posting Unik Setelah Pasang Kode Custom CSS

Setelah sukses memasang kode PHP untuk menampilkan kotak box Custom CSS, sekarang saatnya untuk bereksperimen. Langkah yang paling dasar adalah Anda harus mengetahui struktur kode yang ada di file single.php. Biasanya struktur kode untuk menampilkan tulisan di file single.php adalah seperti header, content, sidebar, breadcrumbs, related-post, author-box, dan comment.

Jika Anda ingin menghilangkan atau menyembunyikan tampilan elemen tertentu tinggal menambahkan display: none. Contoh jika kita ingin menyembunyikan tampilan header, maka struktur kodenya seperti ini #header {display: none}. Namun jika yang ingin disembunyikan lebih dari satu elemen, maka tinggal menambahkan koma disetiap elemen. Contoh #header, #breadcrumbs, #related-post, author-box  {display: none}.

Anda juga bisa merubah tampilan elemen tertentu, seperti background, kotak komentar, warna tulisan, jenis huruf, dan lain-lain. Sebagai referensi, silakan Anda baca-baca tulisan saya sebelumnya tentang Cara Mengganti Tampilan Background WordPress atau Cara Cepat Mengganti Font Blog WordPress dan masih banyak lagi.

Mungkin hanya itu saja tulisan tentang cara membuat tampilan posting WordPress agar menjadi lebih unik dari biasanya. Semoga sukses dan bermanfa’at.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

24 comments

  1. bisa dicoba neh eksperimennya :)

  2. nanti bisa dicoba nih kode custom css nya, maklum blm bisa-bisa membuat blog di wordpres, masih bingung sob.. nanti semoga saja lama-lama bisa yah hehehe.. makasih ya .. sangat bermanfaat

  3. WordPress memang ajib banget kalau soal oprekan mas?

  4. saya BM dulu aja mas,soalnya saya belum faham sama struktur wp nih

  5. kebetulan blog ane WordPress gan, bisa nyobain tips di atas :D

    • Iya mas, kita bisa lebih berkreasi sesuka hati untuk modifikasi tampilan posting yang berbeda-beda …

  6. .Wah salahnya hanya untuk WordPress ya gan.

  7. perlu di coba nih mas trik wordpress nya, saya belum pernah nih nyentuh wordpress,mau belajar dulu,dan akan buat web nantinya,makasih sharingnya mas

  8. jadi tambah ilmu baru nih mas mengenai wordpress,semoga semakin sukses blognya

  9. mas tambah pinter ya dengan wordpres, ntar kalau aku punya wp, minta panduannya yah..! ntrims..

    • Ga juga mba, masih banyak belajar ko dan pusing juga belajarnya, mungkin faktor U .. :D

  10. Ternyata salah satu fungsi kolom CS itu ini toh. Saya gak tahu fungsinya apaan. Ternyata buat modifikasi tiap postingan.

  11. cara buka single.php nya gimana ya mas? saya masih baru di dunia wordpress, trus kalo mau ngubah tampilan hompage biar isinya ga cuman post2 terbaru biar menarik gimana ya mas?

    tolong mampir ke blog ane juga ya mas :)

    • Untuk masuk ke single.php yang paling mudah bisa melalui wp-admin atau dashboard mas. Nanti mas masuk ke menu Tampilan lalu Penyunting …

  12. mas kalo tampilan wordpres biar sama ama dekstop gmana mas ? Bnyak yg ga Tampil di mobile vession soalnya

    • Mungkin mas menggunakan tema yang responsive. Sehingga tampilan di PC akan berbeda sama di Smartphone. Kalau tampilannya ga mau berubah-berubah diberbagai device, coba mas pakai tema yang tidak responsive saja …

Leave a Reply

Your email address will not be published. Required fields are marked *