【WordPress】フッターにウィジェットを横並びで表示する方法を解説【コードあり】

今回は、WordPressでフッターにウィジェットを設置する方法を解説していきます。

【WordPress】フッターの右側にウィジェットを設置する方法

1.WordPressの管理画面にログインして「外観 → ウィジェット」に移動

2.「フッター右」にウィジェットを設置

これで完了です。 pic.twitter.com/sVpHAVhanF

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) December 21, 2022

フッターにウィジェットを表示したいけど、やり方がわからない・・・

今使っているテーマではフッターにウィジェットを設置できない

という方は、この記事が参考になるはずです。

【WordPress】フッターにウィジェットを横並びで表示する方法を解説【コードあり】

具体的な手順は、下記のとおりです。

1. Bootstrapを導入する
2. footer.phpにコードを追加する
3. ウィジェットエリアを作成する
4. ウィジェットを設置する

順番に解説していきます。

Bootstrapを導入する

やり方はいろいろありますが、今回は

1. Bootstrapを導入してフッターを3分割↓
2. 右側にウィジェットを表示させる

というやり方で作成していきます。

イメージとしては、↓のようにフッターを3つのエリアに分けて、「左・中央・右」にそれぞれウィジェットを設置できるようにする、という感じです。

Bootstrapとは？

Bootstrapは、web用のフレームワークで、導入するとサイト作りがかなり楽になります。

今回は、フッターを3分割するときにBootstrapを使用します。

Bootstrapを使わないで3分割しようとすると、コードを書く量が増えてしまうので、導入して簡単に作成していきます。

Bootstrapについて詳しく知りたい方は、下記のサイトが参考になります。

Bootstrapを導入する

というわけで、まずはbootstrapの導入です。

↓のコードを、テーマディレクトリ直下にある「functions.php」に追加します。

function simple_enqueue_style() {
　wp_enqueue_style( 'bootstrap-style', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' );
}

add_action( 'wp_enqueue_scripts', 'simple_enqueue_style' );

function simple_enqueue_script() {
　wp_enqueue_script('bootstrap-jquery-script', 'https://code.jquery.com/jquery-3.4.1.min.js', false, true);
　wp_enqueue_script('popper-script', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', false, true);
　wp_enqueue_script('bootstrap-script', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', false, true);
}

add_action( 'wp_enqueue_scripts', 'simple_enqueue_script' );

BootstrapのCSS・JSファイルを読み込みます。導入はこれで完了です。

footer.phpにコードを追加する

次に、テーマディレクトリ直下にある「footer.php」にコードを追加していきます。

<footer id="footer" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">

	//ここからコード追加
	<div class="container">
		<div class="row">

				//①
				<div class="col-md-4">
					<?php if ( is_active_sidebar( 'footer-widget-left' ) ) : ?>
						<div class="footer-widget-left">
							<?php dynamic_sidebar( 'footer-widget-left' ); ?>
						</div>
					<?php endif; ?>
				</div>

				//②
				<div class="col-md-4">
					<?php if ( is_active_sidebar( 'footer-widget-center' ) ) : ?>
						<div class="footer-widget-center">
							<?php dynamic_sidebar( 'footer-widget-center' ); ?>
						</div>
					<?php endif; ?>
				</div>

				//③
				<div class="col-md-4">
					<?php if ( is_active_sidebar( 'footer-widget-right' ) ) : ?>
						<div class="footer-widget-right">
							<?php dynamic_sidebar( 'footer-widget-right' ); ?>
						</div>
					<?php endif; ?>
				</div>
				
		</div>
	</div>
	//ここまでコード追加

</footer>
<?php wp_footer(); ?>
</body>
</html>

WordPressの関数「dynamic_sidebar」で、右・中央・左それぞれにウィジェットを呼び出しています。

コード内の①・②・③が、↓の①・②・③に対応する感じです。

ちなみに、コード内の「container、row、col-md-4」は、Bootstrapのcssクラスです。

Bootstrapの機能の一つであるGridシステムというものを使っており、これのおかげでクラスを指定するだけで簡単にエリアを分割できるわけです。

Gridシステムについて詳しく知りたい方は、下記のページが参考になります。

footer.phpの修正は、これで完了です。

ウィジェットエリアを作成する

次に、WordPress管理画面からウィジェットを追加するためのウィジェットエリアを作成していきます。

テーマディレクトリ直下にある「functions.php」に、下記のコードを追加します。

//①
register_sidebar( array(
	'name' => 'フッター 右',
	'id' => 'footer-widget-right',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

//②
register_sidebar( array(
	'name' => 'フッター中央',
	'id' => 'footer-widget-center',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

//③
register_sidebar( array(
	'name' => 'フッター左',
	'id' => 'footer-widget-left',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

右側だけに表示させたい場合は、①のみ追加すればOKです。

追加すると、WordPress管理画面の「外観→ウィジェット」にエリアが追加されます。

• footer.php：dynamic_sidebar( ‘footer-widget-right‘ );
• functions.php：’id’ => ‘footer-widget-right‘,

上のようにすることで、「フッター右」に設置したウィジェットが、フッターの右側に表示されるわけです。

ウィジェットを設置する

ここまで来たら、あとはWordPress管理画面からウィジェットを設置するだけです。

具体的な手順は、以下の通り。

• 外観 → ウィジェットに移動する
• フッター右側にウィジェットを設置する

クラシックウィジェットでの設置方法

外観 → ウィジェットに移動する

WordPressの管理画面にログインして「外観 → ウィジェット」に移動します。

フッター右側にウィジェットを設置する

「フッター右」にウィジェットを設置します。

上記の例では、アーカイブウィジェットを設置しています。

フッターの右側にアーカイブウィジェットが追加されているのがわかると思います。

ブロックウィジェットでの設置方法

同じように、WordPressの管理画面にログインして「外観 → ウィジェット」に移動します。

↓のような感じで、ウィジェットを設置できます。

以上になります。本記事を参考にして、ウィジェットを設置してみてください。