※【index.php】③ループ処理のプログラム ①と②を組み合わせる参照

 

■個別投稿

管理画面>固定ページで表示


■各パーツをインクルードタグを使ってテンプレートを読み込むよう編集

index.phpで置き換えたのと同じ部分を置き換える

■インクルードタグ 
※includeされる側へのリクエストが発生し、 
その結果をincludeする側が取り込んで表示
 includeされる側、includeする側、
それぞれ常に最新の結果が得られる

index.phpで使用したインクルードタグ

・ヘッダー・・・get_header
・サイドバー・・・get_sidebar
・フッター・・・get_footer

 

---------使用したテンプレートタグ--------------------------

 

投稿に対するIDを取得

 the_ID

 ループの中でのみ利用可

  WordPressの場合投稿ごとにIDが発行される

  特定の記事に処理を入れたい場合などに利用できる

 

ページごとにclassを付与

 post_class

  WordPressページによって自動的にclassを付与される

  生成するページによって付与されるクラスが変わるので、

  ページによってスタイルを変えたり

  JavaScriptで制御を変えたりする場合に利用できる

 

■ 投稿のパーマリンクを取得

 the_permalink

 ループの中でのみ利用可

  パーマリンク=WordPressが吐き出すURL

  ※URLの構造は管理画面から変更可…管理画面>設定>パーマリンク設定

   サイトの運用開始後変更すると、変更前のリンクが使えなくなってしまう

   ∴最初に設定する必要がある

 

■投稿のタイトルを取得

 the_title 

 ループの中でのみ利用可

 

現在の投稿が書かれた日付を取得(今回は①get_the_date を使用)

 ※日付のフォーマットは管理画面から変更可…設定 > 一般 >日付のフォーマット

 ①get_the_date 

  出力機能なし。出力する場合は echo が必要

  全投稿で投稿日を出力する場合などに向いている

 the_date

  出力機能あり

  同じ日に書かれた投稿がある場合、最初の投稿に対してしか出力が行なえない

  投稿日のアーカイブを作るなどに向いている

 

 

現在の投稿が所属するカテゴリリンクを取得し表示

 the_category 

 ループの中でのみ利用可

  デフォルトだと ul タグを利用したフォーマットに沿って出力

  (‘, ‘)とすると、フォーマットなしの状態で出力。

 

投稿に紐付いているアイキャッチ画像を取得し、表示 

 the_post_thumbnail

 ループの中でのみ利用可

 

■投稿の本文を取得して表示

 the_content 

 ループの中でのみ利用可

  index.php のようなアーカイブページであれば、

  「続きを読む」タグで挿入した more タグまでの文章を表示し

  ( ‘続きを読む’ ) で指定したリンクテキストを出力

  ②投稿を表示する single.php などであれば全文が表示

①ループ処理テンプレート

<?php
    if ( have_posts() ) : 

 ①投稿データがあるかの条件分岐。

    while ( have_posts() ) : 

 ②繰り返し処理開始

the_post(); 

 ③ループ処理に必要なカウント処理等          
            4.「ここに出力したい処理などを記述」

     ①の箇所に取得でした情報を出力する処理を記述          

   endwhile; 

  ⑤繰り返し処理ここまで。

   else : 

  ⑥投稿データがなければ
        ?><p>表示する記事がありません</p><?php

  ⑦ない時の処理
    endif; ?>

  ⑧条件分岐終了
?>

②処理したい内容 を ループ処理内部に入れる

single.php

<?php
    if ( have_posts() ) : 

 ①投稿データがあるかの条件分岐。

    while ( have_posts() ) : 

 ②繰り返し処理開始

the_post(); 

 ③ループ処理に必要なカウント処理等          
            4.「ここに出力したい処理などを記述」
 

            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

               投稿に対するIDを取得   ページごとにclassを付与
                 <h2 class="post__ttl">

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

                 投稿のパーマリンクを取得     投稿のタイトルを取得

                 </h2>
                 <ul class="post__meta">
         <li class="post__meta__item">
           <dte class="post__meta__date"><?php echo get_the_date(); ?>

                                    現在の投稿が書かれた日付を取得

                           </date>
         </li>
         <li class="post__meta__item">

           <i class="fa fa-folder" aria-hidden="true">                          

           <?php the_category( ', ' ); ?>

           現在の投稿が所属するカテゴリリンクを取得し表示

           </i>

         </li>
         <li class="post__meta__item">

           <i class="fa fa-tag" aria-hidden="true">

           <?php the_tags( '' ); ?>

           </i>

         </li>
                 </ul>
                 <?php the_post_thumbnail(); ?>

       投稿に紐付いているアイキャッチ画像を取得し、表示 
                 <?php the_content(); ?>

         投稿の本文を取得して表示
                 <?php $args = array (
                    'before' => '<div class="page-split">',
                    'after' => '</div>',
                     'link_before' => '<span>',
                     'link_after' => '</span>',
                     );
                    wp_link_pages( $args );
                 ?>

            </div>

   endwhile; 

  ⑤繰り返し処理ここまで。

   else : 

  ⑥投稿データがなければ
        ?><p>表示する記事がありません</p><?php

  ⑦ない時の処理
    endif; ?>

  ⑧条件分岐終了
?>

 

■各ページに適切なナビゲーションの生成

投稿またはページのコンテンツが複数のページに分割されている場合、それぞれのページに対して適切なナビゲーションを生成する

ナビゲーションは指定されたHTML要素で囲まれ、各ページのリンクはさらに指定されたHTML要素で囲まれる

 

 <?php $args = array (
                    'before' => '<div class="page-split">',
        ページ分割ナビゲーションの前  に 表示されるHTML要素
        この場合、<div class="page-split">が表示
                    'after' => '</div>',
        ページ分割ナビゲーションの後  に 表示されるHTML要素
        この場合、</div>が表示
                     'link_before' => '<span>',
        各ページのリンクの前  に 表示されるHTML要素
        この場合、<span>が表示
                     'link_after' => '</span>',
        各ページのリンクの後  に 表示されるHTML要素
        この場合、</span>が表示
                     );
                    wp_link_pages( $args );
       ページ分割ナビゲーションを生成
                 ?>
            </div>

 

■single.php のような個別投稿表示用テンプレートでは

「続きを読む」の記述は不要

例)index.php