【今更聞こう WordPress! 第４回「テンプレートタグ」編】個人投資家のFIREへの旅路第158夜

S.A.P.Studio

2021年9月5日 20:16

【single.php】

ブログ系のサイトを作ると、トップページにブログ記事一覧が表示され

ブログ記事一覧から、ブログの記事ページへ飛べますよね。

このブログページ本体が、single.phpとなります。

このようにWordPressでは、あらかじめ、それぞれの役割を持つページの

名前が決まっています。

【リンクの貼り方】

まず、htmlで書いた場合は、リンクを貼る場合は、

aタグを使いますね。

HTML 

<a href = "blog.html">

↓

WordPress

<a href = "<?php the_permalink(); ?>">

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

この　

< ?php the_permalink(); ?>　

このpermalink（パーマリンク）とは、各ページのURLのことです。

WordPressの管理画面から「投稿」した記事には、パーマリンクと呼ばれる記事のURLが自動で設定されます。

なので、このPHPのコードの内容は

パーマリンク(記事のURL）を取ってきて、aタグの中に出力する

ということになりますので、

<a href = "<?php the_permalink(); ?>">

↓

<a href = "http:○○○○○/×××××/">

という、URLが出力されて、リンクが完成するというわけです。

【single.phpにタグを入れていく】

先程の、パーマリンクと同様に、管理画面の「投稿」から投稿した記事には、各箇所を呼び出すテンプレートタグが存在します。

これを組み合わせて、single.php、つまり、ブログ記事本体のページの表示を整えていきます。

このようなブログページのコードがあったとします。

<div class="post-heading">
 <h1 class="title"> WordPressの学習</h1>
 <p> Posted by YUU HAYAMI</p>
 <p>on August 22 , 2021</p>
</div>


<div class="content">
 <p> WordPressの学習です。</p>
 <p> テンプレートタグについて学びます。</p>
 <p> テンプレートタグは、while構文の中で使います。</p>

</div>

こちらを、 WordPressのテンプレートタグを使って買い替えていきましょう！

【ポイント１】　テンプレートタグは、ループ中でしか使えない。

このループとは、こちらでも解説した、while構文です。

<?php while(have_posts()): the_post(); ?>


<?php endwhile; ?>

このコードの間では、テンプレートタグが使えます。

なので、このコードを追加します。

<?php while(have_posts()): the_post(); ?>

    <div class="post-heading">
    
         <h1 class="title"> WordPressの学習</h1>
         
         <p> Posted by YUU HAYAMI </p>
         
         <p> on August 22 , 2021 </p>
         
    </div>


    <div class="content">
    
         <p> WordPressの学習です。</p>
         <p> テンプレートタグについて学びます。</p>
         <p> テンプレートタグは、while構文の中で使います。</p>

    </div>

<?php endwhile; ?>

これで、このループ間で、テンプレートタグが使えます。

【タイトルを表示】　<?php the_title(); ?>

まず、<h1　class="title">タグを、ブログのタイトルが表示されるようにテンプレートタグを入れます。

<h1 class="title"> WordPressの学習</h1>

↓

<h1 class="title"> <?php the_title(); ?> </h1>

このようになります。

<?php the_title(); ?>　ブログのタイトルを表示する

【投稿者を表示】　<?php the_author(); ?>

続いて、この部分を書き換えます。

<p> Posted by YUU HAYAMI</p>

↓

<p> Posted by  <?php the_author(); ?>  <p>

こうなります！

<?php the_author(); ?>　投稿者名を表示する

【投稿日を表示】 <?php the_date ?>

次は、日付です！

<p> on August 22 , 2021 </p>

↓

<p> on <?php the_date(); ?>  </p>

こうなります！

<?php the_date(); ?>　投稿日を表示

「on」は残しています。何か入れたい言葉があったらここに追記もできます。

【なぜテンプレートタグを使うか】

WordPressは管理画面の「投稿」から投稿したブログ記事のタイトル、本文、などを独自のテンプレートタグを使って、

データを引っ張ってくることができます。これを利用して、表示したい内容を表示させるというのが基本的な考え方です。

なので、ブログの記事の変更を行なった際に、

管理画面での変更が、そのまま反映されて、サイトの表示を変更してくれます！

これが、直書きのHTMLサイトであれば、エディターで描き直す必要があり、非常にめんどくさいのです！

この辺りを、PHP×WordPressは管理画面から情報を引っ張ってくるという考え方をベースにして、簡素化してくれるわけです！

【本文の表示】 <?php the_content();?>

本文は、<p>タグで出力していました。

    <div class="content">
    
         <p> WordPressの学習です。</p>
         <p> テンプレートタグについて学びます。</p>
         <p> テンプレートタグは、while構文の中で使います。</p>

    </div>

↓ 　こうなります！

    <div class="content">

        <?php the_content();?>
    
    </div>

<?php the_content();?> 　　本文を表示する

簡単でしょう！！

全てのコードはこちら

<div class="post-heading">
 <h1 class="title"> WordPressの学習</h1>
 <p> Posted by YUU HAYAMI</p>
 <p>on August 22 , 2021</p>
</div>


<div class="content">
 <p> WordPressの学習です。</p>
 <p> テンプレートタグについて学びます。</p>
 <p> テンプレートタグは、while構文の中で使います。</p>

</div>

↓

<?php while(have_posts()): the_post(); ?>

    <div class="post-heading">
    
         <h1 class="title"> <?php the_title();?> </h1>
         
         <p> Posted by <? php the_author(); ?> </p>
         
         <p> on <?php the_date(); ?> </p>
         
    </div>



    <div class="content">
    
        <?php the_content(); ?> 

    </div>

<?php endwhile; ?>

このように書き換えられました！

そして最後にもう一文、付け足します！

<?php if(have_posts()); ?>

    <?php while(have_posts()): the_post(); ?>
    
        <div class="post-heading">
        
             <h1 class="title"> <?php the_title();?> </h1>
             
             <p> Posted by <? php the_author(); ?> </p>
             
             <p> on <?php the_date(); ?> </p>
             
        </div>
    
    
    
        <div class="content">
        
            <?php the_content(); ?> 
    
        </div>
    
    <?php endwhile; >
    <?php endif; ?>

<?php if(have_posts()); ?>　　<?php endif ; ?>

こちらは、

if ＝　もしも、

have posts ＝投稿があったら

end if までの間のコードを実行する

という意味です！

なので、投稿がなければ実行しないということ。

これはおまじない的に書いておくと程度で問題なし！

【まとめ】

今回は、HTMLのコードを

WordPressのテンプレートタグに書き換える作業をしました。

これで、テンプレートタグの役割や、

それを使った時の便利さがわかると思います。

テンプレートタグはめちゃめちゃあるので、

ググればコーデックスという説明書が出てきますので、

これで、確認すれば良いです！覚えようとする必要なし！

大切なのは、

管理画面からの「投稿」や、基本設定なんかは、テンプレートタグで

情報を引っ張ってこれるんだということを理解しておくことです。

これ、もしかして、テンプレートタグで書き換えられるんじゃない？

という、発想が出てこれば、ググることができますからね。

もしかして、と思えるように、知っておくことが必要です！

そして、自分で考察して、ググったことは自分のものになりやすいので、やがて、実力になっていきます！

分からなくて当然！調べれることが学びです！

そういう考えでやっていきましょう！

この記事が気に入ったらサポートをしてみませんか？

【今更聞こう WordPress! 第４回「テンプレートタグ」編】 個人投資家のFIREへの旅路 第158夜