一つ前の記事:(4)PHPの関数の使い方をbloginfo関数を例にして触れてみる。

弊社の無料お試し環境を利用してこの記事をご利用になっている方は、テンプレートのフォルダに今回の開始状態を「step5」、終わった状態を「step5-fine」としてセットしてありますので参考にして下さい。

entry5_img1

今回は最初の方で作成した、トップ用の固定ページで登録した本文やアイキャッチをサイト上に表示してみます。

投稿内容を表示する箇所の全体像

やりたいことを確認します。

entry5_img2

この赤枠の箇所を管理画面から編集できるようにします。細かなPHPの関数等を説明する前に、完成したコードを下に記載します。

投稿の本文を表示してみる。

先ずは右側のテキストの箇所です。

元のコードの175行目からを

このように書き換えます。

こうすることで、トップ用の固定ページの本文が「<div class=”tagln”>」と「</div>」の間に表示されるようになります。内容を説明していきます。

投稿の内容をページ内に表示する時は必ず以下の2つの行で投稿内容を表示する箇所を囲みます。

こうすると、上記で「投稿内容を表示するいろいろな記述」と書かれている場所に、投稿の内容を表示する処理を書けるようになります。それぞれに意味はあるのですが、別の箇所で掘り下げて説明しますので、今回は深くは触れずに、「固定ページで投稿内容を表示するときはこうするんだな」くらいに思ってもらえばと思います。

【POINT】
固定ページで投稿内容を表示する時のおまじない

さて次におまじないの間に書かれている「<?php the_content();?>」です。「the_content()」これは、前回でてきたbloginfoと同じく、関数です。the_contentは、投稿の本文を表示すると言う意味になります。

【POINT】
投稿の本文を表示する関数「the_content()」

「<?php the_content();?>」となっている箇所が、投稿の本文に差替えられて表示されます。

entry5_img3

 

実際に動画で見てみましょう。

投稿のアイキャッチ画像

WordPressでは、固定ページや投稿ページそれぞれに記事のサムネイルなどに利用できる「アイキャッチ画像」を登録することができます。アイキャッチの登録機能はWordPressをインストールした直後は隠れているので、表示する必要があります。表示の仕方は簡単です。「functions.php」を開き、以下のように入力しましょう。

これで、アイキャッチ画像入力欄が表示されます。

entry5_img4

index.phpの方へ、アイキャッチを表示する関数を入力します。アイキャッチ画像を表示する関数は「the_post_thumbnail()」です。サイズなどを指定する方法もあるのですが、ここでは、登録する画像を予めHTMLに合わせて310×390で用意することにして、そのままのサイズで表示します。88行目の

に書き換えます。

【POINT】
記事のアイキャッチ画像を利用するには、functions.phpに 

を記述し、アイキャッチ画像を表示したい場所に

を記述する。

試しに、他の画像をセットしてみましょう。310 x 390画像は、弊社の無料環境をご利用の場合は、step5のフォルダの直下に「310x390sample.png」として保存してあります。

実際に動画で見てみましょう。

次回は投稿の記事を一覧表示してゆきます。

前の記事:【(4)PHPの関数の使い方をbloginfo関数を例にして触れてみる。】

この記事の目次はこちら