【WordPress】テーマにウィジェット機能を追加する方法

公開日：2014/02/06

更新日：2014/02/06

カテゴリー: WordPress

WordPressのテーマにウィジェット機能を追加する方法をまとめています。

テーマを自作する場合や、現在使用しているテーマにウィジェット機能がない場合に役に立つかと思います。

ウィジェット機能を有効にする

ウィジェット機能自体はデフォルトで搭載されているので、あとは使用しているテーマでウィジェットを有効化するだけです。

その際、使用しているテーマのfunctions.phpに以下を記述します。

if(function_exists('register_sidebar')){
	register_sidebar();
}

これで、ウィジェット機能がオンになります。

あとはダッシュボードの外観に「ウィジェット」というものがありますので、そこにいき、使用したいものをドラッグ＆ドロップで選ぶだけです。

テーマファイルにタグを追加

次は、ウィジェットを表示させる下のタグをテーマのファイルに追加します。

<?php dynamic_sidebar(); ?>

基本的にはサイドバー（sidebar.php）だと思いますが、任意の場所に設置できます。

複数のウィジェットを使用する

ウィジェット機能は一つのみでなく、好きな数分使用できます。

このとき、functions.phpに以下を記述します。

if(function_exists('register_sidebar')){
	register_sidebar();
	register_sidebar(2);
}

こうすることで、一つはサイドバーに。

<?php dynamic_sidebar(); ?>

もう一つはフッターに。

<?php dynamic_sidebar(2); ?>

のようなことが可能になります。

ウィジェットのカスタマイズ

上の方法でウィジェット機能を問題なく利用できますが、サイトのスタイリングの時、任意のclassやidをウィジェットにつけたい場合があります。

この場合、functions.phpは次のようにします。

if(function_exists('register_sidebar')){
	register_sidebar(array(
		'name' => '○○○',
		'before_widget' => '<div class="hoge">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="piyo">',
		'after_title' => '</h3>',
	));
}

そして、テーマの任意の場所に以下のタグを設置します。

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

これで、ウィジェットが出力される際、ウィジェットの前に「<div class="hoge">」が、後ろに「</div>」が出力されます。

そしてウィジェットの名前が「<h3 class="piyo">」と「</h3>」でマークアップされます。

ウィジェットを複数使用する

このカスタマイズのウィジェットを複数使用する場合、functions.phpに以下を記述します。

if(function_exists('register_sidebar')){
	register_sidebar(array(
		'name' => '○○○',
		'before_widget' => '<div class="hoge">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="piyo">',
		'after_title' => '</h3>',
	));
	register_sidebar(array(
		'name' => '△△△',
		'before_widget' => '<div class="hoge">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="piyo">',
		'after_title' => '</h3>',
	));
}

そして、任意の場所に以下を追加します。

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

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

このようにすることで、いくつでもテーマにウィジェットを使用できます。

あわせて読んでほしい！

Follow @ysklog_net 　

まだコメントはありません。

コメントフォーム

ウィジェット機能を有効にする

テーマファイルにタグを追加

複数のウィジェットを使用する

ウィジェットのカスタマイズ

関連してそうなオススメ記事

コメント