一つ前の記事：（４）PHPの関数の使い方をbloginfo関数を例にして触れてみる。
弊社の無料お試し環境を利用してこの記事をご利用になっている方は、テンプレートのフォルダに今回の開始状態を「step5」、終わった状態を「step5-fine」としてセットしてありますので参考にして下さい。
今回は最初の方で作成した、トップ用の固定ページで登録した本文やアイキャッチをサイト上に表示してみます。
投稿内容を表示する箇所の全体像
やりたいことを確認します。
この赤枠の箇所を管理画面から編集できるようにします。細かなPHPの関数等を説明する前に、完成したコードを下に記載します。
投稿の本文を表示してみる。
先ずは右側のテキストの箇所です。
元のコードの175行目からを
|
175 176 177 178 179 180 |
<!--tagln starts--> <div class="tagln"> It is a <span class="italics">long</span> established fact <span class="italics">that</span> a reader<br /> will love your work, as long as you put all you have into the project </div> <!--tagln ends--> |
このように書き換えます。
|
1 2 3 4 5 6 7 |
<!--tagln starts--> <div class="tagln"> <?php while ( have_posts() ) : the_post(); ?> <?php the_content();?> <?php endwhile; // end of the loop. ?> </div> <!--tagln ends--> |
こうすることで、トップ用の固定ページの本文が「<div class=”tagln”>」と「</div>」の間に表示されるようになります。内容を説明していきます。
投稿の内容をページ内に表示する時は必ず以下の2つの行で投稿内容を表示する箇所を囲みます。
|
1 2 3 |
<?php while ( have_posts() ) : the_post(); ?> 投稿内容を表示するいろいろな記述 <?php endwhile; // end of the loop. ?> |
こうすると、上記で「投稿内容を表示するいろいろな記述」と書かれている場所に、投稿の内容を表示する処理を書けるようになります。それぞれに意味はあるのですが、別の箇所で掘り下げて説明しますので、今回は深くは触れずに、「固定ページで投稿内容を表示するときはこうするんだな」くらいに思ってもらえばと思います。
固定ページで投稿内容を表示する時のおまじない
|
1 2 3 |
<?php while ( have_posts() ) : the_post(); ?> 投稿内容を表示するいろいろな記述 <?php endwhile; // end of the loop. ?> |
さて次におまじないの間に書かれている「<?php the_content();?>」です。「the_content()」これは、前回でてきたbloginfoと同じく、関数です。the_contentは、投稿の本文を表示すると言う意味になります。
投稿の本文を表示する関数「the_content()」
「<?php the_content();?>」となっている箇所が、投稿の本文に差替えられて表示されます。
実際に動画で見てみましょう。
投稿のアイキャッチ画像
WordPressでは、固定ページや投稿ページそれぞれに記事のサムネイルなどに利用できる「アイキャッチ画像」を登録することができます。アイキャッチの登録機能はWordPressをインストールした直後は隠れているので、表示する必要があります。表示の仕方は簡単です。「functions.php」を開き、以下のように入力しましょう。
|
1 2 |
<?php add_theme_support( 'post-thumbnails'); |
これで、アイキャッチ画像入力欄が表示されます。
index.phpの方へ、アイキャッチを表示する関数を入力します。アイキャッチ画像を表示する関数は「the_post_thumbnail()」です。サイズなどを指定する方法もあるのですが、ここでは、登録する画像を予めHTMLに合わせて310×390で用意することにして、そのままのサイズで表示します。88行目の
|
88 89 90 |
<div id="hdlogo" align="center"> <img src="<?php bloginfo("template_directory");?>/images/topbanner.jpg" alt=""/> </div> |
を
|
88 89 90 |
<div id="hdlogo" align="center"> <?php the_post_thumbnail();?> </div> |
に書き換えます。
記事のアイキャッチ画像を利用するには、functions.phpに
|
1 |
add_theme_support( 'post-thumbnails'); |
を記述し、アイキャッチ画像を表示したい場所に
|
88 |
<?php the_post_thumbnail();?> |
を記述する。
試しに、他の画像をセットしてみましょう。310 x 390画像は、弊社の無料環境をご利用の場合は、step5のフォルダの直下に「310x390sample.png」として保存してあります。
実際に動画で見てみましょう。
次回は投稿の記事を一覧表示してゆきます。
前の記事：【（４）PHPの関数の使い方をbloginfo関数を例にして触れてみる。】
最近のコメント