Cara Menambahkan JavaScript dan CSS Custom

Apakah Anda ingin Menambahkan JavaScript dan CSS Custom di wordpress? Terkadang Anda mungkin perlu menambahkan kode JavaScript ke seluruh situs web atau ke halaman tertentu.

Secara default, WordPress tidak membiarkan Anda menambahkan kode secara langsung dalam posting Anda. Pada artikel ini, Saya akan menjelaskan secara terperinci kepada Anda cara paling mudah Menambahkan JavaScript dan CSS Custom di wordpress

Cara Menambahkan JavaScript dan CSS Custom

 

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang tidak berjalan di server Anda tetapi di browser pengguna. Pemrograman sisi klien ini memungkinkan pengembang untuk melakukan banyak hal tanpa harus memperlambat situs web Anda.

Fungsi dan Cara kerja JavaScript

Agar lebih paham kita akan lanjut ke pembahasan fungsi dan cara kerja javascript. Untuk html, css, PHP, atau yang lainnya biasanya akan diproses oleh server lalu baru ditampilkan pada pengguna.

Lebih lengkapnya begini, saat anda membuat pemrograman web dengan html, css, PHP, dan lainnya maka bahasa pemrograman tersebut akan langsung dipindai dan diperiksa oleh web server saat ada pengunjung yang ingin mengaksesnya.

Web server akan dengan cepat memindai perintah-perintah yang ada, setelah itu perintah tersebut akan langsung diproses lalu dikirimkan ke pengunjung situs sehingga pengunjung nanti akan mendapatkan data dan tampilan dari situs yang dikunjungi. Cara kerja satu ini berbeda dengan cara kerja dari javasript.

Cara kerja javascript adalah pengunjung situs akan diarahkan melalu file .js yang terpisah atau di embed langsung ke halaman website. Jadi bisa diartikan sebagai bahasa dari sisi klien. Nanti klien akan mengakses website lalu script tersebut akan terunduh di perangkat klien. Script tersebut juga diproses di perangkat yang dimaksud.

Jadi pemrosesannya bukan pada web server, tapi pada perangkat klien atau pengunjung website. Cara kerjanya sangat berbeda dibanding yang lainnya bukan?

Namun terdapat web browser yang menawarkan pilihan bagi para pengguna untuk menentukan apakah ingin menonaktifkan atau tidak. Jika tidak diaktifkan maka beberapa fitur tidak akan bisa diproses ataupun tampil.

Meski Orang awam pun pasti bisa memahami hal ini. Jika anda sering berselancar di internet, pasti ada website yang menggunakan javascript yang meminta anda untuk mengaktifkannya. Hal tersebut lah yang dimaksud dalam poin ini. Jadi memang ada web browser yang menawarkan pilihan aktif tidaknya.

Disini Jika Anda ingin menyematkan pemutar video, menambahkan kalkulator, atau layanan pihak ketiga lainnya, maka Anda akan sering diminta untuk menyalin dan menempelkan potongan kode JavaScript ke situs web Anda.

Berikut adalah Cuplikan kode JavaScript yang khas mungkin terlihat seperti ini

<script type=”text/javascript”>
// Some JavaScript code
</script>
<!– Another Example: –!>
<script type=”text/javascript” src=”/path/to/some-script.js”></script>

Sekarang mari kita lihat bagaimana Anda dapat dengan mudah menambahkan JavaScript di halaman WordPress atau posting tanpa merusak situs web Anda.

Cara 1. Menyisipkan – Menambahkan Kode JavaScript Menggunakan Header dan Footer

Terkadang Anda akan diminta untuk menyalin dan menempelkan cuplikan kode JavaScript ke situs web Anda untuk menambahkan alat pihak ketiga. Skrip ini biasanya pergi ke bagian kepala atau di bagian bawah sebelum tag </body> situs web Anda. Dengan cara ini kode dimuat pada setiap tampilan halaman.

Misalnya, kode pemasangan Google Analytics harus ada di setiap halaman situs web Anda, sehingga dapat melacak pengunjung situs web Anda.

Anda dapat menambahkan kode tersebut ke file header.php atau footer.php tema WordPress Anda. Namun, perubahan ini akan ditimpa ketika Anda memperbarui atau mengubah tema Anda.

Itu sebabnya Saya sarankan menggunakan plugin untuk menambahkan javascript di situs Anda.

Apa saja yang Anda perlukan?

Pertama, Anda perlu menginstal dan mengaktifkan plugin Insert Headers and Footers . Untuk detail lebih lanjut, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress .

Setelah aktivasi, Anda perlu mengunjungi halaman Pengaturan >Sisipkan Header dan Footers . Anda akan melihat tiga kotak, satu untuk header dan yang lainnya untuk bagian body dan footer.

Menyisipkan header dan footer

 

Anda sekarang dapat menempelkan kode JavaScript yang Anda salin ke salah satu kotak ini dan kemudian klik tombol simpan.

Plugin Headers and Footers Insert sekarang akan secara otomatis memuat kode yang Anda tambahkan pada setiap halaman situs web Anda.

Cara ke 2. Menambahkan Kode JavaScript secara Manual 

Metode ini mengharuskan Anda untuk menambahkan kode ke file WordPress Anda.

Pertama, mari kita lihat bagaimana cara menambahkan kode ke tajuk situs WordPress Anda. Anda perlu menambahkan kode berikut ke file functions.php tema Anda atau plugin khusus situs .

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Menambahkan JavaScript ke Postingan WordPress Tertentu atau Halaman Menggunakan Kode

Misalkan Anda hanya ingin memuat javascript ini pada posting WordPress tertentu. Untuk melakukan itu, Anda harus menambahkan logika kondisional ke kode. Lihatlah contoh berikut:

function wpb_hook_javascript() {
  if (is_single ('10')) {
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Jika Anda melihat lebih dekat pada kode di atas, Anda akan melihat kode javascript yang terbungkus dengan logika bersyarat untuk mencocokkan ID posting tertentu. Anda dapat menggunakan ini dengan mengganti angka 10 dengan ID posting Anda sendiri.

Sekarang, kode ini akan berfungsi untuk semua jenis tulisan kecuali untuk halaman. Mari kita lihat contoh lain kecuali yang ini akan memeriksa ID halaman tertentu sebelum menambahkan kode javascript ke bagian kepala.

kita sekarang akan menggunakan [is_page] untuk memeriksa ID halaman.

Saya dapat menggunakan kode yang sama dengan sedikit modif untuk menambahkan kode javascript ke footer situs Anda. Lihatlah kode dibawah.

function wpb_hook_javascript_footer() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Disini Anda juga dapat menggunakannya dengan tag bersyarat untuk menambahkan Javascript ke posting atau halaman tertentu.

Cara 3. Menambahkan Kode Javascript Di Dalam Posting atau Halaman Menggunakan Plugin

Metode ini akan memungkinkan Anda untuk menambahkan kode di mana saja di dalam posting dan halaman WordPress Anda. Anda juga akan dapat memilih di mana dalam konten yang ingin Anda sematkan kode javascript.

Langkah pertama: Anda perlu menginstal dan mengaktifkan plugin Code Embed . Untuk detail lebih lanjut, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress .

menginstal dan mengaktifkan plugin Code Embed

Setelah aktivasi, Anda perlu mengedit posting atau halaman di mana Anda ingin menambahkan javascript. Pada halaman edit posting, klik tombol [Opsi Layar] dan centang opsi  [Bidang Custom].

 

Sekarang gulir ke bawah dan di bawah editor posting, Anda akan melihat metabox [Bidang Kustom] di mana Anda perlu mengklik tautan [Masukkan baru].

 

Bidang nama dan nilai bidang kustom sekarang akan muncul.

Anda perlu memberikan nama untuk bidang khusus dengan awalan CODE (misalnya, CODEmyjscode) dan kemudian menempelkan kode javascript di bidang nilai.

 

Jangan lupa klik tombol [Tambahkan Bidang Khusus] untuk menyimpan bidang khusus Anda.

Sekarang Anda dapat menggunakan bidang khusus ini untuk menanamkan kode JavaScript di mana saja di pos atau halaman ini. Cukup tambahkan kode sematan ini di mana saja di konten posting Anda.

{{CODEmyjscode}}

Anda sekarang dapat menyimpan posting atau halaman Anda dan melihat situs Anda. Anda akan dapat melihat kode javascript dengan menggunakan alat Inspect atau dengan melihat sumber halaman.

Cara – cara yang saya jelaskan di atas adalah untuk pemula dan pemilik situs web. Jika Anda mempelajari pengembangan tema atau plugin WordPress, maka Anda perlu memberikan JavaScript dan stylesheet dengan benar ke proyek Anda.

Cara menambahkan Custom CSS di WordPress

mungkin saja Anda terkadang perlu menambahkan CSS Custom di situs WordPress Anda. Jika menggunakan FTP terlalu membingungkan, maka ada cara yang lebih mudah untuk menambahkan CSS Custom di situs Anda. Pada artikel ini, Saya akan memberi tahu kepada Anda cara menambahkan CSS khusus ke situs WordPress Anda tanpa mengedit file tema apa pun.

Cara 1: Menambahkan Custom CSS Menggunakan Tema Customizer

Sejak WordPress masih versi 4.7, pengguna sekarang dapat menambahkan CSS khusus langsung dari area admin WordPress. Ini sangat mudah dan Anda akan dapat melihat perubahan Anda dengan pratinjau langsung secara instan.

Buka Customize >active site halaman.

JavaScript ajax

 

Ini akan meluncurkan antarmuka penyesuaian tema WordPress.

Anda akan melihat pratinjau langsung situs Anda dengan banyak opsi di panel kiri. Klik pada tab CSS tambahan dari panel kiri.

Pengertian javascript

 

Tab akan bergeser untuk menampilkan kotak sederhana tempat Anda dapat menambahkan CSS khusus. Segera setelah Anda menambahkan aturan CSS yang valid, Anda akan dapat melihatnya diterapkan pada panel pratinjau langsung situs web Anda.

JavaScript dan CSS CUSTOM

 

Anda dapat terus menambahkan kode CSS khusus, sampai Anda puas dengan tampilannya di situs Anda.

Jangan lupa klik tombol [Simpan & Terbitkan] di atas ketika Anda selesai.

Catatan: Setiap CSS khusus yang Anda tambahkan menggunakan penyesuai tema hanya tersedia dengan tema tertentu. Jika Anda ingin menggunakannya dengan tema lain, maka Anda perlu menyalin dan menempelkannya ke tema baru menggunakan metode yang sama.

Cara 2: Menambahkan Custom CSS Menggunakan Plugin

Metode ini mengharuskan Anda untuk menginstal plugin. Ini sangat berguna untuk pengguna yang tidak menggunakan WordPress 4.7 atau versi WordPress yang lebih baru.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Simple Custom CSS . Setelah aktivasi cukup buka Customize >Custom CSS dan tulis atau rekatkan custom CSS Anda.

Belajar javascript

 

Jangan lupa untuk menekan tombol [Perbarui CSS Kustom] untuk menyimpan CSS Anda.

Anda sekarang dapat melihat situs web Anda untuk melihat CSS kustom dalam tindakan.

Catatan: Keuntungan lain menggunakan metode ini adalah bahwa CSS khusus Anda akan tersedia bahkan ketika Anda mengubah tema Anda.

Menggunakan plugin Custom CSS vs Menambahkan CSS di Theme

Kedua metode yang dijelaskan di atas direkomendasikan untuk pemula. Pengguna mahir juga dapat menambahkan CSS khusus langsung ke tema mereka.

Namun, menambahkan potongan CSS khusus ke theme parent Anda tidak disarankan. Perubahan CSS Anda akan hilang jika Anda secara tidak sengaja memperbarui tema tanpa menyimpan perubahan khusus Anda.

Pendekatan terbaik adalah menggunakan tema anak sebagai gantinya. Namun, banyak pemula yang tidak ingin membuat theme child. Selain menambahkan CSS khusus, mereka benar-benar tidak tahu bagaimana mereka akan menggunakan theme child itu.

Menggunakan plugin CSS khusus memungkinkan Anda untuk menyimpan CSS kustom Anda secara independen dari tema Anda. Dengan cara ini Anda dapat dengan mudah beralih tema dan CSS khusus Anda akan tetap ada.

Saya harap artikel ini membantu Anda tentang Cara Menambahkan JavaScript dan CSS Custom di wordpress.

Apabila anda ingin melanjutkan membaca: Cara membuat navigasi breadcrumb di wordpress

Summary
Cara Menambahkan JavaScript dan CSS Custom
Article Name
Cara Menambahkan JavaScript dan CSS Custom
Description
Apakah Anda ingin Menambahkan JavaScript dan CSS Custom di wordpress? Terkadang Anda mungkin perlu menambahkan kode JavaScript ke seluruh situs web atau ke halaman tertentu.
Author
Publisher Name
JavaScript
Publisher Logo

Tinggalkan Balasan