Cara Menambahkan Cuplikan Kode Kustom di WordPress (Metode Termudah)

Diterbitkan: 2023-09-11

Apakah Anda mencari cara mudah dan lugas untuk menambahkan cuplikan kode WordPress ke situs web Anda?

Mempelajari WordPress bukan hanya tentang tema dan alat. Terkadang, kekuatan halus dari cuplikan kodelah yang memberikan cita rasa unik pada situs.

Kustomisasi sempurna yang Anda cari? Hal ini dapat dicapai dengan kode yang tepat, tetapi masalahnya adalah kesalahan sekecil apa pun dapat merusak situs web Anda.

Pada artikel ini, kami akan menunjukkan cara mudah menambahkan cuplikan kode khusus di WordPress tanpa merusak situs web Anda.

Apa itu Cuplikan Kode di WordPress?

Di bawah antarmuka WordPress yang ramah pengguna, terdapat dunia kode yang mendukung setiap gerakannya.

Fragmen kecil kode ini, yang disebut cuplikan kode, adalah alat yang ringkas namun kuat yang menginstruksikan WordPress tentang fungsi tertentu.

Memanfaatkan kekuatan cuplikan ini dapat membuat perbedaan antara situs WordPress generik dan situs yang disesuaikan dengan kebutuhan Anda.

Anggap saja itu setara dengan mantra WordPress, yang, jika digunakan dengan benar, dapat memberikan hasil yang sangat baik di frontend.

Cara Menambahkan Cuplikan Kode Kustom di WordPress

Untuk menambahkan cuplikan kode khusus di WordPress, Anda dapat mengandalkan kesederhanaan dan fungsionalitas WPCode. Ikuti langkah-langkah di bawah ini untuk memulai.

Dalam Artikel Ini

  • Apa itu Cuplikan Kode di WordPress?
  • 1. Instal dan Aktifkan Plugin WPCode
  • 2. Buat Kode Kustom (PHP, CSS, HTML)
  • 3. Tambahkan Kode Kustom Anda (Cuplikan Baru)
  • 4. Menangani Kesalahan pada Kode Kustom
  • 5. Mengelola Cuplikan Kode Kustom Anda
  • FAQ tentang Cuplikan Kode Khusus

1. Instal dan Aktifkan Plugin WPCode

WPCode adalah cara terbaik bagi pengguna WordPress untuk menambahkan cuplikan kode khusus ke situs mereka tanpa harus mengotak-atik file functions.php atau khawatir akan merusak situs karena kesalahan sekecil apa pun.

The WPCode homepage

Plugin cuplikan kode memudahkan untuk menambahkan cuplikan ke bagian mana pun di situs WordPress Anda, termasuk footer dan header. Anda dapat memasukkan kode khusus apa pun yang Anda inginkan langsung dari dasbor Anda daripada langsung mengedit file functions.php .

Untuk memulai, Anda perlu menginstal dan mengaktifkan plugin WordPress di situs web Anda. Ini akan menambahkan plugin ke panel menu kiri dasbor WordPress Anda, tempat Anda dapat mulai menambahkan kode khusus dengan cepat.

2. Buat Kode Kustom (PHP, CSS, HTML)

Jika Anda sudah menyiapkan kode khusus, lewati langkah ini dan lanjutkan ke langkah berikutnya. Bagi mereka yang membuat kode khusus dari awal, berikut ini contohnya.

Ingatlah bahwa Anda memerlukan beberapa pengetahuan pengkodean untuk membuat kode khusus, baik dalam format PHP, CSS, atau HTML.

Untuk panduan ini, kami akan membuat kode khusus yang mencegah konflik tema yang menyebabkan nilai Radio dan Kotak Centang tidak ditampilkan dengan benar di WPForms.

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

Kode di atas menggunakan CSS untuk memperbaiki masalah konflik tema, tetapi seperti yang disebutkan sebelumnya, Anda juga dapat membuat kode dengan PHP dan HTML.

3. Tambahkan Kode Kustom Anda (Cuplikan Baru)

Dari bilah menu admin WordPress Anda, klik opsi Cuplikan Kode dan kemudian tombol Tambah Baru . Karena Anda baru saja menginstal plugin, daftar Anda akan kosong.

Add new snippet WPCode

Anda kemudian akan diarahkan ke halaman Tambahkan Cuplikan . Di sini, Anda dapat menambahkan kode unik Anda sendiri atau memilih cuplikan kode dari perpustakaan yang telah dibuat sebelumnya.

Klik tombol Gunakan Cuplikan di sebelah opsi Tambahkan Kode Kustom Anda (Cuplikan Baru) untuk memasukkan kode baru Anda.

Add your custom code snippet

Sekarang, yang perlu Anda lakukan hanyalah memberi nama pada cuplikan tersebut dan cukup salin dan tempel kode khusus yang Anda buat ke dalam ruang Pratinjau Kode di plugin WPCode.

Create custom snippet WPCode

Karena kita membuat kode dalam CSS, di bawah menu dropdown Code Type , kita telah memilih CSS Snippet . Anda dapat mengubahnya berdasarkan kode yang Anda buat.

Code Type WPCode

Selanjutnya, gulir ke bawah ke tab Penyisipan . Sekarang, pilih Sisipkan Otomatis, dan dari tarik-turun Lokasi , pilih opsi Header Lebar Situs .

Insert code in Site Wide Header

Bergantung pada jenis kode yang Anda buat, Anda bahkan dapat memilih untuk menambahkannya sebagai [/] Kode pendek ke halaman/postingan Anda.

Jika Anda ingin menetapkan tag ke cuplikan kode Anda, gulir ke bawah ke bagian Info Dasar . Ini akan membantu Anda dalam mengkategorikan contoh kode berdasarkan topik dan fungsi.

Bila Anda ingin menampilkan banyak cuplikan di tempat yang sama, parameter Prioritas memungkinkan Anda memilih urutan pemrosesannya.

Assign tags WPCode

Selanjutnya, fitur Smart Conditional Logic yang canggih memungkinkan Anda menampilkan atau menyembunyikan cuplikan yang disisipkan otomatis berdasarkan serangkaian kriteria.

Smart Conditional Logic WPCode

Terakhir, yang perlu Anda lakukan hanyalah mencentang opsi Aktif dan menekan tombol Simpan Cuplikan sebelum keluar dari plugin!

Save snippet WPCode

4. Menangani Kesalahan pada Kode Kustom

Kesalahan ketik pada plugin atau file tema khusus situs mungkin langsung membuat situs Anda tidak tersedia bagi pengunjung saat Anda menggunakan cuplikan kode.

Kesalahan sintaksis atau 500 kesalahan server internal akan muncul di situs Anda. Anda harus menggunakan klien FTP untuk membalikkan perubahan secara manual.

Fitur unik plugin WPCode adalah ia secara otomatis mengidentifikasi dan menonaktifkan setiap contoh kesalahan sintaksis dalam kode.

Error detection WPCode

Pesan kesalahan yang berguna akan ditampilkan untuk Anda gunakan dalam debugging kesalahan. Saat Anda menambahkan kode khusus, validasi cuplikan kode pintar WPCode akan menemukan kesalahan apa pun.

Smart code validation WPCode

Saat Anda mengarahkan mouse ke masalah tersebut, sebuah pop-up berisi instruksi tentang cara mengatasinya akan muncul.

5. Mengelola Cuplikan Kode Kustom Anda

Jika Anda memiliki beberapa cuplikan kode, WPCode membuatnya sangat mudah untuk mengelolanya dengan antarmuka yang ramah pengguna dan pustaka cuplikan.

Cuplikan kode dapat disimpan tanpa diaktifkan di situs web Anda, dan nanti Anda dapat mengaktifkan atau menonaktifkan cuplikan tersebut kapan pun Anda mau.

Selain itu, Anda dapat menggunakan tag untuk mengkategorikan cuplikan kode dan memfilternya berdasarkan jenis dan lokasi.

Managing snippets WPcode

Anda juga memiliki opsi untuk mengekspor cuplikan kode tertentu atau mengekspor semuanya secara massal. Cukup navigasikan ke Cuplikan Kode » Alat dan pilih opsi Ekspor .

Export snippets WPCode

Plugin ini juga memungkinkan Anda mengimpor cuplikan jika Anda memindahkan situs web Anda ke server baru. Buka Cuplikan Kode » Alat » Impor dan unggah file ekspor.

Import snippets WPCode

FAQ tentang Cuplikan Kode Khusus

Menambahkan cuplikan kode khusus adalah topik kegunaan yang populer di kalangan pembaca kami. Berikut adalah beberapa jawaban cepat untuk beberapa pertanyaan yang paling sering diajukan:

Apa pengelola cuplikan kode terbaik untuk WordPress?

WPCode adalah pilihan utama untuk mengelola dan menjalankan cuplikan kode di WordPress, menawarkan organisasi yang efisien dan kemampuan integrasi yang lancar.

Bagaimana cara menambahkan CSS ke cuplikan kode di WordPress?

Di dalam WPCode, cukup navigasikan ke bagian + Tambahkan Baru , masukkan CSS yang Anda inginkan, dan pastikan Anda memilih jenis CSS sebelum menyimpan dan mengaktifkan.

Bagaimana cara menambahkan kode khusus ke WordPress tanpa Plugin?

Anda dapat memasukkan kode khusus langsung ke file functions.php tema Anda. Namun, alat khusus seperti WPCode memastikan pengelolaan cuplikan yang lebih aman dan terorganisir.

Bagaimana cara menambahkan kode php khusus ke WordPress?

Untuk PHP, buka antarmuka WPCode, pilih + Tambah Baru , tempelkan kode PHP Anda, lalu simpan. Selalu pastikan itu diuji pada situs tema anak pementasan terlebih dahulu.

Selanjutnya, Pelajari Cara Memerlukan Alamat Email untuk Pengunduhan File

Bukankah lebih bagus jika pengguna WordPress harus memberikan alamat email mereka kepada Anda sebelum mereka dapat mengunduh file? Cari tahu cara membuat pengunjung situs WordPress Anda membagikan alamat email mereka sehingga mereka dapat mengunduh file.

Buat Formulir WordPress Anda Sekarang

Siap membuat formulir Anda? Mulailah hari ini dengan plugin pembuat formulir WordPress termudah. WPForms Pro menyertakan banyak templat gratis dan menawarkan jaminan uang kembali 14 hari.

Jika artikel ini membantu Anda, silakan ikuti kami di Facebook dan Twitter untuk tutorial dan panduan WordPress gratis lainnya.