Tambahkan css di footer wordpress

Kami baru-baru ini membahas secara mendalam tentang cara menyesuaikan navigasi WordPress. Kali ini, untuk memberikan gambaran yang lebih lengkap, kami pikir hanya baik dan tepat bahwa kami sekarang berurusan dengan ujung lain dari sebuah situs web dan mempelajari cara menyesuaikan footer situs WordPress

Footer adalah bagian yang sering diabaikan dari sebuah situs web. Lagi pula, banyak pengunjung tidak akan pernah benar-benar menggulir ke bawah sejauh itu. Namun, sikap seperti ini bisa membuat Anda tertinggal

Pertama-tama, footer biasanya muncul di setiap halaman situs web (kecuali jika Anda menggunakan halaman arahan terpisah). Kedua, itu dapat berisi informasi yang sangat penting. Dari detail kontak hingga menu dan tautan ke kebijakan privasi dan persyaratan layanan hingga penafian hukum hingga ikon sosial, banyak hal dapat ditemukan di sana

Untuk memastikan informasi apa pun di bagian situs Anda terlihat bagus, sekarang kami akan membahas banyak cara untuk menyesuaikan footer WordPress sehingga Anda dapat memanfaatkannya sebaik mungkin.

Kustomisasi Footer di WordPress. Opsi Asli

Saat ingin membuat perubahan pada footer Anda, tempat pertama yang biasanya dapat Anda tuju adalah menu Appearance > Widgets di WordPress

Sebagian besar tema WordPress menyertakan setidaknya satu area widget di footer, namun, umum juga memiliki dua atau tiga sehingga Anda dapat menambahkan konten dalam kolom jika diperlukan

Menambahkan informasi cukup mudah. Cukup seret dan lepas widget pilihan Anda ke tempat yang Anda inginkan, konfigurasikan, dan simpan

Opsi Widget

Anda secara teoritis dapat menggunakan semua widget yang Anda miliki di footer WordPress Anda. Namun, beberapa akan lebih masuk akal daripada yang lain. Berikut adalah beberapa opsi widget yang bagus untuk footer

• Arsip — Beri pengunjung Anda akses ke arsip konten bulanan Anda dengan menambahkan widget ini
• Kategori — Memungkinkan audiens Anda untuk mengakses kategori blog Anda dari footer
• Galeri — Pamerkan galeri gambar yang relevan. Cukup seret ke area widget, lalu tambahkan gambar seperti yang biasa Anda lakukan di postingan atau halaman
• Gambar — Sama seperti galeri tetapi untuk gambar tunggal. Menambahkan logo Anda adalah ide bagus di sini
• Menu Navigasi — Tambahkan tautan ke halaman lain di situs Anda. Pastikan untuk terlebih dahulu membuat menu di bawah Appearance > Menus dan lengkapi dengan halaman yang ingin Anda tautkan. Kemudian pindahkan Menu Navigasi ke widget footer, secara opsional beri judul (bisa ajakan bertindak), dan pilih menu Anda dari drop-down
• Posting Terbaru — Membantu pembaca yang mencapai akhir halaman menemukan lebih banyak konten di blog atau situs web Anda
• Pencarian — Merupakan ide bagus untuk memiliki formulir pencarian di situs Anda. Ini membantu pengunjung menemukan apa yang mereka cari dan footer WordPress adalah tempat yang bagus untuk meletakkannya
• Formulir pendaftaran — Jika Anda mengumpulkan email di situs Anda, formulir pendaftaran di footer dapat berfungsi sebagai dorongan terakhir untuk membuat seseorang melompat ke buletin Anda
• Teks — Tambahkan semua jenis teks ke catatan kaki Anda dengan bantuan editor WordPress Klasik. Anda juga dapat menggunakan pemformatan seperti judul, dll. Ini bagus untuk penafian atau pesan apa pun yang ingin Anda sampaikan kepada audiens Anda

Selalu ingat untuk menyimpan widget Anda setelah melakukan perubahan

Hapus “Proudly powered by WordPress” Dari Footer

Menghapus teks footer “Didukung oleh WordPress” adalah permintaan umum di mesin pencari. Ada beberapa cara untuk menghapusnya, tergantung pada apa yang ditawarkan tema Anda

Gunakan Penyesuai

Beberapa tema memungkinkan Anda menyesuaikan bagian footer WordPress ini di WordPress Customizer. Untuk itu, buka Penampilan > Sesuaikan, lalu cari opsi terkait footer

Misalnya, dalam tema OceanWP Anda menemukan opsi ini di bawah Footer Bottom

Seperti yang Anda lihat, itu tidak hanya menimpa pesan biasa "Bangga didukung oleh WordPress" secara default tetapi juga memberi Anda opsi untuk menyesuaikannya dengan apa pun yang Anda inginkan. Temanya bahkan memungkinkan Anda menggunakan kode pendek untuk memasukkan informasi secara dinamis seperti tahun ini dan lainnya

Opsi seperti ini sangat umum dengan banyak tema. Jangan lupa klik Terbitkan di bagian atas untuk membuat perubahan Anda permanen

Hapus Itu melalui Plugin

Pilihan lain untuk menyesuaikan konten footer di WordPress bisa berupa plugin. Ada beberapa di luar sana yang dapat membantu Anda menghapus pesan “diberdayakan oleh WordPress”.

Yang pertama adalah Hapus “Didukung oleh WordPress”. Saat diaktifkan di situs Anda, ini memberi Anda opsi tema tambahan di dalam Penyesuai untuk menonaktifkan kredit footer

Namun, ini hanya berfungsi untuk markup WordPress default, bukan apa pun yang mungkin ada karena tema Anda atau plugin lain,

Jika itu yang terjadi di situs Anda, Anda dapat mencoba Hapus Kredit Footer. Di sini, di bawah Tools > Remove Footer Credit Anda dapat memasukkan teks atau kode HTML apa pun (temukan dengan alat pengembang browser) agar plugin menghapusnya atau menggantinya dengan alternatif yang ditentukan

Edit File Templat

Jika hal di atas gagal, Anda masih memiliki opsi untuk mengedit file template Anda. Sebagian besar tema memiliki file bernama footer.php, yang berisi seluruh markup untuk footer WordPress. Jika Anda ingin menyesuaikannya, ini adalah tempat untuk memulai (selengkapnya di bawah)

Catatan cepat. Perubahan pada file template dan file tema lainnya harus selalu dilakukan dalam bentuk tema anak

Untuk mengedit footer.php, masuk ke server Anda dengan klien FTP dan buka wp-content/themes/yourthemedirectory. Di sini, temukan footer.php file_ dan unduh. Kemudian, edit dengan editor kode favorit Anda

Inilah tampilan bagian keluaran “Didukung oleh WordPress” di tema Dua Puluh Dua Puluh Satu

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Cukup hapus semuanya atau ubah ke apa pun yang Anda inginkan. Simpan file, unggah kembali ke tema (anak) Anda, dan semuanya harus selesai

Ubah Desain Footer

Sama seperti untuk navigasi WordPress, jika Anda ingin membuat perubahan lebih besar pada tampilan footer situs web Anda, Anda harus menerapkan beberapa CSS atau bahkan PHP

Di sini, langkah pertama juga adalah menemukan pemilih CSS yang tepat untuk elemen yang ingin Anda ubah. Cara termudah untuk melakukannya adalah dengan menggunakan alat pengembang browser yang disebutkan di atas. Pada dasarnya, klik kanan setiap elemen footer yang ingin Anda ubah, lalu pilih untuk memeriksanya

Ini akan menunjukkan kepada Anda struktur HTML footer Anda serta pemilih dan gaya CSS setiap elemen

Mengetahui hal ini memungkinkan Anda untuk menimpa dan memodifikasi apapun yang Anda inginkan. Ini juga sangat penting untuk memeriksa ini karena tema default WordPress terbaru (Dua Puluh Dua Puluh dan Dua Puluh Dua Puluh Satu) membagi footer menjadi area widget bawah dan kemudian footer yang sebenarnya

Di bawah ini, kami akan membahas beberapa contoh menggunakan tema Dua Puluh Dua Puluh yang disebutkan di atas. Meskipun Twenty Twenty-One adalah tema default terbaru, tema ini menggunakan banyak variabel CSS dalam markupnya, yang mungkin membuat ini terlalu sulit bagi pemula.

Kami akan menunjukkan kepada Anda prinsip-prinsip cara menyesuaikan footer WordPress Anda, namun perlu diingat bahwa markup mungkin tidak persis sama di tema Anda. Jadi pastikan untuk menyesuaikan seperlunya

Jika Anda hanya akan membuat beberapa perubahan, melakukan ini di bidang CSS khusus dari Penyesuai boleh saja, untuk perubahan yang lebih besar, sebaiknya, sekali lagi, gunakan tema anak

Ubah Warna Latar Belakang Footer

Hal pertama yang ingin kita lakukan cukup sederhana. mengubah warna latar belakang footer situs. Anda dapat melakukannya dengan relatif mudah dengan beberapa markup CSS. Satu-satunya hal yang perlu kita ingat adalah bahwa Twenty Twenty membagi bagian footer menjadi dua, dengan satu area widget dan kemudian footer yang sebenarnya

Melihat mereka dengan alat pengembang, Anda melihat bahwa yang pertama memiliki kelas yang disebut

.footer-nav-widgets-wrapper, #site-footer {
	background-color: #DFE5F5;
}

.footer-widgets-outer-wrapper, .footer-top {
    border-color: #000;
}

.footer-nav-widgets-wrapper, #site-footer {
	background-color: #DFE5F5;
}

.footer-widgets-outer-wrapper, .footer-top {
    border-color: #000;
}

.footer-nav-widgets-wrapper, #site-footer {
	background-color: #DFE5F5;
}

.footer-widgets-outer-wrapper, .footer-top {
    border-color: #000;
}

Seperti yang mungkin bisa Anda lihat, saat melakukannya, kami juga mengubah warna tepi sehingga selaras dengan yang lain dan tidak menghilang begitu saja ke latar belakang. Inilah hasilnya

Buat Perubahan pada Font dan Teks

Selanjutnya, kami ingin membuat beberapa perubahan pada font widget. Saat ini judul widget cukup besar dan terlihat agak terputus dari kontennya. Selain itu, kami ingin mencoba tampilannya ketika teks di bawahnya diindentasi sedikit

Setelah beberapa pemeriksaan, alat pengembang browser mengungkapkan pemilih CSS berikut

• .footer-nav-widgets-wrapper, #site-footer {
  	background-color: #DFE5F5;
  }
  
  .footer-widgets-outer-wrapper, .footer-top {
      border-color: #000;
  }

  _2

• .footer-nav-widgets-wrapper, #site-footer {
  	background-color: #DFE5F5;
  }
  
  .footer-widgets-outer-wrapper, .footer-top {
      border-color: #000;
  }

  _3

Kita sekarang dapat menerapkan beberapa gaya baru seperti itu

.widget .widget-title {
	margin-bottom: 1rem;
}

.footer-widgets a {
    padding-left: 5rem;
}

Saat saya memasukkannya ke bidang CSS khusus atau lembar gaya tema anak, tampilannya seperti ini

Tambahkan Widget ke Footer WordPress

Sebagai langkah terakhir untuk menyesuaikan desain footer WordPress kami, kami ingin menambahkan widget di footer situs yang sebenarnya untuk menampilkan beberapa informasi kontak

Langkah pertama untuk itu adalah mendaftarkan area widget baru, yang dapat kita lakukan dengan cuplikan kode ini di dalam

.footer-nav-widgets-wrapper, #site-footer {
	background-color: #DFE5F5;
}

.footer-widgets-outer-wrapper, .footer-top {
    border-color: #000;
}

function ns_register_footer_widget() {

	register_sidebar(
		array(
			'before_title'  => '<h4 class="bottom-footer-widget-title">',
			'after_title'   => '</h4>',
			'before_widget' => '<div class="bottom-footer-widget">',
			'after_widget'  => '</div>',			
			'name'        => __( 'Footer-Widget', 'twentytwenty' ),
			'id'          => 'bottom-footer-widget',
			'description' => __( 'This is the widget area in the bottom footer.', 'twentytwenty' ),
		)
	);
}

add_action( 'widgets_init', 'ns_register_footer_widget' );

Jika sudah ada, Anda sudah bisa melihatnya di menu Widget di bagian belakang WordPress

Namun, kita sekarang perlu membuatnya muncul di halaman juga. Untuk itu, kita perlu mengedit footer.php dari tema. Sekali lagi, ini adalah sesuatu untuk tema anak, jadi pastikan untuk menyalin file tema sebelum membuat perubahan

Berikut kode untuk membuat area widget baru muncul di footer

<?php if ( is_active_sidebar( 'bottom-footer-widget' ) ) :
	dynamic_sidebar( 'bottom-footer-widget' );
endif; ?>

Kami akan menambahkan ini sekarang di file di sini

Saat kami memuat ulang halaman, kami sudah dapat melihat informasi kontak di sana

Yang tersisa hanyalah menerapkan gaya yang tepat seperti itu

.bottom-footer-widget {
    text-align: center;
}

.bottom-footer-widget-title {
	font-size: 2.2rem;
	margin: 0 auto 0.5rem;
}

Kemudian, itu benar-benar terlihat bagus

Lagipula tidak terlalu sulit, bukan?

Tambahkan Script ke Footer

Hal terakhir yang ingin kami bicarakan adalah bagaimana menambahkan skrip khusus ke footer. Salah satu cara termudah adalah dengan menggunakan plugin seperti Insert Headers and Footers

Instal saja dan Anda mendapatkan opsi untuk memasukkan skrip footer melalui UI

Cukup salin, tempel, simpan, dan Anda baik-baik saja. Beberapa tema seperti Genesis juga memiliki fitur bawaan seperti ini

Anda juga dapat melakukannya secara manual dengan suatu fungsi (tempatkan di

.footer-nav-widgets-wrapper, #site-footer {
	background-color: #DFE5F5;
}

.footer-widgets-outer-wrapper, .footer-top {
    border-color: #000;
}

function ns_load_footer_scripts() {
	wp_enqueue_script('script-name', get_stylesheet_directory_uri() . '/scripts/myscript.js', false, '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'ns_load_footer_scripts' );

Satu hal yang perlu Anda ingat adalah menyetel parameter terakhir ke

.footer-nav-widgets-wrapper, #site-footer {
	background-color: #DFE5F5;
}

.footer-widgets-outer-wrapper, .footer-top {
    border-color: #000;
}

Singkatnya, Menyesuaikan Footer WordPress

Footer adalah elemen tata letak utama dari situs web WordPress mana pun. Untuk memastikan Anda mendapatkan hasil maksimal darinya, Anda dapat menggunakan berbagai cara untuk mengubahnya

Di atas, kami telah membahas beberapa opsi cara menyesuaikan footer WordPress. Anda sekarang tahu cara menggunakan fungsionalitas asli, CSS, PHP, dan plugin untuk membuat perubahan yang berbeda pada elemen footer

Singkatnya, Anda sekarang siap membuatnya sendiri

Bagaimana Anda menyesuaikan footer di situs WordPress Anda?

Bagaimana cara menambahkan CSS khusus ke footer WordPress saya?

Bisakah Anda memuat CSS di footer?

Bagaimana cara menambahkan CSS di WordPress?

Bagaimana cara mengedit CSS footer?