前回の記事「テンプレートファイルの分割」の続きです。
トップページと各サブページをCSSやPHPの条件分岐で、ページごとの表示をカスタマイズします。
Contents
トップページのカスタマイズ
トップページのヘッダーはstyle.cssファイルでスタイルをカスタマイズ、タイトルバナーとパンくずリストをheader.phpファイルで非表示にカスタマイズします。
メインエリアはトップページ用のテンプレートファイルfront-page.phpを追加して編集します。
トップページのスタイルをstyle.cssに追加
デザインに拠りますが、このサンプルテーマの場合、<header>〜</header>のカスタマイズはstyle.cssファイルに以下の記述を追加するだけでOKです。
▼style.css
コードを表示
/*------------------------------*/
/* (page) home */
/*------------------------------*/
.page-home #siteHeader { background: url(images/home/homeHeaderBG.jpg) 0 0 no-repeat; margin-bottom: 20px; padding-top: 140px; height: 260px; }
.page-home #siteHeader .siteTitle { text-align: center; background-color: rgba(0,0,0,0.5); padding-top: 5px; }
.page-home #siteHeader .siteTitle a { margin: 0 auto; }
.page-home #siteHeader .siteDescription { font-size: 100%; color: #fff; position: relative; top: auto; left: auto; text-align: center;
background-color: rgba(0,0,0,0.5); margin-bottom: 90px; height: 25px; }
.page-home #siteNavigation { margin: 0; background-color: rgba(0,0,0,0.5); padding-top: 10px; height: 40px; overflow: hidden; text-align: center; }
.page-home #siteNavigation ul { display: inline-block; }
.page-home #siteHeader .contactBtn a { display: block; width: 120px; height: 30px; background: url(images/home/headerContactBtn.png) 0 0 no-repeat; text-indent: -9999px; }header.phpファイルのカスタマイズ
トップページにタイトルバナーとパンくずリストは必要ないので、is_front_page()でトップページを判別して出力を除外します。
▼header.php
<?php if( !is_front_page() ): ?>
<?php /* 404 */ if( !is_404() ): ?>
<h2 id="pageTitle" class="<?php echo get_post($post)->post_name; ?><?php if($post->post_parent) echo ' '.get_post($post->post_parent)->post_name; ?>"><?php echo get_the_title(); ?></h2>
<?php /* 404 */ endif; ?>
<p id="breadcrumb"><?php if(function_exists('bcn_display')) bcn_display(); ?></p>
<?php endif; ?>テンプレートタグ is_front_page()
現在のページが固定ページで且つフロントページに設定されているかを判定します。
公式マニュアル
front-page.phpの追加
トップページのテンプレートファイルfront-page.phpをテーマディレクトリに追加します。
page.phpファイルを複製してfront-page.phpにリネームして、以下の内容に書き換えます。
▼front-page.php
コードを表示
<?php get_header(); ?> <main id="siteMain" role="main"> <section id="newsContent"> <h2 class="title">新着情報</h2> <p class="linkBtn"><a href="<?php echo home_url(); ?>/news/">新着情報一覧</a></p> <ul> <li><a href="<?php echo home_url(); ?>/news/"><span class="postMeta"><span class="category cat1">お知らせ</span>2016.00.00(月)</span><br> <span class="postTitle">ダミーテキストです ここには新着情報のタイトルが入ります</a></li> <li><a href="<?php echo home_url(); ?>/news/"><span class="postMeta"><span class="category cat2">プレスリリース</span>2016.00.00(月)</span><br> <span class="postTitle">ダミーテキストです ここには新着情報のタイトルが入ります</a></li> <li><a href="<?php echo home_url(); ?>/news/"><span class="postMeta"><span class="category cat3">イベント情報</span>2016.00.00(月)</span><br> <span class="postTitle">ダミーテキストです ここには新着情報のタイトルが入ります</a></li> </ul> </section> <section id="worksContent"> <h2 class="title">ピックアップ</h2> <article class="post"> <a href="<?php echo home_url(); ?>/works/" class="left"><img src="<?php echo home_url(); ?>/images/works/home_dummy1.jpg" alt=""></a> <h2 class="postTitle"><a href="<?php echo home_url(); ?>/works/">ダミーテキストです ここには制作実績のタイトルが入ります</a></h2> <p class="postMeta">2016.00.00(月)</p> <p class="postContent">ダミーテキストです。ここには制作実績の記事本文が入ります。ダミーテキスト...<a href="<?php echo home_url(); ?>/works/" class="more">>> 続きを読む</a></p> </article> <article class="post"> <a href="<?php echo home_url(); ?>/works/" class="left"><img src="<?php echo home_url(); ?>/images/works/home_dummy2.jpg" alt=""></a> <h2 class="postTitle"><a href="<?php echo home_url(); ?>/works/">ダミーテキストです ここには制作実績のタイトルが入ります</a></h2> <p class="postMeta">2016.00.00(月)</p> <p class="postContent">ダミーテキストです。ここには制作実績の記事本文が入ります。ダミーテキスト...<a href="<?php echo home_url(); ?>/works/" class="more">>> 続きを読む</a></p> </article> </section> </main> <?php get_sidebar(); ?> <?php get_footer(); ?>
「新着情報」と「ピックアップ」は後ほどプログラム化しますので、とりあえずコーディングのみしておきます。
サブページのカスタマイズ
サブページは下図のようにコンテンツエリアのタイトルバナーとサイドバーがページごとに切り替わるようにカスタマイズします。
CSSでタイトルバナーの表示切り替え
タイトルバナーの画像はバナーエリアの<h2>タグに各ページのスラッグをclass属性に設定しましたので、これをセレクタにしてCSSでバナー画像を指定します。
▼style.css
コードを表示
/* pageTitle */
#pageTitle { height: 100px; padding: 0; background: url(images/common/title_news.png) 0 0 no-repeat; text-indent: -9999px; margin-bottom: 10px; }
#pageTitle.news { background-image: url(images/common/title_news.png); }
#pageTitle.about { background-image: url(images/common/title_about.png); }
#pageTitle.service { background-image: url(images/common/title_service.png); }
#pageTitle.works { background-image: url(images/common/title_works.png); }
#pageTitle.blog { background-image: url(images/common/title_blog.png); }
#pageTitle.contact { background-image: url(images/common/title_contact.png); height: 50px; }
#pageTitle.privacy { background-image: url(images/common/title_privacy.png); height: 50px; }
#pageTitle.sitemap { background-image: url(images/common/title_sitemap.png); height: 50px; }
サイドバーの表示切り替え
サイドバーの内容はis_page()で条件分岐して、「新着情報」「企業情報」「制作実績」（および「企業情報」のサブページ）でそれぞれ次のようにメニュー表示を切り替えます。その他のページはバナーエリアのみ表示します。
「新着情報」と「制作実績」のメニューはこの後の手順でプログラム処理させますので、この時点では簡単な表示だけ記述しておきます。
▼sidebar.php
コードを表示
<aside id="sidebar" role="complementary">
<?php if(is_page('news')): ?>
<section class="sideMenu">
<h2 class="secTitle"><?php the_title(); ?></h2>
<ul>
<li><a href="<?php echo home_url(); ?>/news/">お知らせ</a></li>
<li><a href="<?php echo home_url(); ?>/news/">プレスリリース</a></li>
<li><a href="<?php echo home_url(); ?>/news/">イベント情報</a></li>
</ul>
</section>
<?php elseif(is_page('about') or (get_post($post->post_parent)->post_name == 'about')): ?>
<section class="sideMenu">
<h2 class="secTitle"><?php the_title(); ?></h2>
<ul>
<li><a href="<?php echo home_url(); ?>/about/">ごあいさつ・経営理念</a></li>
<li><a href="<?php echo home_url(); ?>/about/profile/">会社概要</a></li>
<li><a href="<?php echo home_url(); ?>/about/history/">沿革</a></li>
<li><a href="<?php echo home_url(); ?>/about/access/">アクセス</a></li>
</ul>
</section>
<?php elseif(is_page('works')): ?>
<section class="sideMenu">
<h2 class="secTitle"><?php the_title(); ?></h2>
<ul>
<li><a href="<?php echo home_url(); ?>/works/">椅子</a></li>
<li><a href="<?php echo home_url(); ?>/works/">テーブル</a></li>
<li><a href="<?php echo home_url(); ?>/works/">デスク</a></li>
<li><a href="<?php echo home_url(); ?>/works/">キャビネット</a></li>
<li><a href="<?php echo home_url(); ?>/works/">雑貨</a></li>
</ul>
</section>
<?php endif; ?>
<section class="sideBnr">
<h2 class="secTitle">バナーエリア</h2>
<ul>
<li><a href="<?php echo home_url(); ?>/dummy/" title="banner1"><img src="<?php echo get_template_directory_uri(); ?>/images/banner/banner1.png" alt=""></a></li>
<li><a href="<?php echo home_url(); ?>/dummy/" title="banner2"><img src="<?php echo get_template_directory_uri(); ?>/images/banner/banner2.png" alt=""></a></li>
<li><a href="<?php echo home_url(); ?>/dummy/" title="banner2"><img src="<?php echo get_template_directory_uri(); ?>/images/banner/banner3.png" alt=""></a></li>
</ul>
</section>
</aside>
テンプレートタグ is_page($name)
現在のページが固定ページか否かを判定します。
パラメータに記事ID、タイトル、スラッグのいずれか、または配列（array(【ID】,【タイトル】,【スラッグ】)）を設定することで、特定の固定ページを判別します。
公式マニュアル
以上でサイトのナビゲーション周りのコーディングとテンプレート化は概ね完了です。
【次の手順→】 固定ページのメインエリア編集
【←前の手順】 テンプレートファイルの分割
おすすめ記事
PR
