Cara Menambahkan Kode Kustom ke Situs WordPress Anda

Menulis PHP, CSS, dan HTML5 untuk memodifikasi situs WordPress bisa sangat membuat frustrasi, namun panduan yang baik bisa membuatnya lebih mudah. Ini bukan panduan itu. Ini hanyalah tentang cara menambahkan kode ke situs Anda setelah selesai. Namun jangan khawatir – itu sama pentingnya. Karena ada beberapa cara untuk melakukannya, ada baiknya mengetahui perbedaan antara berbagai opsi. Tapi pertama-tama, dua peringatan:

Sebelum Anda mengubah apa pun, buat cadangannya. Faktanya, terus buat cadangan pekerjaan Anda selama proses berlangsung. Ini juga membantu untuk memiliki file terpisah untuk menempelkan cuplikan kode yang dibuang atau akan segera digunakan.
Jika Anda memasang tema orang lain, jangan pernah menambahkan kode ke file functions.php atau style.css tema Anda. Jika Anda melakukannya, maka ketika tema diperbarui, semua kerja keras Anda akan sia-sia.

Sepanjang sisa artikel ini, saya akan mengeksplorasi beberapa alternatif, disusun dari yang paling sederhana hingga yang paling rumit.

Plugin WordPress

Sama seperti ada beberapa jenis modifikasi kode, ada juga beberapa jenis plugin kode khusus. 2 tipe yang paling umum adalah PHP dan CSS. Seperti yang mungkin Anda ketahui, PHP mengatur arsitektur dan fungsi WordPress. Jadi, jika Anda mencoba mengubah fungsi inti situs web Anda, menambah, atau memodifikasi fitur, ada banyak plugin PHP yang tersedia untuk diunduh untuk membantu Anda melakukannya.

Demikian pula, Anda mungkin juga mengetahui apa yang dilakukan CSS – ini mempercantik segalanya. Dan jika hanya itu yang ingin Anda ubah, Plugin CSS Khusus akan memungkinkan Anda melakukannya dengan kerumitan minimal. Yang mengintai di latar belakang adalah JavaScript, yang memiliki hubungan kompleks dengan plugin. Untuk memperjelas, ini sedikit berbeda karena berfungsi dengan baik jika Anda menambahkannya ke header, footer, atau tema anak – tetapi untuk menggunakannya dalam postingan, Anda harus menggunakan plugin khusus. Sesuatu seperti CSS & Javascript Toolbox seharusnya bisa membantu. Sebagai catatan tambahan, demi kecepatan halaman Anda, lebih baik letakkan di footer.

Menulis Plugin Anda Sendiri

Ada banyak sekali cuplikan kode WordPress yang tersedia di internet untuk mengubah, menonaktifkan, atau memodifikasi fitur tertentu. Namun, mengetahui di mana meletakkannya sangat penting untuk fungsionalitas. Misalnya, jika Anda memiliki cuplikan yang mengubah fungsi plugin, Anda pasti ingin cuplikan tersebut berfungsi apa pun tema yang Anda aktifkan. Hal yang sama berlaku untuk cuplikan yang berhubungan dengan perubahan di seluruh situs. Jadi, apa pun kasusnya, sebaiknya buatkan plugin baru untuk mereka. Jangan khawatir, ini tidak mengintimidasi seperti yang terlihat.

Salah satu manfaat utama membuat plugin adalah memungkinkan Anda mengaktifkan atau menonaktifkan plugin sesuai permintaan. Ini juga memungkinkan informasi kontekstual tentang plugin untuk dilihat di halaman plugin. Satu-satunya kelemahan utama adalah bahwa situs tersebut dapat dinonaktifkan secara tidak sengaja oleh siapa pun yang diizinkan untuk mengubah situs, namun peringatan keras kepada mereka seharusnya dapat mencegah hal tersebut.

Sebagai catatan tambahan, Anda juga dapat membuat folder bernama mu-plugins di folder wp-content Anda. File PHP apa pun yang disisipkan di sana akan selalu dieksekusi, dan tidak dapat diaktifkan atau dinonaktifkan. Ini menjauhkan kode khusus dari folder tema dan plugin. Namun lakukan hanya dengan plugin yang selalu nyaman Anda jalankan di latar belakang.

File CSS Khusus

Jika perubahan yang Anda rencanakan bersifat kecil, Anda dapat membuat file custom-style.css. Jika ingin melihat pratinjau perubahan sebelum membuatnya, Anda selalu dapat menggunakan DevTools jika Anda menjalankan Chrome, atau aplikasi serupa. Kemungkinan lainnya adalah menambahkan CSS khusus melalui tema WordPress Anda. Beberapa tema premium, seperti kerangka Total kami, menyertakan opsi panel tema untuk menambahkan CSS khusus sehingga Anda dapat dengan mudah menemukan dan mengubahnya. Ditambah lagi ketika Anda memperbarui tema, pengaturan panel tema Anda harus tetap tidak berubah – sehingga CSS khusus Anda tetap utuh.

Ingat bahwa CSS berjenjang secara terbalik, artinya aturan yang muncul belakangan selalu diutamakan dibandingkan aturan yang muncul sebelumnya. Jadi CSS apa pun yang diterapkan pada lembar terpisah akan menggantikan kode default laman. Itu juga berlaku untuk CSS yang dimasukkan ke…

Tema Anak WordPress

Bagi yang belum tahu, tema anak mewarisi fungsionalitas tema lain, memungkinkan Anda memodifikasi desain sesuka hati (Anda dapat mempelajari semua yang ingin Anda ketahui di panduan tema anak WordPress kami). Mereka diciptakan dengan tujuan khusus agar Anda dapat memodifikasi tema tanpa kehilangan perubahan saat memperbarui. Tema anak mencerminkan semua perubahan yang Anda buat pada tema luar, atau tema 'induk'. Jadi, seperti menerapkan efek lapisan Photoshop, Anda sebenarnya tidak mengedit konten; Anda dapat menghapusnya kapan saja agar semuanya kembali seperti semula.

Membuat tema anak saat Anda ingin memodifikasi kode akan menghemat banyak kerumitan, dan ini cukup mudah (seiring dengan modifikasi WordPress). Cukup akses situs Anda melalui FTP dan buat folder, lalu buat file style.css yang sesuai dengan folder tersebut. Merupakan praktik standar untuk menamainya nama-tema-anak. Setelah itu, yang Anda butuhkan hanyalah satu baris di header style.css' baru Anda untuk menentukan template. Namun ada juga beberapa hal yang perlu dimiliki – yang dapat ditemukan di halaman Codex WordPress.

Selanjutnya, buat perubahan apa pun yang diperlukan pada tema saat ini di bawah baris @import. Satu-satunya kelemahan tema anak adalah banyaknya penelitian yang harus Anda lakukan pada tema induk sebelum Anda dapat memodifikasinya, tanpa menimbulkan konflik atau efek samping yang aneh. Dan ingat bahwa dengan tema anak, Anda hanya perlu menentukan apa yang berbeda dari tema aslinya. Untuk menerapkan perubahan, cukup ZIP, unggah melalui halaman Penampilan > Tema di dashboard WordPress Anda dan aktifkan melalui WordPress. Tentu saja ini dengan asumsi tema induk Anda juga diunggah.

Menampilkan Kode

Ada satu lagi jenis kode tambahan yang belum kami bahas: menunjukkannya. Jika Anda seorang desainer web dan ingin menunjukkan bagaimana sesuatu dilakukan, menyajikannya sedemikian rupa sehingga pemirsa dapat menyalin dan menempelkannya, penting untuk mencatatnya dengan cara yang benar. Cara kode Anda ditafsirkan oleh WordPress bergantung pada apakah Anda menggunakan bagian HTML di Visual Post Editor. Memasukkannya langsung ke editor visual akan berfungsi untuk menetralisirnya, tetapi tidak ada cara untuk memasukkannya ke dalam format atau kotak kode yang tepat. Editor visual hanya akan memformatnya dengan cara yang sama seperti teks biasa. Di sisi lain, editor HTML akan mengubahnya menjadi kode dan merusak situs web Anda. Jangan khawatir, Anda dapat membatalkannya.

Namun, ada kompromi. Anda bisa menyorot dan memasukkan kode Anda ke dalam blok menggunakan tag dan , namun hal itu tidak akan menghentikan pengaktifan kode. Yang perlu dilakukan hanyalah memasukkannya ke dalam font montoype, di dalam kotak, untuk menunjukkan bahwa itu adalah kode resmi. Untuk menghentikan pengaktifannya, Anda harus mengubah simbol aktif menjadi apa yang disebut entitas karakter menyenangkan. Versi yang paling umum, dan versi yang cukup untuk menetralkan sebagian besar kode, masing-masing mengubah < dan > menjadi < dan > (Anda dapat mempelajari lebih lanjut tentang menampilkan kode di postingan kami tentang menulis kode khusus di postingan WordPress Anda).

Seperti yang Anda lihat, ada banyak cara untuk menambahkan kode khusus ke WordPress, dan saya mendorong Anda untuk bereksperimen, bermain-main dengannya, dan melihat mana yang tepat untuk Anda. Adakah cara tambahan untuk menambahkan kode khusus yang saya lewatkan? Beri tahu saya di komentar.