特定タグ・カテゴリーの一覧ページを”特集ページ風”に固定ページテンプレートで作成する方法

2016

11.26

WordPressの固定ページを使って、簡単にカッコいい特集ページを作る方法をご紹介します。

今回は、ページの上部にヘッダーも設け、特定タグ・カテゴリーの記事だけを特集ページ内で一覧で表示させる方法です。一度ページを設定すれば、あとは特定のタグやカテゴリーの記事を追加する度に、特集ページにも一覧として追加されます。

例えば、このようなイメージです。固定ページの上部にヘッダーが表示され、その下には特定のタグ or カテゴリーの記事一覧が表示されます。
screenshot-2016-11-26-15-41-40

では、手順を解説していきましょう。

固定ページを使ってテンプレートを作る

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やファイルマネージャーから、テーマファイルにアップロード。
screenshot-2016-11-26-15-16-47

これで作成した固定ページテンプレートがページ属性で選択できるようになります。
screenshot-2016-11-26-15-19-44

その際の固定ページのタイトルや記事は空白で構いません。入れても先ほどのコードでは出力されないようになっていますので^^公開すれば記事一覧ページの出来上がりです。

ランディングページの作り方

上記の要領で固定ページを使えば各ページごとにレイアウトを変えることができますので、たとえば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が作れました。
screenshot-2016-11-26-15-34-20

screenshot-2016-11-26-15-34-56

screenshot-2016-11-26-20-58-20
スペシャルページヘッダーには投稿のアイキャッチを表示します(推奨幅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,'MS Pゴシック',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

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ