Cara memasukan kode di wordpress

Pengembang web WordPress yang membuat blog tentang bahasa pemrograman perlu membagikan cuplikan kode. Jika Anda baru dalam hal ini, Anda mungkin tidak bisa mendapatkan kode untuk menampilkan seperti yang Anda inginkan. Itu karena filter pembersihan WordPress dan upaya untuk memformat kode web secara otomatis. WP melakukan ini untuk menghentikan peretas dan aktor jahat menyuntikkan kode mentah ke dalam editor pos

Pemformatan otomatis dan pemfilteran dapat membuat kode yang dipublikasikan menjadi tidak berguna jika pembaca ingin menyalinnya. Oleh karena itu, masuk akal untuk menampilkan contoh kode atau hadiah yang tidak dirusak di postingan Anda. Selain itu, Anda ingin kode berdiri terpisah dari teks isi, bukan menyatu dengannya, yang dapat terlihat berantakan

Cara Menampilkan Kode di WordPress Dengan Jelas

Let’s say you want to display the code snippet below to your readers. You can add it manually as regular text, use

 tags, code blocks, or plugins. Here it is as regular text.
Itu menyatu dengan teks isi, membuat pengalaman membaca menjadi canggung. Pendekatan yang lebih baik adalah membuat cuplikan kode terpisah dari konten tertulis yang mengelilinginya
Itu lebih baik. Contoh kode mentah Anda sekarang sudah jelas dan—yang lebih penting—tidak difilter. Jika pembaca ingin menggunakannya, mereka dapat menyalin dan menempelkan cuplikan sampel dengan percaya diri
Titik untuk dicatat. Latar belakang yang disorot dapat berbeda di antara tema WordPress
Tambahkan Kode ke Posting Menggunakan Blok
Kode contoh di atas ditambahkan langsung dari editor posting WordPress menggunakan blok. Pendekatan ini ideal untuk cuplikan kode yang lebih pendek dengan sedikit karakter. Ini juga merupakan pendekatan umum bagi mereka yang hanya sesekali menambahkan ekstrak kode ke postingan mereka
Masuk ke Area Admin WP Anda
Buka Postingan => Tambah Baru dari menu sisi Dasbor, atau buka postingan yang sudah ada untuk diedit
Tempatkan kursor ke dalam posting atau halaman tempat Anda ingin memasukkan kode
Klik ikon Tambahkan Blok (+) dan ketikkan kode kata ke dalam kotak pencarian Tambahkan Blok
Catatan. Jangan bingung blok Kode <> dengan blok kode HTML kustom Guttenberg
Klik blok Kode untuk membukanya
Ketik atau rekatkan cuplikan kode ke dalam kotak teks blok
Sekarang klik tautan Pratinjau dan pilih Pratinjau di tab baru untuk melihat kode Anda di situs langsung
Berikut tampilan contoh kami, meskipun tema Anda mungkin menampilkan kode sedikit berbeda
Klik Terbitkan (postingan baru) atau Perbarui (postingan yang sudah ada) setelah Anda puas dengan hasilnya
Tampilkan Kode Menggunakan Plugin WordPress
Metode plugin sangat ideal jika Anda sering menulis tentang kode dan menampilkan contoh. Ini juga lebih disukai untuk cuplikan yang lebih besar. Itu karena lebih mudah dibaca dan dipelajari, berkat penyorotan sintaks
Plugin menawarkan manfaat lain dibandingkan metode 'blok kode' di atas
Menampilkan nomor baris serta penyorotan sintaks
Menampilkan kode dengan jelas di salah satu bahasa pemrograman
Format di atas membuat kode lebih mudah dipelajari
Ada beberapa plugin yang tersedia. Yang digunakan untuk tutorial ini adalah plugin Enlighter yang populer dari Andi Dittrich. Ini memiliki integrasi Gutenberg, yang menambahkan blok kode sumber baru ke editor
Penyorot Sintaks yang Dapat Disesuaikan dan Lebih Ringan
Silakan baca panduan plugin untuk pemula terlebih dahulu jika Anda baru mengenal WordPress
Masuk ke Dasbor WP Anda sebagai Administrator
Instal kemudian Aktifkan plugin Enlighter
Bertemu Sang Pencerahan
Plugin syntaxhighlighter terbuka di layar Welcome to Enlighter About
Ada tiga tab di sini
Apa yang Baru menyoroti setiap fitur baru yang ditambahkan sejak pembaruan terakhir
Tab Ubah Log menyoroti perbaikan bug dan setiap perubahan atau tweak ke versi baru
Tab Debug adalah untuk pelaporan bug
Anda dapat membuka layar Tentang dan meninjau tab ini kapan saja
Menu Dasbor Enlighter baru
Plugin ini memiliki banyak opsi dan penyesuaian lainnya. Anda akan melihat menu Enlighter baru di sidebar Dasbor Anda dengan item berikut
Penampilan (lebih lanjut tentang ini di bawah)
Penyesuai tema (hanya mengubah tema aktif)
Mengedit; 
Kesesuaian
Ekstensi
Pilihan
Beberapa menu di atas adalah untuk pengguna tingkat lanjut, jadi kami tidak akan membahasnya secara mendetail di sini. Tutorial dasar ini hanya untuk menampilkan kode dengan benar di situs WordPress Anda
Menggunakan plugin Enlighter untuk menampilkan kode
Mari sekarang masukkan beberapa cuplikan kode ke dalam postingan WordPress menggunakan plugin Enlighter
Buat postingan baru—atau buka postingan yang sudah ada—untuk menambahkan kode
Tempatkan kursor ke dalam pos tempat Anda ingin memasukkan kode
Klik ikon Tambahkan Blok (+). Anda sekarang akan melihat blok baru untuk Enlighter Sourcecode. Jika tidak, ketik enlighter ke dalam kotak pencarian Tambahkan Blok
Klik blok Enlighter Sourcecode untuk membukanya
Klik tombol Pilih Bahasa untuk memilih bahasa pemrograman Anda dari 52 pilihan. Jika Anda tidak yakin dengan bahasanya—atau tidak terdaftar—maka gunakan default Penyorotan Umum
Ketik atau rekatkan cuplikan kode ke dalam Sisipkan Kode Sumber. bidang
Untuk contoh ini, kami akan menambahkan cuplikan kode CSS
Klik tautan Pratinjau dan pilih Pratinjau di tab baru untuk melihat kode Anda di situs WordPress
Begini tampilan sampel kami, meskipun mungkin tampak sedikit berbeda di antara tema. Ini menampilkan kode yang tepat dengan nomor baris dan penyorotan sintaks
Bilah alat (kanan atas) muncul saat pengguna menggerakkan kursor di atas kode
4 tombol alat menawarkan opsi berikut
Sempurna
Dan inilah tampilan kode yang sama jika kita menambahkannya ke postingan sebagai teks biasa
Opsi penampilan yang lebih cerah
Anda dapat mengubah tampilan kode Anda agar sesuai dengan tema WP Anda
Pergi ke Enlighter => Penampilan dari menu sisi Dasbor
Layar Penampilan cukup jelas, dengan 14 tema kode untuk dipilih
Ingatlah untuk menyimpan perubahan sebelum Anda mempratinjau tampilan baru
Editor klasik WordPress
Plugin ini juga berfungsi dengan Editor Klasik WordPress. Anda dapat meninggalkan pengaturan default atau memilih konten yang ingin Anda sorot saat menggunakan editor lama
Pergi ke Enlighter => Mengedit dari menu samping Dasbor
Klik tab Editor Klasik
Pilihan Anda termasuk
Integrasi back-end dan front-end
Tambahkan format editor
Lekukan tab
Pintasan keyboard
Tweak
Font dan warna latar belakang
Itu dia. Anda sekarang dapat menambahkan dan menampilkan kode dengan benar di blog atau situs web WordPress Anda
Andy Williams
Saya seorang guru Sains dengan pelatihan, tetapi telah bekerja online selama hampir dua dekade, dengan spesialisasi di WordPress, pengoptimalan mesin telusur, dan pemasaran afiliasi. Saya telah menerbitkan sejumlah buku kindle dan paperback di Amazon dan menjalankan sejumlah kursus online. Anda dapat mengikuti saya di Facebook atau Twitter
Ingin Belajar WordPress?
WordPress adalah platform luar biasa untuk membangun semua jenis situs web. Ini digunakan oleh perusahaan besar dan situs ibu & pop kecil
Anda mungkin juga suka
Pos terkait
Cara Menyematkan Tweet Nyata di Posting Blog WordPress
Pelajari metode 2 menit ini untuk menyematkan tweet asli ke dalam postingan atau halaman WordPress Anda. Panduan ini menunjukkan cara menyematkan tweet menggunakan editor visual Guttenberg dan editor kode WordPress
Cara Menambahkan Kode CSS Kustom ke Situs Web WP Anda
Menambahkan CSS khusus ke situs web WordPress lebih mudah dari yang Anda kira. Panduan baru ini menunjukkan cara menambahkan CSS khusus melalui penyesuai tema dan dengan menggunakan plugin. Tapi pendekatan mana yang terbaik?
Cara Menambahkan Slider WordPress yang Halus ke Situs Web atau Blog Anda
Tutorial ini menunjukkan cara membuat slider WordPress ramah pemula yang sederhana, gratis, dan dapat disesuaikan. Tayangan slidenya yang ringan dan menyenangkan secara visual pasti akan mendorong interaksi pengunjung
 

Bagaimana Anda menulis kode di WordPress?
Cukup edit postingan blog atau halaman tempat Anda ingin menampilkan kode.  Pada layar edit postingan, tambahkan blok kode baru ke postingan Anda.  Sekarang Anda dapat memasukkan cuplikan kode di area teks blok . Blok kode akan menampilkan pratinjau kode Anda. 
Bisakah saya meletakkan kode saya di WordPress?
Anda perlu menambahkan beberapa kode di WordPress jika Anda tertarik dengan plugin dan pengembangan tema, menambahkan CSS khusus untuk meningkatkan desain, dan menambahkan widget khusus . Jika Anda ingin membuat tema WordPress misalnya, Anda harus terbiasa dengan HTML, CSS, dan PHP, karena Anda harus membuat setidaknya 2 file dalam indeks. 
Bagaimana cara menjalankan kode HTML di WordPress?
Pilih berkas HTML Anda.  . 
 
Arahkan ke Dasbor Admin Anda. Anda dapat menggunakan Editor Visual WordPress untuk menambahkan file HTML dengan cepat ke situs web Anda. . 
 
Klik 'Halaman' di sidebar kiri. Selanjutnya, lihat sidebar kiri. . 
 
Pilih halaman yang ada atau buat yang baru. . 
 
Klik 'Tambah Blok. . 
 
Tambahkan blok 'File'. . 
 
Pilih berkas HTML Anda