wordpress 記事を表示させてみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

記事を表示させてみよう

WordPress|2018年10月19日

2018年10月19日
  • このエントリーをはてなブックマークに追加

前回は、トップページを表示させてみました。

次は下層ページ、と行きたいところですが、下層ページは一旦置いておきましょう。
少しだけ複雑なので、順番にご説明させていただきます。

今回は、記事一覧を表示させてみます。
さらに「記事のリンク」をクリックし「詳細ページ」に遷移するところまで作ります。

まず、記事一覧を表示させるには「ループ」という概念を理解する必要があります。

ループは、書いたHTMLタグを、記事の投稿数分、繰り返し表示させます。
WordPressに5記事投稿されていたとしたら、5回繰り替えされるわけです。

では、具体的にどうやってループさせるかと言うと、下記のようになります。

<!--ループのはじまり-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<!--ループで繰り返したい内容-->
<article>
<h2><a href="#">タイトルが入ります。</a></h2>
<div>テキストが入ります。テキストが入ります。テキストが入ります。</div>
</article>
 
<!--ループの終わり-->
<?php endwhile; else : ?>
<div><?php _e( 'Sorry, no posts matched your criteria.' ); ?></div>
<?php endif; ?>

なんとなく、お分かり頂けましたでしょうか。

上記の場合<article>で囲まれたエリアを、WordPressのphpタグで囲んでいます。
今回使われているタグはこちらの2つ。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else : ?>
<div><?php _e( 'Sorry, no posts matched your criteria.' ); ?></div>
<?php endif; ?>

上記2つのタグで囲まれたソースコードは、記事の投稿回数分、繰り返されます。
これで、記事の一覧を表示させる土台はできました。

記事の内容を反映させよう

ただ、まだ記事のタイトルや内容は表示されていません。
詳細ページへのリンクも表示されていませんね。

ここで登場するのが、下記3つのタグです。

<!--タイトルを表示します。-->
<?php the_title(); ?>
<!--概要を表示します。-->
<?php the_excerpt(); ?>
<!--記事へのリンクを表示します。-->
<?php the_permalink(); ?>

コメントのままですね。
それぞれのphpタグが、それぞれ対象のデータを表示してくれます。

あとはタグを、必要箇所に入れていくだけです。
なお、上記のタグは「ループの中でしか使えない」というルールがあります。

では、実際に入力すると、どうなるでしょうか。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<article>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</article>
 
<?php endwhile; else : ?>
<?php _e( 'Sorry, no posts matched your criteria.' ); ?>
<?php endif; ?>

それぞれ、該当箇所に上書きしただけですね。
以上で、記事一覧が完成します。
思ったより、簡単だったのではないでしょうか。

1点、リンクを出力するタグだけ「WordPressならでは」の癖があります。

リンクを出力するタグは「パーマリンク」というリンクを書き出します。
パーマリンクとは「記事の詳細ページ」のリンクを意味します。

では「記事の詳細ページ」とは、どこを意味するのでしょうか。
現状、まだトップページ以外のページは、表示さえ出来ていませんからね。

記事の詳細ページを表示させよう

ここでWordPressの特殊なルールが出てきます。

記事詳細ページは、ファイル名が「single.php」となっているファイルを自動参照するのです。
つまり、パーマリンクをクリックするとsingle.phpをベースとして記事を出力します。

どの記事であっても、参照するファイルは「single.php」になります。

記事1つ1つ、htmlやphpファイルが作られるわけではありません。
single.phpをテンプレートとして各記事を表示します。

記事の詳細ページとしてコーディングしたファイルの名前を「single.php」に変更しましょう。
すると、記事URLにアクセスすれば、single.phpのレイアウトで出力される状態になります。

上記の画像で言えば、ファイルの上から2番目にあたります。

もともと、別のファイル名だったものをsingle.phpに変更しました。
これで、詳細ページが無事表示されるようになったはずです。

ただ、前回と同じように、CSSや画像がリンク切れしているはずなので、修正が必要です。

<?php bloginfo('template_directory'); ?>

前回使った上記のタグで、CSSや画像のパスを通しましょう。
これで、記事一覧と、記事ページが完成です。

このように、WordPressには、ファイル名に一定のルールがあります。

例えば、カテゴリーごとの一覧ページであれば「category.php」としたり。
タグで縛られた記事一覧ページであれば「tag.php」であったり。
特に更新要素の無い説明ページなとは「page.php」であったり。

どのページにどのファイル名を使うか、ルールが決められているのです。

詳細ページに記事の内容を表示させよう

記事ページの作成に関して、さらに進んでいきます。

ひとまず、記事一覧から詳細ページへは飛ぶようになりましたが、中身がまだ反映されていません。
記事の内容ではなく、HTML×CSSで作ったデータのままなのではないでしょうか。

記事のデータを反映させるのは、そう難しいことではありません。
指定のタグを埋め込むだけで、ほとんどが完了します。

まず下準備として、ここでもループを作りましょう。
「記事の内容を反映させたいエリア」をループで囲ってください。

記事一覧ページでは、ループで囲うと記事数分ループされました。
しかし、single.phpでは該当記事1つだけ表示されます。
現在表示されるべき1ページだけが表示されるようになります。
URLに紐づけられたコンテンツを自動的に表示するんですね。

ループで囲ったら、今度は「タイトルや本文」を出力します。
と言っても、前回の方法とほとんど変わりません。

該当箇所をWordPressのタグで書き換えていきましょう。
それぞれ該当するタグがあるので、実際に試してみてください。

<!--タイトルを表示します。-->
<?php the_title(); ?>

タイトルのタグは、一覧ページのタグと変わりはありません。
では、記事の本文に関してはどうでしょう。

<!--記事本文を表示します。-->
<?php the_content(); ?>

こちらのタグを入れるだけで、本文すべてが表示されます。

本文の箇所を丸ごと、上記のタグに差し替えてください。
管理画面で投稿した文章が、そのまま表示されるはずです。

基本的には、上記の2つでタイトルと本文が表示されます。
これで、記事を一覧表示して、クリックし、詳細を読む仕組みはできました。

次は、カテゴリー別やタグ別の記事一覧表示について試していきます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら