Lightningのサイドバーをカスタマイズする方法

WordPressの無料テーマ、Lightningのサイドバーをカスタマイズする方法を紹介します。
特に前の記事で紹介した「検索フォームをカスタマイズする方法」で検索フォームを作っても、サイドバーの検索フォームには反映されないので、今回紹介する方法でサイドバーをカスタマイズする必要があります。

サイドバーを表示するテンプレート

サイドバーを表示するテンプレート

まずはトップページを表示しているテンプレートindex.phpを見てみましょう。
下記のコードはindex.phpの86行目からです。
8行目のlightning_get_template_part( ‘sidebar’, get_post_type() );でsidebar.phpを呼び出していることが分かります。

<?php
		do_action( 'lightning_sub_section_before', 'lightning_sub_section_before' );
		if ( lightning_is_subsection() ) {
			if ( lightning_is_woo_page() ) {
				do_action( 'woocommerce_sidebar' );
			} else {
				lightning_get_template_part( 'sidebar', get_post_type() );
			}
		}
		do_action( 'lightning_sub_section_after', 'lightning_sub_section_after' );
		?>

次にsidebar.phpを見てみましょう。
18行目にlightning_get_template_part( ‘template-parts/sidebar-contents’, $post_type_info[‘slug’] );とあり、template-partsというディレクトリにあるsidebar-contents.phpを呼び出していることが分かります。

<div class="<?php lightning_the_class_name( 'sub-section' ); ?>">
<?php do_action( 'lightning_sub_section_prepend' ); ?>
<?php
if ( is_active_sidebar( 'common-side-top-widget-area' ) ) {
	dynamic_sidebar( 'common-side-top-widget-area' );
}

if ( is_front_page() ) {
	if ( is_active_sidebar( 'front-side-top-widget-area' ) ) {
		dynamic_sidebar( 'front-side-top-widget-area' );
	}
} else {
	// Display post type widget area.
	$post_type_info    = VK_Helpers::get_post_type_info();
	$widdget_area_name = $post_type_info['slug'] . '-side-widget-area';
	if ( is_active_sidebar( $widdget_area_name ) ) {
		dynamic_sidebar( $widdget_area_name );
	} else {
		lightning_get_template_part( 'template-parts/sidebar-contents', $post_type_info['slug'] );
	}
}

if ( is_active_sidebar( 'common-side-bottom-widget-area' ) ) {
	dynamic_sidebar( 'common-side-bottom-widget-area' );
}
?>
 <?php do_action( 'lightning_sub_section_append' ); ?>
</div><!-- [ /.sub-section ] -->

sidebar.phpの書き方

上記を踏まえてさっそくsidebar.phpを書いてみましょう。
ポイントは既にサイドバーに付与されているclass、idを継承することです。class名、id名を継承することでデフォルトのCSSも継承することができます。

<div class="sub-section sub-section--col--two sub-section--pos--left">
	<aside id="sidebar">
		<div class="side-info">
			<div class="side-c">
			お電話受付時間<br>
			平日10時～18時
			</div>
			<div class="side-t">
			03-0000-0000
			</div>
			<a class="side-i" href="/info">
			<i class="fa-regular fa-envelope"></i>お問い合せ
			</a>
		</div>


		<!--下記2行は検索フォームが不要な場合は書かない-->
		<h4 class="sub-section-title">記事を探す</h4>
		<?php get_search_form(); ?>

		<?php dynamic_sidebar('sidebar'); ?>

	</aside>
</div>

サイドバーのclass名sub-section sub-section–col–two sub-section–pos–leftはsidebar-contents-post.phpに書いてあるのでコピペします。
<?php get_search_form(); ?>は検索フォームの表示が必要ない場合は書かなくでよいです。
<?php get_search_form(); ?>で検索フォームを呼び出すと、searchform.phpでカスタマイズした検索フォームを表示することができます。
<?php dynamic_sidebar(‘sidebar’); ?>はWordPress管理画面からウィジェットを追加するために必要です。

管理画面からウィジェットを追加できるようにする

function.phpに下記のコードを書きます。

if (function_exists('register_sidebar')) {
		register_sidebar(array(
		  'name' => 'sidebar',
		  'id' => 'sidebar',
		  'description' => 'sidebar',
		  'before_widget' => '<div>',
		  'after_widget' => '</div>',
		  'before_title' => '<h4 class="sub-section-title">',
		  'after_title' => '</h4>'
	   ));
}