Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Cara Custom CSS dan Javascript Per Post di WordPress

Beberapa posting saya yang membahas tentang tutorial CSS atau Javascript, memiliki perbedaan unik dari tutorial di blog-blog lain. Seperti yang anda ketahui, setiap tutorial di blog ini selalu menampilkan demonya secara langsung pada halaman yang sama. Tidak pada halaman lain seperti yang terdapat di blog-blog tutorial lain. Sehingga pengunjung tidak perlu repot-repot melihat demo tutorialnya pada halaman lain.

Contoh posting tutorial dengan demonya langsung

Mengenal & Membuat Animasi CSS3 di Website/Blog

Cara Membuat Dropdown Menu 3 Level + Efek Animasi CSS3

Mungkin beberapa dari anda mengira bahwa saya menambahkan CSS atau javascript untuk demo-nya pada bagian posting atau langsung di templatenya, yang mana jadi kurang efektif. Tapi, sebenarnya saya mempunyai cara sendiri untuk menambahkan CSS dan Javascript pada setiap posting tanpa menggunakan plugin.

Saya menambahkan kode-kode tertentu pada template function sehingga ada fitur kolom untuk menambahkan CSS dan Javascript ketika membuat sebuah posting. Fitur ini biasa disebut Custom CSS and Javascript per post, yang hanya tersedia untuk situs dengan WordPress Self Hosted dan berfungsi untuk memodifikasi desain setiap halaman posting.

Custom CSS dan JS per post

Seperti yang anda lihat pada gambar diatas, anda bisa menambahkan 3 kolom yaitu custom javascript internal, custom javascript external dan custom css. Ketiganya terletak di bawah kolom editor posting. Untuk penggunaannya, anda cukup tambahakan kode css dan javascript pda kolom. Kecuali untuk custom javascript external, anda hanya harus menambahkan url dimana javascript itu terletak.

Custom CSS dan Javascript ini juga bisa anda gunakan untuk blog dengan style Blogazine, yaitu konsep blog yang setiap halaman postingnya memiliki desain yang berbeda.

Lalu, bagaimana cara menambahkan fitur kolom tersebut? 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. Pastikan file permission untuk file ini bisa di rewrite, sehingga bisa anda edit.

4. Tambahkan kode php di bawah ini dan letakkan di akhir maupun awal kode lainnya.

Kode untuk Custom Javascript Internal

//Custom Javascript Internal
add_action(‘admin_menu’,’custom_javascript_hooks’);
add_action(‘save_post’,’save_custom_javascript’);
add_action(‘wp_head’,’insert_custom_javascript’);
function custom_javascript_hooks()
{ add_meta_box(‘custom_javascript’,’Custom Javascript Internal’,’custom_javascript_input’,’post’,’normal’,’high’);
add_meta_box(‘custom_javascript’,’Custom Javascript Internal’,’custom_javascript_input’,’page’,’normal’,’high’); }
function custom_javascript_input()
{ global $post;
echo ‘<input type=”hidden” name=”custom_javascript_noncename” id=”custom_javascript_noncename” value=”‘.wp_create_nonce(‘custom-javascript’).’” />’;
echo ‘<textarea name=”custom_javascript” id=”custom_javascript” rows=”5″ cols=”30″ style=”width:100%;
“>’.get_post_meta($post->ID,’_custom_javascript’,true).'</textarea>’; }
function save_custom_javascript($post_id)
{ if (!wp_verify_nonce($_POST[‘custom_javascript_noncename’],’custom-javascript’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_javascript = $_POST[‘custom_javascript’];
update_post_meta($post_id,’_custom_javascript’,$custom_javascript); }
function insert_custom_javascript()
{ if (is_page() || is_single())
{ if (have_posts()):while (have_posts()):the_post();
echo ‘<script type=”text/javascript”>’.get_post_meta(get_the_ID(),’_custom_javascript’,true).'</script>’;
endwhile;
endif;
rewind_posts(); }
; }

Kode untuk Custom Javascript External

//Custom Javascript External
add_action(‘admin_menu’,’custom_javascript_external_hooks’);
add_action(‘save_post’,’save_custom_javascript_external’);
add_action(‘wp_head’,’insert_custom_javascript_external’);
function custom_javascript_external_hooks()
{ add_meta_box(‘custom_javascript_external’,’Custom Javascript External’,’custom_javascript_external_input’,’post’,’normal’,’high’);
add_meta_box(‘custom_javascript_external’,’Custom Javascript External’,’custom_javascript_external_input’,’page’,’normal’,’high’); }
function custom_javascript_external_input()
{ global $post;
echo ‘<input type=”hidden” name=”custom_javascript_external_noncename” id=”custom_javascript_external_noncename” value=”‘.wp_create_nonce(‘custom-javascript-external’).’” />’;
echo ‘<textarea name=”custom_javascript_external” id=”custom_javascript_external” rows=”5″ cols=”30″ style=”width:100%;
“>’.get_post_meta($post->ID,’_custom_javascript_external’,true).'</textarea>’; }
function save_custom_javascript_external($post_id)
{ if (!wp_verify_nonce($_POST[‘custom_javascript_external_noncename’],’custom-javascript-external’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_javascript_external = $_POST[‘custom_javascript_external’];
update_post_meta($post_id,’_custom_javascript_external’,$custom_javascript_external); }
function insert_custom_javascript_external()
{ if (is_page() || is_single())
{ if (have_posts()):while (have_posts()):the_post();
echo ‘<script type=”text/javascript” src=”‘.get_post_meta(get_the_ID(),’_custom_javascript_external’,true).’”></script>’;
endwhile;
endif;
rewind_posts(); }
; }

Kode untuk Custom CSS

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

Silahkan anda pilih salah satu, dua atau semuanya sesuai dengan kebutuhan fitur yang anda butuhkan. Perlu dicatat bahwa agar fitur ini bekerja, pada template yang anda gunakan harus terdapat kode fungsi wp_head() pada bagian file header. Fungsi ini nantinya yang akan menampung semua javascript dan css yang anda masukkan di setiap posting atau page.


Pada tema-tema wordpress standar, biasanya fungsi tersebut sudah ada karena fungsi wp_head() ini adalah salah satu fungsi paling penting dalam pembuatan tema wordpress. Fungsi wp_head() berfungsi untuk menampilkan semua file css dan js dari setiap fitur yang ada dalam template.

Yap, itu saja untuk posting kamis ini.. Bagaimana menurut anda? Jangan sungkan tanyakan di komentar jika anda mempunyai kesulitan dalam penambahan fitur ini. Semoga bermanfaat.

~Muhammad Syakirurohman~

referensi :
– http://m-alwi.com/custom-javascript-per-post.html
– http://m-alwi.com/custom-css-per-post.html

4 thoughts on “Cara Custom CSS dan Javascript Per Post di WordPress

  • Cara Custom CSS dan Javascript Per Post di WordPress - BloggerIndo

    […] tentang tutorial CSS atau Javascript, memiliki perbedaan unik dari tutorial di blog-blog lain. Seperti yang anda ketahui, setiap tutorial di blog ini selalu menampilkan […]

  • Terimakasih Tutorialnya sangat bagus. Namun ketika saya coba tidak berhasil. Bagian header dan slider tidak tampil. Dan di halaman postingannya ketika di preview yg tampil hny footer dan sidebar lainnya black.
    Bagaimana cara menormalkannya kembali.

    • mungkin ada salah penempatan kode, atau javascript yang dimasukkan bentrok dengan javascript yang ada di web agan.. Coba kembalikan lagi seperti semula, lalu tambahkan lagi kodenya secara hati-hati..

  • Selamat Sore. Menemukan dari Sosial Media saya terdampar
    ke website ini, sehabis saya baca beberapa isi situs ini artikel-artikelnya sangat-sangat informatif dan juga sangat
    baanyak artikel-artikel yang sangatlah banyak manfaatnya untuk saya.
    Saya mohon izin komen dan menshare artikel-artikel ke sosial media saya supaya biar website anda semakin bertambah banyak visitornya.
    Semoga ditambahkan postingan baru terus blognya. Salam Hangat

Tinggalkan Balasan