Cara Membuat Pustaka Cuplikan Postingan untuk Digunakan di Postingan dan Halaman Anda

Banyak situs web WordPress menggunakan kode atau fungsi khusus di suatu tempat di dalam posting dan halaman mereka. Platform memudahkan untuk menambahkan kode ini, tetapi jika Anda akan menggunakan kembali cuplikan di seluruh situs Anda, mungkin sulit untuk menambahkan kode secara manual kapan pun Anda membutuhkannya.

Daripada harus menyisipkan cuplikan kode Anda dengan tangan setiap kali dibutuhkan, lebih masuk akal untuk mengatur dan menyimpannya menggunakan plugin. Pada artikel ini, kita akan berbicara tentang manfaat menjaga agar cuplikan kode Anda tetap teratur, lalu menunjukkan kepada Anda bagaimana melakukannya menggunakan plugin Code Snippet Extended dalam dua langkah. Ayo bekerja!

Mengapa Anda Harus Mengatur Cuplikan Kode Anda

Bahkan jika Anda bukan seorang pengembang, kemungkinan Anda harus menambahkan beberapa kode ke situs web Anda secara manual.

Banyak pengguna WordPress menambahkan cuplikan kode khusus ke posting dan halaman mereka. Terlepas dari niche dan ukuran Anda, ada banyak situasi di mana Anda perlu menambahkan sedikit kode ke situs Anda. Ambil Google Adsense atau Facebook Pixel, misalnya, yang keduanya mengharuskan Anda untuk menambahkan beberapa baris JavaScript ke situs web Anda sebelum dapat berfungsi. Banyak plugin WordPress juga mengharuskan Anda menggunakan kode pendek, sehingga kemungkinan menambahkan kode khusus ke situs web Anda tinggi.

Mengingat hal ini, merupakan ide bagus untuk menemukan cara untuk menyimpan semua potongan kode yang Anda gunakan di situs Anda. Inilah alasannya:

• Anda dapat mereferensikan kode Anda kapan pun diperlukan. Terkadang, Anda mungkin lupa baris kode khusus apa yang Anda tambahkan ke file Anda, jadi ada baiknya untuk mengatur cuplikan Anda menggunakan perpustakaan.
• Anda dapat menggunakan kembali cuplikan kode dengan lebih mudah. Jika Anda perlu menggunakan kode yang sama beberapa kali, masuk akal untuk menyimpannya untuk digunakan nanti.

Anda tentu saja dapat menyimpan cuplikan kode tersebut menggunakan file teks biasa di komputer Anda atau di dalam cloud. Namun, menggunakan plugin WordPress yang tepat dapat memberi Anda cara yang lebih cocok untuk menyimpannya di dalam situs Anda. Dengan begitu, Anda akan tahu kode apa yang telah Anda tambahkan ke setiap situs web tertentu yang Anda gunakan.

Memperkenalkan Plugin Ekstensi Cuplikan Kode

Plugin Code Snippets Extended adalah alat menarik yang memungkinkan Anda mengatur pustaka kode sederhana di dalam WordPress. Ini memungkinkan Anda menyimpan kode khusus, mengidentifikasinya menggunakan nama apa pun yang Anda inginkan, lalu menambahkannya ke salah satu posting dan halaman Anda dengan beberapa klik.

Plus, plugin ini juga memungkinkan Anda untuk melihat pratinjau efek cuplikan kode Anda, selama itu adalah JavaScript atau CSS sederhana. Ini juga mendukung PHP, tetapi cuplikan tersebut biasanya tidak ditampilkan dengan baik menggunakan fungsionalitas pratinjau alat.

Sementara plugin berfungsi dengan baik dengan Divi Builder secara keseluruhan, ada satu masalah yang memerlukan solusi. Secara default, alat ini menambahkan tombol baru ke editor, yang memungkinkan Anda menambahkan cuplikan perpustakaan apa pun ke pos atau halaman Anda. Namun, tombol tersebut menghilang saat beralih ke Divi Builder. Perbaikannya sederhana, dan kami akan menjelajahinya lebih lanjut dalam satu menit.

Fitur Utama:

• Simpan semua cuplikan kode khusus Anda ke pustaka terpusat di dalam dasbor Anda.
• Identifikasi setiap cuplikan menggunakan nama unik.
• Tetapkan kode pendek yang mudah digunakan untuk setiap item di perpustakaan Anda.
• Tambahkan cuplikan ke posting dan halaman Anda menggunakan opsi baru di editor WordPress, tanpa harus menyentuh kodenya.

Harga: GRATIS | Informasi Lebih Lanjut

Cara Membuat Pustaka Cuplikan Postingan untuk Digunakan di Postingan dan Halaman Anda (Dalam 2 Langkah)

Sebelum kita mulai, Anda harus menginstal dan mengaktifkan plugin. Setelah Anda siap, lompat ke langkah nomor satu!

Langkah #1: Tambahkan Cuplikan Baru ke Perpustakaan Anda

Setelah menginstal plugin, Anda akan melihat tab baru bernama Cuplikan di dasbor WordPress Anda. Klik dan cari opsi Tambahkan Cuplikan . Pada layar berikutnya, Anda dapat menetapkan nama untuk mengidentifikasi kode Anda di dalam pustaka, serta mengunggah file media apa pun yang diperlukan agar kode dapat dieksekusi:

Perlu diingat – kode akan tetap berfungsi meskipun Anda tidak mengunggah media yang diperlukan dari halaman ini, selama media tersebut ada di perpustakaan Anda. Fitur ini hanya ada sehingga Anda dapat melihat pratinjau efek kode Anda menggunakan tombol Uji di bagian bawah halaman.

Selanjutnya, Anda juga akan melihat editor tempat Anda mengetik kode CSS, JavaScript, PHP, dan jQuery. Namun, itu perlu dibungkus dengan tag khusus untuk setiap bahasa. Berikut adalah beberapa contoh cepat untuk referensi:

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

Anda dapat merujuk semua tag ini di bawah editor setiap kali Anda menambahkan cuplikan baru, dan selama Anda ingat bahwa setiap bahasa memerlukan bahasa yang berbeda, Anda tidak perlu mengingatnya. Plus, Anda dapat menggunakan beberapa bahasa dalam cuplikan yang sama – pastikan untuk membungkusnya menggunakan tag masing-masing.

Setelah Anda selesai mengetik atau menempelkan kode Anda, gunakan tombol Simpan Cuplikan di bagian bawah halaman, dan itu akan muncul di tab Cuplikan > Cuplikan di dasbor WordPress Anda:

Sekarang, yang tersisa hanyalah menguji cuplikan baru Anda menggunakan editor WordPress dan Divi Builder.

Langkah #2: Masukkan Cuplikan Anda ke Posting dan Halaman Divi Anda

Jika Anda tidak menggunakan Divi Builder, Anda bisa membuka salah satu posting atau halaman Anda menggunakan editor WordPress biasa. Di bagian atas Anda akan melihat tombol Sisipkan Cuplikan baru:

Mengkliknya akan memunculkan overlay yang menampilkan semua item di perpustakaan Anda, dan Anda dapat memilih yang mana saja yang Anda inginkan:

Sekarang plugin akan menambahkan kode ke editor, dan Anda sudah siap – sesederhana itu. Namun, jika Anda menggunakan Divi Builder, Anda tidak akan dapat mengakses opsi ini. Cara termudah untuk mengatasi masalah ini adalah membuka tab Cuplikan dasbor Anda di jendela baru dan menyalin kode pendek yang sesuai untuk kode yang ingin Anda tambahkan. Setelah Anda memilikinya, kembali ke Divi Builder dan tambahkan modul Kode ke halaman yang sedang Anda kerjakan:

Setelah Anda masuk, tempel kode pendek Anda di dalam bidang Konten dan simpan perubahan Anda:

Sekarang, cuplikan Anda akan berfungsi seperti biasa. Menggunakan Divi Builder menambahkan satu langkah ke proses, tetapi Anda masih dapat menyimpan semua cuplikan kode di perpustakaan internal yang mudah diakses.

Kesimpulan

Jika Anda seperti kami, Anda menghargai efisiensi dalam semua proyek Anda. Menambahkan kode yang sama ke beberapa halaman atau posting dengan tangan dimungkinkan, tetapi itu bukan penggunaan waktu Anda yang baik. Alih-alih, jauh lebih baik untuk menguji kode sekali, simpan ke perpustakaan Anda, dan kemudian simpan di saku belakang virtual Anda kapan pun Anda membutuhkannya.

Plugin Code Snippet Extended memungkinkan Anda melakukan hal itu. Cukup instal dan ikuti dua langkah berikut:

1. Tambahkan cuplikan baru ke perpustakaan Anda.
2. Masukkan cuplikan Anda ke dalam posting dan halaman Divi Anda.

Apakah Anda memiliki pertanyaan tentang cara menambahkan cuplikan kode ke situs web Divi Anda? Tanyakan di bagian komentar di bawah!

Gambar thumbnail artikel oleh Andrii Bezvershenko / shutterstock.com.