はぴまむ

子育て中もハッピーに日々を過ごしたい主婦がお仕事のことや役に立った情報などをつづっています。

プラグインを使わずウィジェットエリアを追加する~マテリアル編~

time 2015/06/30

いまやWordpressはプラグインのおかげでどんなカスタマイズも簡単におこなえます。
ウィジェットエリアを追加するのもプラグイン1つで簡単らくらくです。

が、プラグインばかりに頼っているとそのぶん負荷もかかってしまいますよね。

できるだけスマートに、プラグインを使わないようにカスタマイズしたいよなーなんて人。
ウィジェットエリアを追加するだけなら簡単な記述だけでできちゃいますよ!

sponsored link

ウィジェットエリアを追加してみよう

今回はこのサイトでも使用させてもらっている優秀な無料テーマ マテリアル を例に解説していきます。

他のテーマでもそこまで大きく変わるってことはないと思うので、この記事を参考にカスタマイズしてみてください。

カスタマイズにあたって大切な注意点が2つありますのでしっかり守って快適なカスタマイズライフをお願いします。

  • 中の記述を変更するので、万が一のことも考えてバックアップをしっかりとった上で自己責任でお願いします。
  • テーマのバージョンがアップされると上書きされてしまうので、子テーマを作ってそちらでカスタマイズするようにしましょう。

以上、とーっても重要ですよー!

ではさっそく、レッツカスタマイズ♪

記述を変更するフォルダーを探そう

今回はトップページにウィジェットエリアを追加したいと思います。

このカスタマイズで変更するフォルダーはfanction.phphome.phpの2箇所だけです。

テーマによってはhome.phpではなくindex.phpだったりしますが、とにかくトップページの表示に関係しているテンプレートを見つけられればそこに記述すればOKですよー。

fanction.phpに記述してウィジェットエリアを増やそう

マテリアルの場合、公式の子テーマにもfanction.phpがありますが、そちらには親テーマのCSSを読み込む旨の記述しかありません

なのでまずは、親テーマのfanction.phpを開きます。

開くとすぐに

/**** ウィジェット ****/
if (function_exists('register_sidebar')) {
	register_sidebar(array(
		'name' => 'サイドバー(広告上)',
		'id' => 'sidebar-1',
		'before_widget' => "<div class='box'>",
		'after_widget' => "</div>",
		'before_title' => "<h2 class='box-header main-color-font'>",
		'after_title' => '</h2>'
	));

こんな感じでウィジェットの記述がありますね。

これを子テーマのfanction.phpにコピペしてウィジェットエリアを追加しちゃいます。

/**** ウィジェット ****/
if (function_exists('register_sidebar')) {
	register_sidebar(array(
		'name' => 'ウィジェットの名前',
		'id' => 'ウィジェットのID',
		'before_widget' => "<div class='box'>",/* ウィジェットを囲む開始タグ */
		'after_widget' => "</div>",/* ウィジェットを囲む終了タグ */
		'before_title' => "<h2 class='box-header main-color-font'>",/* ウィジェットのタイトルを囲む開始タグ */
		'after_title' => '</h2>'/* ウィジェットのタイトルを囲む終了タグ */
	));

コピペしたら、ウィジェットの名前とウィジェットのIDを任意のものに変更しましょう。
ウィジェットの名前は、管理画面のウィジェットページでどれがどこのウィジェットかを見分けるための名前。
ウィジェットIDはカスタマイズで記述する際に呼び出す名前です。

また、下4つの囲むタグは、これから追加するウィジェットエリアで使用するCSSは既存のウィジェットエリアのものとは別にしたい場合のみ、任意の名前に変更しましょう。
新しいウィジェットエリアでも既存のCSSを使用する場合はコピペしたまま変更なしでOKです。

このfanction.phpに上記を追記すると、管理画面のウィジェットページに新しいウィジェットエリアが追加されています。

home.phpに記述してトップページに反映させよう

今のままではウィジェットエリアの編集はできますが、肝心なサイトのトップページにはまだ反映されていません。
それではせっかく追加しても意味がないので、トップページに反映させるための作業をしましょう。

子テーマにはhome.phpがないので、親テーマから丸々コピーして持ってきます。

home.phpを開くとこんな感じ。

<?php get_header() ?>
/* ヘッダーテンプレートを読み込みます */
<?php get_template_part("ad_728") ?>
/* 広告テンプレートを読み込みます */
<div class="box big-box">

<h2 class="box-header main-color-font"><span class="lsf">star </span>New post</h2>
/* トップページのNew postを表示します */
<?php get_template_part("loop") ?>
/* アーカイブページと同じ表示をするテンプレートを読み込みます */
</div><!-- .big-box -->

<?php get_template_part("cat_lists") ?>
/* カテゴリー別表示テンプレートを読み込みます */
<?php get_sidebar() ?>
/* サイドバーテンプレートを読み込みます */
<?php get_footer() ?>
/* フッターテンプレートを読み込みます */

そしてトップページのウィジェットを表示させたい部分に下記コードをコピペします。

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('表示させたいウィジェットID')) : ?>
<?php endif; ?>

上記の表示させたいウィジェットIDの部分には先ほど設定したIDを記述します。

これは、もし○○ってIDのウィジェットがあったらここに表示するんだよーって記述です。

今回は、New postのすぐ上にあたらしいウィジェットエリアを入れてみようと思うので、トップページのNew postを表示するための記述の上である、このハイライトの位置にコピペします。

<?php get_header() ?>
/* ヘッダーテンプレートを読み込みます */
<?php get_template_part("ad_728") ?>
/* 広告テンプレートを読み込みます */
<div class="box big-box">

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('表示させたいウィジェットID')) : ?>
<?php endif; ?>

<h2 class="box-header main-color-font"><span class="lsf">star </span>New post</h2>
/* トップページのNew postを表示します */
<?php get_template_part("loop") ?>
/* アーカイブページと同じ表示をするテンプレートを読み込みます */
</div><!-- .big-box -->

<?php get_template_part("cat_lists") ?>
/* カテゴリー別表示テンプレートを読み込みます */
<?php get_sidebar() ?>
/* サイドバーテンプレートを読み込みます */
<?php get_footer() ?>
/* フッターテンプレートを読み込みます */

プラグインを使わずにウィジェットエリアを追加する方法 まとめ

以上で追加終了です。

Wordpuressのカスタマイズは中をいじるから難しそうですし、実際難しいものが多いですが、このウィジェットエリアの追加に限っては、すでにある記述をコピペすればほぼ完成なので比較的簡単にカスタマイズできます。

同じ方法で、何箇所も追加することもできるので、どんどん追加して便利にしてみましょう。

また、このウィジェットエリアはトップページだけではなく、固定ページ(page.php)や投稿ページ(single.php)、アーカイブページ(archive.php)にも追加できちゃいますので興味のある方はお試しください。

sponsored link

down

コメントする




sponsored link

はぴまむの中の人

ゆいくり

ゆいくり

30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。 [詳細]