Cara Menampilkan Bilah Sisi Sadar Konten untuk Setiap Halaman WordPress atau Jenis Posting

Diterbitkan: 2017-06-23

Baiklah, mari kita bicara tentang bilah sisi yang sadar konten. Namun, sebelum kita melakukannya, pertama-tama kita harus berbicara tentang sidebars secara umum.

Sidebar khas adalah pokok dari desain web dan banyak tema WordPress. Mereka adalah tempat yang baik untuk menampilkan informasi tambahan seperti formulir kontak, posting blog terbaru atau terpopuler Anda, iklan, atau apa pun yang bukan daya tarik utama situs Anda. Sementara dalam beberapa tahun terakhir, trennya mengarah ke desain satu halaman tanpa sidebar, mereka tetap menjadi elemen yang populer.

Dalam kebanyakan kasus, bilah sisi situs web akan menampilkan konten yang sama di halaman mana pun Anda berada. Namun, itu tidak selalu merupakan cara optimal untuk melakukannya. Faktanya, ada banyak alasan untuk menampilkan bilah sisi khusus pada halaman atau kiriman berbeda yang mengetahui konten yang menyertainya.

Oleh karena itu, dalam artikel ini kami ingin membahas lebih lanjut tentang topik ini. Kami pertama-tama akan menunjukkan kepada Anda kasus penggunaan untuk bilah sisi yang sadar konten. Dengan cara ini, Anda akan mengerti apakah itu masuk akal bagi Anda. Setelah itu, kami akan melanjutkan dengan menjelaskan cara menerapkan sidebar jenis ini di situs WordPress Anda.

Siap untuk berangkat? Lalu mari kita retak.

Apa gunanya Sidebar Content Aware?

Sebelum hal lain, mari kita bicara tentang mengapa Anda repot-repot menyesuaikan bilah sisi tergantung pada konten apa yang muncul di sebelahnya. Lagi pula, bilah sisi statis telah ada sejak lama dan tampaknya masih berhasil. Mengapa mengacaukan sistem kerja?

Ternyata, ada banyak kasus penggunaan yang masuk akal untuk menggunakan bilah sisi yang sadar konten:

  • Orientasi — Pengunjung pertama kali mungkin membutuhkan konten yang berbeda sebagai pelanggan tetap. Misalnya, pengguna yang masuk tidak perlu melihat ajakan bertindak “daftar” yang dimaksudkan untuk membuat orang bergabung dengan situs Anda atau di daftar email Anda.
  • Informasi yang disesuaikan — Beberapa informasi lebih masuk akal di beberapa halaman daripada yang lain. Contohnya termasuk informasi kontak tambahan di halaman kontak, artikel terbaik atau terbaru di halaman blog, penawaran khusus di halaman toko — Anda mendapatkan intinya.
  • Peningkatan SEO — Meskipun bukan merupakan faktor utama, konten bilah sisi tetap penting untuk pengoptimalan mesin telusur (terutama jika judul widget dibungkus dengan benar dalam tag heading). Oleh karena itu, Anda dapat menggunakan bilah sisi yang sadar konten untuk membuat halaman Anda lebih bertarget.
  • Ajakan bertindak — Anda juga dapat menggunakan bilah sisi jenis ini untuk menyesuaikan ajakan bertindak untuk berbagai tempat di situs web Anda.
  • Bahasa — Mereka juga memungkinkan untuk membuat bilah sisi untuk versi bahasa yang berbeda dari situs Anda dan menargetkan pasar yang berbeda.

Seperti yang Anda lihat, ada beberapa alasan untuk menggunakan bilah sisi yang sadar konten dan daftar ini masih jauh dari lengkap. Namun, sekarang mari kita fokus pada bagaimana menerapkannya.

Cara Menerapkan Bilah Sisi Sadar Konten di WordPress

Ada tiga cara utama untuk mengatur bilah sisi khusus untuk posting dan halaman. Kesamaan mereka semua adalah bahwa konten bilah sisi diubah sebagai respons terhadap halaman atau pos mana yang ditampilkan. Kondisi termasuk tag WordPress, kategori, nama halaman atau atribut lain seperti apakah pengguna masuk atau tidak.

Setelah itu, bilah sisi biasanya diubah dengan salah satu dari tiga cara berikut:

  • Filter widget — Satu sidebar diisi dengan widget dan semacam logika di latar belakang memutuskan widget mana yang muncul di lokasi mana dan mana yang disembunyikan
  • Siapkan seluruh bilah sisi — Cara lain adalah dengan membuat bilah sisi yang sepenuhnya terpisah yang muncul di lokasi yang sama ketika kondisi yang berbeda terpenuhi. Mereka dapat berisi konfigurasi widget individu.
  • Di-hardcode ke dalam tema — Tentu saja, Anda juga dapat menambahkan bilah sisi khusus ke file tema Anda, jika Anda memiliki pengkodean untuk itu

Saya pribadi berpikir metode kedua adalah yang menghasilkan antarmuka pengguna yang paling teratur. Namun, berikut ini kami akan membahas setiap cara secara rinci sehingga Anda dapat mengambil keputusan sendiri. Setelah itu kami akan mencantumkan beberapa opsi lagi untuk menerapkan bilah sisi khusus di situs WordPress Anda.

Gunakan Visibilitas Widget Jetpack untuk Memfilter Widget

Cara termudah untuk memfilter tampilan widget di situs Anda adalah modul Visibilitas Widget bernama tepat yang disertakan dalam Jetpack. Jika Anda sudah memiliki plugin di situs Anda, membuat sidebar kustom semudah mengaktifkan modul (jika belum aktif secara default). Atau, Anda juga dapat menggunakan versi mandiri ini.

Setelah Anda melakukannya dan pergi ke menu widget, Anda akan menemukan tombol Visibilitas baru di semua widget Anda. Klik dan Anda dapat dengan mudah menerapkan logika tampilan yang diinginkan untuk widget Anda melalui menu tarik-turun.

visibilitas widget jetpack

Kondisi visibilitas adalah sebagai berikut:

  • Kategori — Widget dapat muncul di halaman kategori tertentu atau semuanya
  • Penulis — Penampilan di semua halaman penulis atau terbatas pada pengguna tertentu
  • Pengguna — Memeriksa apakah pengguna masuk atau tidak
  • Peran — Mengontrol widget tergantung pada peran pengguna
  • Tag — Berfungsi seperti halaman kategori tetapi untuk tag
  • Tanggal — Kontrol pada tanggal mana widget arsip muncul
  • Halaman — Atur visibilitas widget untuk halaman depan, halaman posting, halaman arsip, halaman kesalahan 404, jenis posting, arsip jenis posting, dan halaman statis

Untuk setiap opsi, Anda dapat menentukan apakah widget ditampilkan atau disembunyikan. Aturan harus dimasukkan secara terpisah, artinya tidak mungkin memasukkan beberapa halaman sekaligus. Namun, metode ini masih lebih nyaman daripada memasukkan id halaman secara manual seperlunya dalam solusi lain (lebih lanjut tentang itu di bawah). Ada juga kotak centang Cocokkan semua kondisi yang memaksa widget hanya ditampilkan jika semua kondisi valid.

Bilah Sisi Sadar Konten Memungkinkan Anda Mengatur Bilah Sisi Khusus

Solusi kedua yang ingin kita bicarakan adalah plugin Content Aware Sidebars. Seperti yang disebutkan sebelumnya, plugin ini memungkinkan Anda untuk mengatur seluruh bilah sisi yang kemudian dapat Anda isi dengan widget dan tetapkan ke posting dan halaman. Ini cukup sederhana untuk digunakan.

Setelah instalasi, Anda menemukan item menu baru yang disebut Sidebars di menu WordPress.

menu bilah sisi sadar konten

Ketika Anda memilih Tambah Baru di sini, Anda mendapatkan layar ini:

tambahkan bilah sisi baru dengan plugin bilah sisi yang sadar konten

Di sini, hal pertama yang harus dilakukan adalah memberi nama sidebar Anda. Setelah itu, saatnya mengatur kondisi untuk menampilkannya. Opsi yang tersedia mirip dengan Jetpack:

  • Halaman statis — Pilih halaman statis untuk menampilkan bilah sisi seperti halaman depan, hasil pencarian, atau halaman kesalahan 404
  • Posting — Opsi yang sama seperti di atas tetapi untuk postingan
  • Halaman — Pilih halaman mana di situs Anda untuk menampilkan bilah sisi
  • Media — Menentukan halaman media mana yang muncul di sidebar Anda
  • Penulis — Batasi tampilan ke halaman penulis
  • Templat halaman — Pilih templat halaman untuk menampilkan bilah sisi Anda di
  • Kategori — Pilih kategori tertentu atau semua arsip kategori
  • Tag — Opsi yang sama tetapi untuk tag
  • Format — Sekali lagi, pengaturan yang sama untuk arsip format
  • Tanggal — Dan sekali lagi untuk arsip tanggal
  • URL (hanya versi Pro) — Batasi tampilan bilah sisi ke URL tertentu

Pengaturan tambahan:

  • Jadwal — Mengatur waktu untuk tampilan bilah sisi. Dalam versi gratis Anda dibatasi sepanjang hari, versi Pro menawarkan slot waktu yang lebih terperinci.
  • Desain — Tambahkan kelas CSS khusus ke bilah sisi, widget, dan judul widget Anda untuk memanipulasinya
  • Lanjutan — Mengatur urutan sidebar Anda (jika ada lebih dari satu)

Selain itu, Anda juga dapat menggabungkan bilah sisi satu sama lain, menggantinya, mengaturnya sebagai area widget, dan mengontrol visibilitasnya untuk pengguna yang masuk (peran pengguna tersedia di Pro).

Setelah Anda selesai mengonfigurasi, bilah sisi baru muncul di menu widget normal di mana Anda dapat mengisi, mengaktifkan dan menonaktifkannya dan bahkan melihat revisi sebelumnya. Rapi dan mudah.

Buat Bilah Sisi Khusus Secara Manual

Terakhir, Anda juga dapat membuat bilah samping khusus melalui pengkodean. WordPress menawarkan banyak opsi untuk itu dan kami akan segera membahas prosesnya.

Hal pertama yang harus dilakukan untuk membuat bilah sisi khusus adalah mendaftarkan area widget baru. Untuk itu, cukup masukkan kode berikut ke functions.php tema (anak) Anda:

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

Dengan ini:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

Setelah itu, itulah hasil akhir di frontend:

area widget baru beraksi

Tentu saja, jika Anda memiliki bagian pengembangan lebih lanjut, dimungkinkan untuk menambahkan lebih banyak kondisi seperti menampilkan bilah sisi hanya untuk pengguna yang masuk. Anda juga bisa mendapatkan lebih banyak rincian tentang tempat untuk menampilkannya dengan menggunakan hierarki template WordPress. Ini mungkin bukan solusi yang paling dinamis, namun, ini berhasil dan dapat bekerja sepenuhnya di latar belakang tanpa perlu menginstal plugin tambahan.

Cara Tambahan untuk Menerapkan Bilah Sisi yang Sadar Konten

Selain opsi di atas, kami juga memiliki beberapa plugin lagi dengan fungsi serupa.

Logika Widget

plugin logika widget untuk bilah sisi yang sadar konten

Plugin ini bekerja mirip dengan solusi Jetpack, namun, alih-alih menu drop-down, Anda harus memasukkan tag kondisional WordPress secara manual. Dengan begitu, Anda dapat menentukan di mana widget muncul tergantung pada aturan sebanyak yang Anda inginkan.

Namun, untuk melakukannya, Anda perlu mengetahui id halaman Anda dan secara keseluruhan itu sedikit lebih teknis daripada apa yang telah kita lihat di atas. Itu tidak berarti itu tidak berfungsi dan bukan plugin yang kuat, namun, orang yang kurang teknis mungkin lebih baik dengan yang lain.

Bilah Samping Kustom

plugin wordpress bilah sisi khusus

Dibuat oleh WPMU DEV, di sini kami memiliki solusi lain untuk mengatur bilah sisi sadar konten yang berfungsi dengan area widget apa pun. Plugin ini memungkinkan Anda menampilkan widget secara dinamis pada setiap posting, halaman, arsip kategori, jenis posting dan banyak lagi. Plus, ia melakukan semua itu dengan antarmuka pengguna yang sangat kuat dan mudah digunakan. Untuk pengenalan lengkap, periksa artikel Tom Ewer di situs web mereka.

Bilah Sisi Halaman Sederhana

sidebar halaman sederhana

Solusi terakhir untuk membuat bilah sisi khusus dibuat untuk kesederhanaan. Ini memungkinkan Anda untuk menetapkan bilah sisi dan membuat perubahan secara massal langsung dari editor halaman. Setelah Anda melakukannya, Anda dapat mengisinya seperti biasa di menu widget.

Sayangnya, opsi penyesuaian lebih lanjut tidak ada. Namun, jika Anda hanya ingin memiliki sidebar yang berbeda untuk halaman Anda, ini mungkin solusi yang Anda cari.

Singkatnya, Bilah Sisi Sadar Konten

Ada banyak alasan bagus untuk menggunakan sidebar khusus di situs Anda. Tidak semua konten memerlukan informasi yang sama untuk muncul di sebelahnya. Dengan sidebars yang sadar konten, Anda dapat menampilkan apa yang masuk akal daripada menggunakan satu sidebar standar.

Dalam tutorial ini, kita telah mempelajari beberapa cara untuk membuat sidebar yang disesuaikan. Dari memfilter widget hingga membuat seluruh bilah sisi baru hingga mengkodekannya ke dalam tema Anda, semuanya ada di sana.

Berbekal informasi ini, Anda sekarang dapat menyediakan hanya konten bilah sisi yang Anda butuhkan untuk interaksi pengguna yang lebih baik dan layanan kepada audiens Anda. Cobalah!

Apa pengalaman Anda dengan bilah sisi yang sadar konten? Beri tahu kami di bagian komentar di bawah!

Gambar thumbnail artikel oleh Kit8.net/ shutterstock.com