はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

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

f:id:hollywis:20180830172637j:plain

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

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

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

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

ちなみに、前回は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から記事を順に取り出して表示する方式が取られます。

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

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

もし、その1記事1記事の本文の内容が多い場合には、膨大なデータをデータベースから取得して、それを表示する訳ですから、一覧ページのレスポンスは遅くなる設計になっているのではと邪推してしまいます。この辺り汎用性を求めたがうえの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から投稿を1個に絞り、その結果を$wp_queryに格納している。 固定ページではWP_QUERYから固定ページを1個に絞り、その結果を$wp_queryに格納している。メインページでは、例えば最近の5記事などを取得するクエリを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を作っていきたいと思います。

ではまた。

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

f:id:hollywis:20180905100813j:plain

こんにちは

前回は、Wprdpressテーマを一般的なheader.phpsidebar.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の関数はこちら にありますので、一読ください。

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

f:id:hollywis:20180905101223j:plain

こんにちは

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

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

コンテンツが表示される直前までを全て丸っと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(); ?>

【超入門】最小構成のWordpressテーマを作る

f:id:hollywis:20180821023904p:plain

のすけです。

前回はWordpressテーマの構成について触れました。

hollywis.hatenablog.com

今回はWordpressテーマを作っていきたいと思います。 それも最小の。

レイアウトを決める

まず実現したいレイアウトを決めます。 今回は最小構成ということでHTMLはこんな感じにします。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード:UTF-8指定 -->
  <title>サイトのタイトル</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
</head>
<body>

  <header class="site-header">
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">
        <!-- このあたりから上の行をheader.phpに切り出すのが一般的 -->
        <div id="primary" class="main">
            メイン部分
          <article class="entry">
            <h2 class="entry-head">タイトル</h2>
            <div class="entry-body">
              <p>本文</p>
            </div>
          </article>
          <article class="entry">
            <h2 class="entry-head">タイトル</h2>
            <div class="entry-body">
              <p>本文</p>
            </div>
          </article></div>
        <aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>
        </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <footer class="site-footer">
    フッターをここに記述
  </footer>
</body>
</html>

これをphp化していきます。

最小のテーマ構成 ファイル準備

必要なのはこの2つです。

そして、一応テーマのサムネイル画像も用意しましょう

  • screenshot.png

HTMLでは、header.phpやfooter.phpにも触れていますが 今回は、最小テンプレートということで、全部index.phpに入れてしまいます。

分割は、必要なタイミングで順次やっていくほうが構成を覚えられて良いと思います。 既存のテーマを見て分かるかと思いますが、ファイルが多すぎて何が何やら把握するのが 難しいです。一度テーマを作ったことのある人なら問題ないのでしょうが、初心者には厳しいかと思います。 そこで、最小のテンプレートを作っていき、これをどんどん肉付けしていくことで構造を把握する形を取ります。

それでは作成していきましょう。

まず、ディレクトリを作成して、3つのファイルを配置していきます。

テーマ名は[anotherskyにしました]

f:id:hollywis:20180817160020p:plain

「index.php」と「style.csss」は最初は空で大丈夫です。

「screenshot.png」は「横880px・縦660px」の適当な画像を用意しましょう。

f:id:hollywis:20180817160135p:plain

index.phpにHTMLを記述する

上記HTMLをindex.phpとして保存して配置します。

style.cssを記述する

次のように記載していきます。cssの記載はざっくりレイアウトのみ記載しました。

/*
Theme Name: AnotherSky
Theme URI: http://hollywis.hatenablog.com/
Author: hollywis
Author URI: http://hollywis.hatenablog.com/
Description: AnotherSkyは最小限のWordpressテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*--------------------------------------------------------------
 Layout
--------------------------------------------------------------*/
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.site-header {
    height: 100px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.container{
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.site-footer{
    height: 100px;
}

.wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    padding-left: 2em;
    padding-right: 2em;
}

.wrap:after {
    clear: both;
    content: "";
    display: block;
}

#primary {
    float: left;
    width: 58%;
    border-right: 1px solid rgba(0,0,0,0.2);
}

#scecondary {
    float: right;
    padding-top: 0;
    width: 36%;
}

テーマを有効にしてみる

管理画面の[外観]-[テーマ]から作成したテーマを有効にします。

f:id:hollywis:20180821011753p:plain

するとテーマが反映されて、index.phpが表示されます。 f:id:hollywis:20180821012432p:plain

上からヘッダー、メイン部分、サイドバー、フッターと表示されているかと思います。

ただし、これではサイトタイトルやWordpressに投稿した記事は反映されていない静的なHTMLになってしまっています。 そこで、Wordpressのコードを「index.php」に埋め込んでいきます。

index.phpWordpressのコードを入れる

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>

bloginfo('name');はブログの名前を取得 wp_title(' | ', true, 'right');はタイトルを取得して右に|を追加

また表示内容をif~elseifの条件分岐で出し分けています。

  • is_home()メインページの時の表示の記述
  • is_single()投稿ページの時の表示の記述
  • is_page()固定ページの時の表示の記述をしています。

関数の意味はWordpressCodex日本語版にて確認してください。

この出し分けは、それぞれ「front-page.php」、「single.php」、「page.php」に切り出すことで明示的に条件分岐を書かなくても良くなりますが、今回はindex.phpに詰め込みました。


■メインページを表示した時

f:id:hollywis:20180821024254p:plain


■投稿ページを表示した時

f:id:hollywis:20180821024250p:plain


■固定ページを表示した時

f:id:hollywis:20180821024244p:plain

これで、最小のテーマの完成です。

画像の表示がないなどまだまだ実用に耐えないテーマではありますが、 テーマの構成が分かりやすく、学習しやすいものになったのではないでしょうか。

続く

WordpressのデバッグモードをONにする

Wordpressをカスタマイズする際に、デバッグしたいですよね。

そんな時は、エラーを画面に表示するようにデバッグモードをONにしましょう。

設定ファイルはwp-config.php

次のように設定しましょう。

define('WP_DEBUG', true);

デバッグモードをOFFにしたい場合は、次のようにします。

define('WP_DEBUG', false);

ログに出力する

ログに出力したい場合には、さらに次のようにします。

define('WP_DEBUG', true); //デバッグモードON
if (WP_DEBUG) { //デバッグモードONの場合
  define('WP_DEBUG_LOG', true); //debug.logファイルに保存
  define('WP_DEBUG_DISPLAY', false); //画面に表示しない
}

上記のように設定した場合、wp-contentフォルダに「debug.log」というファイルができて そこにエラーが記録されていくようになります。

テーマを作る - テーマを構成するファイル群

Wordpressの凄い点は、まるで着せ替えのようにデザインを変える事ができる事です。

これをテーマと呼びます。

テーマのインストール画面

管理画面から、初期インストールの「twentyfifteen」「twentysixteen」「twentyseventeen」を選ぶこともできますし、世界中のデザイナーがデザインしたテーマを探して来て、インストールする事ができます。

f:id:hollywis:20180816155541p:plain

テーマを新規に入れる事ができる画面

個別のテーマのディレクトリの位置とファイル構成

f:id:hollywis:20180816155756p:plain

「wo-content/themes/」の以下にテーマ毎のディレクトリがあり、その下にテーマファイル群が配置されています。

テーマは既存のものを入れることもできますが、もちろん自作することも可能です。

テーマに必要なファイルは次の通りです。

  • index.php メインテンプレート

  • style.css テーマのcss

最低限、この2つがあればテーマは作成できます。

さらに、より高機能にしたい場合には

  • function.php 関数ファイル

  • search.php 検索ページ

  • 404.php 404ページ

  • 画像ファイル

など様々に追加できます。

なお、参考までに「twentyseventeen」のテーマファイル群は次の通りです。

f:id:hollywis:20180816160336p:plain

ページのパーツ毎に切り出されてそれぞphpファイルになっているのが分かるかと思います。 ちなみにphpとはhtmlにプログラム機能を付加した凄いやつです。 1つのphpファイルには「html」と「phpプログラム」の両方が記載されています。

それぞれのファイルの意味は次の通りです。(すでに紹介したもの以外)

  • header.php ヘッダー部分

  • footer.php フッター部分

  • sidebar.php サイドバー部分

  • archive.phpアーカイブページ

  • comments.php コメント欄

  • front-page.php フロントページ

  • page.php 固定ページ

  • single.php 投稿ページ

  • image.php 画像を入れた時の部分

  • searchform.php 検索ボックス

  • README.txt テーマの説明

  • rtl.css アラビア語ヘブライ語のように右から左へ記述する言語用のcss

  • screenshot.png テーマのサムネイル画像

  • assets 画像、CSSJavascript

  • template-parts 再利用可能なテンプレート群

  • inc テーマ固有の追加コード群

といった感じです。

案外シンプルな構成になっています。 では、次回からテーマを実際に作っていきたいと思います。

続く

Wordpressをローカルテスト環境にインストール

まず、MySQLに新しいDBを追加します。

追加をするためには、MySQLにアクセスしてDBを新しく追加します。 mysqlコマンドを利用する方法もありますが、ここでは便利なアプリを利用します。

MAMPではphpMyAdminが自動インストールされるので、そちらからDBを追加するのも良いかと思います。 f:id:hollywis:20180814145043p:plain

オススメはMacの場合は『Sequel Pro』です。 https://www.sequelpro.com/ 

f:id:hollywis:20180814145358p:plain

Windowsでは『MySQL Workbench』がオススメです。 https://dev.mysql.com/downloads/workbench/

phpMyAdminだとUIが分かりにくいので、専用のアプリを入れることをオススメします。

ここからは『Sequel Pro』を使って説明していきます。

f:id:hollywis:20180814144830p:plain

データベースを追加から進みます。

f:id:hollywis:20180814144820p:plain データベースの名前を任意に設定します。 文字コードは日本語を使う場合、『utf8mb4』を選びます。 UTF8は寿司ビール問題など問題があるため、utf8mb4を選んでおきましょう。

※のすけは以前AWS環境でMySQLを利用している際に文字コードを『utf8』にしてしまい。日本語が文字化けるという問題が発生し、DBを再作成しレプリケーションしなくてはいけない事があり大変でした。ここは忘れずに『utf8mb4』にしましょう。

f:id:hollywis:20180814144825p:plain DBを作成したら、接続します。 ホスト名、パスワードを入力して接続します。 (MAMPを利用している場合には、Welcome画面にMySQL接続設定が書かれています) f:id:hollywis:20180814140540p:plain

次にWordpressのインストールです。 Wordpressは最新版を利用することが肝心です。なぜなら、世界中で利用されておりセキュリティパッチの更新も頻繁なため 最新版ではないとセキュリティ的に脆弱になってしまう懸念があるからです。

こちらから入手はこちらから https://ja.wordpress.org/download/

ダウンロードしたら、MAMPの環境にインストールしていきます。

f:id:hollywis:20180814132419p:plain

解答したwordpressの中身をドキュメントルートのhtdocsの下にコピーして 任意の名前にリネームします。(画像ではlocaltestにしました)

そして、ブラウザでアクセスします。 f:id:hollywis:20180815145316p:plain URLはMAMPのURLの[MAMP]という部分をリネームしたフォルダ名にします。 「http://localhost:8888/ここにフォルダの名前/」 画像では次の通りです。

http://localhost:8888/localtest/

Wordpressのインストール画面ができてたら正解です。

次に画面を進めてインストール作業を行なっていきます。

f:id:hollywis:20180815145700p:plain 途中で出て来るDBの設定は、先ほど作成したMySQLのDBの設定値を入力していきます。 テーブル接頭辞は[wp_]で良いでしょう。

f:id:hollywis:20180815145704p:plain 接続に成功すれば、インストール実行を押します。

f:id:hollywis:20180815150054p:plain ここで、サイトのタイトルやユーザ名を入力します。 重要な点として、実際にインターネットのサーバ上にwordpressをインストールする場合には ユーザ名にはrootやadminなど分かりやすいものは利用しないことです。 固有のユーザ名を利用しましょう。adminなどを利用してしまうと容易に推測できてしまうので 攻撃されやすくなります。 ※MAMPにインストールする場合は問題ありません。

f:id:hollywis:20180815150525p:plain ログイン画面からログインすることで管理画面に行くことができます。

f:id:hollywis:20180815150630p:plain また、ルートアドレスに移動するとWordpressのトップ画面が表示できました。

http://localhost:8888/localtest

今回はここまで。 以上Wordpressのインストールでした。

ではまた。