Menambahkan Empat Area Widget Footer Secara Dinamis

() translation by (you can also view the original English article)

Hari-hari ini, banyak tema WordPress memiliki sejumlah area widget di footer, yang berarti Anda dapat membuat "footer gemuk" dengan beberapa area widget berdampingan. Ini adalah sesuatu yang saya gunakan di semua tema saya.

Tetapi bagaimana jika tema Anda memiliki empat area widget tetapi Anda hanya ingin tiga widget? Jika Anda tidak berhati-hati, Anda akan berakhir dengan celah jelek di sisi kanan tempat area widget keempat kosong.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menghindari ini menggunakan kombinasi tag kondisional dalam PHP dan beberapa Object-Oriented CSS (OOCSS), yang akan memeriksa berapa banyak area widget yang telah Anda isi dan secara otomatis mengubah ukurannya sehingga masing-masing mengambil proporsi yang tepat dari lebar halaman.

Apa yang Akan Anda Butuhkan

Untuk mengikuti tutorial ini, Anda akan membutuhkan:

instalasi pengembangan WordPress
tema Anda sendiri yang akan Anda tambahkan kodenya
sebuah editor kode

Mendaftarkan Area Widget

Langkah pertama adalah mendaftarkan empat area widget untuk footer Anda. Jika Anda belum memiliki area widget terdaftar, Anda harus menambahkan kode ini ke file functions.php Anda:

function tutsplus_widgets_init() {

    // First footer widget area, located in the footer. Empty by default.
  register_sidebar( array(
		'name' => __( 'First Footer Widget Area', 'tutsplus' ),
		'id' => 'first-footer-widget-area',
		'description' => __( 'The first footer widget area', 'tutsplus' ),
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Second Footer Widget Area, located in the footer. Empty by default.
	register_sidebar( array(
		'name' => __( 'Second Footer Widget Area', 'tutsplus' ),
		'id' => 'second-footer-widget-area',
		'description' => __( 'The second footer widget area', 'tutsplus' ),
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Third Footer Widget Area, located in the footer. Empty by default.
	register_sidebar( array(
		'name' => __( 'Third Footer Widget Area', 'tutsplus' ),
		'id' => 'third-footer-widget-area',
		'description' => __( 'The third footer widget area', 'tutsplus' ),
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Fourth Footer Widget Area, located in the footer. Empty by default.
	register_sidebar( array(
		'name' => __( 'Fourth Footer Widget Area', 'tutsplus' ),
		'id' => 'fourth-footer-widget-area',
		'description' => __( 'The fourth footer widget area', 'tutsplus' ),
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
		
}

// Register sidebars by running tutsplus_widgets_init() on the widgets_init hook.
add_action( 'widgets_init', 'tutsplus_widgets_init' );

Ini akan menambahkan empat area widget footer ke tema Anda. Jika Anda melihat layar Widgets, Anda akan melihat semuanya di sana, bersama dengan yang lain yang sudah Anda daftarkan:

Menambahkan Area Widget ke Tema Anda

Jika Anda menambahkan widget ke area widget tersebut sekarang, tidak akan ada yang terjadi. Anda perlu menambahkannya ke footer tema Anda. Saya akan bekerja melalui kode yang perlu Anda tambahkan ke file footer Anda secara bertahap, menambahkan lebih banyak pemeriksaan untuk berbagai jumlah area widget yang terisi saat kita berjalan.

Perhatikan bahwa Anda mungkin perlu mengubah beberapa kelas dan elemen yang berisi kode area widget sesuai dengan struktur dan tata letak tema Anda.

1. Memeriksa Apakah Tidak Ada Area Widget yang Diisi

Langkah pertama adalah memeriksa apakah tidak ada area widget yang diisi, yang mana tidak ada yang harus ditampilkan. Buka file footer.php tema Anda dan tambahkan kode di bawah ini.

<footer>

    <?php
	/* The footer widget area is triggered if any of the areas
	 * have widgets. So let's check that first.
	 *
	 * If none of the sidebars have widgets, then let's bail early.
	 */
	if (   ! is_active_sidebar( 'first-footer-widget-area'  )
		&& ! is_active_sidebar( 'second-footer-widget-area' )
		&& ! is_active_sidebar( 'third-footer-widget-area'  )
		&& ! is_active_sidebar( 'fourth-footer-widget-area' )
	)
		return;

	//end of all sidebar checks.
	endif;?>
		
</footer>

2. Memeriksa apakah Semua Area Widget Diisi

Selanjutnya, saya akan memeriksa apakah semua area widget sudah diisi. Jika ini kasusnya, tema akan menampilkan isi dari keempatnya, dengan masing-masing float di samping satu sama lain dan mengambil seperempat lebar layar. Saya akan menambahkan kelas untuk ini di sini, tetapi menambahkan CSS ke stylesheet saya nanti.

Setelah pembacaan baris return; tetapi sebelum endif; pernyataan dalam kode yang baru saja Anda tambahkan, tambahkan ini:

if (   is_active_sidebar( 'first-footer-widget-area'  )
    && is_active_sidebar( 'second-footer-widget-area' )
	&& is_active_sidebar( 'third-footer-widget-area'  )
	&& is_active_sidebar( 'fourth-footer-widget-area' )
) :	?>

<aside class="fatfooter" role="complementary">
	<div class="first quarter left widget-area">
		<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
	</div><!-- .first .widget-area -->

	<div class="second quarter widget-area">
		<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
	</div><!-- .second .widget-area -->

	<div class="third quarter widget-area">
		<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
	</div><!-- .third .widget-area -->

	<div class="fourth quarter right widget-area">
		<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
	</div><!-- .fourth .widget-area -->
</aside><!-- #fatfooter -->

Ini melakukan hal berikut:

Memeriksa bahwa semua area widget footer diisi menggunakan tag if.
Jika demikian, buka elemen baru yang disebut <aside class = "fatfooter">. Elemen tambahan ini yang berisi area widget memungkinkan seluruh footer untuk berpusat pada halaman bahkan jika footer itu sendiri tidak (misalnya jika keseluruhan footer memiliki latar belakang yang lebar).
Tampilkan keempat area widget menggunakan fungsi dynamic_sidebar(), memberikan masing-masing ini kelas untuk tata letak.

Kelas-kelasnya adalah .left.quarter untuk sebagian besar area widget, kecuali yang terakhir yang memiliki .right.quarter.

3. Memeriksa Apakah Hanya Tiga Area Widget yang Diisi

Langkah selanjutnya adalah menambahkan kode untuk menampilkan area widget jika hanya tiga dari mereka yang diisi. Di bawah kode yang baru saja Anda tambahkan, masukkan yang berikut:

<?php 
elseif ( is_active_sidebar( 'first-footer-widget-area'  )
    && is_active_sidebar( 'second-footer-widget-area' )
	&& is_active_sidebar( 'third-footer-widget-area'  )
	&& ! is_active_sidebar( 'fourth-footer-widget-area' )
) : ?>
<aside class="fatfooter" role="complementary">
	<div class="first one-third left widget-area">
		<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
	</div><!-- .first .widget-area -->

	<div class="second one-third widget-area">
		<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
	</div><!-- .second .widget-area -->

	<div class="third one-third right widget-area">
		<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
	</div><!-- .third .widget-area -->

</aside><!-- #fatfooter -->

Ini memeriksa apakah tiga area widget pertama diisi dan yang keempat tidak, dan kemudian menampilkan tiga yang pertama menggunakan kelas yang sesuai—menggantikan .quarter dengan .one-third.

Perhatikan bahwa ketika Anda mengisi area widget Anda, Anda selalu perlu kehilangan yang terakhir jika Anda tidak ingin menggunakannya semuanya, atau pemeriksaan ini tidak akan berfungsi. Jangan biarkan yang pertama kosong dan mengisi yang kemudian.

4. Memeriksa Apakah Hanya Dua Area Widget yang Diisi

Untuk menghasilkan hanya dua area widget jika sudah diisi dan yang ketiga dan keempat belum, tambahkan kode ini di bawah kode yang baru saja Anda tambahkan:

<?php
elseif ( is_active_sidebar( 'first-footer-widget-area'  )
    && is_active_sidebar( 'second-footer-widget-area' )
	&& ! is_active_sidebar( 'third-footer-widget-area'  )
	&& ! is_active_sidebar( 'fourth-footer-widget-area' )
) : ?>
<aside class="fatfooter" role="complementary">
	<div class="first half left widget-area">
		<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
	</div><!-- .first .widget-area -->

	<div class="second half right widget-area">
		<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
	</div><!-- .second .widget-area -->

</aside><!-- #fatfooter -->

Ini bekerja dengan cara yang mirip dengan dua cuplikan kode sebelumnya, menggunakan kelas .half untuk tata letak.

5. Memeriksa apakah Hanya Satu Area Widget yang Diisi

Pemeriksaan terakhir hanya untuk area widget pertama yang diisi. Tambahkan ini di bawah kode yang baru saja Anda tambahkan:

<?php
elseif ( is_active_sidebar( 'first-footer-widget-area'  )
    && ! is_active_sidebar( 'second-footer-widget-area' )
	&& ! is_active_sidebar( 'third-footer-widget-area'  )
	&& ! is_active_sidebar( 'fourth-footer-widget-area' )
) :
?>
<aside class="fatfooter" role="complementary">
	<div class="first full-width widget-area">
		<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
	</div><!-- .first .widget-area -->

</aside><!-- #fatfooter -->

Ini akan menampilkan satu konten area widget dalam elemen full-width.

Sekarang simpan file footer.php Anda.

Menambahkan CSS

Saat ini area widget Anda tidak akan berfungsi dengan benar—pada kenyataannya, jika Anda mengisi semuanya, mereka akan muncul satu di bawah yang lain dengan lebar penuh. Jadi Anda perlu menambahkan beberapa OOCSS untuk membuat kelas tata letak tersebut berfungsi. OOCSS yang saya tambahkan responsif, jadi saya telah menyertakan media queries untuk mengubah ukuran area widget footer di layar kecil.

1. Menambahkan Floats

Pertama mari kita pastikan area widget float berdampingan.

Buka file style.css tema Anda dan tambahkan kode ini:

/* floats */
.quarter,
.one-third,
.two-thirds,
.half {
    float: left;
}

2. Menambahkan Lebar

Lebar akan memastikan bahwa semua area widget mengambil proporsi yang benar dari layar. Saya menggunakan persentase karena membuat kode lebih fleksibel dan responsif. Tambahkan ini ke stylesheet Anda:

/* widths */
.one-third {
    width: 32%;
}
.two-thirds {
	width: 65.5%;
}
.quarter {
	width: 23.5%;
}
.three-quarters {
	width: 74.5%;
}
.half {
	width: 48%;
}

Perhatikan bahwa lebar tidak menambahkan hingga 100% karena ruang perlu diizinkan untuk margin.

3. Menambahkan Margin

Sekarang tambahkan penataan untuk margin ke stylesheet Anda:

/* margins  */
.one-third {
    margin: 0 0.5%;
}
.quarter,
.two-thirds {
	margin: 0 0.5%;
}
.left,
.quarter.left,
.one-third.left {
	margin: 0 1% 0 0;
	float: left;
}
.right,
.quarter.right,
.one-third.right {
	margin: 0 0 0 1%;
	float: right;
}
.half.left {
	width: 48%;
	margin: 0 2% 0 0;
}
.half.right {
	width: 48%;
	margin: 0 0 0 2%;
}
.two-thirds.left {
	margin: 0 1% 0 0;
}
.two-thirds.right {
	margin: 0 0 0 1%;
	float: right;
}

Perhatikan bahwa margin berbeda untuk elemen yang juga memiliki kelas .right atau .left yang diterapkan pada mereka, sehingga mereka duduk rata di tepi elemen yang mengandungnya.

4. Menambahkan Media Queries

Media queries akan melakukan dua hal:

Pada layar kecil seperti tablet, empat elemen akan muncul dalam grid dua kali dua, yang berarti bahwa elemen dengan kelas .quarter akan memiliki setengah lebar dan margin akan disesuaikan.
Pada layar yang sangat kecil seperti smartphone, semua elemen akan memiliki lebar penuh.

Tambahkan media queries di bagian bawah stylesheet Anda bersama dengan media queries lainnya yang mungkin Anda miliki:

/* media queries for larger screens such as small tablets in landscape or large tablets in portrait */
@media screen and ( max-width: 780px ) {
    
	/* only the .quarter layout class is relevant here - all other classes will have full width */
	.quarter {
		width: 48%;
	}
	.quarter.left {
		margin-right: 2%;
	}
	.quarter.right {
		margin-left: 2%;
	}
	footer .third.quarter.widget-area {
		clear: both;
	}
}

/* media queries for small screens in landscape mode (or similar) */
@media screen and ( max-width: 600px ) {
	
	/* width sizing all full width in small screens */
	.quarter,
	.one-third,
	.half,
	.two-thirds,
	.three-quarters,
	.full-width {
		width: 100%;
		margin: 0;
	}
	/* padding adjustments */
	.widget-area {
		padding: 0 0 10px 0;
	}
}

Sekarang simpan stylesheet Anda.

Menguji Kode Anda

Sekarang saatnya untuk melihat apa yang terjadi ketika Anda mengisi area widget Anda.

Di bawah ini adalah tangkapan layar dari situs yang saya kelola yang menggunakan kode ini. Biasanya footer memiliki empat area widget:

Jika saya menghapus widget dari area widget keempat, hanya tiga yang ditampilkan, dengan lebar yang sama:

Dan jika saya menghapus widget dari area widget ketiga, pengunjung akan melihat dua area widget masing-masing mengambil setengah dari lebar:

Ringkasan

Teknik ini berguna jika Anda ingin tema Anda untuk memungkinkan berisi beberapa area widget footer tetapi Anda tidak tahu berapa banyak dari area widget yang benar-benar akan digunakan.

Jika Anda membuat sebuah kerangka kerja, tema starter, atau tema yang akan digunakan orang lain untuk situs mereka, itu dapat membantu membuat tata letak footer lebih rapi dan menghemat pekerjaan ekstra pada baris yang menambahkan tata letak CSS.