2018-09-07

WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。

Wordpress

f:id:hollywis:20180906182928p:plain

こんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。

アーカイブ表示とは？
アーカイブページは「archive.php」を作れば良い
カスタム投稿タイプにも一覧機能をつけたい
WP_Queryでカスタム投稿を取り出す！

アーカイブ表示とは？

そもそも、アーカイブ機能とは何でしょうか？投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。

でも、実は重要です。

アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。

例えば通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。

カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。

f:id:hollywis:20180906151436p:plain

カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい！なんて要望もあると思います。

例えば通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。

アーカイブページは「archive.php」を作れば良い

それではアーカイブページを作っていきます。

と言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。

WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。

まずは、いつもの基本的な記述で作ってみましょう。

archive.php

<?php get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h1 class="entry-title"><?php the_title() ?></h1>
       <div>
         <?php the_content(); ?>
      </div>
  </article>
  <hr/>
    <?php endwhile; ?>

<?php get_footer(); ?>

そうすると、先ほどのように表示されるテンプレートができました。

f:id:hollywis:20180906151436p:plain

ただし、これはアーカイブ特有のタグが埋め込まれていない状態ですので、ここから更にアーカイブ特有のタグを埋め込んでいきます。

アーカイブ特有の機能は次の通りです。

アーカイブページのタイトル：何の括りで一覧化しているかを示すタイトルをつけます
個別投稿ページへのリンク：記事ページへのリンクをタイトルに付ける
記事の抜粋：本文を全文出すのではなく、140文字など適当な文字数のみにする。
ページング：複数の記事が該当した際にページングさせ、前の一覧や次の一覧へのリンクを付ける

アーカイブページのタイトル

次のように条件分岐を利用して、タイトルを表示させると良いです。

<?php if( is_category() ) : ?>
  echo 'カテゴリー：' . single_cat_title('',false) . 'の投稿一覧';
<?php elseif( is_tag() ): ?>
  echo 'タグ：'. single_tag_title('',false) . 'の投稿一覧';
<?php elseif( is_day() ): ?>
  echo get_the_date('Y年m月d日') . 'の投稿一覧';
<?php elseif( is_month() ): ?>
  echo get_the_date('Y年m月') . 'の投稿一覧';
<?php elseif( is_year() ): ?>
  echo get_the_date('Y年') . 'の投稿一覧';
<?php endif; ?>

カテゴリのアーカイブタイトルを表示する場合はsingle_cat_title()

タグのアーカイブタイトルを表示する場合はsingle_tag_title()

日付けのアーカイブタイトルを表示する場合はget_the_date(

を使用します。

個別投稿ページへのリンク

h1タグの中身をリンクに書き換えます。

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

記事の抜粋

記事の抜粋を表示するにはthe_excerpt()を利用します。

<?php the_content(); ?>と記述して全文表示してしまっているところを、<?php the_excerpt(); ?>に置き換えます。

なお、アーカイブ表示でサムネイルを表示させるにはthe_post_thumbnail();を使えば表示できるのですが、テーマがサムネイルに対応している必要があります。

対応させるにはfunction.phpにadd_theme_support( 'post-thumbnails' );を追記します。

ページング

複数の記事が該当した際にページングさせるには、投稿ナビゲーションthe_posts_pagination()を使います。

投稿ナビゲーションは配列形式で次のようなパラメータを取ります。

mid_size：現在のページの左右にそれぞれ表示するページ番号の数。初期値は1
prev_text：前のページへ遷移するためのリンクに使われる文字列。初期値は「前へ」
next_text：次のページへ遷移するためのリンクに使われる文字列。初期値は「次へ」
screen_reader_text：読み上げ用のテキスト。初期値は「投稿ナビゲーション」

使用例はこちら。screen_reader_textは表示されないように半角スペースを入れました。

<?php the_posts_pagination( array(
    'mid_size' => 1,
    'prev_text' => '前へ',
    'next_text' => '次へ',
    'screen_reader_text' => ' '
) ); ?>

f:id:hollywis:20180906161529p:plain

カスタム投稿タイプにも一覧機能をつけたい

これまでは、通常の投稿の際のやり方でした。しかし、カスタム投稿タイプは別の方法が必要になります。

「archive-{slug}.php」のファイルを作れば良いだけかな？と思ってやってみると上手くいきません。

通常の投稿タイプの一覧が表示されてしまいます。

試しにslugが「blog」の場合の「archive-blog.php」でやってみます。

実際に作って確認してみましょう。今までの機能を全部乗せしたバージョンを作成していきます。

archive-blog.php

<?php get_header(); ?>

<h1>カスタム投稿タイプblogの、<?php 
if( is_category() ) :
  echo 'カテゴリー：' . single_cat_title('',false) . 'の投稿一覧';
elseif( is_tag() ):
  echo 'タグ：'. single_tag_title('',false) . 'の投稿一覧';
elseif( is_day() ):
  echo get_the_date('Y年m月d日') . 'の投稿一覧';
elseif( is_month() ):
  echo et_the_date('Y年m月') . 'の投稿一覧';
elseif( is_year() ):
  echo et_the_date('Y年') . 'の投稿一覧';
endif; 
?></h1>

<?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
       <div>
         <?php the_excerpt(); ?>
      </div>
  </article>
  <hr/>
    <?php endwhile; ?>

<?php the_posts_pagination( array(
    'mid_size' => 1,
    'prev_text' => '前へ',
    'next_text' => '次へ',
    'screen_reader_text' => ' '
) ); ?>


<?php get_footer(); ?>

WP_Queryでカスタム投稿を取り出す！

上記コードのWordPressループの部分を変更して、カスタム投稿タイプの記事のみ取得するようにカスタマイズします。

<?php get_header(); ?>

<h1>カスタム投稿タイプblogの一覧<?php 
if( is_category() ) :
  echo 'カテゴリー：' . single_cat_title('',false) . 'の投稿一覧';
elseif( is_tag() ):
  echo 'タグ：'. single_tag_title('',false) . 'の投稿一覧';
elseif( is_day() ):
  echo get_the_date('Y年m月d日') . 'の投稿一覧';
elseif( is_month() ):
  echo et_the_date('Y年m月') . 'の投稿一覧';
elseif( is_year() ):
  echo et_the_date('Y年') . 'の投稿一覧';
endif; 
?></h1>

<?php 
$args = array('post_type' => 'blog');
$query = new WP_Query($args);

while ( $query->have_posts() ) : $query->the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
       <div>
         <?php the_excerpt(); ?>
      </div>
  </article>
  <hr/>
    <?php endwhile; ?>

<?php the_posts_pagination( array(
  'mid_size' => 1,
  'prev_text' => '前へ',
  'next_text' => '次へ',
  'screen_reader_text' => ' '
) ); ?>


<?php get_footer(); ?>

説明：WordPressループの前にWP_Query()を利用して、カスタム投稿タイプ「blog」の投稿を取得してきます。

そして、それを$queryに入れて、そこから表示しています。

このあたりわからない場合にはこちらの記事を見るといいですよ。

hollywis.hatenablog.com

そして、URLにサイトタイトルの後に「?post_tyle=blog」というパラメータを渡してやると表示されます。 http://localhost:8888/localtest/?post_type=blog

f:id:hollywis:20180906180327p:plain

なお、この一覧ページはナビメニューを表示させて、設定することもできます。

外観設定からメニューを作って、そこにblogの一覧を設定します。 f:id:hollywis:20180906180621p:plain

また、合わせてheader.phpの任意の場所にナビメニューを表示する次のコードを挿入します。

<div class="access">
  <?php wp_nav_menu(); ?>
</div>

上記の表示例の左上にメニュー[blogs一覧]が表示されているかと思います。 f:id:hollywis:20180906180327p:plain

以上です。

これでカスタム投稿タイプ別に自由に一覧ページを作成することができますね！

次回はCSS フレームワークを利用して、この一覧ページのデザインを綺麗に整えていきたいと思います。

2018-09-06

個別投稿ページで利用できるテンプレートタグまとめ

Wordpress

f:id:hollywis:20180905111421j:plain

日付系タグ
- echoを使ったやり方
カテゴリーの表示タグ
タグの表示
著者の表示
前後の記事へのリンクを表示する
ページ分割した記事を表示する

日付系タグ

the_date() ：公開日時を表示。一覧の場合は最初の１記事しか表示されない。
the_modified_date()：更新日時を表示
the_time()：一覧表示で日付を表示する場合はこちらを利用

<?php the_time('Y/m/d'); ?>や

<?php the_time('Y年m月d日'); ?>のように日付タグは()中にフォーマットを指定することができます。

echoを使ったやり方

<?php echo get_the_date(); ?>

このようにechoを使ってgetメソッドで取得した値を表示させる方法もあります。

利点としては、the_date() と違い何度も利用できます。

カテゴリーの表示タグ

the_category()：カテゴリーの表示

利用例：<?php the_category(); ?>

初期表示ではリストになります。(「ねこ」と「いぬ」カテゴリに属している例)

<ul class="post-categories">
    <li><a href="http://localhost:8888/localtest/?cat=2" rel="category">ねこ</a></li>
    <li><a href="http://localhost:8888/localtest/?cat=1" rel="category">いぬ</a></li>
</ul>

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

このように()内に複数のカテゴリに属していた場合の区切り文字を指定できます。

また、get_the_category()を使うことで次の情報を取得できます

term_id：カテゴリーID
name：カテゴリー名
slug：カテゴリースラッグ
description：カテゴリーの説明
parent：親カテゴリーID
count：そのカテゴリの投稿数

利用例はこちら

<?php
    $cat = get_the_category();
    if(isset($cat[0])){
            $cat = $cat[0];
            echo( '<a href="?cat=' . $cat->term_id . '">'. $cat->name .' </a>');
    }
?>

タグの表示

the_tags()：タグをリンク付きで表示する

利用例：<?php the_tags(); ?>

また、get_the_tags()を使うことで次の情報を取得できます

term_id：タグID
name：タグ名
slug：タグのスラッグ
description：タグの説明
count：そのタグの投稿数

利用例はこちら

<?php
    $tag = get_the_tags();
    if(isset($tag[0])){
          $tag = $tag[0];
          echo( '<a href="/?tag=' . $tag->slug . '">'. $tag->name .' </a>');
    }
?>

著者の表示

the_author()：著者を表示する

利用例：<?php the_author(); ?>

前後の記事へのリンクを表示する

previous_post_link()：前の記事のリンクを表示
next_post_link()：次の記事へのリンクを表示

利用例：<?php previous_post_link(); ?>

利用例：<?php next_post_link(); ?>

こんな感じでHTMLタグで挟む方法もあります。

<?php previous_post_link('<li class="nav-prev">%link</li>'); ?>
<?php next_post_link('<li class="nav-next">%link</li>'); ?>

ページ分割した記事を表示する

wp_link_pages()：ページ分割された記事のページングを表示

WordPressでは長い記事の場合には、「続きを表示する」などの表記を入れてそれ以降の表示を短縮することができます。

記事の編集画面で本文中にを入れると、その箇所で記事をページ分割することができます。この分割された記事のページングを表示するためにwp_link_pages()を利用します。

このタグはループ内で使用する必要があります。

利用例：

<?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h1 class="entry-title"><?php the_title() ?></h1>
       <div>
         <?php the_content(); ?>
      </div>
      <?php wp_link_pages(); ?>
  </article>
<?php endwhile; ?>

以上です。

次回はアーカイブページを作成します。

2018-09-05

WordPressテーマの投稿ページのテンプレートを作成する

Wordpress

f:id:hollywis:20180904205359p:plain

こんにちは、前回は固定ページのテンプレートを作成しました。

hollywis.hatenablog.com

今回、第11回目は投稿ページのテンプレートを作成していきます。

投稿ページのテーマの作成方法
投稿ページのデザインの使い分ける方法
カスタム投稿タイプを作る
カスタム投稿タイプ用のテンプレートを作成する

投稿ページのテーマの作成方法

投稿ページはWordPressで定期的な記事の投稿時に利用する機能です。ブログ機能とも言えますが、投稿タイプを増やすことで様々な投稿に対応しています。

今回はこの投稿ページのテンプレートの作成方法をご紹介します。

投稿ページのテンプレートを作成することで、その他のページと独立して自由にデザインを設定することができます。

テンプレートファイル名は予め決まっており「single.php」になります。

もしテーマの中にsingle.phpがある場合、投稿ページを表示する際の挙動が、index.phpよりもsingle.phpの方が表示優先度が高くなります。

この仕組みを利用して、投稿ページのテンプレートを作ります。

それでは実際に書いて見ましょう。「single.php」というファイル名でテーマ直下に新規作成し、次のようにコードを記載します。

single.php

    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?>：single.phpによる投稿ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>

固定ページとほぼ一緒です。実は、その他にヘッダーやフッター、サイドバー、などの表示も一緒です。

詳しくはこちらを参照ください。

hollywis.hatenablog.com

投稿ページのデザインの使い分ける方法

このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。しかし、例えば別の投稿タイプの時にデザインを変えたい場合はどうすればいいのでしょうか。 (例：ブログ、プレスリリースなど)

そこで、WordPressでは固定ページと同様に投稿ページ毎にデザインを変える方法が２つ用意されています。

ページ毎に違うidやclassを自動的に埋め込む
投稿タイプ毎にページテンプレートを作る

投稿ページのテンプレート階層は次の通りです。

f:id:hollywis:20180904210800p:plain

このように、投稿タイプ(post_type)毎にテンプレートを作ることができます。

それでは試しに、作成しましょう。

カスタム投稿タイプを作る

カスタム投稿タイプを作る一番簡単な方法は、プラグイン「Custom Post Type Ui」を入れることです。

ja.wordpress.org

プラグインの新規追加画面から「Custom Post Type Ui」で検索してインストールし有効化します。 f:id:hollywis:20180904211416p:plain

次に、管理画面に「CPT UI」という項目ができているので、そこから「投稿タイプの追加と編集」を押します。

今回はカスタム投稿タイプ「blog」と増やしたいと思います。

f:id:hollywis:20180904211857p:plain

このように入力して、「投稿タイプと追加」ボタンを押して登録完了です。

管理画面のメニューに「投稿」の他に「blog」のメニューが追加されているかと思います。ここから記事を追加することができます。

カスタム投稿タイプ用のテンプレートを作成する

カスタム投稿タイプ「blog」ができたので、これに対応するテンプレートを作成します。

ファイル名は「single-blog.php」です。内容は次のようにします。

single-blog.php

    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?>：single-blog.phpによる投稿ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>

そして、試しにblogの記事を１つ書いて、表示させてみます。 f:id:hollywis:20180904212854p:plain

このような感じで、投稿タイプ毎にテンプレートを設定することができました。

本日は以上です。次回は、個別ページで利用できるテンプレートタグをいくつか紹介します。

2018-09-04

WordPressテーマの固定ページのテンプレートを作成する

Wordpress

f:id:hollywis:20180904203602p:plain

こんにちは、今回はWordPressのテーマの固定ページを作成またはカスタマイズする方法を紹介します。

前回はコンテンツん出し方でWordPressループについて触れました。今回は第９回目、前回の実践編という位置付けです。

hollywis.hatenablog.com

固定ページのテーマの作成方法
共通のヘッダーやフッターを付ける
共通のサイドバーを付ける
固定ページのデザインの使い分け
固定ページ用のページ毎に違うidやclassを自動的に埋め込む
固定ページテンプレートを複数作る

固定ページのテーマの作成方法

固定ページはWordPressで定期的な記事の投稿ではなく、トップページや会社概要などの静的情報を表示したい時に利用する機能です。

この固定ページのテーマの作成方法をご紹介します。

まず、固定ページのテンプレートファイルを作成することで実現します。

ファイル名は予め決まっており「page.php」になります。

もしテーマの中にpage.phpがある場合、固定ページを表示する際の挙動が、index.phpよりもpage.phpの方が表示優先度が高くなります。

この仕組みを利用して、固定ページのテンプレートを作ります。

それでは実際に書いて見ましょう。

page.php

    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?>：page.phpによる固定ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>

このようにWordPressループを利用して書くだけですね。 page.phpであることが判別できるようにh1タグの中に「：page.phpによる固定ページ」という文を入れています。

index.phpに固定ページの際の挙動を書く際には、次のようにif文で条件分岐させていましたが

<?php elseif(is_page()) : ?><!-- 固定ページの時 -->
<?php endif; ?>

page.phpは固定ページを開いた時のみ表示されるためifによる条件分岐は省略することができます。

この状態で固定ページを表示するとこのようになります。

f:id:hollywis:20180904152639p:plain

共通のヘッダーやフッターを付ける

上記コードでは、ヘッターやフッターがありませんので、付けてみたいと思います。

page.php

<?php get_header(); ?>
<div id="primary" class="main">
    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?>：page.phpによる固定ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
</div>
<hr/>
<?php get_footer(); ?>

header.phpよ呼び出すコード<?php get_header(); ?>と

footer.phpを呼び出すコード<?php get_footer(); ?>を書くだけです。

表示例はこちら

f:id:hollywis:20180904154441p:plain

共通のサイドバーを付ける

あまり付けることは無いと思いますが、サイドバーを付ける場合はこんな感じです。

page.php

<?php get_header(); ?>
    <div id="primary" class="main">
        
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          
        </div>
        <?php get_sidebar(); ?>
     </div>
  </div>
<?php get_footer(); ?>

サイドバー文のレイアウトと作るdivタグなどを用意して、<?php get_sidebar(); ?>でsidebar.phpを書けば良いです。

固定ページのデザインの使い分け

このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。

しかし、このままでは固定ページを複数作った際に(例：会社概要ページ、事業内容紹介ページ、商品紹介のランディングページなど)、ページ毎にデザインを変えることができないかと思います。

そこで、WordPressでは固定ページ毎にデザインを変える方法が２つ用意されています。

ページ毎に違うidやclassを自動的に埋め込む
固定ページテンプレートを複数作る

１つ目の手法は、HTMLは極力変えずに構造は残したまま、CSSのみでデザインを整える場合。 ２つ目の手法は、HTMLも変えて丸っ切り別のページにする場合です。

「会社概要ページ」と「事業内容紹介ページ」は手法１の同じHTMLで作成し、「商品紹介のランディングページ」は手法２の丸っ切り作るなど、合わせ技を使う方法も良くあるかと思います。

固定ページ用のページ毎に違うidやclassを自動的に埋め込む

最初の状態のページにidやclassを付加させていきたいと思います。

page.php

    <?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h1><?php the_title() ?>：page.phpによる固定ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
  </article>
    <?php endwhile; ?>

id="post-<?php the_ID(); ?>"で記事のIDを表示してarticleタグのidとして利用しています
<?php post_class(); ?>で自動的に規定のclassを設定しています。

idは何となくわかると思いますが、実際にclassは何が付くのでしょうか。 chromeの開発者ツールで確認してみたいと思います。

f:id:hollywis:20180904161059p:plain

この固定ページのIDは2なのですが、classは次のようなものが付きました。

post-2
page
type-page
status-publish
hentry

記事毎にデザインを変えたい場合には「post-2」のようなidまたはclassを利用し、固定ページ全般に設定したい場合には「page」や「type-page」を利用し、記事ステータス毎に変えたい場合には「status-publish」を使っていけば良いかと思います。

また最後の「hentry」ですが実はこれはかなり厄介で、このclassを書いたならばしなくてはいけないことがあるようです。

http://kishinoko.lovepop.jp/web/hentry.html

microformatsと言う規格で「hentry」タグについて規定されており、このタグを書く場合には併せて次の情報も必要になります。

entry-title ：（記事のタイトル：必須項目）
updated：（記事の更新日：必須項目）
author：（記事の著者：必須項目）

これをしないとGoogleの検索エンジンにページ内のエラーとして検出されてしまうようです。適切に作られていないWordPressのテーマなんかには多いみたいです。そのため、次のように該当箇所に上記classを割り当てる必要があります。

page.php

    <?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h1 class="entry-title"><?php the_title() ?>：page.phpによる固定ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
      <p>更新日:<?php the_modified_date('Y/m/d') ?></p>
      <p class="author" style="display:none;">hollywis</p>
  </article>
<?php endwhile; ?>

更新日は<?php the_modified_date('Y/m/d') ?>で取得できます。

また、表示させたく無い場合にはstyle="display:none;"で非表示にさせてしまえば良いかと思います。

固定ページテンプレートを複数作る

次の、HTML構造も新しく作り直したい場合に移りたいと思います。

この場合は、別のファイルを作成するのですが命名規則に２つの選択肢があり、次の通りです。

page-{ID}.php
page-{slug}.php

そのほか、カスタムテンプレートを作る方法もありますが、ここでは割愛します。

slug（スラッグ）というのは、個別ページや固定ページの識別子のことで、主にURLの一部として利用されます。管理画面では「表示オプション」から「スラッグ」にチェックを入れると確認することができます。

f:id:hollywis:20180904163505p:plain

なお、表示の優先順位はIDの方が高いため、どちらもある場合にはIDの方が表示されます。

f:id:hollywis:20180904202530p:plain

このように固定ページのテンプレート表示順は、カスタムテンプレート、page-{ID}.php、page-{slug}.php、index.phpとなります。

それでは試しに、スラッグでのページ作成を行ってみます。ファイルを新規作成し、スラッグ名が「sample-page」のテンプレート「page-sample-page.php」を作ります。

コードは少し改変して次の通りです。

    <?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
       <h1 class="entry-title"><?php the_title() ?>：page-sample-page.phpによる固定ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
      <p>更新日:<?php the_modified_date('Y/m/d') ?></p>
      <p class="author" style="display:none;">hollywis</p>
  </article>
<?php endwhile; ?>

そして該当のページを開くと

f:id:hollywis:20180904193015p:plain

この通り表示されました。

以上で、固定ページの表示を終わります。次回は個別ページのテンプレートを作成していきます。

2018-08-30

WordPressループってなんぞや？コンテンツ表示に欠かせないお話

Wordpress

f:id:hollywis:20180830172637j:plain

こんにちは、のすけです。

大学で非常勤講師などをやらせていただいているのですが

その繋がりで大学時代の教授との縁が復活するなど、世間は狭いなと思う今日この頃です。

本日はWordPressカスタマイズの第８団「WordPressループってなんぞや？」です。

WordPressループとは？
どこでWordPressループは使われているの？
なぜループが必要なの？
WordPressループを使ってwp_queryからデータを取り出す方法
- the_post()とは
追加WP_QUERYについて

ちなみに、前回はWordPressで利用すつタグを紹介しました。これだけは覚えよう！WordPressテンプレートタグ！ - hollywis's diary (はりうすブログ)

WordPressループとは？

僕自身はRuby on RailsやNode.jsでプログラムを書くことが多いのですが

そんな、Web畑出身の人が何これ？と思うのがWordPressループではないでしょうか。

何かと言いますと、端的に言うと、コンテンツを表示する時にwhile文を書いて、その中で記事情報を取得し表示までする仕組みのようです。

ちょっと良くわからないですよね。普通にコンテンツを取ってきて表示すればいいじゃ。。。と思ってしまう。なぜわざわざループさせているのか。しかもwhileの無限ループを使うなんてバグが出そうな怖い技を使って。。。

そんなにwhile文なんて使いませんからね。組み込み系のプログラム(Arduinoとか)じゃあるまいし。と思ってしまいます。

どこでWordPressループは使われているの？

まず、利用例を紹介します。

以前、書いたindex.phpとstyle.cssだけで作る最小のテーマを例にします。 hollywis.hatenablog.com

詳しくは↑を見てください。

この中で、index.phpにメインページの時、投稿ページの時、固定ページの時のコンテンツの出しわけを行っている部分があります。

<?php if(is_home()) : ?><!--メインページの時 -->
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article class="entry">
      <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <div class="entry-body">
          <?php the_content(); ?>
      </div>
    </article>
<?php endwhile; endif; ?>
<?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
  <?php while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title() ?></h1>
    <div>
      <?php the_content(); ?>
    </div>
<?php endwhile; ?>
<?php elseif(is_page()) : ?><!-- 固定ページの時 -->
    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?></h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
<?php endif; ?>

その中で、それぞれのif文の中に while ( have_posts() )からendwhile;の記述があるかと思います。

ここがWordPressループ。ループの中ではリンクURLを取得するthe_permalink()や、ページのタイトルthe_title()、本文を取得するthe_content()を呼び出しています。

特にthe_content()はWordPressループの中でしか機能しません。while文の外で実行するとエラーになります。

なぜループが必要なの？

（ここに呼び出しの図をいずれいれたい）

WordPressはページのリクエストを受け付けると、URLからメインページなのか、投稿ぺージなのか固定ページなのかなどを判断します。そして、記事の情報をデータベースから取得して、該当するテンプレートファイルを読み込みます。

このデータベースからデータを読み込む際に、記事の情報は$wp_queryという変数に格納されます。しかし、この状態では表示できる状態にはありません。なぜならなんと、$wp_queryは配列みたいな形式らしいのです。(厳密には配列ではない)

そのため、$wp_queryから記事を順に取り出して表示する方式が取られます。

投稿ページや固定ページでは、もちろんそのページ１ページ分の情報しか$wp_queryに格納されていないため、実際にはWordPressループであるwhile文は1回しか回りません。しかし、メインページなど記事の一覧を表示する際には、投稿されている記事の数だけ$wp_queryに格納されている訳ですから何度もループが周り、コンテンツが表示されるという事です。

お気づきになったかと思いますが、一覧ページでは実際にはタイトルや記事の最初の数文字程度の配列が取得できればいいとしても、全ての本文を取得しているという事です。

もし、その１記事１記事の本文の内容が多い場合には、膨大なデータをデータベースから取得して、それを表示する訳ですから、一覧ページのレスポンスは遅くなる設計になっているのではと邪推してしまいます。この辺り汎用性を求めたがうえのWordPressのざっくり設計が気になってしまったりしますね。

もしかしたら上手い事やっている可能性はありますが。

ともあれ、この仕組みの事をWordPressループと呼んでいるようです。

WordPressループを使ってwp_queryからデータを取り出す方法

<?php if(is_home()) : ?><!--メインページの時 -->
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article class="entry">
      <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <div class="entry-body">
          <?php the_content(); ?>
      </div>
    </article>
<?php endwhile; endif; ?>

上記例にあるように、have_posts()関数、the_post();を使います。その上のif文はページの判別なので今は無視してください。

まず、 if ( have_posts() )で表示するコンテンツ内容があるか確認します。 if ( have_posts() )はwp_queryの中身を見に行っているんですね。

そして、もしhave_posts() がブール値でtrueであれば、while文に突入します。このときwhileの発動条件がまたしてもhave_posts()です。そして、have_posts()ループの中で利用できるthe_post()を呼び出しています。

the_post()とは

それではWordPress Cedexを確認してみましょう。

ループを次の投稿へ進めます。次の投稿を取得して、それを「現在の投稿」としてセットアップし、ループの 'in the loop' プロパティを true にします。

参考：「現在の投稿」はループの中で the_title() や the_content() 等が対象とする投稿です。

by WordPress Cedex

つまり、wp_queryから順番に投稿を取り出しているのがthe_post()という訳ですね。すると、the_title()やthe_content()などの内容が取り出している投稿のものに変更されるという事です。だから、whileループ中で、タイトルthe_title()や本文the_content()を呼び出すだけで、順々に投稿が表示されます。

なるほど納得ですね。

WordPressループはこれでもう怖くありません。

追加WP_QUERYについて

$wp_queryはクエリ形式でWP_QUERYという関数を使ってデータを取り出せます。

そして、取り出す為に独自のクエリが用意されています。利用できるクエリはこちらを確認ください。

つまり、個別投稿ページでは自動的にこのクエリを利用してWP_QUERYから投稿を１個に絞り、その結果を$wp_queryに格納している。固定ページではWP_QUERYから固定ページを1個に絞り、その結果を$wp_queryに格納している。メインページでは、例えば最近の５記事などを取得するクエリをWP_QUERYで取得し、その結果を$wp_queryに格納しているという訳ですね。

また、自動的に取ってくるだけでなく、ページ中に任意に以下のように記述するとこで、WP_QUERYから直接記事を取得する方法があります。

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<li>' . get_the_title() . '</li>';
    }
    echo '</ul>';
    /* Restore original Post Data */
    wp_reset_postdata();
} else {
    // no posts found
}

こんな感じで$argsにクエリを記述して$the_queryに取得結果を格納する事で、have_posts()の記述を$the_query->have_posts()に変えるだけで、いつも通り自在に記事情報を取得できたりします。

便利ですね。

次回は最小テーマを拡張して、固定ページpage.phpを作っていきたいと思います。

ではまた。

2018-08-28

これだけは覚えよう！WordPressテンプレートタグ！

Wordpress

f:id:hollywis:20180905100813j:plain

こんにちは

前回は、Wprdpressテーマを一般的なheader.php、sidebar.php、footer.php、index.phpに分割して構造化しました。

hollywis.hatenablog.com

この中でphpファイルの記述中にいくつかテンプレートタグを利用してきましたので、そのテンプレートタグを深堀していきたいと思います。

なお、最小のテンプレートを作る際に利用したコードが次のような感じでした。

ファイル：index.php

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード：UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">
        <!-- このあたりから上の行をheader.phpに切り出すのが一般的 -->
        <div id="primary" class="main">
            メイン部分
          <?php if(is_home()) : ?><!--メインページの時 -->
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
          <?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
            <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php elseif(is_page()) : ?><!-- 固定ページの時 -->
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php endif; ?>
          
        </div>
        <aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>
        </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <footer class="site-footer">
    フッターをここに記述
  </footer>
  <?php wp_footer(); ?><!--footerの追加コード -->
</body>
</html>

今回は、テンプレートの中で利用できるテンプレートタグをいくつか紹介します。

一般的なテンプレートタグ

まず基本となる記事中に利用できるテンプレートタグを羅列します。

blogingo()：ブログの基本情報を表示する
the_title()：投稿タイトルを表示する
the_content()：投稿内容を表示する
the_date()：投稿の日時を表示する
wp_list_categories()：カテゴリーの一覧を表示する

特にthe_title()とthe_content()については、WordPressループの中で利用するものになります。

インクルードタグ

別ファイルに書き出して、それを共通パーツとして利用するインクルードタグを紹介紹介します。

get_header()：ヘッダーテンプレートの読み込み
get_footer()：フッターテンプレートの読み込み
get_sidebar()：サイドバーテンプレートの読み込み
get_template_part()：その他のテンプレートの読み込み

get_header()はheader.phpをget_footer()はfooter.phpを呼び出します。

get_sidebar()はsidebar.phpを、get_template_part()は指定したテンプレートを読み込みます。

get_template_part() 利用例：

予めテーマに {$slug}.php ファイルを用意しておく必要があります。

<?php get_template_part( $slug ); ?>

条件分岐タグ

if文などで利用すると便利な条件分岐タグです。特定のページの際の処理を書き込む時に利用します。

is_front_page()：フロントページが表示されている時にTrueになります。
is_home()：ブログのメインページが表示されている時にTrueになります。
is_single()：個別投稿ページが表示されている時にTrueになります。なお、固定ページは含みません。
is_category()：カテゴリーのアーカイブページが表示されている時にTrueになります。

そのほか、Wordpressの関数はこちらにありますので、一読ください。

2018-08-27

自作Wordpressのテーマモジュールを分割する

Wordpress

f:id:hollywis:20180905101223j:plain

こんにちは

前回はWordpressテーマの構造を理解するために最小のテーマを作りました。このテーマはページをすべてindex.phpに詰め込んでわずか３ファイルで作られています。

hollywis.hatenablog.com

今回は、このindex.phpを機能毎に分割してより構造的なテンプレートに変えたいと思います。

前回のindex.phpはこちら

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード：UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">
        <!-- このあたりから上の行をheader.phpに切り出すのが一般的 -->
        <div id="primary" class="main">
            メイン部分
          <?php if(is_home()) : ?><!--メインページの時 -->
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
          <?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
            <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php elseif(is_page()) : ?><!-- 固定ページの時 -->
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php endif; ?>
          
        </div>
        <aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>
        </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <footer class="site-footer">
    フッターをここに記述
  </footer>
  <?php wp_footer(); ?><!--footerの追加コード -->
</body>
</html>

このファイルを分割します。

Wordpressテーマの分割仕方にはセオリーがあります。ヘッダーやフッター、サイドバーなどサイト全体に共通する部分をモジュールとして分割します。このような共通する部分はテンプレートファイルではなく、モジュールテンプレートファイルとして分割して読み込むようにしておくと便利です。

テンプレートファイルを分割する

ヘッダーやフッター、サイドバーはWordPressであらかじめこれらを読み込むための命令文が用意されておりファイル名も決められています。

ファイル名は次の通りです。

header.php - ヘッダー
foorer.php - フッター
sidebar.php - サイドバー

また、それぞれ読み込むための命令文は次の通りです。

header.php - get_header()
fooder.php - get_footer()
sidebar.php - get_sidebar()

header.php

コンテンツが表示される直前までを全て丸っとheader.phpに切り出しました。

このheader.phpを読み込めばmeta設定や、ナビゲーション、サイトタイトルなどがサクッと設定できる想定です。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード：UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">

index.php

コンテンツ部分をindex.phpとして切り出しました。

後々、投稿ページsingle.phpや固定ページpage.phpなども、この部分を置き換える形で利用する想定です。

　　　<?php get_header(); ?>
            <!-- このあたりから上の行をheader.phpに切り出すのが一般的 --> 
        <div id="primary" class="main">
            メイン部分
          <?php if(is_home()) : ?><!--メインページの時 -->
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
          <?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
            <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php elseif(is_page()) : ?><!-- 固定ページの時 -->
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php endif; ?>
          
        </div>
        <?php get_sidebar(); ?>
     </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <?php get_footer(); ?>

sidebar.php

サイドバーのタグをそのまま切り出しています。

<aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>

footer.php

タグから下を丸っと切り出しています。

  <footer class="site-footer">
    フッターをここに記述
  </footer>
  <?php wp_footer(); ?><!--footerの追加コード -->
</body>
</html>

このように4つのファイルに分割しました。それぞれ、index.phpの上側を<?php get_header(); ?>に置き換え、 index.phpの<?php get_footer(); ?>に置き換え、 index.phpのサイドバー部分を<?php get_sidebar(); ?>で置き換えています。

wp_head()とwp_footer()について

header.phpにはwp_head()が、footer.phpにはwp_footer()が記述されているかと思います。これは、WordPressのプラグインがこのタグを利用して、様々なコードを出力します。この記述がないとプラグインが正常に稼働しなくなりますので、忘れずに記述しましょう。

wp_head()記述例

<?php wp_head(); ?>

wp_footer()記述例

<?php wp_footer(); ?>