WordPressで自作テーマ作り(第4回:投稿記事を表示させる)

スポンサーリンク


wordpress(ワードプレス)の自作テーマを作りながらCMSの仕組みを学ぶ初心者向けの長期連載第4回は「投稿記事」を表示させるためのコードの記述です。第3回はオリジナルテーマの有効化に成功しましたが、表示は真っ白。この課題を解決していきましょう。

投稿記事を表示させるテンプレートタグを入力

まず「外観>Theme Editor」でindex.phpを開いたら、以下のコードを書き込みましょう。コピペで貼り付けても構いません。

index.phpをテーマエディターで編集

index.phpをテーマエディターで編集

<!doctype html></pre>
すると、真っ白だった外観が以下のように変化します。

<img class="wp-image-1716" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/48402c76df72814a14cd87b531649f61-1024x235.png" alt="タイトルと投稿文だけが表示されたサイト" width="500" height="115" /> タイトルと投稿文だけが表示されたサイト
<h2>php入力の基本ルール</h2>
これは、index.phpに投稿記事を表示させるための指令をコードで打ち込んだからです。ワードプレスで動くプログラムはphpで指令を書いています。指令を出したい部分は以下のように書くのが基本的なルールです。
<pre>

<!--?php 指令内容 ?&gt;

</pre>
<p>Wordpressにおける記事の出力は専用の「テンプレートタグ」を使います。</p>
<pre>


<?php テンプレートタグ(パラメーター);&gt;

</pre>
<div class=”attention”>テンプレートタグとパラメーターは1セットです。パラメーターの値を指定しない場合は空欄になりますが、パラメーターの括弧は省略してはいけません。</div>
<p>実際に細かく分けて説明していきましょう</p>
<h3>タイトルを表示させる</h3>
<p>最初は記事のタイトル表示です。</p>
<pre>

スポンサーリンク

<?php the_title();?&gt;

</pre>
<p>ワードプレスが読み込んだデータの中から、タイトルを表示させるにはこのコードを記述しましょう。</p>
<div class=”mceTemp”><dl id=”attachment_1715″ class=”wp-caption aligncenter” style=”width: 510px”><dt class=”wp-caption-dt”><img class=”wp-image-1715″ src=”https://banabo.net/wordpress/wp-content/uploads/2016/08/77d0d6a051d6497df8380beb1c9e20b3.png” alt=”編集画面のタイトル入力” width=”500″ height=”88″ ?–>編集画面で入力したタイトルが表示されます

本文を表示させるには「ループ」が必要

続いて、記事の本文を出力させます。


<!--?php the_content();&gt;

</pre>
<p>しかし、これだけでは本文は何も表示されません。記事は「ループ」という指令で囲まなければ表示されない仕組みとなっています。以下のようにコードを打ち込まなければなりません。</p>
<pre>

<?php if(have_posts()): while(have_posts()):the_post();?&gt;

<h1&gt;<?php the_title();?&gt;</h1&gt;

<?php the_content();?&gt;
<?php endwhile; endif;?&gt;

</pre>
<p>ついでに、<!–?php the_title();&gt;が生成された時に見出しとして認識してもらえるように、見出しタグも追加します。</p&gt;<br ?–>
<pre>

&lt;?php if(have_posts()): while(have_posts()):the_post();&gt;

&lt;h1&gt;&lt;?php the_title();&gt;&lt;/h1&gt;

&lt;?php the_content();&gt;
&lt;?php endwhile; endif;?&gt;

<p>ループはワードプレス、そしてphpにおいて大変重要な概念です。
打ち込んだコードが具体的にどのような処理を行っているのでしょうかを説明します。

if(have_posts()):〜endif;?>

連載の第2回を思い出してください。ワードプレスは投稿した記事を表示させるために、データベースから指定された投稿を取り出している役目を果たしています。

「if(have_posts()):」は、データベース内に指定された記事があるかどうかを調べるコードです。

while(have_posts()):〜<?php endwhile;

ブログ記事を投稿する場合、個別の投稿を表示させるだけではなく、状況によっては複数の記事を表示させる場合があるでしょう(検索結果の表示、トップページの一覧表示などが考えられます)。その際に用いられるコードです。

the_post();?

取り出した記事をテンプレートで扱えるように処理するためのコードです。処理回数をカウントする役割もはたしています。

基本的に、タイトルを出力する<?php the_title();?>や本文を表示させる<?php the_content();?>は、ループタグで囲む必要があることも覚えておきましょう。次回はテンプレートタグについてもう少し詳しく説明してみます。

スポンサーリンク


ループって何だ?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。