Javascript WordPress: Panduan Pemula

Jika Anda bertanya kepada satu juta pengembang web apa itu JavaScript, Anda akan mendapatkan satu juta jawaban berbeda. Hampir semua yang interaktif di web dilakukan menggunakan JavaScript.

Sebagai sistem manajemen konten (CMS) modern, WordPress dan banyak pluginnya sebagian mengandalkan JavaScript untuk menyelesaikan pekerjaan. Bertentangan dengan apa yang terdengar seperti, JavaScript tidak ada hubungannya dengan bahasa pemrograman Java. Itu hanya disebut untuk tujuan pemasaran.

Mari selami semua yang perlu Anda ketahui untuk memanfaatkan kekuatan gabungan JavaScript dan WordPress.

Apa itu JavaScript?

Dahulu kala, Internet mengandalkan HTML dan CSS secara eksklusif. Kombinasi ini memungkinkan penataan konten yang sangat mendasar. Namun, sangat sedikit yang dapat dilakukan untuk membuat konten menjadi dinamis dan membuat aplikasi web tidak mungkin dilakukan.

Karena server jauh lebih mahal untuk dirawat, pengembang memutuskan untuk menulis JavaScript untuk beroperasi pada mesin klien. Ditulis dengan cara yang mirip dengan bahasa pemrograman fungsional lainnya, JavaScript dapat mengambil data ke dalam fungsi, memprosesnya, dan mengeluarkan data.

Browser web memiliki mesin JavaScript yang tahu cara mengeksekusi kode JavaScript. Misalnya, mesin JavaScript di Chrome adalah v8, sedangkan mesin JavaScript FireFox adalah SpiderMonkey. Untuk alasan ini, Javascript bergantung pada browser untuk "memahami" bagaimana menafsirkan, menangani, dan memanipulasi tampilan data.

Aspek Teknis JavaScript

Tertarik untuk mengetahui lebih banyak tentang teknologi di balik JavaScript? Ada beberapa pembeda penting yang perlu diketahui bagi mereka yang memiliki pengalaman dalam jenis pengembangan lainnya. Pertama, JavaScript adalah tipe-agnostik seperti PHP. Itu berarti bahwa variabelnya tidak memiliki tipe yang ditentukan, dan variabel apa pun dapat ditetapkan ke hampir semua jenis nilai.

Sebagian besar bahasa modern adalah "berorientasi objek", yang berarti bahwa mereka mengandalkan "kelas" yang dapat digunakan kembali yang mewakili objek literal. Yang paling dekat dengan JavaScript adalah melalui "prototipe". Struktur data ini dapat digunakan kembali dan dapat menyimpan nilai tertentu, tetapi fungsionalitas dan kegunaannya jauh lebih terbatas daripada bahasa yang dibangun di sekitar konsep berorientasi objek, seperti Java.

Apa yang Dilakukan JavaScript?

Karena dukungan komunitas yang besar dan investasi dari perusahaan besar seperti Facebook dan bahkan Netflix, JavaScript dapat melakukan lebih dari sekadar beroperasi dalam browser web. JavaScript dapat melakukan sesuatu yang sederhana seperti mengambil tahun berjalan untuk ditampilkan di sebelah simbol hak cipta di situs web, dan pekerjaan yang lebih kompleks seperti melakukan sebagian besar pemrosesan untuk editor gambar online.

Singkatnya, JavaScript melakukan hampir apa pun yang diinginkan pengembang pada mesin klien. JavaScript menyimpan cache secara lokal di mesin klien saat klien mengunjungi situs yang menggunakannya.

Sementara data sensitif harus ditangani di server, banyak aplikasi berbasis web yang banyak menggunakan JavaScript untuk memanfaatkan kekuatan pemrosesan mesin klien. Sekarang kita berada di era "kerangka kerja" tanpa akhir yang membuat pengembangan berbagai jenis konten menjadi lebih cepat, kemungkinannya tidak terbatas.

Apakah JavaScript Aman?

Seperti kebanyakan protokol dan bahasa yang lebih lama, JavaScript pada awalnya tidak dibangun dengan mempertimbangkan keamanan. Ini adalah hal yang sangat wajar untuk dipertanyakan, mengingat betapa lazimnya serangan siber.

Ada ekstensi browser seperti "NoScript" yang hanya memblokir semua kode JavaScript agar tidak dieksekusi. Selama Anda mengikuti aturan umum web dan tidak mengunjungi situs yang tidak tepercaya, Anda boleh mengizinkan JavaScript untuk berjalan.

Karena ini adalah bahasa pemrograman, tentu saja pengguna jahat dapat menyalahgunakannya untuk menyerang komputer Anda. Browser modern akan secara otomatis mendeteksi sebagian besar serangan ini. Jika Anda khawatir tentang keamanan dengan JavaScript WordPress, Anda mungkin mendapatkan ketenangan pikiran dengan plugin keamanan WordPress yang menempatkan sebagian besar aspek keamanan situs web pada autopilot.

Dua Jenis Serangan JavaScript Utama

Pepatah "jaga teman Anda tetap dekat dan musuh Anda lebih dekat" relevan dengan pengembangan dan keamanan. Sangat penting untuk memahami bagaimana orang jahat memanfaatkan JavaScript sehingga Anda dapat menggagalkan upaya mereka!

Skrip Lintas Situs (XSS)

Cross-site scripting (XSS) adalah jenis serangan malware yang dijalankan dengan mengeksploitasi kerentanan lintas situs di situs WordPress mana pun. Faktanya, ini adalah cara paling umum untuk meretas situs WordPress karena ada begitu banyak plugin WordPress yang memiliki kerentanan XSS.

Serangan skrip lintas situs digunakan jika halaman memungkinkan data dikirimkan di dalamnya. Dalam serangan ini, pengguna jahat menempatkan kode JavaScript dalam data yang akan dikirimkan ke halaman yang dapat diakses oleh publik.

Jika tidak ada tindakan mitigasi, kode berbahaya ini sebenarnya menjalankan kode JavaScript di komputer siapa pun yang mengunjungi halaman tersebut. Inilah mengapa penting untuk "membersihkan" input. Ini berarti, sebelum diposting, Anda menghapus hal-hal seperti tanda kurung dan tanda kutip yang akan membuat kode tidak berguna.

Pemalsuan Permintaan Lintas Situs (CSRF)

Jenis serangan ini memanfaatkan halaman web yang mungkin sudah Anda masuki. Skenario yang paling umum akan melibatkan Anda masuk ke bank Anda.

Katakanlah Anda masuk ke rekening bank Anda tetapi kemudian memutuskan untuk membuka situs web torrent yang memiliki CSRF yang siap digunakan. CSRF, jika tidak ada mitigasi browser, mengadopsi pola tautan untuk melakukan hal-hal seperti transfer bank untuk setiap bank besar, lalu menjalankannya di mesin Anda di latar belakang.

Satu skenario yang benar-benar terjadi dengan situs besar dan bank besar adalah bahwa tautan bank untuk mentransfer uang tampak seperti: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 untuk mentransfer $1.000 ke rekening bernomor 12345 .

Bagi bank, sepertinya Anda memintanya, dan karena permintaan itu berasal dari alamat IP Anda, sulit untuk membuktikan bahwa Anda tidak memulainya. Untungnya, sebagian besar browser modern akan secara otomatis mendeteksi dan mencegahnya.

Bisakah Saya Menggunakan JavaScript Di Dalam WordPress?

Ya, Anda dapat menggunakan JavaScript saat mengembangkan WordPress. Perlu diingat bahwa WordPress adalah sistem manajemen konten fleksibel yang memiliki dua mode pengeditan. Salah satunya memungkinkan Anda untuk mengedit kode secara langsung, dan yang lainnya memungkinkan Anda untuk menggunakan editor yang mirip dengan apa yang mungkin Anda lihat pada pengolah kata, juga dikenal sebagai editor "WYSIWYG". Dalam versi WordPress terbaru, editor WYSIWYG disebut Gutenberg.

Ingatlah bahwa Anda juga dapat menggunakan JavaScript saat mengembangkan ekstensi untuk WordPress. Sementara sisi server WordPress adalah PHP, sisi klien hampir 100% dari waktu JavaScript.

Haruskah Saya Belajar JavaScript Untuk WordPress?

Jawaban atas pertanyaan-pertanyaan ini tergantung pada apa yang ingin Anda lakukan dengan WordPress. Jika Anda hanya ingin beberapa halaman statis yang Anda hasilkan menggunakan platform, Anda mungkin akan baik-baik saja tanpa mempelajari JavaScript.

Sisi baiknya, cukup mudah untuk memulai dengan JavaScript, dan Anda juga akan belajar banyak tentang cara kerja HTML dan CSS. Namun, selain pelatihan WordPress, Anda perlu belajar JavaScript jika ingin membuat situs yang dinamis dan mudah diingat.

Peringatan cepat: jika Anda seorang pengembang web pemula, jangan berharap untuk menguasai JavaScript dalam hitungan hari. JavaScript terkenal karena memiliki pesan kesalahan yang sangat kabur dan sering dikritik karena "kode spageti". Ini berarti bahwa selama bertahun-tahun, pengembang telah menumpuk banyak kode tanpa mengaturnya dengan benar. Selain itu, sebagian besar pengembang mempelajari cara memprogram dalam kerangka kerja yang menggunakan JavaScript tetapi secara sintaksis sedikit berbeda.

Anda terutama harus menginvestasikan waktu dalam belajar JavaScript jika Anda seorang freelancer atau lembaga yang mengelola situs klien. Meskipun ada alat terbaik yang memungkinkan Anda mengelola beberapa situs WordPress, tidak ada plugin yang dapat membuat situs untuk Anda!

Selain itu, jika Anda memiliki cita-cita untuk menjadi pengembang web, mempelajari JavaScript bermanfaat untuk karier berikut:

• Pengembang ujung depan
• Pengembang Back-end
• Pengembang tumpukan penuh

Selain itu, mempelajari JavaScript, bersama dengan HTML, CSS, dan PHP yang lebih canggih berfungsi sebagai dasar WP yang kokoh yang kemungkinan akan mengurangi biaya overhead untuk Anda. Anda tidak perlu lagi membayar kontraktor luar, memotong keuntungan Anda, untuk melakukan tugas-tugas yang pada kenyataannya mungkin membutuhkan waktu beberapa menit untuk diselesaikan. Setelah Anda menguasai JavaScript, Anda dapat beralih ke kerangka kerja populer, seperti React dan Angular, untuk membuat aplikasi yang benar-benar unik dan responsif di dalam WordPress.

Bagaimana Saya Menulis JavaScript Saat Coding Di WordPress?

Meskipun menambahkan JavaScript ke situs WordPress tidak semudah menambahkan CSS dan HTML, Anda tidak perlu waktu lama untuk memulai. Ada dua cara berbeda untuk mendekatinya, dan masing-masing memiliki tujuan yang berbeda.

Metode 1: Di Setiap Halaman

Jika Anda ingin menjalankan skrip yang sama di setiap halaman situs WordPress Anda, menambahkan kode secara manual ke setiap halaman akan sangat membosankan. Tempat yang tepat untuk menyisipkan JavaScript dalam HTML adalah di dalam header dan footer halaman.

Ada beberapa plugin gratis yang akan menggunakan JavaScript kustom Anda dan meletakkannya di header dan/atau footer setiap halaman di situs WordPress Anda. Admin WordPress menyukai plugin ini karena mereka bekerja sempurna dengan Google Analytics, memastikan bahwa setiap klik halaman dihitung, membantu meningkatkan peringkat SEO lebih cepat.

Metode 2: JavaScript Berbeda di Setiap Halaman

Katakanlah Anda menjalankan situs WordPress yang memiliki alat berbeda pada setiap halaman yang bergantung pada setidaknya satu "perpustakaan" untuk berfungsi. Memaksa semua JavaScript Anda untuk memuat di setiap halaman, terutama saat tidak diperlukan, hanya akan memperlambat akses ke situs Anda. Akal sehat memberi tahu kami bahwa memperlambat pengalaman pengunjung Anda bukanlah cara terbaik untuk memenangkan bisnis!

Ada banyak tutorial di web yang memiliki metode yang sangat rumit untuk melakukan proses ini. Meskipun benar bahwa ini dapat dilakukan dengan melakukan pengeditan yang rumit di dalam file functions.php Anda, tidak ada kebutuhan nyata untuk mengambil pendekatan ini kecuali Anda menikmati sakit kepala.

Sebagai gantinya, instal plugin Code Embed di situs Anda. Ini akan memungkinkan Anda untuk menambahkan JavaScript dan menyematkannya di mana pun Anda mau di dalam halaman.

Menggunakan Plugin CodeEmbed

Setelah menginstal plugin Code Embed, buka Screen Options dan tekan kotak centang yang mengatakan "Bidang Kustom". Ini akan memungkinkan Anda untuk menambahkan JavaScript Anda ke halaman.

Pada halaman pengeditan, Anda akan melihat kotak yang bertuliskan “Bidang Kustom”, dengan opsi untuk “Masukkan Bidang Kustom Baru”. Klik itu, dan Anda akan memiliki kotak teks kosong untuk memasukkan nama kode JavaScript Anda, serta untuk kode itu sendiri.

Untuk menghindari konflik dengan kode WordPress yang ada, Anda harus memulai nama kode JavaScript Anda dengan huruf besar “KODE”. Sesuatu seperti "CODEtimer" akan baik-baik saja. Kemudian Anda akan menambahkan JavaScript yang sebenarnya ke dalam kotak lain. Pastikan Anda menyertakan tag pembuka dan penutup skrip !

Setelah selesai, cukup klik tombol yang bertuliskan “Tambahkan Bidang Kustom”. Terakhir, identifikasi di mana pada halaman Anda ingin kode JavaScript dijalankan. Misalnya, jika kode memuat penghitung waktu, temukan tempat di halaman Anda yang ingin Anda sisipkan penghitung waktu tersebut. Anda kemudian akan menggunakan sintaks yang tepat [[CODEtimer]] agar WordPress memasukkan JavaScript Anda di sana, dan selesai!

Bagaimana Saya Menyertakan File JavaScript dan CSS Saya di WordPress?

Meskipun WordPress memiliki tema bawaan, banyak pengembang web lebih memilih untuk memiliki desain yang lebih unik dan akan menggunakan CSS mereka sendiri. Anda juga memerlukan cara untuk menyimpan file JavaScript tersebut.

Di bagian ini, Anda harus menuju ke File Manager Anda dan mencari file bernama "functions.php". Perhatikan bahwa ini akan berada di folder tempat tema dasar situs Anda berada.

Menambahkan CSS ke functions.php

Setelah Anda berada di file functions.php , ikuti langkah-langkah ini:

1. Di baris baru, buat fungsi kosong dengan menambahkan fungsi kode
   addMyCSS() { #Isi Ini Nanti }
2. “Daftar” file CSS Anda dengan WordPress dengan menggunakan fungsi bawaan yang disebut wp_register_style pada langkah berikutnya
3. Hapus filler yang kita masukkan ke dalam kode dan sebagai gantinya masukkan wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. Kami sekarang telah memberi tahu WordPress apa yang harus disebut gaya CSS kami dan di mana letaknya. Sekarang saatnya untuk "mengantrekan" gaya, atau memberi tahu WordPress bahwa kami siap menggunakannya.
5. Tetap berada di dalam blok fungsi addMyCSS , tambahkan kode wp_enqueue_style('name_of_css_style'); tepat di bawah kode yang kita masukkan pada langkah terakhir.
6. Ada satu langkah terakhir, tetapi pertama-tama, pastikan Anda berada DI LUAR dari seluruh fungsi yang kita buat dan di bagian umum dari file PHP.
7. Di luar addMyCSS , cukup tambahkan baris berikut: add_action('wp_enqueue_scripts','name_of_css_style'); . Ini memberitahu WordPress untuk memicu pemuatan file ini pada pemuatan halaman.

Anda mungkin bertanya-tanya mengapa kami memiliki wp_enqueue_scripts di fungsi add_action untuk stylesheet. Ini hanyalah cara WordPress selalu mengimplementasikan fitur tersebut.

Menambahkan file JavaScript ke WordPress

Sekarang setelah kita membahas proses menghasilkan fungsi, mendaftarkan file, dan menambahkan tindakan, bagian ini seharusnya mudah!

1. Buat fungsi di functions.php bernama addMyJS seperti yang kita lakukan dengan addMyCSS .
2. Kami akan menggunakan fungsi wp_register_script , tetapi ini sedikit lebih rumit. Ini memiliki lima "parameter" (item dimasukkan ke dalam tanda kurung). Lihat di bawah untuk melihat apa masing-masing parameter.
3. wp_register_script(1. Nama Skrip Anda, 2. plugins_url(location_of_script.js, __FILE__), 3. array dependensi JS, biasanya array(jquery), 4. (Opsional) versi file JS Anda dalam tanda kutip tunggal, 5. harus true jika Anda menginginkan JS di footer Anda, false jika Anda menginginkannya di header);
4. Berikut adalah contoh praktis dari beberapa JavaScript untuk dijalankan di footer tema: wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. Sekali lagi, DI LUAR fungsi addMyJS kami, “enqueue” skrip Anda dengan meletakkan ini di area umum PHP Anda: add_action( 'wp_enqueue_scripts', 'addMyJS' );

Ini mungkin terlihat rumit, tetapi begitu Anda menguasainya, itu akan memakan waktu kurang dari satu menit, jadi jangan takut!

Plugin Apa yang Dapat Saya Gunakan untuk Menambahkan JavaScript ke WordPress?

Ada banyak plugin yang sepenuhnya gratis hanya untuk tujuan ini. Masing-masing bekerja sedikit berbeda, jadi Anda bereksperimen dengan beberapa sebelum Anda melakukan. Berikut adalah lima yang utama untuk dicoba.

• ASync – Uniknya, plugin ini memuat file JS dan CSS Anda secara terpisah dari halaman Anda yang lain. Ini bisa sangat membantu jika ada kesalahan pengkodean yang akan menghentikan pemuatan halaman Anda tanpa batas.

• JS di Widget – Hanya perlu menambahkan beberapa baris kode untuk sesuatu seperti Google Analytics? Plugin ini menghilangkan kerumitan dan akan memungkinkan cuplikan kecil ditambahkan ke situs WordPress Anda.

• Zia CSS/JS Helper – Sejauh ini yang terbaik bagi mereka yang berpengalaman dengan pengembangan web HTML/CSS/JS klasik. Itu membuat fungsionalitas pengeditan WordPress Anda seperti mengedit situs melalui pengelola file cPanel. Anda dapat menggunakan CSS dan JavaScript sebaris untuk menambahkan bit kode dengan cepat, membuat dan mengelola file eksternal, dan banyak lagi.

Selalu Cadangkan Situs Anda Terlebih Dahulu!

Meskipun sebagian besar plugin WordPress tidak akan membahayakan situs Anda, selalu ada kemungkinan Anda akan mengalami masalah. Sebelum Anda menginstal plugin tambahan atau memodifikasi situs Anda, buat cadangan situs Anda menggunakan plugin cadangan WordPress yang dapat menangani pencadangan lengkap instalasi WordPress Anda, seperti BackupBuddy. Hemat waktu berjam-jam untuk kemungkinan pengerjaan ulang dan pastikan semua kerja keras Anda tidak sia-sia.

Bisakah Saya Menggunakan API WordPress Menggunakan JavaScript?

Seperti yang Anda ketahui, WordPress memiliki serangkaian luas API, atau Antarmuka Pemrograman Aplikasi. API pada dasarnya adalah fungsi sisi server yang dapat Anda manfaatkan dalam bahasa seperti JavaScript. Metode yang lebih baru dan lebih modern bagi pengembang untuk mempelajari fungsionalitas API WordPress adalah melalui halaman Referensi Kode API WordPress WordPress.

Di sinilah kami mendapatkan "fungsi bawaan" yang kami gunakan sebelumnya. Kita bisa berhari-hari membahas setiap fungsi di API dan bagaimana mereka bekerja bersama-sama dengan JavaScript. Namun, itu adalah topik lanjutan yang hanya membutuhkan waktu dan dedikasi individu untuk belajar.

Apakah Ada Pustaka JavaScript yang Disesuaikan untuk WordPress?

Ya! Menyadari bahwa banyak pengembang belum menguasai keseluruhan konten API WordPress, banyak pemrogram telah membuat pustaka JavaScript yang dapat dengan mudah disematkan, menggunakan salah satu plugin yang telah kita bahas sebelumnya.

Sebagian besar pustaka JavaScript ditemukan di GitHub dan sepenuhnya gratis. Ada ratusan ribu pustaka JavaScript yang tersedia yang kompatibel dengan WordPress, mulai dari yang menambahkan efek menyenangkan ke WordPress hingga yang memungkinkan Anda membuat situs dengan tata letak yang sangat mirip dengan Pinterest!

Pustaka paling terkenal yang digunakan dengan WordPress (dan sebagian besar situs) disebut jQuery. jQuery menghilangkan kerumitan JavaScript dan setelah Anda menguasainya, Anda akan menulis fungsi dengan cepat dan mudah.

Membantu! JavaScript WordPress Saya Tidak Berfungsi!

Salah satu bagian JavaScript yang kurang beruntung adalah kesalahannya tidak terlihat jelas. Dan menambahkan WordPress di atasnya bisa membuatnya cukup membingungkan.

Beberapa kesalahan dapat disebabkan semudah tanda kutip yang terlupakan. Lainnya dapat disebabkan oleh kesalahan pengkodean utama yang tidak mudah diidentifikasi. Jadi, bagaimana pengembang profesional membedakannya?

Ada dua kunci utama untuk pemecahan masalah: fungsi JavaScript console.log dan konsol debugging browser. Konsol Chrome khususnya sangat bagus untuk ini.

console.log

Ini dapat digunakan untuk melihat apa nilai variabel pada titik tertentu dalam suatu fungsi dan memastikan bahwa bagian dari fungsi benar-benar tercapai. Di dalam file JavaScript, Anda cukup meletakkan sesuatu seperti console.log("test"); .

Konsol Debug

Tergantung pada browser yang digunakan, pengaturan konsol akan berbeda. Secara umum, Anda hanya perlu menekan F12 untuk membukanya, lalu klik tab "Konsol".

Konsol akan menunjukkan baris apa, dari file JavaScript apa, ada kesalahan. Biasanya menunjukkan "stacktrace" penuh, atau serangkaian file yang harus dilalui sampai Anda menekan pelakunya. Ini juga tempat pesan console.log Anda dicetak.

Penutup: JavaScript + WordPress

Ada alat profesional yang akan memberi Anda lebih banyak wawasan, tetapi ini biasanya membutuhkan biaya yang cukup mahal. Kabar baiknya adalah saat Anda berkembang sebagai pengembang JavaScript WordPress terbesar berikutnya di dunia, alat akan meningkat bersama Anda!

Kristen Wright

Kristen telah menulis tutorial untuk membantu pengguna WordPress sejak 2011. Anda biasanya dapat menemukannya mengerjakan artikel baru untuk blog iThemes atau mengembangkan sumber daya untuk #WPprosper. Di luar pekerjaan, Kristen menikmati jurnal (dia menulis dua buku!), hiking dan berkemah, memasak, dan petualangan sehari-hari bersama keluarganya, berharap untuk menjalani kehidupan yang lebih kekinian.