Membuat custom css perpost di wordpress

Membuat custom css perpostCara membuat custom CSS perpost – Pada posting kali ini saya akan berbagi sedikit pengalaman tentang bagaimana cara membuat custom css perpost di blog wordpress tanpa plugin. Terus terang saja saya bukan seorang web programmer, trik-trik ini saya dapatkan dari browsing sana-sini 🙂

Dengan menggunakan Custom CSS perpost akan sangat memudahkan kita untuk mengatur dan mempercantik blog sesuai dengan keinginan. Misalnya, anda ingin menampilkan background yang berbeda pada setiap postingan, Menghilangkan judul pada postingan tertentu, Menghilangkan header, Mengatur size dan jenis font, menghilangkan Sidebar pada post tertentu dan lain-lain.

Hostinger

Baiklah tidak usah panjang lebar, langsung saja kita ke TKP… Tampilan pada halaman post editor standart wordpress biasanya akan terlihat seperti gambar di bawah ini

Custom CSS

Nah bagaimana cara menambahkan atau membuat Custom CSS perpost tanpa plugin di blog wordpress kita?
Silahkan ikuti langkah-langkah dibawah ini :
1. Login ke dashboard wordpress self hosted anda
2. Pilih menu appearance > Editor
3. Lalu, pilih file functions.php pada template yang anda gunakan
4. Tambahkan kode di bawah ini dan letakkan di akhir maupun awal kode lainnya

 

//Custom CSS Widget
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();
}
}

 

Setelah kode di atas di tambahkan ke file functions.php maka secara otomatis akan menghasilkan box Custom CSS di bawah setiap halaman post/page editor wordpress anda. seperti pada gambar di bawah ini.

Custom CSS

Mudah bukan?.. dengan adanya box Custom CSS di setiap halaman post/page editor akan memudahkan kita untuk menambahkan kode2 CSS sesuai dengan kebutuhan pada masing2 halaman blog kita.

** Mengapa artikel ini saya buat?.. Dari pengalaman ketika pertama kali saya belajar membuat website, saya selalu di hadapkan pada masalah2 atau ketidakpuasan dengan website yang saya buat. Karena sebagus apapun template yang kita gunakan pasti ada saja sesuatu yang tidak sesuai dengan keinginan kita. Kemudian yang kedua, saya mencoba untuk memulai menekuni bisnis online. Menurut saya untuk menjalankan bisnis online akan sangat lebih baik jika memiliki website sendiri yang sesuai dengan selera kita. Nah, itulah beberapa alasan mengapa saya membuat artikel ini, mudah2an dapat bermanfaat buat anda semua dan kedepan saya juga akan menulis trik-trik WordPress yang lainnya.

Terima kasih dan semoga bermanfaat.


Triv indonesia Hostinger

membuat custom css perpost

Baca juga :

Silahkan tulis saran, kritik atau komentar

* Email anda tidak akan kami publikasikan dan Terima kasih telah mengunjungi website kami

four × three =

Bisnis Online Indonesia © 2017 Frontier Theme