Cara Menggunakan Blok Kode WordPress

Menampilkan kode di halaman dan posting WordPress bisa jadi rumit. Hanya memposting kode di dalam konten dapat memberikan hasil yang menarik, terutama jika WordPress menampilkannya dengan tidak benar atau keamanan Anda mengunci Anda dari aktivitas jahat. Untungnya, Blok Kode WordPress memudahkan untuk menampilkan cuplikan kode. Mengetahui cara menggunakan blok ini akan membantu Anda menampilkan kode dalam konten Anda dengan cara terbaik untuk situs web dan pembaca Anda.

Pada artikel ini, kita akan melihat Blok Kode WordPress dan melihat apa fungsinya. Kami akan melihat cara menambahkannya ke posting dan halaman Anda dan melihat pengaturan dan opsinya. Tunggu sampai akhir untuk melihat tips dan praktik terbaik tentang cara menggunakannya dan melihat pertanyaan umum.

Berlangganan Saluran Youtube Kami

Cara Menambahkan Blok Kode ke Postingan atau Halaman Anda

Untuk menambahkan Blok Kode ke halaman dan posting Anda, pilih alat penyisip blok di sebelah area konten tempat Anda ingin menempatkan blok, atau pilih penyisip di sudut kiri atas halaman. Masukkan nama blok dan pilih ketika muncul atau gulir melalui blok untuk melihat apa yang ada di sana.

Jika mau, Anda dapat mengetik /code di area yang Anda inginkan untuk memunculkan blok. Kemudian, tekan saja enter atau pilih blok dari opsi yang muncul.

Anda sekarang memiliki Blok Kode di dalam konten Anda di mana Anda dapat menambahkan semua jenis kode yang ingin Anda tampilkan. Kode secara otomatis ditandai dengan tag kode, sehingga ditampilkan dengan benar sebagai kode. Ini membantu dalam memberikan contoh bagi pembaca untuk dipelajari atau digunakan dalam proyek mereka sendiri. Dalam contoh ini, saya menggunakan pseudo-code dari halaman dukungan WordPress (karena) lazy.level = advanced.

Pengaturan dan Opsi Blok Kode

Blok Kode memiliki dua tempat di mana Anda akan menemukan pengaturan dan opsi. Yang pertama adalah Code Toolbar di atas blok. Yang kedua adalah opsi di bilah sisi kanan. Kami akan melihat keduanya.

Bilah Alat Blok Kode

Klik di mana saja di blok untuk melihat bilah alatnya. Jika Anda tidak melihat semua alat, letakkan mouse Anda di bawah blok di lokasi blok baru, lalu klik blok tersebut. Semua pengaturan akan muncul.

Ubah Jenis atau Gaya Blok Kode

Pengaturan pertama menggunakan panah kiri dan kanan. Ini mengubah blok menjadi Blok HTML Kustom, Blok Terformat, mengubah kolom, dan memungkinkan Anda membuat grup sehingga Anda dapat menyesuaikan warna latar belakang, memilih batas, dan menyesuaikan opsi lainnya. Melayang di atasnya memberi Anda pratinjau tentang bagaimana masing-masing akan terlihat. Saya mengarahkan kursor ke opsi HTML Khusus.

Menyeret

Alat seret mencakup enam titik. Ambil titik-titik ini untuk menyeret blok ke mana pun Anda mau. Garis biru muncul di mana ia akan ditempatkan di setiap lokasi yang memungkinkan saat Anda mengarahkan kursor ke area yang berbeda.

Ketika Anda menjatuhkannya, blok akan ditempatkan di lokasi barunya.

Pindah

Panah bergerak ke atas dan ke bawah memindahkan blok ke atas atau ke bawah satu blok di dalam blok konten setiap kali Anda mengkliknya.

Tebal dan Miring

Pengaturan tebal dan miring berlaku untuk kode yang Anda soroti. Anda dapat menggunakannya bersama-sama atau secara individu. Saya menggunakan keduanya bersama-sama dan mandiri dalam contoh ini. Ini adalah cara yang baik untuk menarik perhatian ke baris atau perintah tertentu dalam kode.

Tautan

Tautan memungkinkan Anda menjadikan salah satu kode sebagai tautan yang dapat diklik. Anda dapat menelusuri atau memasukkan URL untuk bagian kode yang telah Anda soroti. Ini bagus jika Anda ingin menautkan ke tutorial untuk setiap perintah, contoh lain, dari mana kode itu berasal, dll. Anda dapat membuka tautan di tab yang sama atau tab baru.

Lebih Banyak Pengaturan

Pengaturan Lainnya Blok Kode membuka kotak tarik-turun dengan beberapa opsi. Saya telah menerapkan setiap opsi dalam contoh ini.

Kode Inline – menunjukkan teks yang diformat sebagai kode. Ini menempatkan teks pada baris dengan sendirinya. Karena semuanya diformat sebagai kode, font terlihat sama.

Gambar Sebaris – menempatkan gambar di dalam teks tempat Anda meletakkan mouse. Ini membuka Perpustakaan Media tempat Anda dapat memilih gambar. Jika Anda mengeklik gambar, Anda akan melihat kotak tarik-turun tempat Anda dapat mengubah lebarnya.

Input Keyboard – menambahkan tag keyboard ke kode yang Anda pilih. Kode ditampilkan dalam font monospace default browser.

Coret – menambahkan baris melalui kode yang telah Anda soroti.

Subscript – memformat kode sebagai subscript.

Superscript – memformat kode sebagai superscript. Anda dapat menggunakan subskrip dan superskrip secara bersamaan. Ini mengurangi ukuran font dan memusatkan kode secara horizontal.

Warna Teks – mengubah warna kode yang Anda soroti. Pilih dari warna yang telah dibuat sebelumnya, pilih warna pada alat pemilih warna, atau masukkan nilainya sebagai HEX, RBG, atau HSL.

Pilihan

Opsi Blok Kode ditempatkan di dalam tiga titik di ujung kanan bilah alat. Pilihannya meliputi:

Sembunyikan Pengaturan Lainnya –menyembunyikan bilah sisi kanan untuk memberi Anda ruang kerja yang bersih dan luas.

Salin – menyalin blok sehingga Anda dapat menempelkannya di mana saja di dalam area konten.

Duplikat – duplikat blok dan letakkan di bawah aslinya.

Sisipkan Sebelum – menambahkan area konten di atas Blok Kode.

Sisipkan Setelah – menambahkan area konten di bawah Blok Kode.

Move To – memungkinkan Anda memindahkan blok dengan menempatkan garis biru yang dapat Anda pindahkan ke atas atau ke bawah dengan tombol panah. Saat Anda mendapatkan garis ke lokasi yang Anda inginkan, cukup tekan Enter.

Edit as HTML – perubahan pada editor kode untuk blok tempat Anda dapat mengedit kode sebagai HTML. Pilih Edit Visually untuk mengubah blok kembali ke mode visual.

Tambahkan ke Blok yang Dapat Digunakan Kembali – tambahkan blok ke blok yang dapat digunakan kembali sehingga Anda dapat menggunakannya kembali di halaman atau pos mana pun.

Grup – menambahkan blok ke grup sehingga Anda dapat membuat perubahan pada blok tersebut sebagai satu unit.

Hapus Blok – menghapus Blok Kode.

Pengaturan Blok Kode

Pengaturan Blok Kode ditempatkan di sidebar kanan. Mereka termasuk Tipografi dan pengaturan Lanjutan. Memilih blok akan menampilkan pengaturan. Jika bilah sisi tidak muncul, klik ikon roda gigi di sudut kanan atas.

Tipografi

Tipografi memungkinkan Anda memilih ukuran font untuk seluruh blok. Pilih ukuran font dari kotak dropdown dengan 7 ukuran atau masukkan ukuran khusus ke dalam bidang. Klik Reset untuk mengubahnya kembali ke ukuran font default.

Canggih

Pengaturan Lanjutan menyertakan jangkar HTML dan bidang untuk kelas CSS tambahan. Jangkar adalah URL hanya untuk blok ini sehingga Anda dapat menautkannya langsung ke sana. Bidang kelas CSS tambahan memungkinkan Anda untuk menambahkan kelas CSS khusus untuk menata blok.

Kiat dan Praktik Terbaik untuk Menggunakan Blok Kode Secara Efektif

Gunakan blok ini setiap kali Anda ingin menampilkan kode dalam konten Anda. Kode itu sendiri tidak berpengaruh pada blok.

Format kode dengan spasi seperti yang Anda lakukan saat membuat kode dengan editor teks. Gunakan pengaturan tebal dan miring untuk menarik perhatian ke cuplikan tertentu dalam kode Anda.

Seperti halnya kode apa pun, beri label dengan baik agar mudah dipahami. Anda dapat mengomentari kode atau menambahkan catatan di dalam blok, tetapi pastikan catatan tersebut tidak berada di dalam elemen kode jika seseorang ingin menyalin kode.

Pertanyaan yang Sering Diajukan tentang Blok Kode

Apa tujuan dari Blok Kode WordPress?

Untuk menampilkan kode untuk dilihat dan digunakan orang lain. Ini menampilkan kode dalam tata letak bersih yang menjaga jarak Anda.

Apakah Blok Kode menjalankan kode?

Tidak. Ini menampilkan kode yang diformat sehingga pembaca Anda dapat melihat dan menggunakannya. Kode secara otomatis dibungkus dengan tag kode HTML.

Jenis Kode Apa yang Dapat Ditampilkan?

Ini akan menampilkan kode apa pun dari bahasa pemrograman atau skrip apa pun. Bahasa tidak ada bedanya.

Apakah itu memformat Kode?

Tidak. Ini tidak berfungsi sebagai editor kode, jadi tidak mengubah spasi, warna, menambahkan angka, dll. Ini hanya menampilkan kode seperti yang Anda ketik.

Bagaimana Blok Kode berbeda dari Blok HTML?

Blok HTML memungkinkan Anda membuat HTML tanpa harus mengubah tampilan editor kode halaman Anda. Ini akan menjalankan HTML di ujung depan. Anda dapat melihat pratinjau hasil dari bagian belakang. Anda dapat menggunakan Blok Kode untuk menampilkan HTML jika Anda tidak ingin mengeksekusinya.

Apa Bedanya dengan Blok Terformat?

Blok Terformat menampilkan teks dengan spasi Anda dalam font monospace. Ini menambahkan warna font dan latar belakang untuk opsi bilah sisi.

Kesimpulan

Itulah tampilan kami di Blok Kode WordPress. Bloknya sederhana dan mudah digunakan. Karena tidak menjalankan kode, bahasa itu sendiri tidak masalah. Blok ini menyediakan cara yang baik untuk menampilkan semua jenis kode untuk disalin atau dipelajari oleh pembaca Anda.

Kami ingin mendengar dari Anda. Sudahkah Anda menggunakan Blok kode WordPress? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui Danielala / shutterstock.com