トップページとサブページのカスタマイズ

前回の記事「テンプレートファイルの分割」の続きです。
トップページと各サブページをCSSやPHPの条件分岐で、ページごとの表示をカスタマイズします。

トップページのカスタマイズ

トップページのヘッダーは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">&gt;&gt; 続きを読む</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">&gt;&gt; 続きを読む</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

DO WP 管理人