Menambahkan Kode ke Header atau Footer WordPress

Untuk berbagai alasan, mungkin pada suatu saat Anda ingin atau perlu menambahkan kode ke header atau footer situs WordPress Anda. Sayangnya, platform tidak menyediakan cara sederhana atau langsung untuk melakukan ini di luar kotak.

Kabar baiknya adalah Anda dapat dengan mudah memperbaikinya dengan bantuan tema anak dan file functions.php Anda, atau plugin WordPress. Apapun metode yang Anda pilih, Anda akan dapat dengan mudah meningkatkan situs Anda dengan fitur khusus, data pengguna, dan strategi peningkatan kinerja.

Dalam posting ini, kami akan menjelaskan beberapa kasus di mana Anda mungkin perlu atau ingin menambahkan kode ke header dan footer situs WordPress Anda. Kemudian kami akan membagikan petunjuk langkah demi langkah untuk dua metode yang memungkinkan Anda mengedit elemen ini untuk membuat header atau footer khusus. Mari kita mulai!

Mengapa Mengedit Kode Header dan Footer WordPress Anda?

Alasan Anda mungkin ingin mengedit header atau footer WordPress Anda banyak dan beragam. Mungkin yang paling jelas adalah terkadang Anda ingin memberi gaya pada situs Anda melalui penggunaan kode khusus, dan memerlukan cara untuk menambahkan kode ini ke header dan/atau footer Anda.

Namun, ini juga merupakan lokasi utama untuk kode pelacakan, seperti yang digunakan untuk Google Analytics. Kode ini dapat memberikan informasi berharga tentang perilaku pengguna untuk meningkatkan strategi pemasaran dan konten Anda.

Selain itu, WordPress tidak menyertakan tag meta secara default. Ini ditambahkan ke tajuk situs Anda untuk membantu mesin telusur merayapi laman Anda. Meskipun sekarang tidak relevan seperti dulu, tidak ada salahnya menambahkannya ke header Anda – mereka hanya dapat membantu visibilitas situs Anda.

Terakhir, Anda mungkin terbiasa dengan praktik memindahkan JavaScript pemblokiran render 'di paro bawah'. Ini biasanya berarti menambahkannya ke footer WordPress Anda, yang memerlukan pengeditan kodenya. Teknik ini dapat membantu meningkatkan performa situs Anda dengan mengurangi waktu pemuatan.

Cara Menambahkan Kode ke Header atau Footer WordPress Anda Secara Manual (Dalam 2 Langkah)

Ada dua metode utama untuk menambahkan kode ke header atau footer WordPress Anda. Yang pertama adalah mengedit tema situs Anda secara manual, dan yang kedua adalah menggunakan plugin. Meskipun mengedit file tema Anda secara manual lebih berisiko dan sulit, bagi beberapa pengguna yang lebih mahir, ini adalah metode yang lebih disukai.

Langkah 1: Buat Tema Anak

Menambahkan kode secara manual ke header atau footer WordPress melibatkan pengeditan beberapa file tema Anda. Ketika Anda harus melakukan ini, selalu bijaksana untuk mengedit tema anak daripada mengotak-atik file tema induk Anda secara langsung. Dengan cara ini, Anda dapat menghindari kehilangan perubahan saat memperbarui tema.

Untungnya, proses membuat tema anak secara manual cukup sederhana, dan Anda dapat mengakses tutorial WordPress yang Anda perlukan untuk menyesuaikan tajuk. Namun, jika Anda perlu membuat tema anak dalam keadaan darurat, plugin pembuat tema seperti Child Theme Configurator dapat membantu.

Dengan plugin pembuat tema, Anda dapat dengan mudah membuat tema anak dengan mengklik tombol, meskipun pendekatan yang sepenuhnya manual bisa sama cepatnya setelah Anda menurunkan metodenya.

Langkah 2: Edit File functions.php Tema Anak Anda

Setelah tema anak Anda siap, Anda harus mengakses dan mengedit file functions.php -nya. Sebelum Anda mulai, selalu bijaksana untuk mencadangkan situs Anda, untuk berjaga-jaga jika Anda melakukan kesalahan dan ingin dengan mudah memulihkan ke keadaan sebelumnya.

Cara biasa untuk mengedit file functions.php Anda adalah melalui File Transfer Protocol (FTP) dan klien FTP seperti FileZilla. Namun, Anda juga dapat mengedit file tertentu dari dasbor WordPress Anda. Untuk mengaksesnya, buka Appearance > Theme Editor .

Anda akan menerima peringatan bahwa Anda akan mengedit file tema Anda – klik tombol Saya Mengerti untuk melanjutkan. Selanjutnya Anda ingin memastikan bahwa Anda telah memilih file yang benar. Di sidebar di sebelah kanan editor situs, pastikan Theme Functions (functions.php) dipilih.

Sekarang Anda dapat menambahkan kode khusus Anda di akhir file ini, dan klik Perbarui File setelah selesai.

Cara Menambahkan Kode ke Header atau Footer WordPress Anda Dengan Plugin (Dalam 2 Langkah)

Meskipun dalam beberapa kasus mungkin lebih mudah untuk mengedit file tema WordPress Anda secara manual untuk menambahkan kode ke bagian footer atau header Anda, menggunakan plugin biasanya merupakan rute yang lebih aman. Untuk keperluan artikel ini, kami akan menggunakan salah satu plugin paling populer dan berperingkat tinggi untuk tugas, Header, Footer, dan Post Injections.

Namun, ada banyak plugin yang tersedia di Direktori Plugin WordPress dan di tempat lain yang dapat membantu tugas ini.

Langkah 1: Instal dan Aktifkan Plugin Pilihan Anda

Sebagai permulaan, Anda harus menginstal dan mengaktifkan plugin yang ingin Anda gunakan. Anda dapat melakukan ini dengan mengunduh file .zip plugin dari Direktori Plugin atau pasar online lainnya, lalu mengunggahnya ke situs Anda. Atau, navigasikan ke Plugins > Add New di dasbor Anda.

Di sini Anda dapat mencari plugin footer atau header yang ingin Anda gunakan. Apapun metode yang Anda pilih, Anda akan menyelesaikan langkah ini dengan mengklik tombol Instal , lalu Aktifkan saat opsi disajikan.

Langkah 2: Tambahkan Cuplikan Kode Anda ke Header, Footer, dan Pasca Injeksi

Setelah plugin terinstal, Anda seharusnya dapat membuka Pengaturan > Header dan Footer di dasbor Anda.

Di sini Anda akan menemukan editor teks untuk menambahkan cuplikan kode – seperti kode pelacakan Google Analytics atau JavaScript ubahsuaian – yang ingin Anda sertakan di header dan/atau footer.

Ada banyak hal yang dapat Anda capai di halaman ini. Di dua bidang pertama, Anda dapat menambahkan kode ke bagian tajuk. Kolom sebelah kiri menambahkan kode ke setiap halaman di situs Anda – ini berguna untuk Google Analytics, misalnya. Kolom sebelah kanan hanya akan menambahkan kode ke beranda Anda.

Kolom berikutnya menambahkan kode ke badan dan kode footer halaman Anda. Kolom di sebelah kiri adalah untuk tampilan desktop, sedangkan kolom di sebelah kanan adalah untuk versi seluler kode Anda. Setelah selesai mengedit, jangan lupa klik tombol Simpan di bagian bawah layar.

Tingkatkan Pengalaman Situs Anda Dengan WP Engine

Tidak diragukan lagi Anda ingin situs web WordPress Anda memberikan pengalaman digital terbaik bagi pengguna Anda. Menambahkan kode ke footer atau header WordPress Anda adalah taktik yang berguna untuk menyesuaikan situs Anda, menerapkan Google Analytics, atau meningkatkan kinerja.

Di WP Engine, kami memiliki beragam sumber daya pengembang yang dapat membantu Anda meningkatkan pengalaman situs web WordPress Anda. Lihat mereka hari ini!