参考：『基礎からのWordPress』高橋のり
固定ページ機能で小規模サイトの作成
学習の準備
・新たにWordPressをインストールする
・データベースのテーブルの接頭語を変える
サンプルサイトの概要
1.サイトでは事業内容や会社案内、店舗紹介、製品（家具）の紹介をする
2.お問合わせフォームをつける
3.ブログをやりたい−更新型コンテンツ
4.簡単な「お知らせ」を告知したい−更新型コンテンツ
5.「新製品」が出たら更新したい−更新型コンテンツ
6.製品（家具）はお部屋のタイプ、家具の種類で検索できるようにしたい
・ブログではないWebサイトを作成する上では、サイトマップ（ページ階層の図）を作成することが大切
→ページのコンテンツの性格を考えながら、WordPressのどの投稿フォーマット（ブログの投稿・固定ページ・カスタム投稿）で作成するかを考える必要があるため
固定ページの作成
・親子関係を作ることができ、一般的なWebサイトを作成する上ではよく使う機能の1つ
・ナビゲーションに並べる固定ページ
1.事業内容
2.製品一覧
3.店舗紹介
4.会社案内
5.お問い合わせ
6.ブログ
7.サイトマップ
・「店舗紹介」「会社案内」など更新頻度が低いページ→固定ページ向き
・「会社案内」の中に「社長のあいさつ」という子ページ
固定ページを入力する
・サンプルページを削除し、固定ページを作る
・作成する前にパーマリンク設定を投稿名に変更する
・テキスト（これが上手くできないとな…）＋パーマリンク設定＋親の設定
・お問い合わせフォーム用のプラグイン 「Contact Form 7」のインストール
カスタムメニューで固定ページを整理する
・カスタムメニュー機能(管理画面で選べる・p.169あたり参照)を利用してナビゲーションを整理
・ヘッダー部：メインナビゲーション、サブナビゲーション
・フッター部：フッターナビゲーション、フッター左カラム、フッターセンターカラム、フッター右カラム
各PHPファイルへの記述
・メニューの場所の定義(functions.php)
add_theme_support( 'menus' ); register_nav_menu( 'header-navi', 'メインナビゲーション' ); register_nav_menu( 'header-sub-navi', 'サブナビゲーション' ); register_nav_menu( 'footer-navi', 'フッターナビゲーション' ); register_nav_menu( 'footer-left-column', 'フッター左カラム' ); register_nav_menu( 'footer-center-column', 'フッターセンターカラム' ); register_nav_menu( 'footer-right-column', 'フッター右カラム' );
・header.phpとfooter.phpにそれぞれ定義したメニューを表示するためのテンプレートタグを記述（p.170参照）
・h サブナビゲーション
`<nav id="sub-navi"
ナビゲーションのメニューを作る
・メニューを作成して(管理画面の外観のメニュー p.166参照)それぞれの場所に当てはめる
→名前：main-navi
→固定ページを選択
→場所を選択・メニューの並べ替え
その他のメニューも作成する
・同じ要領でサブナビゲーションやフッターのナビゲーションも作成
テーマの場所→メニュー名→設定するページ
サブナビゲーション→sub-navi→サイトマップ
フッターナビゲーション→footer-navi→サイトマップ
フッター左カラム→footer-left→事業内容（子に家具・インテリア・レンタル）
フッターセンターカラム→footer-center→製品一覧
フッター右カラム→footer-right→店舗紹介・会社案内（子にあいさつ）・お問い合わせ
ラベルにHTMLを使用する
・ナビゲーションのテキストは各メニュー項目の右端にある▼→ナビゲーションラベル
→HTMLタグをマークアップすることもできる
→今回のテーマではspan要素で囲んだ部分はサブタイトルのように表示される
固定ページのテンプレートを変更する
・page.phpとは別に固定ページ用のテンプレートファイルを作成する
・top.php（カスタムヘッダー・サイドバーのないレイアウト）
(下記：レイアウト用のdivなど省略し必要な部分のみ抜粋)
<?php /* Template Name : Top */ get_header(); ?>
<div class="wrapper" /* カスタムヘッダー画像を表示 */>
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header() -> height; ?>" width="<?php echo get_custom_header() -> width; ?>" alt="" />
</div>
<div id="container">
<?php if (have posts()) : while (have_posts()) : the_post(); the_content(); endwhile; ?>
<?php else: ?>
<h3>Not Found</h3>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
<div>
<?php get_footer(); ?>
→カスタムヘッダー(p.192)を出力している
→最後はget_sidebarはなくフッターのみ読み込む（シングルカラムのページができあがる）
→はじめのコメントの記述で、テンプレートファイルに個別の名前をつけ、固定ページのテンプレートとしてWordPressに認識させる（ここではTop）
⇛これで固定ページ編集画面から「ページ属性」→「テンプレート」→「Top」が選択可能
・デザインによって、2カラム用、3カラム用、シングルカラム用やフリーレイアウト用などさまざまなテンプレートを作成しておくと便利
固定ページをWebサイトのトップページにする
・top.phpのテンプレートを利用して、固定ページを作成（サイトのトップページ用）
表示設定の変更
・管理画面→設定→表示設定 → 固定ページをWebサイトのフロントページとして設定
トップページを作るもう1つの方法
・テーマ内にhome.phpというテンプレートファイルがある場合、WordPressはテンプレート階層によってindex.phpよりもhome.phpを優先する
・フロントページに指定した場合に、home.phpよりも固定ページの方が優先される
→どちらを使うか
−固定ページなら管理画面から編集可能
ブログのトップページを作成する
・Webのトップページを固定ページにしたため、ブログのトップページがなくなってしまった
→新たにブログを表示するためのページを作成する
・固定ページ機能を使って、コンテンツのない空のページを作成する
→カスタムメニューを利用して、メインナビゲーションに固定ページ「ブログ」を配置しておく
Webサイトに必要なその他のページ
・お知らせ系→カスタム投稿タイプ、製品ページなど→カスタムタクソノミー
コーポレートサイトのサイドバーを作成
・固定ページをサイドバーに「ローカルナビゲーション」として表示してみる
・ブログ用のサイドバーとは違ったコーポレートサイトなどでよく使われるサイドバー
条件分岐で親ページ／子ページを判断する
・親ページのサイドバー：親ページ自身のタイトルを表示し、小ページへのリンクを表示
・子ページのサイドバー：同じ階層のページ（兄弟）のリンクを表示
・ブログのサイドバーと違い、親と子を判断するための条件分岐などを記述して、それぞれでリンクを取得していく必要がある
・アイキャッチ画像も合わせて表示
・sidebar.phpの骨組み
`
タイトル部分を表示する
・まずはサイドバーの大見出しを表示してみる
・このテンプレートでは以下のようなマークアップ
`
ページタイトル
サブタイトル（カスタムフィールド）
` →親ページではページタイトル、子ページでは「親ページのタイトル」 →h3ではサブタイトルとしてカスタムフィールドの値（p.254）を表示している →それぞれの固定ページの編集画面でカスタムフィールドの名前を「sub-title」、値には好きなサブタイトルを入力してみる（子・トップ・ブログには必要なし）・sidebar.phpのコード（抜粋）
<div id="sidebar">
<aside id="local-navi">
<hgroup>
<?php if (is_page) : ?>
<?php if ($post -> post_parent == 0) : ?>
<h2><?php single_post_title(); ?></h2>
<?php if (get_post_meta($post -> ID, 'sub-title')): ?>
<h3><?php echo get_post_meta($post -> ID, 'sub-title', true); ?></h3>
<?php else: ?>
<h3>Subtitle</h3>
<?php endif; ?>
<?php else: ?>
<h2><?php echo get_the_title($post -> post_parent); ?></h2>
<?php if (get_post_meta($post -> post_parent, 'sub-title' )) : ?>
<h3><?php echo get_post_meta($ post -> post_parent, 'sub-title', true); ?></h3>
<?php else: ?>
<h3>Subtitle</h3>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
</hgroup>
</aside>
</div>
親ページの場合
・single_post_title('prefix',display)：ページタイトルを表示／取得する 【ループ内】
→prefix:タイトルの前に入れる文字列 display:true（デフォルト）で表示、falseで取得
→ex) single_post_title('-')とすれば、「-タイトル」と表示される
・カスタムフィールドの値を取得して表示
→get_post_metaでsub-titleというフィールドの値を取得し、echoで表示（事前に条件分岐でsub-titleフィールドの有無を確認）
子ページの場合
・親ページのタイトルを表示する
→タイトルはテンプレートタグget_the_titleのパラメータにページのIDを渡すだけで取得できる
→親ページのIDは＄post -> post_parentで取得できる
→カスタムフィールドのget_post_metaにもパラメータのIDに親ページのIDを指定する
アイキャッチ画像部分を表示する
・アイキャッチ画像は固定ページの編集画面で設定するだけで表示される
・アイキャッチ画像を表示する部分のコード
<div id="sidebar">
<aside id="local navi">
<hgroup>
<p class="eyecatch">
<?php if (has_post_thumbnail($post -> ID) : echo get_the_post_thumbnail($post -> ID, array(214,132) ); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri() ?>/images/no-image.jpg" width="214" height="132" alt="">
<?php endif; ?>
</p>
</aside>
</div>
・has_post_thumbnailでアイキャッチ画像が設定済みかどうかの条件分岐を記述
・ループ外なのでthe_post_thumbnailではなくget_the_post_thumbnailとしていることに注意
・アイキャッチ画像が設定されていないときにno-image.jpg
リンク部分を表示する
親ページの場合
・まず親ページのタイトルを表示して、その下に子ページをリストで表示していく
・目指すHTML
`
・大枠のコード
if (is_page()) : if ($post -> post_parent == 0) : $args = array ('post_type' => 'page', 'post_parent' => $post -> ID); 'order' => 'ASC', 'orderby' => 'menu_order', $child_posts = new WP_Query( $args ); if( $child_posts -> have_posts() ) : while ($child_posts -> have_posts()) : $child_posts -> the_posts(); 子ページを表示するサブループ endwhile; endif; wp_reset_postdata(); endif; endif;
・まず固定ページの場合と親ページの場合という大枠を条件分岐で作り出す
・子ページを作り出すためのサブループを作成
→サブループに渡すパラメータを配列に記述
→post_typeにpageを指定することで固定ページのみ取得
→post_parentに＄post->IDを指定すると「現在表示されている(＄post->ID)ページを親に持つページ」を取得できる
→作ったパラメータを受け取ってWP_Queryでサブループを作っていく（sidebar.php抜粋）
<?php if (is_page()) : ?>
<?php if ($post -> post_parent == 0 ) : $args = array('post_type' => 'page', 'post_parent' => $post -> ID, , 'order' => 'ASC', 'orderby' => 'menu_order'); $child_posts = new WP_Query( $args ); ?>
<?php if ($child_posts -> have_posts()) : ?>
<nav class="shidebar-navi">
<ul>
<li class="current"><?php the_title(); ?>
<ul class="child">
<?php while($child_posts -> have_posts()) : $child_posts -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</li>
</ul>
</nav>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php endif; ?>
・タイトルやリンクの取得はthe_titleやthe_parmalinkを使う
・ループ内で使えるテンプレートタグを使用する
・リストのマークアップに注意
→親ページのタイトルを表示するコードはループ外に記述
子ページの場合
・こちらもサブループを作成して表示
・「現在表示されているページ」はリンクではなくそのままテキストを表示する
・currentというクラスをつけてCSSでスタイリングしやすくする
<?php if(is_page()) : ?>
<?php if($post -> post_parent == 0) : ?>
親ページのときの処理
<?php else : $args = array( 'post_type' => 'page', 'post_parent' => $post -> post_parent ); 'order' => 'ASC', 'orderby' => 'menu_order', $current_ID = $post -> ID; $brother_posts = new WP_Query( $args ); ?>
<?php if ($brother_posts -> have_posts()) : ?>
<nav class="sidebar_navi">
<ul>
<?php while($brother_posts -> have_posts()) : $brother_posts -> the_post(); ?>
<?php if($current_ID == $post -> ID): ?>
<li class="current"><span><?php the_title(); ?></span></li>
<?php else: ?>
<li class="brother"><a href="<?php the_permalink()?>"><?php the_title(); ?></a></li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php endif; ?>
・if (＄post -> post_parent == 0)で始まっている条件分岐をelse:でつないでいく
・親ページの時と同じように、サブループを作って兄弟ページを表示していく
→'post_parent' => ＄post -> post_parentとすれば、現在表示されているページ（子ページ）の親ページを親に持つページ、つまり同じ階層の兄弟ページを取得できる
・現在表示されているページのIDを一時的に格納
・＄borother_posts = new WP_Query( $args )からサブループで兄弟ページを表示していくコード
→何をwhile文の中に書いて何を外に書くかをきちんと理解する
・ページのタイトルを表示するコードについては、if(＄current_ID==＄post->ID):という条件分岐によって、それぞれコードが異なる（上で取得した現在表示されているページを区別し、タイトルだけ表示する）
固定ページ以外の表示を作成する
その他のページのタイトル
<hgroup>
省略
<?php elseif (is_search() ) : ?>
<h2>検索結果</h2>
<h3>SEARCH</h3>
<?php elseif (is_404() ) : ?>
<h2>404</h2>
<h3>NOT FOUND</h3>
<?php elseif (get_post_type() : ?>
<h2>ブログ</h2>
<h3>BLOG</h3>
<?php elseif (is_page()) : ?>>
...
<?php endif; ?>
</hgroup>
・is_search,is_404,is_tag,is_archiveなど
・get_post_type() == 'post'はブログの記事（post）かを判断する
→個別記事でもカテゴリー表示のようなアーカイブページでもpost_typeがpostの場合に有効な条件分岐
→is_categoryやis_tag、is_singleなど細かく分ける必要がないときには便利
その他のページのアイキャッチ画像
<p class="eyecatch">
<?php if (get_post_type() == 'post' ) : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/blog.jpg" width="214" height="132" alt="">
<?php elseif (is_search() ) : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/search.jpg" width="214" height="132" alt="">
<?php elseif (is_404() ) : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/404.jpg" width="214" height="132" alt="">
<?php endif; ?>
</p>
・ブログの各ページ
→カテゴリーページは編集画面が存在せずアイキャッチ画像を設定することができない
→blog.jpgという画像を表示することにする
・検索結果、404も同様
ブログのローカルナビゲーション
・ブログではカテゴリーを表示するようにしている
省略
<?php elseif (get_post_type() == 'post' ) : ?>
<nav class="local-navi">
<ul class="blog-category">
<?php wp_list_categories('title_li='); ?>
</ul>
</nav>
<?php elseif(is_page()) : ?>
省略
・カテゴリーの表示自体は、テンプレートタグwp_list_categoriesで表示