[最新版]ワードプレス(WordPress)テーマを自作する際のテンプレートの作り方

ちなみにこの記事は連載モノです。前回は、phpファイルを分割してレイアウトの共通化の仕方を記事にしました。
なんじゃそりゃって方はちょっと見てみる？↓

[clink url=”https://www.namalog.org/wordpress-mytheme-3/”]

今回は、Wordpressの醍醐味ともいえる投稿ページのphpファイルと、固定ページのphpファイルを作っていこうと思います。

前回までのおさらい

前回まででは、Wordpressテーマを自作するにあたって必須であるWordpressのローカル環境構築から、サイト内の至る所で表示されるメニューバーなどを別のphpファイルに分割するところまでを記事にしました。

何度も紹介していますが、今シリーズでWordpressテーマにするのはこちらのサイトレイアウトです。

ローカル環境構築はやっておきましょう

また、Wordpressテーマを自作する以外にも、様々な動作確認を行う上でローカル環境構築は必須に近いので、まだローカル環境構築がすんでいない場合は以下の記事でやっておくことをお勧めします。

[clink url=”https://www.namalog.org/wordpress-local”]

では、早速続きをやっていきましょう！！

今までphpファイルと言ってきたけど…

実際の作業に入る前に今回もちょっとした知識を紹介しておきますね。

これまでの記事では、サイトのレイアウトをコードで書いてあるphpファイルを、ただ単に「サイトレイアウトのphpファイル」「サイトレイアウト」「phpファイル」などと呼んできました。

ですが実は、これらにはれっきとした名前があり、「テンプレート」と呼ばれています。

新単語ですが難しいことはなく、「～のレイアウト」という意味でとらえて構いません。
前回も話したようにWordpressはphpファイル(テンプレート)の中身を別のphpファイル(テンプレート)に呼び出すことができます。

同じレイアウトをいちいちコードを打たずに呼び出せるため、テンプレ化されている、といった意味合いでテンプレートと呼ばれているだけです。

具体的に言うと、一番初めに作ったindex.phpは基本のテンプレート、header.phpはヘッダーのテンプレート、footer.phpはフッターのテンプレート、と言った具合です。

これでテンプレートの話は何となく理解できたでしょうか。
以後はこのシリーズでも基本的にテンプレートという言葉を使っていくので、覚えておくとよいかもしれません。

では早速ですが、固定ページの”テンプレート”を作っていきたいと思います。

固定ページをつくろう

固定ページのテンプレートは、基本的にindex.phpの内容を流用することが多いです。

index.phpをコピぺし、page.phpに名前を変更してください。この内容を編集して固定ページのテンプレートにします。

今回は、メニューバーとフッターの間に固定ページの内容が表示されるだけのシンプルな固定ページにします。

よって、コードエディタでpage.phpを開き、スライダーなどの部分はごそっと消してしまいましょう。

<?php get_header(); ?>
<!-- 上記でヘッダーを読み込み -->  
    <!-- content -->
      <div id="content-wrap" class="container">
        <div class="row">
          <div id="main" class="col-12">
               「この中身も空欄に(後程入力)」
          </div>
        </div>
      </div>
    
    <!-- connect -->
    <div class="container-fluid padding">
      <div class="row text-center padding">
        <div class="col-12">
          <h2>Connect</h2>
        </div>
        <div class="col-12 social padding">
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-facebook"></i></a>
          <a href="#"><i class="fab fa-google-plus-g"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
    </div>
    <div class="container-fluid padding">
      <div class="row text-center padding">
        
      </div>
    </div>
   <!-- 下記でフッターを読み込み -->
<?php get_footer(); ?>

固定ページ内にコンテンツ表示用のコードを入れよう

上記だけでは、作成したコンテンツを表示することができません。

固定ページの内容を表示するコードを打ち込みます。

今回はシンプルにただコンテンツを表示するだけですが、HTMLの知識があれば好みの幅、大きさで表示することができます。

page.phpを開き、下記のコードをコンテンツを表示したい場所に入力しましょう。

■先ほど空欄にした中に以下のコードを入力
                <?php 
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                ?>
                    <h1><?php the_title(); ?></h1>
                    <section>
                      <?php the_content(); ?>
                    </section>
                <?php 
                    endwhile;
                endif;
                ?>

これで固定ページとして作成したコンテンツを表示できるようになりました。

固定ページを表示してみよう

では早速固定ページを作って表示してみましょう。
こんな感じでテキトーなページを作り、公開して表示してみます。

しっかりと作成した内容が表示されていることが分かりますね。

2回に分けてコードの説明をしたため、参考までに今回作成した固定ページのコードを全部書いておきます。

<?php get_header(); ?>
<!-- 上記でヘッダーを読み込み -->  
    <!-- content -->
      <div id="content-wrap" class="container">
        <div class="row">
          <div id="main" class="col-12">
                <?php 
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                ?>
                    <h1><?php the_title(); ?></h1>
                    <section>
                      <?php the_content(); ?>
                    </section>
                <?php 
                    endwhile;
                endif;
                ?>
          </div>
        </div>
      </div>
    
    <!-- connect -->
    <div class="container-fluid padding">
      <div class="row text-center padding">
        <div class="col-12">
          <h2>Connect</h2>
        </div>
        <div class="col-12 social padding">
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-facebook"></i></a>
          <a href="#"><i class="fab fa-google-plus-g"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
    </div>
    <div class="container-fluid padding">
      <div class="row text-center padding">
        
      </div>
    </div>
   <!-- 下記でフッターを読み込み -->
<?php get_footer(); ?>

投稿ページをつくろう

投稿ページのテンプレートは、基本的にpage.phpの内容を流用することが多いです。

page.phpをコピぺし、single.phpに名前を変更してください。この内容を編集して投稿ページのテンプレートにします。

投稿ページの内容を編集しよう

投稿ページのテンプレートですが、普通は固定ページのテンプレートと同じで大丈夫です。

ただ、今回は本当に投稿ページのテンプレートが使えているのかを調べるために、固定ページのテンプレートに少し手を加えてみましょう。

single.phpを開き、以下のコードをコンテンツ表示のタイトルとコンテンツの真ん中に入力してみましょう。

 <?php 
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                ?>
                    <h1><?php the_title(); ?></h1>
<!-- 以下の一行を入力 -->
                      <h2>これは記事のページ(single.php)です</h2>
                    <section>
                      <?php the_content(); ?>
                    </section>
                <?php 
                    endwhile;
                endif;
                ?>

投稿ページを表示してみよう

では早速投稿ページを作って表示してみましょう。
こんな感じでテキトーなページを作り、公開して表示してみます。

しっかりと作成した内容が表示されていることが分かりますね。

参考までに今回作成した投稿ページのコードを全部書いておきます。

<?php get_header(); ?>
<!-- 上記でヘッダーを読み込み -->  
    <!-- content -->
      <div id="content-wrap" class="container">
        <div class="row">
          <div id="main" class="col-12">
                <?php 
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                ?>
                    <h1><?php the_title(); ?></h1>
                      <h2>これは記事のページ(single.php)です</h2>
                    <section>
                      <?php the_content(); ?>
                    </section>
                <?php 
                    endwhile;
                endif;
                ?>
          </div>
        </div>
      </div>
    
    <!-- connect -->
    <div class="container-fluid padding">
      <div class="row text-center padding">
        <div class="col-12">
          <h2>Connect</h2>
        </div>
        <div class="col-12 social padding">
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-facebook"></i></a>
          <a href="#"><i class="fab fa-google-plus-g"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
    </div>
    <div class="container-fluid padding">
      <div class="row text-center padding">
        
      </div>
    </div>
   <!-- 下記でフッターを読み込み -->
<?php get_footer(); ?><?php get_header(); ?>
<!-- 上記でヘッダーを読み込み -->  
    <!-- content -->
      <div id="content-wrap" class="container">
        <div class="row">
          <div id="main" class="col-12">
                <?php 
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                ?>
                    <h1><?php the_title(); ?></h1>
                      <h2>これは記事のページ(single.php)です</h2>
                    <section>
                      <?php the_content(); ?>
                    </section>
                <?php 
                    endwhile;
                endif;
                ?>
          </div>
        </div>
      </div>
    
    <!-- connect -->
    <div class="container-fluid padding">
      <div class="row text-center padding">
        <div class="col-12">
          <h2>Connect</h2>
        </div>
        <div class="col-12 social padding">
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-facebook"></i></a>
          <a href="#"><i class="fab fa-google-plus-g"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
    </div>
    <div class="container-fluid padding">
      <div class="row text-center padding">
        
      </div>
    </div>
   <!-- 下記でフッターを読み込み -->
<?php get_footer(); ?>

まとめと次回予告

さて、今回は固定ページと投稿ページのテンプレートを作成しました。
これにてWordpressテーマの基本的な部分は作成できましたね。

しかし気付いた方もいると思いますが、このテーマはまだ完成ではありません。

実は、画面上部のメニューバーをWordpressのダッシュボードから編集できなかったり。。

投稿ページを作っても投稿ページをまとめて表示するページやリンクが無いためサイトから直接投稿ページを見られなかったり。。

ウィジェットに関してもまだ何もないので、作っていく必要があります。

次回以降ではこういった部分を作成していこうと思います。

では～

続きの記事ができました！ぜひ見てくださいね！