WordPress のトップページを作成していきましょう。WordPress ではトップページのことをフロントページと呼ぶことが多いので、以降はフロントページと呼んでいくことにします。
まずは共通部分の作成
たいていのウェブページは、ヘッダーやフッターなどがすべてのページで大体共通になっています。
フロントページを作成する前に、そういった共通部分を作っていきましょう。共通部分を大まかに分けると、ヘッダー、フッター、サイドバー、コンテンツの4つになります。
コンテンツはとりあえず index.php を使用するので、残りの 3 つのファイルをテーマフォルダ内に作成していきましょう。
- header.php
- footer.php
- sidebar.php
header.php
ページのヘッダー部分を作ります。 もし既存のHTMLがあるなら、全ページで共通のグローバルナビゲーションまでを header.php に組み込むと良いでしょう。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>わたしのサイト</title>
</head>
<body>
<header>
<h1>わたしのサイト</h1>
<nav>
<ul>
<li>メニュー1<li>
<li>メニュー2<li>
<ul>
</nav>
</header>wp_head() を追加する
header.php の中では WordPress の様々な機能を利用するために、wp_head()を呼び出す必要があります。</head>の上あたりに記述しておきます。これが無いとプラグインやテーマが正しく動作しないので忘れないように！
<head>
<meta charset="UTF-8">
<title>わたしのサイト</title>
<?php wp_head() ?>
</head> サイトタイトルの呼び出し
せっかくなので、サイトタイトルは管理画面で設定したものを呼び出してみます。bloginfo('フィールド名')でサイト情報を呼び出すことがで きます。サイトタイトルは title というフィールド名なので、bloginfo('title')で呼び出しましょう。
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title') ?></title>
<?php wp_head() ?>
</head>bloginfo() で他にどんな情報が取得できるかは、こちらを参照してください。
footer.php
ページのフッター部分を作ります。フッターメニューなどの全ページ共通部分を組み込むと良いでしょう。
例
<footer>
<?php bloginfo('title') ?>
</footer>
</body>
</html> wp_footer() を追加する
大まかな理由は先ほどのwp_head()同様です。こちらも footer.php に記述します。</body>の上あたりに追加しておきましょう。
<footer>
<?php bloginfo('title') ?>
</footer>
<?php wp_footer() ?>
</body>sidebar.php
ページのサイドナビゲーション部分を作ります。もし1カラムのサイトなら不要 なので、飛ばしてもらっても構いません。
例
<div>
<nav>
<p>ナビゲーション</p>
<ul>
<li>ナビ1</li>
<li>ナビ2</li>
</ul>
</nav>
</div>index.php
ページのコンテンツ部分を作ります。まずは先ほど作成したファイルたちをインクルードしましょう。WordPress では、それぞれget_header(),get_footer(),get_sidebar()で呼び出すことができるようになっています。
例
<?php get_header() ?>
<main>
<h2>わたしのコンテンツ</h2>
</main>
<?php get_sidebar() ?>
<?php get_footer() ?>記事を呼び出す
このままではコンテンツが何もない、つまらないブログになってしまうので記事を呼び出します。最初はよく分からないと思うので、とりあえず「記事を呼び出す呪文」と思いながら下記コードを追加してください。これは記事を呼び出すためのループとなります。
<main>
<h2>わたしのコンテンツ</h2>
<?php if ( have_posts() ): while ( have_posts() ): the_post() ?>
<?php the_title() ?>
<?php endwhile; endif ?>
</main>ここまで出来たら、いったんアップロードして表示を確認してみましょう 。WordPress のトップページにアクセスすると、ヘッダー、フッター、サイドバー、そして記事のタイトルだけが表示されているはずです。
確認出来たら、記事を新規追加してみましょう。管理画面のサイドバーから「投稿」>「新規追加」で記事を投稿できます。投稿後、再びトップページを確認して記事のタイトルが表示されていれば正しく動いていることが分かります。
日付を表示する
まだタイトルしか表示されておらず味気ないので、日付も表示させてみましょう。投稿日は、the_time('フォーマット文字')で呼び出すことができます。
the_time()のフォーマット文字は使えるものが決まっています。例えば、the_date('Y-m-d')とすれば 2019-03-29のようなハイフン区切りで投稿日が表示されます。Yは「年」、mは「月」、dは「日にち」です。他にも色々使えますが、この詳細はPHPのdate()関数を参照してください。
例
<?php if ( have_posts() ): while ( have_posts() ): the_post() ?>
<time><?php the_time('Y/m/d') ?></time>
<?php the_title() ?>
<?php endwhile; endif ?>詳細ページへのリンクを付ける
タイトルにリンクを付けて、記事の詳細ページに飛ばせるようにしましょう。記事リンクはthe_permalink()で呼び出すことができます。これをaタグのhref属性に入れます。
<?php if ( have_posts() ): while ( have_posts() ): the_post() ?>
<time><?php the_time('Y/m/d') ?></time>
<a href="<?php the_permalink() ?>"><?php the_title() ?></a>
<?php endwhile; endif ?>phpタグが増えてややこしくなってきましたが、これで記事へのリンクができました。まだ詳細ページのテンプレートを作成していないので、正常に表示されないはずです。次は詳細ページを表示するために、single.php を作成しましょう。