{"id":3896,"date":"2025-04-16T20:56:57","date_gmt":"2025-04-16T13:56:57","guid":{"rendered":"https:\/\/www.jagowebdesign.com\/website\/?p=3896"},"modified":"2025-04-16T20:56:57","modified_gmt":"2025-04-16T13:56:57","slug":"cara-menambahkan-kode-javascript-di-wordpress-dengan-aman","status":"publish","type":"post","link":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/","title":{"rendered":"Cara Menambahkan Kode JavaScript di WordPress dengan Aman"},"content":{"rendered":"<p class=\"\" data-start=\"248\" data-end=\"730\">WordPress memberikan kebebasan kepada penggunanya untuk mengelola konten dan menyesuaikan tampilan situs. Salah satu cara untuk meningkatkan fungsionalitas situs adalah dengan menambahkan kode <strong data-start=\"441\" data-end=\"455\">JavaScript<\/strong>. Baik itu untuk membuat animasi, form interaktif, atau menambahkan berbagai fitur lainnya, JavaScript dapat memberikan pengalaman pengguna yang lebih baik. Namun, untuk menjaga situs tetap aman, penting untuk menambahkan kode <strong data-start=\"682\" data-end=\"706\">JavaScript WordPress<\/strong> dengan cara yang benar.<\/p>\n<p class=\"\" data-start=\"732\" data-end=\"879\">Pada artikel ini, kita akan membahas bagaimana cara menambahkan <strong data-start=\"796\" data-end=\"819\">custom JS WordPress<\/strong> dengan aman tanpa merusak situs atau mempengaruhi performa.<\/p>\n<hr class=\"\" data-start=\"881\" data-end=\"884\" \/>\n<h2 class=\"\" data-start=\"886\" data-end=\"932\">Kenapa Menambahkan JavaScript di WordPress?<\/h2>\n<p class=\"\" data-start=\"934\" data-end=\"1093\">JavaScript adalah bahasa pemrograman yang digunakan untuk menciptakan interaksi dinamis di halaman web. Misalnya, kamu mungkin ingin menambahkan fitur seperti:<\/p>\n<ul data-start=\"1094\" data-end=\"1190\">\n<li class=\"\" data-start=\"1094\" data-end=\"1114\">\n<p class=\"\" data-start=\"1096\" data-end=\"1114\"><strong data-start=\"1096\" data-end=\"1113\">Slider gambar<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"1115\" data-end=\"1134\">\n<p class=\"\" data-start=\"1117\" data-end=\"1134\"><strong data-start=\"1117\" data-end=\"1133\">Efek animasi<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"1135\" data-end=\"1159\">\n<p class=\"\" data-start=\"1137\" data-end=\"1159\"><strong data-start=\"1137\" data-end=\"1158\">Validasi formulir<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"1160\" data-end=\"1190\">\n<p class=\"\" data-start=\"1162\" data-end=\"1190\"><strong data-start=\"1162\" data-end=\"1189\">Integrasi API eksternal<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<p class=\"\" data-start=\"1192\" data-end=\"1427\">Dengan menambahkan JavaScript di WordPress, kamu dapat memperkaya situs dan meningkatkan pengalaman pengunjung. Namun, karena JavaScript dapat mempengaruhi performa situs, penting untuk menambahkannya dengan cara yang aman dan efisien.<\/p>\n<hr class=\"\" data-start=\"1429\" data-end=\"1432\" \/>\n<h2 class=\"\" data-start=\"1434\" data-end=\"1490\">Metode Aman untuk Menambahkan JavaScript di WordPress<\/h2>\n<p class=\"\" data-start=\"1492\" data-end=\"1672\">Ada beberapa cara untuk menambahkan <strong data-start=\"1528\" data-end=\"1560\">kode JavaScript di WordPress<\/strong>, namun tidak semua cara aman atau efektif. Berikut adalah metode yang aman dan disarankan untuk menambahkannya.<\/p>\n<h3 class=\"\" data-start=\"1674\" data-end=\"1749\">1. Menambahkan JavaScript Melalui Tema WordPress (File <code data-start=\"1733\" data-end=\"1748\">functions.php<\/code>)<\/h3>\n<p class=\"\" data-start=\"1751\" data-end=\"2031\">Salah satu cara paling umum untuk menambahkan <strong data-start=\"1797\" data-end=\"1820\">custom JS WordPress<\/strong> adalah dengan menambahkan kode JavaScript di file <strong data-start=\"1871\" data-end=\"1888\">functions.php<\/strong> di tema kamu. Cara ini memastikan bahwa skrip hanya dimuat pada halaman yang relevan, yang dapat membantu menjaga kinerja situs tetap optimal.<\/p>\n<p class=\"\" data-start=\"2033\" data-end=\"2053\"><strong data-start=\"2033\" data-end=\"2053\">Langkah-langkah:<\/strong><\/p>\n<ol data-start=\"2055\" data-end=\"3307\">\n<li class=\"\" data-start=\"2055\" data-end=\"2221\">\n<p class=\"\" data-start=\"2058\" data-end=\"2087\"><strong data-start=\"2058\" data-end=\"2086\">Akses file functions.php<\/strong>:<\/p>\n<ul data-start=\"2091\" data-end=\"2221\">\n<li class=\"\" data-start=\"2091\" data-end=\"2128\">\n<p class=\"\" data-start=\"2093\" data-end=\"2128\">Masuk ke dashboard admin WordPress.<\/p>\n<\/li>\n<li class=\"\" data-start=\"2132\" data-end=\"2170\">\n<p class=\"\" data-start=\"2134\" data-end=\"2170\">Pilih <strong data-start=\"2140\" data-end=\"2169\">Appearance &gt; Theme Editor<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"2174\" data-end=\"2221\">\n<p class=\"\" data-start=\"2176\" data-end=\"2221\">Cari file <strong data-start=\"2186\" data-end=\"2203\">functions.php<\/strong> di sidebar kanan.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\" data-start=\"2223\" data-end=\"3204\">\n<p class=\"\" data-start=\"2226\" data-end=\"2410\"><strong data-start=\"2226\" data-end=\"2276\">Menambahkan Kode untuk Memuat Skrip JavaScript<\/strong>: Untuk menambahkan JavaScript di situs kamu, gunakan fungsi <code data-start=\"2340\" data-end=\"2361\">wp_enqueue_script()<\/code>. Tambahkan kode berikut di file <code data-start=\"2394\" data-end=\"2409\">functions.php<\/code>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">php<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><\/span><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-php\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><\/span> <span class=\"hljs-title\">tambah_javascript_saya<\/span>() {<br \/>\n    <span class=\"hljs-title function_ invoke__\">wp_enqueue_script<\/span>(<span class=\"hljs-string\">'custom-script'<\/span>, <span class=\"hljs-title function_ invoke__\">get_template_directory_uri<\/span>() . <span class=\"hljs-string\">'\/js\/custom.js'<\/span>, <span class=\"hljs-keyword\">array<\/span>(), <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-literal\">true<\/span>);<br \/>\n}<br \/>\n<span class=\"hljs-title function_ invoke__\">add_action<\/span>(<span class=\"hljs-string\">'wp_enqueue_scripts'<\/span>, <span class=\"hljs-string\">'tambah_javascript_saya'<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"2652\" data-end=\"2663\">Penjelasan:<\/p>\n<ul data-start=\"2667\" data-end=\"3204\">\n<li class=\"\" data-start=\"2667\" data-end=\"2754\">\n<p class=\"\" data-start=\"2669\" data-end=\"2754\"><strong data-start=\"2669\" data-end=\"2692\">wp_enqueue_script()<\/strong>: Fungsi ini digunakan untuk memuat skrip JavaScript di situs.<\/p>\n<\/li>\n<li class=\"\" data-start=\"2758\" data-end=\"2839\">\n<p class=\"\" data-start=\"2760\" data-end=\"2839\"><strong data-start=\"2760\" data-end=\"2792\">get_template_directory_uri()<\/strong>: Fungsi ini memberikan path ke direktori tema.<\/p>\n<\/li>\n<li class=\"\" data-start=\"2843\" data-end=\"2968\">\n<p class=\"\" data-start=\"2845\" data-end=\"2968\"><strong data-start=\"2845\" data-end=\"2864\">&#8216;\/js\/custom.js&#8217;<\/strong>: Path ke file JavaScript kamu, pastikan file <code data-start=\"2910\" data-end=\"2921\">custom.js<\/code> berada di dalam folder <code data-start=\"2945\" data-end=\"2949\">js<\/code> di direktori tema.<\/p>\n<\/li>\n<li class=\"\" data-start=\"2972\" data-end=\"3101\">\n<p class=\"\" data-start=\"2974\" data-end=\"3101\"><strong data-start=\"2974\" data-end=\"2985\">array()<\/strong>: Parameter ini digunakan untuk mendeklarasikan dependensi (misalnya, skrip lain yang harus dimuat terlebih dahulu).<\/p>\n<\/li>\n<li class=\"\" data-start=\"3105\" data-end=\"3204\">\n<p class=\"\" data-start=\"3107\" data-end=\"3204\"><strong data-start=\"3107\" data-end=\"3115\">true<\/strong>: Ini menunjukkan bahwa skrip akan dimuat di footer situs, yang lebih baik untuk kinerja.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\" data-start=\"3206\" data-end=\"3307\">\n<p class=\"\" data-start=\"3209\" data-end=\"3307\"><strong data-start=\"3209\" data-end=\"3229\">Simpan Perubahan<\/strong>: Klik <strong data-start=\"3239\" data-end=\"3254\">Update File<\/strong> untuk menyimpan perubahan pada file <code data-start=\"3291\" data-end=\"3306\">functions.php<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p class=\"\" data-start=\"3309\" data-end=\"3560\">Dengan cara ini, kamu dapat menambahkan <strong data-start=\"3349\" data-end=\"3372\">custom JS WordPress<\/strong> tanpa merusak struktur situs. Pastikan kamu selalu menggunakan <strong data-start=\"3436\" data-end=\"3459\">wp_enqueue_script()<\/strong> dan bukan menambahkan <code data-start=\"3482\" data-end=\"3492\">&lt;script&gt;<\/code> langsung ke file template untuk menghindari masalah kompatibilitas.<\/p>\n<hr class=\"\" data-start=\"3562\" data-end=\"3565\" \/>\n<h3 class=\"\" data-start=\"3567\" data-end=\"3611\">2. Menambahkan JavaScript Melalui Plugin<\/h3>\n<p class=\"\" data-start=\"3613\" data-end=\"3820\">Jika kamu tidak ingin mengedit file tema atau ingin cara yang lebih fleksibel, kamu bisa menggunakan plugin untuk menambahkan JavaScript. Salah satu plugin yang populer adalah <strong data-start=\"3789\" data-end=\"3819\">Insert Headers and Footers<\/strong>.<\/p>\n<p class=\"\" data-start=\"3822\" data-end=\"3842\"><strong data-start=\"3822\" data-end=\"3842\">Langkah-langkah:<\/strong><\/p>\n<ol data-start=\"3844\" data-end=\"4504\">\n<li class=\"\" data-start=\"3844\" data-end=\"4053\">\n<p class=\"\" data-start=\"3847\" data-end=\"3892\"><strong data-start=\"3847\" data-end=\"3891\">Instal Plugin Insert Headers and Footers<\/strong>:<\/p>\n<ul data-start=\"3896\" data-end=\"4053\">\n<li class=\"\" data-start=\"3896\" data-end=\"3933\">\n<p class=\"\" data-start=\"3898\" data-end=\"3933\">Masuk ke dashboard admin WordPress.<\/p>\n<\/li>\n<li class=\"\" data-start=\"3937\" data-end=\"3967\">\n<p class=\"\" data-start=\"3939\" data-end=\"3967\">Pilih <strong data-start=\"3945\" data-end=\"3966\">Plugins &gt; Add New<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"3971\" data-end=\"4053\">\n<p class=\"\" data-start=\"3973\" data-end=\"4053\">Cari <strong data-start=\"3978\" data-end=\"4008\">Insert Headers and Footers<\/strong>, lalu klik <strong data-start=\"4020\" data-end=\"4035\">Install Now<\/strong> dan <strong data-start=\"4040\" data-end=\"4052\">Activate<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\" data-start=\"4055\" data-end=\"4434\">\n<p class=\"\" data-start=\"4058\" data-end=\"4090\"><strong data-start=\"4058\" data-end=\"4089\">Menambahkan Kode JavaScript<\/strong>:<\/p>\n<ul data-start=\"4094\" data-end=\"4297\">\n<li class=\"\" data-start=\"4094\" data-end=\"4169\">\n<p class=\"\" data-start=\"4096\" data-end=\"4169\">Setelah plugin aktif, pergi ke <strong data-start=\"4127\" data-end=\"4168\">Settings &gt; Insert Headers and Footers<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"4173\" data-end=\"4297\">\n<p class=\"\" data-start=\"4175\" data-end=\"4297\">Di bagian <strong data-start=\"4185\" data-end=\"4206\">Scripts in Footer<\/strong>, masukkan kode JavaScript kamu. Pastikan kode yang dimasukkan berada dalam tag <code data-start=\"4286\" data-end=\"4296\">&lt;script&gt;<\/code>.<\/p>\n<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><\/span><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span><\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<br \/>\n    <span class=\"hljs-comment\">\/\/ JavaScript custom kamu<\/span><br \/>\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">\"Hello, world!\"<\/span>);<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li class=\"\" data-start=\"4436\" data-end=\"4504\">\n<p class=\"\" data-start=\"4439\" data-end=\"4504\"><strong data-start=\"4439\" data-end=\"4459\">Simpan Perubahan<\/strong>: Klik <strong data-start=\"4469\" data-end=\"4477\">Save<\/strong> untuk menyimpan perubahan.<\/p>\n<\/li>\n<\/ol>\n<p class=\"\" data-start=\"4506\" data-end=\"4660\">Dengan menggunakan plugin ini, kamu bisa dengan mudah menambahkan <strong data-start=\"4572\" data-end=\"4596\">JavaScript WordPress<\/strong> tanpa perlu khawatir mengedit file tema atau menyebabkan error.<\/p>\n<hr class=\"\" data-start=\"4662\" data-end=\"4665\" \/>\n<h3 class=\"\" data-start=\"4667\" data-end=\"4733\">3. Menambahkan JavaScript Menggunakan Plugin Custom JavaScript<\/h3>\n<p class=\"\" data-start=\"4735\" data-end=\"5023\">Jika kamu sering menambahkan JavaScript di berbagai bagian situs dan ingin lebih fleksibel, kamu bisa menggunakan plugin seperti <strong data-start=\"4864\" data-end=\"4892\">Simple Custom CSS and JS<\/strong>. Plugin ini memungkinkan kamu untuk menambahkan kode JavaScript secara langsung dari dashboard WordPress tanpa mengedit file tema.<\/p>\n<p class=\"\" data-start=\"5025\" data-end=\"5045\"><strong data-start=\"5025\" data-end=\"5045\">Langkah-langkah:<\/strong><\/p>\n<ol data-start=\"5047\" data-end=\"5580\">\n<li class=\"\" data-start=\"5047\" data-end=\"5214\">\n<p class=\"\" data-start=\"5050\" data-end=\"5093\"><strong data-start=\"5050\" data-end=\"5092\">Instal Plugin Simple Custom CSS and JS<\/strong>:<\/p>\n<ul data-start=\"5097\" data-end=\"5214\">\n<li class=\"\" data-start=\"5097\" data-end=\"5130\">\n<p class=\"\" data-start=\"5099\" data-end=\"5130\">Masuk ke <strong data-start=\"5108\" data-end=\"5129\">Plugins &gt; Add New<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"5134\" data-end=\"5214\">\n<p class=\"\" data-start=\"5136\" data-end=\"5214\">Cari <strong data-start=\"5141\" data-end=\"5169\">Simple Custom CSS and JS<\/strong>, lalu klik <strong data-start=\"5181\" data-end=\"5196\">Install Now<\/strong> dan <strong data-start=\"5201\" data-end=\"5213\">Activate<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\" data-start=\"5216\" data-end=\"5462\">\n<p class=\"\" data-start=\"5219\" data-end=\"5246\"><strong data-start=\"5219\" data-end=\"5245\">Menambahkan JavaScript<\/strong>:<\/p>\n<ul data-start=\"5250\" data-end=\"5462\">\n<li class=\"\" data-start=\"5250\" data-end=\"5319\">\n<p class=\"\" data-start=\"5252\" data-end=\"5319\">Setelah plugin aktif, pergi ke <strong data-start=\"5283\" data-end=\"5318\">Custom CSS &amp; JS &gt; Add Custom JS<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"5323\" data-end=\"5369\">\n<p class=\"\" data-start=\"5325\" data-end=\"5369\">Pilih <strong data-start=\"5331\" data-end=\"5345\">JavaScript<\/strong> dan masukkan kode kamu.<\/p>\n<\/li>\n<li class=\"\" data-start=\"5373\" data-end=\"5439\">\n<p class=\"\" data-start=\"5375\" data-end=\"5439\">Pilih apakah kode ini akan dimuat di <strong data-start=\"5412\" data-end=\"5422\">header<\/strong> atau <strong data-start=\"5428\" data-end=\"5438\">footer<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"5443\" data-end=\"5462\">\n<p class=\"\" data-start=\"5445\" data-end=\"5462\">Klik <strong data-start=\"5450\" data-end=\"5461\">Publish<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\" data-start=\"5464\" data-end=\"5580\">\n<p class=\"\" data-start=\"5467\" data-end=\"5580\"><strong data-start=\"5467\" data-end=\"5478\">Selesai<\/strong>: Skrip JavaScript kamu akan segera ditambahkan ke situs tanpa mengedit file tema atau plugin lainnya.<\/p>\n<\/li>\n<\/ol>\n<hr class=\"\" data-start=\"5582\" data-end=\"5585\" \/>\n<h3 class=\"\" data-start=\"5587\" data-end=\"5642\">4. Menambahkan JavaScript di Halaman atau Postingan<\/h3>\n<p class=\"\" data-start=\"5644\" data-end=\"5779\">Jika kamu hanya ingin menambahkan JavaScript ke halaman atau posting tertentu, kamu bisa menggunakan <strong data-start=\"5745\" data-end=\"5758\">blok HTML<\/strong> di editor Gutenberg.<\/p>\n<p class=\"\" data-start=\"5781\" data-end=\"5801\"><strong data-start=\"5781\" data-end=\"5801\">Langkah-langkah:<\/strong><\/p>\n<ol data-start=\"5803\" data-end=\"6226\">\n<li class=\"\" data-start=\"5803\" data-end=\"5890\">\n<p class=\"\" data-start=\"5806\" data-end=\"5838\"><strong data-start=\"5806\" data-end=\"5837\">Edit Halaman atau Postingan<\/strong>:<\/p>\n<ul data-start=\"5842\" data-end=\"5890\">\n<li class=\"\" data-start=\"5842\" data-end=\"5890\">\n<p class=\"\" data-start=\"5844\" data-end=\"5890\">Buka editor halaman atau posting di WordPress.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"\" data-start=\"5892\" data-end=\"6099\">\n<p class=\"\" data-start=\"5895\" data-end=\"5916\"><strong data-start=\"5895\" data-end=\"5915\">Tambah Blok HTML<\/strong>:<\/p>\n<ul data-start=\"5920\" data-end=\"6024\">\n<li class=\"\" data-start=\"5920\" data-end=\"5969\">\n<p class=\"\" data-start=\"5922\" data-end=\"5969\">Tambahkan blok <strong data-start=\"5937\" data-end=\"5952\">Custom HTML<\/strong> ke dalam konten.<\/p>\n<\/li>\n<li class=\"\" data-start=\"5973\" data-end=\"6024\">\n<p class=\"\" data-start=\"5975\" data-end=\"6024\">Masukkan kode JavaScript di dalam tag <code data-start=\"6013\" data-end=\"6023\">&lt;script&gt;<\/code>:<\/p>\n<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><\/span><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-title function_\">alert<\/span>(<span class=\"hljs-string\">'Hello, World!'<\/span>);<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li class=\"\" data-start=\"6101\" data-end=\"6226\">\n<p class=\"\" data-start=\"6104\" data-end=\"6129\"><strong data-start=\"6104\" data-end=\"6128\">Simpan dan Terbitkan<\/strong>:<\/p>\n<ul data-start=\"6133\" data-end=\"6226\">\n<li class=\"\" data-start=\"6133\" data-end=\"6226\">\n<p class=\"\" data-start=\"6135\" data-end=\"6226\">Setelah menambahkan JavaScript, klik <strong data-start=\"6172\" data-end=\"6182\">Update<\/strong> atau <strong data-start=\"6188\" data-end=\"6199\">Publish<\/strong> untuk menyimpan perubahan.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p class=\"\" data-start=\"6228\" data-end=\"6370\">Namun, cara ini sebaiknya hanya digunakan untuk kebutuhan <strong data-start=\"6286\" data-end=\"6300\">JavaScript<\/strong> sederhana yang hanya perlu diterapkan pada satu halaman atau posting.<\/p>\n<hr class=\"\" data-start=\"6372\" data-end=\"6375\" \/>\n<h2 class=\"\" data-start=\"6377\" data-end=\"6422\">Tips Keamanan dalam Menambahkan JavaScript<\/h2>\n<p class=\"\" data-start=\"6424\" data-end=\"6596\">Ketika menambahkan <strong data-start=\"6443\" data-end=\"6466\">custom JS WordPress<\/strong>, penting untuk selalu menjaga keamanan dan performa situs. Berikut adalah beberapa tips untuk menambahkan JavaScript dengan aman:<\/p>\n<ol data-start=\"6598\" data-end=\"7363\">\n<li class=\"\" data-start=\"6598\" data-end=\"6787\">\n<p class=\"\" data-start=\"6601\" data-end=\"6787\"><strong data-start=\"6601\" data-end=\"6657\">Hindari Menggunakan JavaScript yang Tidak Terpercaya<\/strong>: Jangan menambahkan skrip JavaScript dari sumber yang tidak terpercaya, karena ini dapat membuka celah keamanan di situs kamu.<\/p>\n<\/li>\n<li class=\"\" data-start=\"6789\" data-end=\"6976\">\n<p class=\"\" data-start=\"6792\" data-end=\"6976\"><strong data-start=\"6792\" data-end=\"6821\">Gunakan Plugin Terpercaya<\/strong>: Jika kamu menggunakan plugin untuk menambahkan JavaScript, pastikan plugin tersebut berasal dari sumber yang terpercaya dan memiliki ulasan yang baik.<\/p>\n<\/li>\n<li class=\"\" data-start=\"6978\" data-end=\"7178\">\n<p class=\"\" data-start=\"6981\" data-end=\"7178\"><strong data-start=\"6981\" data-end=\"7004\">Jaga Performa Situs<\/strong>: Jangan menambahkan terlalu banyak JavaScript atau skrip besar yang dapat memperlambat waktu muat halaman. Gunakan plugin cache dan minifikasi untuk meningkatkan kinerja.<\/p>\n<\/li>\n<li class=\"\" data-start=\"7180\" data-end=\"7363\">\n<p class=\"\" data-start=\"7183\" data-end=\"7363\"><strong data-start=\"7183\" data-end=\"7198\">Gunakan CDN<\/strong>: Untuk skrip JavaScript eksternal, pertimbangkan untuk menggunakan <strong data-start=\"7269\" data-end=\"7303\">Content Delivery Network (CDN)<\/strong> agar mempercepat pemuatan dan meningkatkan kecepatan situs.<\/p>\n<\/li>\n<\/ol>\n<hr class=\"\" data-start=\"7365\" data-end=\"7368\" \/>\n<h2 class=\"\" data-start=\"7370\" data-end=\"7383\">Kesimpulan<\/h2>\n<p class=\"\" data-start=\"7385\" data-end=\"7681\">Menambahkan <strong data-start=\"7397\" data-end=\"7424\">JavaScript di WordPress<\/strong> dapat meningkatkan interaktivitas dan fungsionalitas situs kamu, tetapi penting untuk melakukannya dengan cara yang aman dan efisien. Baik melalui file tema, plugin, atau editor halaman, selalu pastikan untuk mengikuti praktik terbaik dalam menambahkannya.<\/p>\n<p class=\"\" data-start=\"7683\" data-end=\"8010\">Dengan mengikuti langkah-langkah yang dijelaskan di atas, kamu bisa menambahkan <strong data-start=\"7763\" data-end=\"7786\">custom JS WordPress<\/strong> dengan aman tanpa merusak tampilan atau performa situs kamu. Selalu ingat untuk menjaga situs kamu tetap terbarukan, gunakan plugin yang aman, dan pastikan bahwa kode yang kamu tambahkan berasal dari sumber yang terpercaya.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress memberikan kebebasan kepada penggunanya untuk mengelola konten dan menyesuaikan tampilan situs. Salah satu cara untuk meningkatkan fungsionalitas situs adalah dengan menambahkan kode JavaScript. Baik itu untuk membuat animasi, form interaktif, atau menambahkan berbagai fitur lainnya, JavaScript dapat memberikan pengalaman pengguna yang lebih baik. Namun, untuk menjaga situs tetap aman, penting untuk menambahkan kode JavaScript [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3897,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[38],"tags":[656,657],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Menambahkan Kode JavaScript di WordPress dengan Aman - Demo Website<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Menambahkan Kode JavaScript di WordPress dengan Aman - Demo Website\" \/>\n<meta property=\"og:description\" content=\"WordPress memberikan kebebasan kepada penggunanya untuk mengelola konten dan menyesuaikan tampilan situs. Salah satu cara untuk meningkatkan fungsionalitas situs adalah dengan menambahkan kode JavaScript. Baik itu untuk membuat animasi, form interaktif, atau menambahkan berbagai fitur lainnya, JavaScript dapat memberikan pengalaman pengguna yang lebih baik. Namun, untuk menjaga situs tetap aman, penting untuk menambahkan kode JavaScript [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/\" \/>\n<meta property=\"og:site_name\" content=\"Demo Website\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-16T13:56:57+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.jagowebdesign.com\/website\/wp-content\/uploads\/2025\/04\/26.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Prabowo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prabowo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/\",\"url\":\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/\",\"name\":\"Cara Menambahkan Kode JavaScript di WordPress dengan Aman - Demo Website\",\"isPartOf\":{\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#website\"},\"datePublished\":\"2025-04-16T13:56:57+00:00\",\"dateModified\":\"2025-04-16T13:56:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jagowebdesign.com\/website\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Menambahkan Kode JavaScript di WordPress dengan Aman\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#website\",\"url\":\"https:\/\/www.jagowebdesign.com\/website\/\",\"name\":\"Demo Website\",\"description\":\"Jagowebdesign.Com\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jagowebdesign.com\/website\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a\",\"name\":\"Prabowo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g\",\"caption\":\"Prabowo\"},\"url\":\"https:\/\/www.jagowebdesign.com\/website\/author\/prabowo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Menambahkan Kode JavaScript di WordPress dengan Aman - Demo Website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/","og_locale":"en_US","og_type":"article","og_title":"Cara Menambahkan Kode JavaScript di WordPress dengan Aman - Demo Website","og_description":"WordPress memberikan kebebasan kepada penggunanya untuk mengelola konten dan menyesuaikan tampilan situs. Salah satu cara untuk meningkatkan fungsionalitas situs adalah dengan menambahkan kode JavaScript. Baik itu untuk membuat animasi, form interaktif, atau menambahkan berbagai fitur lainnya, JavaScript dapat memberikan pengalaman pengguna yang lebih baik. Namun, untuk menjaga situs tetap aman, penting untuk menambahkan kode JavaScript [&hellip;]","og_url":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/","og_site_name":"Demo Website","article_published_time":"2025-04-16T13:56:57+00:00","og_image":[{"width":1280,"height":1280,"url":"http:\/\/www.jagowebdesign.com\/website\/wp-content\/uploads\/2025\/04\/26.jpeg","type":"image\/jpeg"}],"author":"Prabowo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Prabowo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/","url":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/","name":"Cara Menambahkan Kode JavaScript di WordPress dengan Aman - Demo Website","isPartOf":{"@id":"https:\/\/www.jagowebdesign.com\/website\/#website"},"datePublished":"2025-04-16T13:56:57+00:00","dateModified":"2025-04-16T13:56:57+00:00","author":{"@id":"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a"},"breadcrumb":{"@id":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jagowebdesign.com\/website\/cara-menambahkan-kode-javascript-di-wordpress-dengan-aman\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jagowebdesign.com\/website\/"},{"@type":"ListItem","position":2,"name":"Cara Menambahkan Kode JavaScript di WordPress dengan Aman"}]},{"@type":"WebSite","@id":"https:\/\/www.jagowebdesign.com\/website\/#website","url":"https:\/\/www.jagowebdesign.com\/website\/","name":"Demo Website","description":"Jagowebdesign.Com","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jagowebdesign.com\/website\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a","name":"Prabowo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g","caption":"Prabowo"},"url":"https:\/\/www.jagowebdesign.com\/website\/author\/prabowo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts\/3896"}],"collection":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/comments?post=3896"}],"version-history":[{"count":1,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts\/3896\/revisions"}],"predecessor-version":[{"id":3898,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts\/3896\/revisions\/3898"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/media\/3897"}],"wp:attachment":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/media?parent=3896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/categories?post=3896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/tags?post=3896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}