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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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