1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressのテーマ作成方法 > 
  5. index.phpでWordPressブログのトップページと記事ページを作成

index.phpでWordPressブログのトップページと記事ページを作成

WordPressのテーマ作成方法講座 Chapter-1。使用しているテンプレートタグや条件分岐、関数についても解説。

  • 2016/6/11
  • 2016/6/11

前回のWordPressテーマのテンプレート構成を知ろうでは、WordPressのテーマファイルの基本構成の解説と、最小限のファイル構成でWordPressの管理画面に自作テーマが表示されるところまで実践してみました。

今回は前回作成したファイルを修正して、ブログのトップページと投稿ページを作成してみましょう。

トップページと記事ページが以下のように表示されれば合格です！

  • chapter-1_001
  • chapter-1_002

今回は、今後も頻繁に使う事になる、テンプレートタグ、条件分岐、関数についても解説します。

index.phpにHTMLのソースコードを書く

まずはブログの基本構造を記述しましょう。今回は、ヘッダー、メインコンテンツ、サイドメニュー、フッターというシンプルな構造のHTMLを、index.phpにまとめて記述します。

WordPressテーマのテンプレート構成を知ろうで解説したように、index.phpはテンプレート構造の一番深い場所にあり、あらゆるテンプレートの替わりを務めることができます。

本来は、投稿ページはsingle.php、サイドメニューはsidebar.php、フッターはfooter.phpに記述しますが、今回はまとめてindex.phpに記述して、後から別のテンプレートに分解します。

それでは、ごくシンプルなHTMLをindex.phpに記述します。

  1. chapter-1_003まずWordPressの管理画面にアクセスして、「外観 > テーマの編集」をクリックします。
  2. chapter-1_004画面右側のテンプレート一覧から「index.php」をクリックして以下のソースコードを記述してください。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
<title></title>
</head>

<body>
<div id="container">
<div id="header">

<!--ヘッダーエリア-->

</div><!-- //header -->
<div id="main" class="clearfix">
<div id="content">

<!--メインコンテンツエリア-->

</div><!-- //content -->
<div id="side">

<!--サイドメニューエリア-->

</div><!-- //side -->
</div><!-- //main -->
<div id="footer">

<!--フッターエリア-->

</div><!-- //footer -->
</div><!-- //container -->

</body>
</html>

途中に<!–?php bloginfo(‘template_url’); ?–>というコードが出てきました。
これはPHPで書かれたテンプレートタグと呼ばれるもので、WordPressのテーマを作成したりカスタマイズする時には頻繁に登場します。

テンプレートタグとは？

テンプレートタグとは、bloginfo(‘template_url’);の部分のことを指しています。
ブログに投稿された本文や日付などのデータを表示する時に使うもので、数文字のコードを書くだけで様々なデータを表示させたり、取得できたりします。

今回使うテンプレートタグは以下の通りです。

bloginfo()
ブログの情報を表示するために使うテンプレートタグ。
bloginfo(‘template_url’)とするとテンプレートのURLを表示し、bloginfo(‘url’)とするとブログのURLを表示します。
bloginfo(‘description’)は、ブログの概要説明を表示します。

the_title()
投稿や固定ページのタイトルを表示するテンプレートタグ

the_content()
投稿や固定ページの本文を表示するテンプレートタグ

the_permalink()
投稿のURLを表示します。

他にも覚えきれないほどのテンプレートタグがありますが、テンプレートタグ – WordPress Codex 日本語版に整理されています。
このページをブックマークしておき、必要な時にすぐに参照できるようにしておくと便利です。

テンプレートタグの前後にある<!–?phpと?>は、PHPというプログラムの開始タグと終了タグです。
テンプレートタグはPHPのソースコードとして記述しますので、必ずPHPの開始タグと終了タグの間に書く必要があります。

まずはあまり難しく考えず、テンプレートタグの前後には<?phpと?–>が必要なんだと覚えておけば大丈夫です。

ブログ名とキャッチフレーズを表示させる

テンプレートタグを使って、ブログ名とキャッチフレーズをヘッダー部分に表示させてみましょう。

テンプレートタグで表示されるブログ名とキャッチフレーズは、WordPressの管理画面「設定 > 一般」の画面で入力した内容が使われますので、内容を変えたい時は管理画面で修正しましょう。

chapter-1_005

以下のコードをヘッダーエリア部分に記述します。

<div id="header">
<!--ヘッダーエリア-->

<?php if(is_home()): ?>
<h1 id="blog-title"><?php bloginfo("name"); ?></h1>
<p><?php bloginfo("description"); ?></p>

<?php else: ?>
<p id="blog-title"><a href="<?php bloginfo("url"); ?>"><?php bloginfo("name"); ?></a></p>
<p><?php bloginfo("description"); ?<>/p>

<?php endif; ?>

</div><!-- //header -->

ここで<!–?php if(is_home()): ?>という、テンプレートタグとは違うコードが出てきました。

これは、条件分岐タグと言って、いま表示しているのがトップページなのか、それ以外のページなのかという条件分岐をさせる時に使い、ぞれぞれのページで、表示させる内容を出し分けたい時に使用します。

ここでは、トップページのブログ名は<h1>でマークアップして、それ以外のページでは</h1>
でマークアップするように条件分岐を設定しています。

また、投稿ページに表示させるブログタイトルには、トップページに戻るためのリンクも設定しています。

条件分岐タグについては、WordPressで覚えておくと便利な7つの条件分岐のタグも合わせてご覧ください。

投稿を表示させる

投稿された内容を表示させましょう。
メインコンテンツエリアに以下のコードを記述します。

<div id="content">
<!--メインコンテンツエリア-->
<?php
if(have_posts()):
while(have_posts()): the_post();
?>

//この部分に投稿を表示させます
<?php if(is_home()): ?>
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>

<?php else: ?>
<h1>
<?php the_title(); ?>
</h1>

<?php endif; ?>



<?php endwhile; endif; ?>

<?php the_content(); ?>

</div><!-- //content -->

ここでもはじめて見るhave_posts、the_post()という単語が出てきました。

これは関数と呼ばれるもので、複雑な処理をまとめておく箱のようなものです。
関数には引数というものもあって、何かの値を関数に渡す時に使われます。

関数とは？

例えば、自動販売機にお金を入れてボタンを押すと、選んだ品物が出てきますよね？
自動販売機の中では入れたお金がいくらなのか判断してお釣りも出してくれます。

自動販売機という関数に、お金という引数を渡して処理を依頼すれば、品物とお釣りが計算されて「戻り値」という形で返されます。

関数とはこんなイメージのものです。

投稿を表示する処理を書く

have_posts関数は、投稿（固定ページ）があるかどうかを判断して、その結果をYESかNOで返す関数で、the_postは投稿（固定ページ）の内容を取得してセットする関数です。

have_posts
投稿（固定ページ）があるかどうかを判断して、その結果をYESかNOで返す関数
関数リファレンス/have posts – WordPress Codex 日本語版

the_post
投稿（固定ページ）の内容を取得してセットする
関数リファレンス/the post – WordPress Codex 日本語版

次に登場するのが、先ほど解説した条件分岐。もし投稿がある場合にはthe_postという関数で投稿の内容を読み込みます。

少しややこしいと思いますので、以下の部分は「おまじない」だと思って、そのまま覚えても問題はありません。

<?php
if(have_posts()):
while(have_posts()): the_post();
?>

//この部分に投稿を表示させます

<?php endwhile; endif; ?>

次に実際に投稿を表示させる部分です。
ここでも先ほどのブログタイトルの時と同様に、条件分岐タグを記述してトップページと記事ページでマークアップを書き分けています。

トップページでは投稿のタイトルを<h2>でマークアップして、記事ページでは<h1>でマークアップしています。
the_title()は投稿のタイトル、the_permalink()は投稿ページへのURL、the_content()は投稿内容を表示するテンプレートタグです。

<?php if(is_home()): ?>
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>

<?php else: ?>
<h1>
<?php the_title(); ?>
</h1>

<?php endif; ?>

<?php the_content(); ?>

スタイルシートでデザインの調整

最後にデザインを調整します。以下のコードをstyle.cssに記述してください。

/*
Theme Name: WordPressテーマ作成研修用テーマ
Description: このテーマはWordPressのテーマ作成研修用に作られたテーマです！！
Author: hogehoge
Version: 1.0
*/

body{
	font-size:14px;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", helvetica,"ＭＳ ゴシック","Osaka",sans-serif;
	margin:0;
}
#container{
	width:980px;
	margin:0 auto;
	border-left:1px solid #D6D6D6;
	border-right:1px solid #D6D6D6;
	padding:0 10px;
}
#header{
	padding-top:20px;
	border-bottom:1px solid #D6D6D6;
}
#blog-title{
	font-size:1.5em;
	font-weight:bold;
	margin:0;
}
#content{
	width:780px;
	float:left;
}
#side{
	width:200px;
	float:left;
}
#footer{
	border-top:1px solid #D6D6D6;
}
.clearfix:after{
	content : ''; display : block; clear : both; height:0;
}

もし投稿を一つも書いていないのであれば、何でもいいので投稿をしてみましょう。

トップページと投稿ページに投稿した内容が表示されるはずです。

次回は投稿にアイキャッチ画像を設定して、投稿一覧と投稿ページに表示させる方法を解説します。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク（6か月のガッチリ型）

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲