Cara Membuat Footer Keren di WordPress Tanpa Plugin

Footer merupakan bagian bawah website yang biasanya berisi informasi tambahan, tautan navigasi, identitas website, dan informasi kontak. Dengan susunan yang tepat, footer dapat membantu pengunjung menemukan halaman penting tanpa harus kembali ke bagian atas website.

Membuat footer WordPress tanpa plugin bisa dilakukan menggunakan fitur bawaan WordPress serta kode HTML dan CSS sederhana. Cara ini dapat menjadi pilihan jika kamu ingin mengatur tampilan footer sendiri tanpa menambahkan plugin khusus untuk kebutuhan tersebut.

Dalam panduan ini, kamu akan mempelajari struktur footer, cara menambahkan HTML, contoh kode CSS responsif, serta beberapa hal yang perlu diperhatikan sebelum menerapkannya pada website.

Mengapa Footer WordPress Perlu Diatur dengan Baik?

Footer bukan sekadar elemen dekoratif. Bagian ini dapat digunakan untuk menampilkan informasi yang tetap mudah ditemukan ketika pengunjung sudah mencapai akhir halaman.

Beberapa fungsi footer pada website antara lain:

• Membantu navigasi: menyediakan tautan menuju halaman Tentang, Kontak, dan Kebijakan Privasi.
• Menampilkan identitas website: memuat nama website dan deskripsi singkat.
• Menyediakan informasi tambahan: seperti alamat bisnis atau informasi layanan jika memang diperlukan.
• Memudahkan akses media sosial: menyediakan tautan menuju akun resmi website.

Footer yang tersusun rapi dapat meningkatkan kemudahan penggunaan website. Namun, menambahkan banyak tautan di footer tidak otomatis meningkatkan peringkat pencarian. Gunakan tautan yang benar-benar relevan dan bermanfaat bagi pengunjung.

Struktur Footer WordPress yang Disarankan

Susunan footer dapat disesuaikan dengan kebutuhan dan jenis website. Untuk blog atau website sederhana, tiga bagian utama biasanya sudah cukup.

• Identitas website: nama website dan penjelasan singkat mengenai kontennya.
• Menu penting: tautan menuju halaman Tentang, Kontak, dan Kebijakan Privasi.
• Media sosial: tautan menuju akun resmi yang masih aktif.

Jika website membutuhkan informasi tambahan, kamu dapat menambahkan kolom lain. Hindari memenuhi footer dengan tautan yang tidak berkaitan dengan isi website.

Cara Membuat Footer WordPress Tanpa Plugin

Sebelum memasukkan kode, periksa terlebih dahulu jenis tema WordPress yang digunakan. Tema klasik dan tema blok memiliki lokasi pengaturan footer yang berbeda.

1. Menggunakan Widget Footer pada Tema Klasik

Jika tema menyediakan area widget di bagian footer, kamu dapat memanfaatkan fitur tersebut untuk menambahkan HTML.

1. Masuk ke dashboard WordPress.
2. Buka menu Appearance → Widgets.
3. Cari area widget Footer yang disediakan oleh tema.
4. Tambahkan blok Custom HTML.
5. Masukkan kode HTML footer yang ingin digunakan.
6. Simpan perubahan, lalu periksa hasilnya pada halaman website.

Nama dan jumlah area widget dapat berbeda tergantung tema. Jika tidak tersedia area widget footer, gunakan pengaturan footer yang disediakan oleh tema atau metode lain yang sesuai.

2. Menggunakan Site Editor pada Tema Blok

Untuk tema blok yang mendukung Full Site Editing, pengaturan footer dapat dilakukan melalui Site Editor.

1. Buka dashboard WordPress.
2. Pilih Appearance → Editor.
3. Buka bagian template atau pola yang mengatur footer.
4. Tambahkan blok yang diperlukan, seperti Group, Columns, Paragraph, Navigation, atau Custom HTML.
5. Atur susunan dan tampilannya sesuai kebutuhan.
6. Simpan perubahan setelah memeriksa hasilnya.

Jika menu Editor tidak tersedia, kemungkinan tema yang digunakan tidak mendukung pengaturan tersebut. Kamu dapat menggunakan area widget atau fitur pengaturan footer dari tema.

Contoh HTML Footer WordPress Siap Pakai

Berikut contoh struktur footer sederhana yang terdiri dari identitas website, tautan halaman penting, dan media sosial. Ganti alamat tautan serta nama website sesuai kebutuhan sebelum menggunakannya.

<footer class="ttp-footer">
  <div class="ttp-footer-container">

    <div class="ttp-footer-col">
      <h3>Tipstech Praktis</h3>
      <p>
        Panduan praktis seputar teknologi,
        WordPress, dan blogging untuk pemula.
      </p>
    </div>

    <div class="ttp-footer-col">
      <h3>Link Penting</h3>
      <ul>
        <li><a href="/tentang/">Tentang Kami</a></li>
        <li><a href="/kontak/">Kontak</a></li>
        <li><a href="/kebijakan-privasi/">Kebijakan Privasi</a></li>
      </ul>
    </div>

    <div class="ttp-footer-col">
      <h3>Media Sosial</h3>
      <ul>
        <li><a href="https://instagram.com/USERNAME">Instagram</a></li>
        <li><a href="https://youtube.com/@USERNAME">YouTube</a></li>
      </ul>
    </div>

  </div>

  <div class="ttp-footer-bottom">
    <p>© 2026 Tipstech Praktis. Hak cipta dilindungi.</p>
  </div>
</footer>

Perhatian: Ganti URL media sosial dengan alamat akun yang benar. Sesuaikan juga alamat halaman internal dengan permalink yang benar-benar digunakan pada website. Hapus tautan yang belum tersedia agar pengunjung tidak diarahkan ke halaman yang salah.

Contoh CSS Footer Responsif

Setelah HTML ditambahkan, masukkan CSS berikut melalui menu Appearance → Customize → Additional CSS jika tema menyediakan Customizer. Pada tema blok, lokasi pengaturan CSS dapat berbeda dan bergantung pada dukungan tema.

.ttp-footer {
  background: #111827;
  color: #f3f4f6;
  padding: 35px 20px 15px;
}

.ttp-footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.ttp-footer-col {
  flex: 1 1 220px;
}

.ttp-footer-col h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 18px;
}

.ttp-footer-col p {
  margin: 0;
  line-height: 1.7;
  color: #d1d5db;
}

.ttp-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ttp-footer-col li {
  margin-bottom: 9px;
}

.ttp-footer a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ttp-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.ttp-footer-bottom {
  max-width: 1100px;
  margin: 25px auto 0;
  padding-top: 15px;
  border-top: 1px solid #374151;
  text-align: center;
}

.ttp-footer-bottom p {
  margin: 0;
  color: #9ca3af;
  font-size: 14px;
}

@media (max-width: 600px) {
  .ttp-footer {
    padding: 28px 18px 15px;
  }

  .ttp-footer-container {
    flex-direction: column;
    gap: 22px;
  }

  .ttp-footer-col {
    flex: 1 1 auto;
  }
}

CSS tersebut menggunakan nama class khusus dengan awalan ttp-footer agar kemungkinan berbenturan dengan aturan CSS lain pada tema menjadi lebih kecil. Tampilan tetap perlu diperiksa karena setiap tema WordPress dapat memiliki aturan bawaan yang berbeda.

Tips Mengoptimalkan Footer agar Lebih Profesional

Agar footer nyaman digunakan dan tidak mengganggu tampilan website, perhatikan beberapa hal berikut:

• Gunakan desain sederhana: pilih susunan yang mudah dipahami dan tidak terlalu ramai.
• Perhatikan kontras warna: pastikan teks dapat dibaca dengan jelas di atas warna latar.
• Gunakan tautan yang relevan: prioritaskan halaman yang memang dibutuhkan pengunjung.
• Periksa tampilan mobile: pastikan kolom tidak saling bertumpuk dan teks tetap nyaman dibaca.
• Gunakan tautan media sosial yang aktif: hindari tautan kosong atau alamat yang tidak sesuai.
• Jaga kode tetap sederhana: hindari menambahkan JavaScript atau elemen yang tidak diperlukan.

Kesalahan yang Sebaiknya Dihindari

Beberapa kesalahan berikut dapat membuat footer kurang nyaman digunakan:

• Memasukkan terlalu banyak tautan yang tidak relevan.
• Menggunakan warna teks yang sulit dibaca.
• Membiarkan tautan mengarah ke halaman yang tidak tersedia.
• Menggunakan ukuran teks terlalu kecil.
• Tidak memeriksa tampilan footer pada perangkat seluler.
• Menambahkan elemen atau kode yang tidak memiliki fungsi jelas.

Apakah Footer WordPress Berpengaruh terhadap SEO?

Footer dapat membantu pengunjung dan mesin pencari menemukan tautan menuju halaman penting di website. Tautan internal yang relevan juga membantu menjelaskan hubungan antara halaman-halaman dalam sebuah situs.

Meskipun demikian, footer bukan faktor yang secara otomatis meningkatkan peringkat pencarian. Penggunaan tautan yang berlebihan, tidak relevan, atau dibuat hanya untuk memasukkan kata kunci justru dapat mengurangi kenyamanan pengguna.

Karena itu, gunakan footer sebagai bagian dari navigasi website. Pastikan setiap tautan memiliki tujuan yang jelas dan mengarah ke halaman yang sesuai.

Baca Juga:

• Cara Menambahkan Menu Navigasi Dropdown di WordPress
• Cara Mengatur Homepage Statis di WordPress
• Cara Membuat Halaman, Menu, dan Widget di WordPress untuk Pemula

Kesimpulan

Membuat footer WordPress tanpa plugin dapat dilakukan dengan memanfaatkan fitur bawaan tema, HTML, dan CSS. Kamu bisa menyesuaikan susunan footer untuk menampilkan identitas website, navigasi, serta tautan media sosial tanpa harus memasang plugin khusus.

Gunakan struktur yang sederhana, pastikan tautan berfungsi, dan periksa tampilannya pada perangkat desktop maupun mobile. Dengan begitu, footer dapat menjadi bagian website yang lebih rapi, informatif, dan mudah digunakan.

Pertanyaan Umum

Apakah footer WordPress berpengaruh terhadap SEO?

Footer dapat membantu navigasi dan memudahkan pengunjung menemukan halaman penting. Tautan internal yang relevan juga membantu menjelaskan hubungan ant halaman, tetapi footer tidak otomatis meningkatkan peringkat pencarian.

Apakah perlu plugin untuk membuat footer WordPress?

Tidak selalu. Footer sederhana dapat dibuat menggunakan fitur bawaan tema WordPress, blok Custom HTML, widget, dan CSS. Plugin tambahan hanya diperlukan jika membutuhkan fungsi khusus yang tidak tersedia pada tema.

Bagaimana cara membuat footer WordPress responsif?

Gunakan CSS Flexbox atau Grid yang dilengkapi media query agar susunan kolom dapat menyesuaikan ukuran layar. Periksa hasilnya pada perangkat desktop dan seluler.

Di mana menambahkan CSS footer WordPress?

Pada tema klasik, CSS dapat ditambahkan melalui Appearance → Customize → Additional CSS jika tersedia. Pada tema blok, lokasi pengaturannya bergantung pada fitur yang disediakan oleh tema.