Cara Menambahkan Latar Belakang Berbeda ke Postingan dan Halaman WordPress

WordPress adalah platform blogging dan sistem manajemen konten (CMS). Hal ini tentunya karena platform ini mudah dipelajari, digunakan, dan disesuaikan. Maksud saya, Anda dapat mengubah situs web Anda sesuka Anda tanpa berusaha terlalu keras. Anda bahkan dapat menambahkan latar belakang berbeda ke postingan dan halaman WordPress Anda, yang merupakan subjek dari panduan ini.

Jika Anda ingin menambahkan beberapa warna dan gaya pada postingan dan halaman WordPress Anda, panduan ini menggali topik menggunakan pendekatan dua arah. Pertama, kami akan menambahkan latar belakang yang berbeda ke posting atau halaman WordPress menggunakan CSS dan fungsi PHP sederhana, tetapi jika ini bukan pilihan Anda (misalkan Anda adalah pemula yang sempurna dan kodenya membuat Anda takut), kami akan melakukannya menawarkan beberapa plugin latar belakang WordPress untuk membantu prosesnya.

Apa pun yang terjadi, Anda harus bersenang-senang karena ini adalah proyek yang relatif mudah. Siap? Mari kita terjun dan melihat lima cara Anda dapat menambahkan latar belakang khusus ke postingan dan halaman WordPress Anda.

Latar Belakang Kustom dengan Gutenberg

Jika Anda belum familiar, Gutenberg adalah pembuat konten default WordPress yang dapat Anda gunakan untuk mendesain tata letak postingan, halaman, dan sekarang header/footer Anda. Jadi masuk akal jika ada opsi bawaan untuk latar belakang Anda juga.

Untuk menambahkan latar belakang khusus dengan Gutenberg cukup klik pada blok yang ingin Anda edit. Kemudian klik ikon dengan tiga titik bertumpuk dan pilih opsi “Tampilkan pengaturan lainnya”.

Ini akan membuka sidebar dengan banyak opsi pemformatan untuk blok Anda. Di bagian “Warna” Anda akan melihat opsi untuk warna “Latar Belakang”. Klik lalu gunakan pemilih warna untuk memilih latar belakang yang ingin Anda gunakan. Atau gunakan preset yang sesuai dengan warna Tema atau gradien bawaan Anda.

Sekarang, jika Anda mencari gambar latar belakang, Anda secara khusus perlu menggunakan blok “Sampul”.

Jadi, tambahkan blog baru dan cari “Sampul” dan pilih blok ini.

Selanjutnya Anda akan diminta untuk mengunggah gambar atau memilih salah satu dari Perpustakaan Media Anda. Pilih gambar Anda, lalu tambahkan lebih banyak blok di dalam blok "Sampul" untuk menyelesaikan bagian Anda.

Fitur menarik yang ada di Gutenberg adalah tes aksesibilitas berdasarkan warna. Seperti yang Anda lihat pada gambar di atas, warna yang dipilih untuk tombol kami mungkin tidak cukup kontras dengan gambar latar belakang, jadi Gutenberg memperingatkan bahwa kami mungkin ingin mencoba kombinasi yang berbeda. Ini adalah cara yang bagus untuk memastikan situs Anda mudah dibaca oleh semua pengunjung Anda!

Tambahkan Latar Belakang Kustom dengan Opsi Tema

Sangat mungkin tema Anda memiliki opsi bawaan untuk menambahkan latar belakang khusus, sehingga membuat proses ini menjadi mudah.

Misalnya, tema Total WordPress memiliki kotak meta Pengaturan Tema bawaan pada postingan dan halaman dengan opsi untuk memilih latar belakang Anda sendiri.

Saat membuat postingan atau halaman, cukup gulir ke bawah di mana Anda akan menemukan “Pengaturan Tema” dan pilih tab “Latar Belakang”. Opsinya mencakup pemilih warna jika Anda menginginkan warna solid atau opsi gambar latar belakang (bersama dengan gaya untuk latar belakang gambar, seperti peregangan, sampul, ulangi, dll) yang memungkinkan Anda mengunggah atau memilih gambar dari perpustakaan media Anda.

Namun bukan itu saja, Total juga dilengkapi pengaturan latar belakang seluruh situs yang dapat diakses dari Penyesuai langsung. Untuk menemukan opsi tersebut, mulailah dari dashboard WordPress utama Anda dan klik untuk membuka Tampilan > Sesuaikan > Opsi Tema Umum > Latar Belakang Situs.

Di sini Anda akan menemukan opsi untuk mengatur warna atau gambar latar belakang untuk seluruh situs web Anda. Catatan – ini dapat diatasi dengan mengatur latar belakang khusus per halaman/postingan.

Latar belakang dengan Pembuat Halaman WordPress

Namun jika Anda bukan penggemar Gutenberg, dan tema Anda tidak menawarkan opsi latar belakang apa pun, tempat Anda berikutnya untuk mencari adalah pembuat halaman Anda. Pembuat halaman modern memiliki banyak pengaturan yang dapat disesuaikan, termasuk latar belakang baris. Lokasi opsi ini mungkin berbeda-beda tergantung pembuatnya, tetapi mari kita lihat dua opsi yang paling populer.

Latar Belakang Elemen

Elementor adalah salah satu plugin pembuat halaman paling populer dan meskipun versi gratisnya menawarkan lebih sedikit fitur dibandingkan Elementor Pro, Elementor masih merupakan pilihan yang bagus untuk membangun situs WordPress Anda. Plugin ini mudah digunakan dan opsinya sangat intuitif, sehingga bahkan orang yang baru mengenal WordPress pun dapat membuat situs yang tampak khusus.

Dengan Elementor, saat Anda menyisipkan baris, Anda dapat mengklik ikon enam titik (terlihat seperti panel jendela) lalu pilih tab Gaya untuk menambahkan latar belakang khusus. Pengaturan latar belakang klasik pertama memiliki opsi untuk warna atau gambar. Tapi tunggu – masih ada lagi!

Ada opsi latar belakang tambahan untuk gradien (lihat di atas), video, dan tayangan slide. Ditambah lagi ada bagian di bawah untuk Hamparan Latar Belakang yang dapat Anda gunakan untuk menambahkan gradien atau warna di atas pilihan latar belakang Anda.

Latar Belakang WPBakery

Pembuat WPBakery disertakan dengan banyak tema WordPress premium, dan untuk alasan yang bagus. Ini menawarkan banyak pilihan bagus serta pilihan untuk menggunakan pengeditan visual ujung depan atau pengeditan ujung belakang tradisional di editor WordPress klasik.

Untuk menambahkan latar belakang ke sebuah baris, pertama-tama masukkan modul baris lalu klik ikon pensil untuk membuka Pengaturan Baris. Dari sini buka tab Opsi Desain. Di sinilah Anda akan menemukan pengaturan inti WPBakery untuk memilih latar belakang baris atau gambar baris. Meskipun Anda sebagian besar ingin menggunakan latar belakang pada Baris, ini dapat ditemukan di Opsi Desain untuk banyak elemen WPBakery (seperti kolom, ikon, dll).

Selain itu, bergantung pada bagaimana pengembang tema memperluas pembuatnya atau jika Anda memasang ekstensi pihak ketiga (seperti Ultimate Addons), Anda mungkin memiliki pengaturan lain yang tersedia untuk Anda. Pada tangkapan layar kami di atas, Anda akan melihat bahwa ada opsi Baris untuk menggunakan gambar unggulan postingan/halaman sebagai latar belakang, serta tab tambahan untuk latar belakang Video, Paralaks, dan Hamparan yang khusus untuk Total.

Cara Menambahkan Latar Belakang ke WordPress dengan Kode

Selanjutnya – jika Anda menyukai tema dan pengaturan situs Anda saat ini tanpa pembuat, opsi lainnya adalah menambahkan sedikit kode ke situs Anda untuk mengubah latar belakang Anda. Meskipun Anda tentu saja dapat menyalin dan menempelkan cuplikan kode yang disediakan di sini, akan sangat bermanfaat jika Anda mengetahui cara menggunakan PHP, HTML, dan CSS. Dengan pembukaan itu, mari kita mengedit.

Tambahkan Latar Belakang Berbeda ke Postingan & Halaman WordPress menggunakan CSS

Sebagian besar gaya yang masuk ke postingan dan halaman WordPress (dan seluruh situs Anda) dikendalikan oleh file yang dikenal sebagai stylesheet. File stylesheet di WordPress biasanya diberi label style.css. Anda dapat mengakses style.css dengan membuka Appearance > Theme File Editor di dasbor admin WordPress Anda:

Kami menambahkan latar belakang (dan gaya lainnya) ke postingan/halaman WordPress Anda di style.css, jadi penting untuk memuatnya di tab terpisah.

Saat Anda menavigasi ke Appearance > Editor, Anda juga akan melihat daftar semua template tema di sebelah kanan layar. Jika Anda menggunakan tema anak (yang memang seharusnya demikian) Anda perlu memuat file template tema induk Anda.

Anda harus fokus pada file header.php. Mengapa header.php? Karena file ini ditambahkan ke setiap templat lainnya, yaitu halaman dan postingan, ketika WordPress sedang menyusun file-file yang membentuk situs web Anda. Dengan kata lain, kode di dalam header.php muncul di setiap halaman atau postingan yang Anda buat.

Cari cuplikan kode ini:

<body <?php body_class(); ?>>

Fungsi ini memiliki satu tujuan. Ini membagi kelas CSS yang dapat Anda gunakan untuk mengubah gaya postingan dan halaman Anda. Yang harus Anda lakukan adalah menargetkan kelas CSS khusus untuk halaman atau postingan yang ingin Anda sesuaikan, menambahkan latar belakang dan gaya Anda, menyimpan perubahan Anda dan bersukacita.

Jika, misalnya, Anda melihat kode sumber untuk laman beranda Anda, fungsi di atas akan menghasilkan keluaran seperti:

<body class="home blog logged-in admin-bar no-customize-support hfeed">

Dan itu karena <?php body_class(); ?> bagian cuplikan kode menyediakan semua kelas, mis. .home, .blog, .logged-in, dll., yang dapat Anda gunakan di CSS untuk menata berbagai elemen halaman beranda Anda.

Selain itu: Melihat kode sumber untuk postingan atau halaman apa pun adalah hal yang mudah. Jika Anda menggunakan Chrome, cukup klik kanan pada halaman/postingan dan pilih “Lihat sumber halaman”. Di Mozilla, klik kanan pada postingan/halaman dan pilih “Lihat Sumber Halaman”. Jika Anda menggunakan Microsoft Edge (Internet Explorer), klik kanan pada halaman/postingan Anda dan pilih “Lihat sumber ”.

Jika Anda melihat kode sumber untuk halaman WordPress, fungsi yang sama akan menghasilkan:

<body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support">

Jika Anda melihat kode sumber untuk satu postingan, fungsi body_class kami akan menghasilkan output yang mendekati:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">

Seperti yang Anda lihat, Anda mendapatkan beberapa kelas CSS yang dapat Anda targetkan dengan mudah:

  • .page untuk semua halaman
  • .page-id-2 yang memungkinkan Anda menargetkan halaman tertentu yaitu halaman dengan nomor id. 2
  • .single untuk semua postingan tunggal, artinya semua gaya CSS yang Anda terapkan pada kelas ini akan diterapkan pada semua postingan
  • .postid-1 untuk postingan dengan id=1, artinya semua gaya CSS yang Anda terapkan hanya akan memengaruhi postingan tersebut
  • .single-format-standard – Ini memungkinkan Anda menerapkan gaya CSS ke semua postingan dengan format postingan standar
  • .logged-in – Gaya yang Anda terapkan menggunakan kelas CSS ini hanya akan berlaku untuk pengguna yang login

Semua item yang ada di class= ” ” menawarkan kait CSS yang dapat Anda gunakan untuk menargetkan postingan atau halaman mana pun. Tapi kenapa kita menambahkan titik (.) sebelum setiap kelas? Ini adalah sintaksis CSS konvensional, yang menunjukkan menyatakan bahwa Anda harus memanggil semua kelas menggunakan titik (.) dan semua div menggunakan hash (#). Cerita untuk hari lain.

Misalnya, untuk menerapkan latar belakang hitam ke semua postingan, tambahkan cuplikan berikut ke style.css:

.single { background-color: #000; }

Tambahkan Latar Belakang ke Posting & Halaman WordPress menggunakan PHP (melalui bidang khusus)

Jika Anda ingin menambahkan metode manual bawaan untuk mengubah latar belakang situs Anda melalui bidang khusus, ini juga sangat mudah dilakukan. Cukup tempelkan kode berikut ke dalam file fungsi.php tema Anda (jika Anda menggunakan tema pihak ketiga, hal ini paling baik dilakukan melalui tema anak). Pastikan untuk mengubah tulisan “myprefix” ke pengenal unik Anda (ini untuk mencegah konflik dengan tema dan plugin) dan setelah semuanya siap digunakan, kini Anda dapat menggunakan kolom khusus “myprefix_background_image” untuk memasukkan URL ke gambar halaman atau postingan mana pun yang ingin Anda ubah latar belakangnya.

<?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
	if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
		<style type="text/css">
			body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
		</style>
	<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );

Perhatikan bagaimana fungsinya terhubung ke tindakan “wp_head”? Ini berarti setiap kali Anda menggunakan bidang khusus, CSS sebaris akan ditambahkan ke tag header situs Anda dengan kode untuk mengubah latar belakang sesuai dengan nilai bidang khusus Anda.

Menambahkan Latar Belakang ke WordPress dengan Plugin

Anda dapat menargetkan postingan dan halaman WordPress dan menatanya sesuai keinginan Anda dengan PHP dan CSS seperti yang telah kami tunjukkan. Namun jika Anda tidak punya waktu untuk membuat kode, atau petunjuk di atas tidak berfungsi karena satu dan lain hal, berikut adalah beberapa plugin latar belakang WordPress gratis untuk boot.

Latar Belakang WordPress Tingkat Lanjut

Sesuai dengan namanya, plugin ini menawarkan banyak opsi untuk menyesuaikan latar belakang dengan warna, gambar, pola, paralaks, dan video. Plugin ini berfungsi baik dengan editor klasik, tetapi bahkan kompatibel dengan Gutenberg dan WPBakery – sehingga Anda dapat memiliki opsi latar belakang yang lebih baik bahkan dengan pembuat konten Anda.

Ubah Warna Latar Belakang untuk Halaman, Posting, Widget

Hanya ingin opsi warna sederhana untuk situs dan postingan atau halaman individual Anda? Plugin gratis ini adalah solusi untuk Anda. Instal plugin ini dan gunakan bagian “Warna Latar Belakang” (ditambahkan ke menu dasbor utama WordPress Anda) untuk memilih latar belakang default untuk halaman, postingan, dan area widget Anda. Atau sesuaikan latar belakang per posting/halaman menggunakan opsi “Warna Latar Belakang” yang ditambahkan di editor klasik.

Baik Anda menggunakan pengaturan tema, mempelajari kode, atau menggunakan plugin, menambahkan latar belakang berbeda ke postingan atau halaman WordPress Anda dapat berkontribusi besar terhadap kesadaran merek dan desain visual situs Anda. Bagaimana Anda mengubah latar belakang postingan atau halaman WordPress Anda? Beri tahu kami pertanyaan, saran, dan pemikiran Anda melalui bagian komentar di bawah.