Cara Menulis Kode Kustom di Posting WordPress Anda

Ada banyak alasan mengapa Anda ingin menulis atau memasukkan kode tambahan dalam posting WordPress Anda. Anda mungkin perlu menampilkan iklan, menerapkan gaya unik ke bagian-bagian tertentu dari situs web Anda, atau cukup menandai beberapa teks atau konten untuk menarik perhatian. Namun, Anda dapat menambahkan kode untuk mencapai berbagai efek visual untuk menawarkan pengalaman pengguna yang lebih baik.


Semua ini dan lainnya adalah alasan yang sahih, tetapi tidak peduli apa yang ingin Anda capai dengan kode khusus, proses penulisan kode bisa sangat menegangkan atau menantang! Dalam tutorial ini, kita akan membahas bidang-bidang berikut:

  • Menambahkan kode yang terlihat seperti kode tetapi tidak berperilaku seperti kode (jika Anda ingin menampilkan baris kode atau meningkatkan tampilan situs web Anda)
  • Menambahkan kode yang dimaksudkan untuk berperilaku seperti kode mis. Iklan skrip seperti Google Adsense Ads

Di bawah dua kategori ini, kami akan mempelajari sedikit kode pemrograman seperti HTML, CSS, Javascript dan sentuhan pada iklan dan keindahan dari

wadah. Sekarang, tanpa gembar-gembor lagi, mari kita mulai bisnis dan menulis beberapa kode.

Menambahkan Kode Yang Seperti Kode Tapi Tidak Berperilaku Seperti Kode

Jika Anda ingin menampilkan kode (mungkin Anda adalah perancang atau pengembang web) yang dapat disalin dan ditempelkan oleh pengguna, penting untuk melakukannya dengan benar karena bahkan satu baris saja dapat mengacaukan kode, maka semua pekerjaan Anda. Cara kode Anda akan ditafsirkan oleh WordPress tergantung pada apakah Anda menggunakan editor HTML atau Visual Post. Memasukkan kode Anda langsung ke editor visual tidak akan memiliki efek yang ingin Anda buat, karena editor visual menganggap kode sebagai teks biasa, artinya browser web tidak akan mengartikan kode Anda sebagai “kode”, tetapi sebagai teks biasa.

Di sisi lain, Editor Posting HTML akan mengenali setiap markup HTML atau CSS yang Anda gunakan, yang berarti mereka akan ditafsirkan oleh browser web, suatu hal yang dapat mengakibatkan tata letak yang berantakan dan konten yang terlihat funky. Contohnya, 

dalam editor visual akan ditafsirkan sebagai teks biasa dan hasilnya akan adil

. Namun,

 dalam editor HTML akan diartikan sebagai markup HTML dan hasilnya adalah pembuatan wadah.

Latihan HTML

Ini benar-benar latihan yang sia-sia, tetapi Anda dapat mencobanya untuk gambaran yang lebih jelas tentang apa yang saya maksud. Buka saja Editor HTML, Tipe

dan simpan sebagai konsep. Setelah draft Anda disimpan, klik “Preview Post” untuk melihat Anda situs web hancur. Jangan khawatir, ini tidak permanen dan Anda hanya dapat membuang draft. Sekarang kembali ke bisnis.

Secara umum, Anda dapat menggunakan kode dengan dua cara. Pertama, Anda dapat menggunakan kode dalam satu baris (atau paragraf) untuk mengklarifikasi poin tentang kode Anda. Kedua, Anda dapat menulis, menyorot, dan meletakkan kode Anda di blok seperti ini:



Menulis Kode di Tutorial Posting WordPress


...

Untuk mencapai efek di atas, kami menggunakan tag kode yang ditulis seperti ... kode kita masuk di sini . Panah pengganti (<  >) Dengan tanda kurung siku ([]) tergantung pada situs WordPress Anda dan editor pos yang Anda gunakan (visual atau HTML). Kode yang ingin Anda tampilkan harus berada di antara tag pembuka,   dan tag penutup, . Misalnya, untuk menggunakan kode dalam paragraf:

Kode Dalam Paragraf

Tag kode membuat teks non-HTML terlihat seperti kode, tetapi tidak memberi tahu browser web untuk menafsirkan markup HTML atau menghapusnya dari posting. Ini berarti bahwa browser masih dapat menyandikan markup HTML Anda sehingga sulit untuk ditampilkan Tag HTML dalam kode Anda. Namun, Anda dapat mengatasi masalah ini dengan menggunakan karakter yang diperluas atau entitas karakter untuk mewakili < > karakter, yang akan menipu setiap browser. Sebagai contoh…

Tag HTML dapat diartikan sebagai Markup HTML

… akan membuat wadah baru (terima kasih

) dan tajuk (

), yang akan mengacaukan halaman web Anda. Tetapi jika Anda menggunakan entitas karakter untuk menggantikan < > panah, Anda akan menghindari perilaku ini dan mengeluarkan kode Anda seperti yang diinginkan. Karenanya, kode di atas akan terlihat seperti ini:

Gunakan Entitas Karakter sebagai gantinya

Buat Blok Kode yang Disorot

Jika saya ingin menyorot blok kode (atau bahkan teks) untuk mendapatkan sesuatu seperti;

Blok Kode

Saya mulai dengan meletakkan kode (atau teks) dalam wadah seperti:

Anda harus melakukan ini di editor HTML

Kemudian saya menambahkan style menggunakan CSS baik secara langsung (seperti pada gambar di atas) atau melalui style.css file ditemukan di folder utama tema Anda.

Gaya Tag Kode Anda

Tag kode akan menggunakan ukuran font dari dan menempatkan teks dalam font monospasi secara default. Anda dapat mengubah semua itu agar kode Anda tampak seperti yang Anda inginkan. Yang harus Anda tambahkan adalah …

 kode {font-size: 1.2em; warna: # 000; font-weight: normal;} 

… atau yang serupa dengan milikmu style.css. Ada gaya yang tidak terbatas dan semuanya tergantung pada preferensi pribadi Anda, jadi jangan menahan diri.

Menambahkan Kode yang Berperilaku Seperti Kode

Bagian ini sangat berguna jika Anda ingin menampilkan iklan atau skrip lain mis. Cuplikan Javascript di dalam posting Anda. Meskipun ada plugin, seperti Adsense cepat, yang akan membantu Anda mengelola iklan dalam posting Anda, Anda mungkin tertarik untuk menginstal skrip mandiri yang Anda miliki kontrol penuh atas.

Jika iklan Anda adalah gambar dan tautan sederhana, Anda dapat menambahkan iklan ke dalam posting Anda melalui utilitas pengunggahan. Cukup unggah gambar dan masukkan tautan Anda (dan mungkin keterangan) dan pekerjaan Anda selesai. Metode ini terbatas karena Anda hanya dapat menyelaraskan iklan Anda ke kiri, ke kanan, atau di tengah – seperti gambar pada umumnya. Atau, Anda dapat membuat wadah di dalam posting Anda menggunakan editor HTML.

Contoh:


Buat wadah ini tepat di tempat yang Anda inginkan untuk iklan Anda, artinya Anda harus menyiapkan pos sebelum Anda menambahkan iklan. Setelah wadah siap, Anda bisa menata sesuai keinginan Anda. Anda dapat memindahkannya menggunakan style.css Anda dengan menggunakan posisi Properti. Jika Anda ingin menjalankan Iklan Google Adsense dalam posting Anda, Anda masih dapat menggunakan Adsense cepat – plugin – atau buat wadah dan tempatkan kode iklan Anda seperti ini:


Catatan 1: Iklan Google berbasis Javascript, dan dapat ditafsirkan oleh semua browser web utama asalkan pengguna telah mengaktifkan Javascript di mesin mereka.

Catatan 2: Anda harus memilih dimensi iklan yang tepat untuk situs web Anda untuk menghindari mengacaukan posting Anda serta situs web.

Jika Anda ingin menambahkan iklan permanen yang akan muncul di semua posting Anda (posting saat ini dan yang akan datang) tanpa kerja tambahan, Anda perlu mengedit Templat Posting Tunggal (single.php). Saya menempatkan iklan 468px oleh 60px di bagian atas semua posting saya dengan menambahkan kode berikut ke single.php segera setelah < – – END post-entry-meta – ->.


Tentu saja, Anda harus menggunakan Iklan Google Anda sendiri �� Ini adalah bagaimana iklan Google Adsense muncul di blog saya:

Menulis Kode Di WordPress

Mencari single.php, pergi ke Panel Administrasi – >> Penampilan – >> Editor – >> single.php. Setelah single.php terbuka, gunakan bilah pencarian (Ctrl + F) untuk menemukan < – – END post-entry-meta – ->.

Anda dapat meninggalkan wadah apa adanya atau gaya menggunakan style.css yang Anda anggap cocok. Dan ingatlah untuk menyimpan semua perubahan. Itu

container sangat berguna, dan ketika Anda memasangkannya dengan CSS dan satu ons kreativitas, Anda dapat mencapai banyak hal dengan situs WordPress Anda. Ini dapat membantu Anda menempatkan kode apa pun (atau apa pun yang benar-benar) di mana saja di situs web Anda.

Kotak Alat

Jika Anda ingin mempelajari lebih lanjut tentang menulis kode khusus di posting WordPress Anda, silakan lihat sumber daya berikut:

Yah, itu saja. Kami telah berhasil mencakup area yang kami uraikan di awal. Tetapi jika Anda tidak memahami konsep apa pun dalam posting ini, atau Anda ingin menambahkan saran atau pandangan Anda, silakan bagikan pemikiran Anda di bagian komentar di bawah ini!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector