初めに
今回は、footer.phpという共通パーツを作ります。
前回の章でやったheader.phpを作成する流れと同じです。
ですから、復習の気持ちでサラッと流していきましょう。
それでは、やっていきます。
※こちらのコースは、WP初級の続きから学習します。
この記事で覚えて欲しいこと
- 「footer.php」というファイル名
- get_footer()というテンプレートタグ
それでは、footer.phpを作成していきましょう。
header.php作成の時と流れは同じです。
現在のhome.phpは、下記のようになっています。
home.php
<?php・get_header();・?>
<body>
・・・・<p>3229WPのTOPページです。<br>
・・・・home.phpで表示されています。</p>
・・・・<p>ブログの一覧を表示します</p>
・・・・<?php
・・・・・・・・if ( have_posts() ):
・・・・・・・・while ( have_posts() ):
・・・・・・・・the_post();
・・・・?>
・・・・<article>
・・・・・・・・<h2>
・・・・・・・・・・・・<?php the_title(); ?>
・・・・・・・・</h2>
・・・・・・・・<p>
・・・・・・・・・・・・<?php the_content(); ?>
・・・・・・・・</p>
・・・・</article>
・・・・<?php
・・・・・・・・endwhile;
・・・・・・・・endif;
・・・・?>
・・・・<?php wp_footer(); ?>
</body>
</html>
・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^
footer.phpには、下の3行分を書くことにします。
footer.php
・・・・<?php wp_footer(); ?>
</body>
</html>
・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^
出来たら、テーマの中に配置しましょう。
共通パーツを読み込む
それでは、今作ったfooter.phpを各ページに読み込みます。
タグ名はget_footer()です。
get_headerとget_footer()は使い方がほとんど一緒です。
なので、セットで覚えると良いですね◎
早速、home.phpを書き換えましょう。
home.php
<?php・get_header();・?>
<body>
・・・・<p>3229WPのTOPページです。<br>
・・・・home.phpで表示されています。</p>
・・・・<p>ブログの一覧を表示します</p>
・・・・<?php
・・・・・・・・if ( have_posts() ):
・・・・・・・・while ( have_posts() ):
・・・・・・・・the_post();
・・・・?>
・・・・<article>
・・・・・・・・<h2>
・・・・・・・・・・・・<?php the_title(); ?>
・・・・・・・・</h2>
・・・・・・・・<p>
・・・・・・・・・・・・<?php the_content(); ?>
・・・・・・・・</p>
・・・・</article>
・・・・<?php
・・・・・・・・endwhile;
・・・・・・・・endif;
・・・・?>
<?php get_footer(); ?>
・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^
書き換えたら、サイトの表示を確認します。
問題なく表示されていますね◎
同じように、他のファイルも修正します。
single.php、page.phpをそれぞれ書き換えてください。
single.php
<?php・get_header();・?>
<body>
・・・・<p>3229WPの詳細ページです。<br>
・・・・single.phpで表示されています。</p>
・・・・<h2>
・・・・・・・・<?php the_title(); ?>
・・・・</h2>
・・・・<p>
・・・・・・・・<?php the_content(); ?>
・・・・</p>
<?php get_footer(); ?>
・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^
page.php
<?php・get_header();・?>
<body>
・・・・<p>3229WPの固定ページです。<br>
・・・・page.phpで表示されています。</p>
・・・・<h2>
・・・・・・・・<?php the_title(); ?>
・・・・</h2>
・・・・<p>
・・・・・・・・<?php the_content(); ?>
・・・・</p>
<?php get_footer(); ?>
・は半角スペース1つ分です。コピーせずに自分で入力しましょう^^
これで、無事footer.phpも共通のパーツにすることができました。
次の章で学ぶこと
次の章では、CSSを読み込んでいきます。
CSSは見た目を装飾してくれる言語です。
化粧をするように、サイトを整えていきましょう！
