WordPressの固定ページを使って、簡単にカッコいい特集ページを作る方法をご紹介します。
今回は、ページの上部にヘッダーも設け、特定タグ・カテゴリーの記事だけを特集ページ内で一覧で表示させる方法です。一度ページを設定すれば、あとは特定のタグやカテゴリーの記事を追加する度に、特集ページにも一覧として追加されます。
例えば、このようなイメージです。固定ページの上部にヘッダーが表示され、その下には特定のタグ or カテゴリーの記事一覧が表示されます。
では、手順を解説していきましょう。
固定ページを使ってテンプレートを作る
WordPressの固定ページは、色んなテンプレートを用意することができるので、まずは特集ページ用のテンプレートを作成します。
メモ帳やmiなどで、「special_postlist.php」と名づけたファイルをご用意ください（ファイル名は何でもok）。次に「header.php」と「footer.php」を読み込む記述とテンプレート名を書きます。
<?php
/*
Template Name: 特別ページ
*/
?>
<?php get_header(); ?>
<?php get_footer(); ?>次に特定タグ（カテゴリー）を読み込みそれを一覧にするコードを書きます。以下のコードのコピペでそのまま使えます。
タグ特別ページ一覧
<?php
/*
Template Name: タグ特別ページ一覧
*/
?>
<?php get_header(); ?>
<!----ここから----->
<main id="specialwrap">
<div class="specialposts" clearfix">
<ul class="post_list clearfix">
<?php
query_posts('tag=●●&showposts=●●&orderby=date');
?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<li>
<h4 class="post_title"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h4>
<div class="post_img"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="post_excerpt"><?php the_excerpt(); ?></div>
</li><!-- END .post_list -->
<?php endwhile ?>
<?php else: ?>
<li class="no_post"><p>記事がありません</p></li>
<?php endif; ?>
</ul>
</div><!-- END .specialposts -->
</div><!-- END main#specialwrap -->
<!-----ここまで---->
<?php get_footer(); ?>カテゴリー特別ページ一覧
<?php
/*
Template Name: カテゴリー特別ページ一覧
*/
?>
<?php get_header();?>
<!----ここから----->
<main id="specialwrap">
<div class="specialposts" clearfix">
<ul class="post_list clearfix">
<?php
query_posts('cat=●●&showposts=●●&orderby=date');
?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<li>
<h4 class="post_title"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h4>
<div class="post_img"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="post_excerpt"><?php the_excerpt(); ?></div>
</li><!-- END .post_list -->
<?php endwhile ?>
<?php else: ?>
<li class="no_post"><p>記事がありません</p></li>
<?php endif; ?>
</ul>
</div><!-- END .specialposts -->
</div><!-- END main#specialwrap -->
<!-----ここまで---->
<?php get_footer(); ?>tag=●●やcat=●●には、管理画面＞投稿＞タグ（カテゴリー）でIDを調べて挿入します（調べ方はこちら）。
showposts=●●には1ページに表示したい記事数を入力してください。
そして、保存したspecial_postlist.phpをFTPやファイルマネージャーから、テーマファイルにアップロード。
これで作成した固定ページテンプレートがページ属性で選択できるようになります。
その際の固定ページのタイトルや記事は空白で構いません。入れても先ほどのコードでは出力されないようになっていますので^^公開すれば記事一覧ページの出来上がりです。
ランディングページの作り方
上記の要領で固定ページを使えば各ページごとにレイアウトを変えることができますので、たとえば1カラムのレイアウトがないテーマでもランディングページのような1カラムのレイアウトを作ることが可能となります。
「header.php」をランディングページ専用に「header-special.php」と名付け、作成してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title> 特別ページ</title>
</head>
<body>
<!-- BEGIN header -->
<header id="header">
<div id="headerinner">
<div class="lptitle">特別ページ</div>
<div class="specialnav">
<div class="mailmagazine">ダウンロード</div>
</div>
</div>
</div>
</header><!-- END header -->なぜ「header.php」を使わないかというと、デザインで通常レイアウトと分けるためです。LP用にアクセス解析を設定することもできるようになります。次にファイル名を「specialpage.php」とし、以下のコードをコピペします。
<?php
/*
Template Name: 特別ページ
*/
?>
<?php get_header('special'); ?>
<main id="special">
<!-- ▼表示する記事がある場合、ループ開始▼ -->
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>
<div class="specialheaderimage">
<?php if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像があるか
the_post_thumbnail(); } ?>
</div>
<div class="specialtext">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p>記事が見当たりません</p>
<?php endif;?>
<!-- ▲表示する記事がある場合、ループ開始▲ -->
</main>
<?php get_footer(); ?>そして先ほどと同じくこれをFTPからテーマファイルにアップロードすれば、下記のようなLPが作れました。
スペシャルページヘッダーには投稿のアイキャッチを表示します（推奨幅1200px）。今回は固定ページのタイトルと記事を書いてください。見出しはすべてh2です。
一応、上のサイトのCSS例です。ただしサイトによって微妙に異なると思いますので、その辺はご自身で微調整お願いします。
/* ============================================================================
* スペシャルページ
* ============================================================================ */
#header {
background-size: auto;
background: #fff!important;
box-shadow: 1px 1px 1px rgba(150,150,150,30);
padding-top: 20px;
}
.lptitle {
text-align: left;
float: left;
width: 40%;
}
#headerinner {
max-width: 1080px;
margin: 0 auto;
}
.specialtext{
max-width:800px;
margin:60px auto;
}
.specialheaderimage{
height:400px;
overflow:hidden;
}
.specialtext h2{
position: relative;
margin: 50px 0;
padding: 0.2em;
font-size: 32px;
font-weight: bold;
color: #333; /* テキスト色 */
border-bottom: 2px solid #ccc;
font-family:"Century Gothic",Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.specialtext h2:before,
.specialtext h2:after{
content: '';
border-right: 18px solid #fff;
border-top: 15px solid #ccc; /* 吹き出し部分の線の色 */
bottom: -15px;
position: absolute;
left: 26px;
}
.specialtext h2:after{
border-top-color: #fff;
border-right-color: transparent;
bottom: -11px;
left: 28px;
}
.specialnav{
position:relative;
}
.mailmagazine{
width:300px;
position:absolute;
right:0;
top:30px;
background:#ff0000;
padding:20px 50px;
text-align:center;
font-size:30px;
color:#fff;
}まとめ
いろいろなページが楽チンで作れるのがWordPressのメリットですね^^
無料ブログではここまでサイトをカスタマイズできません。ちなみにこれと似たようなことは”カスタム投稿タイプ”使えばできると思いますが、このやり方のほうがWordPress初心者の方にとっては取っつきやすいのではないでしょうか？
それではまたお会いしましょう！See you
