1. ゼロからつくるWordPressテーマ#6
サイドバーの設置⽅方法と仕組みを知る
http://hitsuji.me

2. ⽬目次
1. 第6回の前置き
2. 今回の編集内容とファイル⼀一覧
3. まずはサイドバーを設置してみよう
4. サイドバーをカスタマイズする
1. functions.phpとは
2. サイドバーのコールバック関数解説
3. サイドバー設置の仕上げ＆動作確認
5. まとめ
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 2

3. 1. 第6回の前置き 本連載とともに
作って⾏行行きます!
〜～第５回 簡素なテスト⽤用
第６回〜～ 具体的な公開サイト
サイトで実験 http://design.hitsuji.me
の
テーマ作成を通じて機能拡張
第５回のスクリーンショット
トップページのイメージ図
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 3

4. 2-‐‑‒1. 今回の編集内容
編集前のテーマ
テーマファイル置き場
http://wordpress.hitsuji.me/wp-­‐
content/uploads/
iPhoneDesign_1.0.0.zip
編集後のテーマ
サイドバーを設置!
テーマファイル置き場
http://wordpress.hitsuji.me/wp-­‐
content/uploads/
iPhoneDesign_1.0.2.zip
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 4

5. 2-‐‑‒2. 編集前のテンプレートファイル
ファイル名 役割や特徴 ファイルの種類
index.php Webページ⽣生成に使⽤用する基本となる テンプレート
ファイル
header.php htmlヘッダーや画⾯面上部に表⽰示するもの パーツテンプレート
を部品化したもの。
content.php 記事出⼒力力部分を部品化したもの。ループ
内で使⽤用する。
footer.php コピーライト表⽰示など、Webページフッ
ター部分を部品化したもの。
style.css デザインを指定する スタイルシート
screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示 テーマのサムネイル画像
される画像
/img テーマで⽤用いる画像ファイルが格納され
ている
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 5

6. 2-‐‑‒3. 第6回で作成するもの…functions.phpとsidebar.php
ファイル名 役割や特徴 ファイルの種類
新規 functions.php テーマで使⽤用する機能を設定するファイ テーマ関数ファイル
ル。
新規 sidebar.php サイドバーを部品化したもの。 パーツテンプレート
index.php Webページ⽣生成に使⽤用する基本となる テンプレート
修正
ファイル
header.php htmlヘッダーや画⾯面上部に表⽰示するもの パーツテンプレート
を部品化したもの。
content.php 記事出⼒力力部分を部品化したもの。ループ
内で使⽤用する。
footer.php コピーライト表⽰示など、Webページフッ
ター部分を部品化したもの。
修正 style.css デザインを指定する スタイルシート
screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示 テーマのサムネイル画像
される画像
/img テーマで⽤用いる画像ファイルが格納され
ている
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 6

7. 3. まずはサイドバーを設置してみよう
1. 設置⼿手順
2. functions.phpの編集
3. sidebar.phpの編集
4. index.phpの編集
5. Widget追加
6. 動作確認
7. サイドバーの仕組み
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 7

8. 3-‐‑‒1. サイドバーの設置⼿手順
1. functions.phpとsidebar.phpを新規作成して、テーマ
フォルダに追加する
2. functions.phpにサイドバー設定関数を書く
3. sidebar.phpにサイドバー出⼒力力関数を書く
4. テンプレートファイル(index.php)にサイドバーのイン
クルードタグを書く
5. ダッシュボード>外観>ウィジェットの画⾯面を開き、
「最新の投稿」をサイドバー2に追加
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 8

9. 3-‐‑‒2. functions.phpの編集
functions.php
<?php
register_̲sidebars(2);
register_sidebars()
n WordPress関数である
n サイドバー（Widget）を使えるようになる
n 括弧内の数字で、設置するサイドバーの数を設定できる
※括弧内の記述⽅方法の詳細は、後述します
【参考】
サイドバーを1つだけ追加する場合は、下記関数でもOK
register_̲sidebar();
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 9

10. 3-‐‑‒3. sidebar.phpの編集
sidebar.php
<div id="sidebar">
<?php dynamic_̲sidebar(1); ?>
<?php dynamic_̲sidebar(2); ?>
</div>
dynamic_sidebar()
n WordPress関数である
n 括弧内の数字で⽰示す番号のサイドバーが、リスト形式で出⼒力力される
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 10

11. 3-‐‑‒4. index.phpを編集する
index.php
<?php
get_header();
?>
<!-­‐-­‐
Contentsはここから -­‐-­‐>
<div
id="contents">
<?php
if(have_posts()):
while(have_posts()):
the_post();
?>
<?php
get_template_part('content');
?>
<?php
endwhile;
endif;
?>
</div>
<!-­‐-­‐contents-­‐-­‐>
<div
id="sidebar">ここにサイドバーを設置する</div>
<?php
get_sidebar();
?>
“sidebar.php”のインクルードタグ
<?php
get_footer();
?>
サイドバーのインクルードタグ get_̲sidebar() を挿⼊入する。
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 11

12. 3-‐‑‒5. Widgetを追加する
①ドラッグ&ドロップ
②Widgetのタイトルと
表⽰示件数を設定
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 12

13. 3-‐‑‒6. 動作確認（サイトを確認）
新着記事リストが追加された！
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 13

14. 3-‐‑‒7. サイドバーの仕組み（概要）
functions.php（関数ファイル）
<?php
register_̲sidebars(2);
サイドバーの機能ON
index.phpなど（テンプレート） sidebar.php（テンプレートパーツ）
・・・ <div id="sidebar">
<?php get_̲sidebar(); ?> <?php dynamic_̲sidebar(1); ?>
読み込み
・・・ <?php dynamic_̲sidebar(2); ?>
</div>
テンプレートパーツ サイドバーのコード出⼒力力
読み込み＆サイト出⼒力力
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 14

15. 3-‐‑‒7. サイドバーの仕組み（詳細）
functions.php（関数ファイル） register_sidebars(2)の役割
WordPressに、このテーマでは
<?php ”サイドバーを2個利利⽤用するよ”と知らせる。
register_̲sidebars(2);
n ダッシュボードのウィジェット設定画⾯面を
利利⽤用できるようになる。
n dynamic_sidebar()関数で、上記で設定したサ
イドバーを出⼒力力できるようになる。
index.phpなど（テンプレート） sidebar.php（テンプレートパーツ）
・・・ <div id="sidebar">
<?php get_̲sidebar(); ?> <?php dynamic_̲sidebar(1); ?>
読み込み
・・・ <?php dynamic_̲sidebar(2); ?>
</div>
get_sidebar()の役割
dynamic_sidebar()の役割
テンプレートパーツsidebar.phpを
括弧内の数字に対応するサイドバーの
読み込む。インクルードタグの１つ。
htmlコードを出⼒力力する。
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 15

16. 4-‐‑‒1. functions.phpとは
WordPress.orgより抜粋
テーマ関数ファイル
テーマでは、オプションとして、テーマのサブディレクトリ内に functions.php
というファイル名で「関数
ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使ってい
るテーマ内に存在していれば、⾃自動的に WordPress
の初期化中に読み込まれます (管理理パネルとサイト表⽰示
の両⽅方で)。
このファイルの使⽤用例例:
テーマ内の複数のテンプレートファイルで使う関数の定義
⾊色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理理パネルの設置
WordPress
のデフォルトテーマには、関数と管理理パネルを定義する functions.php
ファイルが⼊入っているので
⾒見見本にするといいでしょう。functions.php
は基本的にプラグインのように動作するので、このファイルでで
きることの情報は、プラグインの作成リストを⾒見見るのが⼀一番です。
⼤大雑把に⾔言えば、
1)
テーマで使⽤用したい機能（サイドバー、カスタムメニュー、アイキャッチ画像…
etc）について、「この機能を使いますよ〜～」とWordPressに伝えるためのコードを
書いておくファイル
2)
functions.phpに書いたものは、WordPress実⾏行行時に勝⼿手に読み込まれる
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 16

17. 4-‐‑‒1. 処理理フローでのfunctions.phpの位置づけ
functions.php
WordPress初期化
テーマで利利⽤用する機能を
(functions.phpを読み込み) 追加,
定義,
設定する関数が記述
index.phpなど テンプレートフォルダ
テンプレート選択
(テンプレート階層に従って選ばれる)
読み込まれたfunctions.phpに記述された
サイト⽣生成
設定内容を反映した形で、
選択されたテンプレートを解釈して
htmlコードが⽣生成させる。
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 17

18. 4-‐‑‒2. サイドバーのコールバック関数解説
テスト⽤用コードを書きながら、
動作や仕組みを確認していきます
1. functions.phpを編集
2. テキストウィジェットを設置
3. サイトを表⽰示
4. サイトのソースを確認
5. デフォルト設定で使う
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 18

19. 4-‐‑‒2-‐‑‒1. functions.phpを編集
register_sidebars()関数は、括弧内の記述内容に従って
サイドバー出⼒力力時の挙動を変えることができる。
functions.php
<?php サイドバーの個数
register_̲sidebars(2, array(
ʻ‘nameʼ’=>ʼ’サイドバー %d', サイドバー名 %d
は連番が⼊入る
'before_̲widget'=>'<li>', ウィジェット前に⼊入れるタグ
'after_̲widget'=>'</li>', ウィジェット後に⼊入れるタグ
'before_̲title' => '<h2>', タイトル前に⼊入れるタグ
'after_̲title' => '</h2>') タイトル後に⼊入れるタグ
);
※array(…)は、連想配列列。
設定項⽬目名
=>
設定値
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 19

20. 4-‐‑‒2-‐‑‒2. テキストウィジェットを設置
仕組みを確認するために、
最もシンプルなWidgetである「テキスト」を下図のように設置する。
サイドバー名
functions.phpの
設定内容が
反映されている
※「最近の投稿」は、停⽌止置き場に移動しておく
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 20

21. 4-‐‑‒2-‐‑‒3. サイトを表⽰示
テキストウィジェットが表⽰示された
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 21

22. 4-‐‑‒2-‐‑‒4. サイトのソースを確認
functions.phpで設定した内容が、サイトのソースに反映されている
サイトのソース functions.php
<div id="sidebar">
<li>
<?php
<h2>テキストタイトル１</h2> register_̲sidebars(2, array(
<div class="textwidget">テキスト本⽂文１</div>
</li> ʻ‘nameʼ’=>ʼ’サイドバー %d',
<li> 'before_̲widget'=>'<li>',
<h2>テキストタイトル２</h2>
<div class="textwidget">テキスト本⽂文２</div> 'after_̲widget'=>'</li>',
</li>
'before_̲title' => '<h2>',
<li>
<h2>テキストタイトル３</h2> 'after_̲title' => '</h2>')
<div class="textwidget">テキスト本⽂文３</div>
</li> );
</div>
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 22

23. 4-‐‑‒2-‐‑‒5. デフォルト設定で使う
functions.php
<?php
register_̲sidebars(2);
値設定を省省略略すると、
WordPress内部で決まっている
デフォルト値に従って出⼒力力される
サイトのソース
<div
id="sidebar">
<li
id="text-­‐2"
class="widget
widget_text">
<h2
class="widgettitle">テキストタイトル１</h2>
<div
class="textwidget">テキスト本⽂文１</div>
</li>
<li
id="text-­‐3"
class="widget
widget_text">
<h2
class="widgettitle">テキストタイトル２</h2>
<div
class="textwidget">テキスト本⽂文２</div>
</li>
<li
id="text-­‐4"
class="widget
widget_text">
<h2
class="widgettitle">テキストタイトル３</h2>
<div
class="textwidget">テキスト本⽂文３</div>
</li>
</div>
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 23

24. 4-‐‑‒3. サイドバー設置の仕上げ
ここまでの結果を踏まえて、コードを修正する
functions.php style.css
<?php ・・・
register_̲sidebars(2, array( #sidebar h2 {
ʻ‘nameʼ’=>ʼ’サイドバー %d', color: #8bb0cd;
border-‐‑‒bottom: solid 2px #8bb0cd;
ʻ‘before_̲widgetʼ’=>ʻ‘<li id=“%1$s” class=“widget %2$s”>ʼ’,
margin: 3px 0;
'after_̲widget'=>'</li>', }
'before_̲title' => '<h2>', #sidebar ul {
'after_̲title' => '</h2>ʼ’ )); padding-‐‑‒left: 0; “最近の投稿” の
margin-‐‑‒left: 0;
} ウィジェット名
#sidebar li {
list-‐‑‒style-‐‑‒type: none;
ウィジェット名を
}
#sidebar li.widget_̲recent_̲entries li {
出⼒力力するように設定
list-‐‑‒style-‐‑‒type: none;
line-‐‑‒height: 2.3em;
sidebar.php }
#sidebar li.widget_̲recent_̲entries li a {
display: block;
<div id="sidebar"> border-‐‑‒bottom: dotted 1px #888;
<ul> <ul>〜～</ul>で
text-‐‑‒decoration: none;
<?php dynamic_̲sidebar(2); ?> 囲む color:#aaa;
</ul> padding-‐‑‒left: 3px;
</div> }
#sidebar li.widget_̲recent_̲entries li a:hover {
background-‐‑‒color: #dbc993;
color: #fff;
※サイドバー1は、別の回で利利⽤用します }
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 24

25. 4-‐‑‒3. サイトの動作確認
CSSで指定した通りにサイドバー出⼒力力できた！
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 25

26. 5. 第6回まとめ＆次回予告
n 今回の作成物まとめ
ファイル名 ファイルの種類 サイドバー設置で
関数の働き
使⽤用する関数
functions.php テーマ関数ファイル register_sidebars()
サイドバー機能ON
or
register_sidebar() &
設定
sidebar.php テンプレートパーツ dynamic_sidebar() サイドバー出⼒力力
index.php テンプレート get_sidebar() sidebar.phpを読み込み
n 次回予告
l カスタムメニューを追加していきます
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 26

27. Appendix
n WordPress公式ページの関連記事
l http://wpdocs.sourceforge.jp/関数リファレンス/register_̲sidebars
l http://wpdocs.sourceforge.jp/関数リファレンス/register_̲sidebar
l http://wpdocs.sourceforge.jp/関数リファレンス/dynamic_̲sidebar
l http://wpdocs.sourceforge.jp/インクルードタグ
l http://wpdocs.sourceforge.jp/テーマの作成#Theme_̲Functions_̲File
n 編集前後のテンプレート DL url
l 編集前
• http://wordpress.hitsuji.me/wp-content/uploads/iPhoneDesign_1.0.0.zip
l 編集後
• http://wordpress.hitsuji.me/wp-content/uploads/iPhoneDesign_1.0.2.zip
ゼロからつくる WordPress テーマ #6 http://hitsuji.me 27