Wordpress ホームページ作成

WordPressのテーマを自作する方法

2021-04-30

既存のテーマだと物足りないという場合、オリジナルのwordpressテーマを作成することができる。

ここではオリジナルテーマの作成を解説していく。


Contents

先にHTMLとCSSでページを作成する

まずはwordpress化の前に、HTMLとCSSでメインページだけでも作っておくと良い。

理由としては、先に作っておくことで、後からwordpressの機能を追加しておく時に、余計なHTML、CSSのデザインバグを考えることが少なくなるから。

もちろん先に作っても多少は出てくることはあるが、1からHTMLとCSSを書きながらwordpress機能を付け足していくよりは、順を追って作れていけるのではないかと思う。


HTMLサイトの見本例

今回wordpress化する前のHTMLサイトとして、下記のようなページを作成した。

https://shotaro-kamimura.github.io/minamiuonuma/#

wordpress化された自作テーマを使ったwordpressサイトはこちらになる。

https://localjapan.shotarokamimura.com/


まだHTMLサイトを用意してない場合は、1から書いていく。もしすでに自分のHTMLサイトがある場合は、今回の記事を参考にして、wordpress化を試して欲しい。


WordPress化するとはどういうことか

WordPressの機能を使うことができるサイトに変換するということ。

ブログ投稿をすることができるし、プラグインなどの機能も、既存のHTMLサイトでも使用することができる。

下記は一枚のHTMLサイトだが、

https://shotaro-kamimura.github.io/minamiuonuma/#


wordpress化すると、ブログの投稿記事がみれたり、ブログ記事が集まっているページの作成もできる。


https://localjapan.shotarokamimura.com/


今回つける機能

今回の例では、下記の機能をつけていきたい。

  • NEWS・お知らせ項目をつける(最新ニュースを更新できるようにする)
  • ブログ項目をつける(ブログとして更新できるようにする)
  • プラグイン機能を利用する
  • 固定ページを追加

今回は一枚のHTMLページを下記のような構造のwordpressサイトに変換していく。

https://localjapan.shotarokamimura.com/


自作テーマに必要なファイル

自作テーマを作成するにあたって、必ず準備しなければいけないファイルがある。

下記のファイルは、自作テーマで必要になる一覧のファイルになる。

特に、index.phpとstyle.css、functions.phpは無いとテーマとして認識されないので必ず必要になる。どこに格納すべきかは後ほど説明する。

  • functions.php...投稿表示数の変更、管理画面の権限の設定など、様々なオプションを記載できるファイル
  • style.css...テーマのデザイン
  • header.php...ヘッダー部分に表示されるファイル
  • footer.php...フッター部分に表示されるファイル
  • sidebar.phpサイドナビ部分に表示されるファイル
  • index.php...トップページ用ファイル
  • page.php...固定ページ用ファイル
  • single.php...投稿記事のデザイン
  • archive.php...アーカイブ(カテゴリ等)用ファイル
  • search.php...検索結果表示用ファイル
  • screenshot.png...テーマを選択する時の一覧時に表示される画像

今回の例に当たっては、下記のようになる。

https://localjapan.shotarokamimura.com/
  • index.php ... メインページ
  • archive.php ... ニュースの一覧ページ
  • archive-blog.php ... ブログの一覧ページ
  • page-contact.php ... お問い合わせページ
  • single.php ... ニュースの個別ページ
  • single-blog.php ... ブログの個別ページ


今回の手順

手順をまとめると下記のようになる。

  1. HTMLとCSSを用意
  2. ローカル環境でwordpressを作る準備をする
  3. TOPページの作成
  4. テーマの有効化
  5. テンプレートタグでパスを書き換え
  6. ニュース一覧ページ・個別ページを追加
  7. ブログ一覧ページ・個別ページを追加
  8. 固定ページ(お問い合わせページ)を追加


HTMLとCSSを用意

今回は、HTMLとCSSでウェブページがすでにできている前提とする。

サイトがない場合も、用意したphpファイルに1から書いていくというだけなので、方法としてはさほど変わらない。

今回は、事前に作っておいた下記のHTMLサイトをwordpress化していく。

https://shotaro-kamimura.github.io/minamiuonuma/#



ローカル環境の準備

ローカル環境の下準備を行う。

具体的には、

  • テキストエディタの準備
  • ローカル開発環境の準備(Local by flywheel や MAMPなど)
  • 新規テーマのフォルダの用意(新規テーマが有効化できるようになっているか)

ができていればOK。

テーマが認識されると、「外観>テーマ」で自作のテーマが反映される。


ローカル開発環境の準備、ファイルの用意、格納場所など、下記に詳細を記したのでぜひ参考に。


TOPページの作成

https://localjapan.shotarokamimura.com/


まずはTOPページを作成していく。


ヘッダーとフッターを切り分け

ここでは、ヘッダーとフッター部分をそれぞれ、header.phpとfooter.phpファイルに移し替える作業をする。


なぜわざわざ移し替えるのか?

wordpressではヘッダーとフッターを別々のファイルに入れておき、別ファイルで「インクルードタグ」と呼ばれるタグで呼び出すことができる。

  • ヘッダーの呼び出し:<php get_header() ;?>
  • フッターの呼び出し:<php get_footer() ;?>

がインクルードタグとなる。

上の図のように、メインページ、カテゴリーページなど、各ページにインクルードタグを使って、ヘッダーとフッターを呼び出す。

HTMLタグに必要なタグが、ファイルで分かれていることに注意。

header.phpの記述:

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
 </head>
 <body>
   <header></header>

footer.phpの記述:


   <footer></footer>
 </body>
</html>

となる。


header.phpの作成

header.phpにはHTMLファイルのヘッダーの部分を貼り付ける。

読み込んでいるcssファイルやjsファイルがあれば、その記述も一緒に入れてしまう。

HTMLの宣言から、headerの閉じタグまでをコピペする。

<!DOCTYPE html>
 <html>
 <head>
 </head>
<body>
<header>
</header>


footer.phpの作成

同じく、footer.phpにもHTMLファイルで作成したフッターの部分を貼り付ける。

<footer>
 <div class = "..."></div>
</footer>
</body>
</html>


残りのコンテンツパートはindex.phpへ

残りのコードを、index.phpへ移す。

ファイルを用意していない場合は、いよいよindex.phpに自分だけのオリジナルデザインをHTMLとCSSで作成していこう。



ヘッダーとフッターの読み込み

ヘッダーとフッター部分を、先ほど説明したインクルードタグを使い、index.phpにて読み込む。

  • ヘッダーの呼び出し:<php get_header() ;?>
  • フッターの呼び出し:<php get_footer() ;?>
<!-- header読み込み -->
<?php get_header(); ?>

<!-- メインコンテンツの部分 -->
<div class="..."></div>
<div class="..."></div>
<div class="..."></div>

<!-- footer読み込み -->
<?php get_footer(); ?>


テーマを有効化する

一通りファイルにコードをうつしたら、テーマを有効化して実際にサイトを確認する。

テーマが出てきていない場合は、こちらを参考に。


テンプレートタグでパスを書き換え

有効化すると、おそらくHTMLだけが表示されている画面が見えるはず。


これはHTMLサイトで繋いでいたCSSや画像ファイルのリンクが切れているため。

なので、wordpress用の「テンプレートタグ」と呼ばれるタグを使用し、リンクを繋いでいく。


テンプレートタグとは?

データを取得したいときや、何かを表示させたい時に使うタグ。

例を挙げると

  • 画像やファイルのアクセス:<?php bloginfo('template_url') ;?>
  • URLへのアクセス:<?php bloginfo('url') ;?>

などがある。


画像やファイルの取得

画像での書き方の場合をHTMLサイトとwordpressサイトで比較する。

<!-- HTMLサイトでの書き方 相対リンク -->
<img src="./photos/img1.jpg">

<!-- wordpressサイトでの書き方 テンプレートタグ -->
<img src="<?php bloginfo('template_url') ;?>/photos/img1.jpg">


ファイルでの書き方も同じ。

<!-- HTMLサイトでの書き方 相対リンク -->
<link rel="stylesheet" href="./style.css">

<!-- wordpressサイトでの書き方 テンプレートタグ -->
<link rel="stylesheet" href="<?php bloginfo('template_url') ;?>/style.css">

テンプレートタグの活用で、CSSファイル、画像ファイルなどが読み込まれるようになる。


メニューをテンプレートで書き換え

メニューのリンクもテンプレートタグを活用できる。

<?php bloginfo('url'); ?/>を使用することで、URLを取得してくれる。

<!-- modal menu  -->
  <div class="">
    <div class="">
      <ul class="">
        <li id="menu-close"><i class="fas fa-window-close"></i></li>
        <li><a href="<?php bloginfo('url');?>/">Top</a></li>
        <li><a href="<?php bloginfo('url');?>/news">News</a></li>
        <li><a href="<?php bloginfo('url');?>/blog">Blog</a></li>
        <li><a href="<?php bloginfo('url');?>/contact">Contact</a></li>
      </ul>
    </div>
  </div>
</header>


ニュース一覧を追加する

https://localjapan.shotarokamimura.com/

今度はニュース一覧を追加する。

wordpressによって、記事を更新していくことができる。

管理画面の投稿で作られたニュース一覧をウェブサイトに表示させる。


テンプレートタグを使用して記事を出力

ここでも先ほど説明した「テンプレートタグ」が登場する。

  • タイトルの取得:<?php the_title(); ?>
  • 時刻の表示:<?php the_time("Y.n.j") ; ?>

など、表示させたい情報に合わせてテンプレートタグを選び、HTMLコードに埋めていく。

また、複数記事を表示するために、foreachもしくはwhile文を用いる。

記事を出力させるために、今回は下記の内容をindex.php内に記述した。



      <?php
        $args = array(
          'posts_per_page' => 3 // 表示件数の指定
        );
        $posts = get_posts( $args );
        foreach ( $posts as $post ): // ループの開始
        setup_postdata( $post ); // 記事データの取得
      ?>
      <dl class="">
        <a href="<?php the_permalink(); ?>">
          <dt><?php the_time("Y.n.j"); ?></dt>
          <dd class="">
            <span><?php the_title(); ?></span>
          </dd>
        </a>
      </dl>
      <?php
        endforeach; // ループの終了
        wp_reset_postdata(); // 直前のクエリを復元する
      ?>
  

またはwhile文を使う場合は下記のような形でもOK。

<ul>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
   <li>
    <a href="<?php the_parmalink() ;?>">
      <div class="date"><?php the_date(); ?></div>
      <div class="title"><?php the_title(); ?></div>
    </a>
  </li>
<?php endwhile; ?>
<?php endif; ?>
</ul>


すると下記のように表示される。

この例ではCSSをすでにつけているが、最初はCSSも自分で作る必要がある。


archive.phpでニュース一覧ページを作る

https://localjapan.shotarokamimura.com/


トップページは3件だけニュースを表示させたが、アーカイブページというものを作ることで、全てのニュースが一覧で表示されるページを作ることができる。

まずはarchive.phpを作り、自作テーマのフォルダ内に格納する。

その中で先程のようにwhile文またはforeach文を使って記事を出力する手順となる。


function.phpに記載

アーカイブページを作成するためには、function.phpにも記述が必要になる。

$args['has_archive'] = 'news';にすることで、 /newsのURLでアーカイブページを見ることができる。

function.phpの更新をした後は、設定>パーマリンク設定から、パーマリンクの更新を忘れないようにする。

<?php

//デフォルトのアーカイブページ準備
function post_has_archive($args, $post_type){ //パーマリンクの更新必要
  if('post' == $post_type){
    $args['rewrite'] = true;
    $args['has_archive'] = 'news';//デフォルトもアーカイブを作れるようにする
    $args['label'] = 'news';  //管理画面の名前変更
  }
  return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10,2);



//各アーカイブページで何件表示させるか?
function column_posts($query){
  if(is_admin() ||!$query->is_main_query()){
    return;
  }

//デフォルト投稿ページの表示件数
    if($query->is_archive()){
      $query->set('posts_per_page','5');
      return;
    }
}
add_action('pre_get_posts', 'column_posts');

?>

その他、何件投稿を表示させるかといった設定もfunction.phpで行うことができる。


ページャーをつける

プラグインのwp-pagenaviを使うことでページャーをつけることができる。

ページナビを付けたい部分に、下記のコードを記述する。

  <div class="">
      <?php if(function_exists('wp_pagenavi')): ?>
      <?php wp_pagenavi(); ?>
      <?php else: ?>
      <?php endif; ?>
    </div>


するとページナビができる。


single.phpでnews項目のシングルページを作成

https://localjapan.shotarokamimura.com/


次に、各ニュースの個別ページを作成していく。

まずはsingle.phpを用意し、自作テーマのフォルダに保存する。

ここで使うテンプレートタグは下記のようなものがある。

  • <? php the_post_thumbnail(); ?>...サムネイル画像(メイン画像)を取得
  • <? php the_title(); ?>...タイトルを取得する。
  • <? php the_content(); ?>...各記事の本文を取り出す。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
 <div class="">
   <?php if(has_post_thumbnail() ): ?>
   <?php the_post_thumbnail(array(1400, 800));  ?>
   <?php else: ?>
     <img src="<?php bloginfo('template_url') ?>/photos/noimage.png" alt="No Image"/>
   <?php endif; ?>
 </div>
 <div class="">
   <div class="">
     <h1><?php the_title(); ?></h1>
   </div>
 </div>
</div>
<div class= "">
 <div class="">
   <?php the_content(); ?>
 </div>
<?php endwhile; endif; ?>

すると、各個別ページを下記のように見せることができる。


ブログ一覧を追加する

https://localjapan.shotarokamimura.com/

次はブログ一覧をトップページに追加する。

手順はnews項目で行なったことと似ているが、ブログを更新できるようにするために今回は、「カスタム投稿タイプ」という、もう一つの投稿タイプを作成する。


カスタム投稿タイプとは?

メインの投稿とは別で、投稿したい項目がある時に使用することができる。

例えば今回であれば、メインの投稿画面は、ニュースの更新のために使われる。

しかしブログを更新したい時には、メインの投稿画面を使用することができない。

したがって、もう一つ投稿画面を作成することで、ブログとニュースを別々に更新していくことができる。



function.phpにカスタム投稿タイプの追加

まず初めにfunction.phpから加えていく。

function.phpに下記のコードを加える。

//カスタム投稿作成の定義
function new_post_type(){
 register_post_type(
     'blog', //投稿タイプ名
     array(
         'label'=> 'blog', //ラベル名
         'labels' => array(
             'menu_name' => 'blog' //管理画面のメニュー名
             ),
         'description'=> 'ディスクリプション',
         'public' => true, //公開状態
         'query_var' => true, // スラッグでURLをリクエストできる
         'hierarchical' => false, //固定ページのように親ページを指定するならtrue
         'rewrite' => array('slug' => 'blog'), //スラッグ名
         'supports' => array(
             'title',
             'editor',
             'custom-fields',
             'thumbnail',
             'page-attributes',
             'excerpt'
         ),
       'has_archive' => true,
     )
   );

register_taxonomy(
    'blogcat', //タクソノミ名
    'blog', //タクソノミを使う投稿タイプ名
    array(
        'rewrite' => array('slug' => 'blog'), //投稿タイプのスラッグ
        'label' => 'blogカテゴリー', //ラベル名
        'labels' => array(
            'menu_name' => 'カテゴリー' //管理画面のメニュー名
        ),
        'public' => true, //公開状態
        'hierarchical' => true, //カテゴリのように扱う場合はtrue
        'has_archive' => true,
        'query_var' => true,
        'show_admin_column' => true, //投稿タイプのテーブルにタクソノミーのカラムを生成
    )
  );
 }
add_action('init', 'new_post_type');


すると管理画面で、新しく投稿ページが作成される。


function.phpで表示件数を設定

news項目で行ったように、ブログ項目も、トップページに何件ブログを表示させるかを、function.phpに記述する。

今回デフォルトと違う部分として、is_archive()ではなく、is_post_type_archive('〇〇')を使用する。

//各アーカイブページで何件表示させるか?
function column_posts($query){
  if(is_admin() ||!$query->is_main_query()){
    return;
  }

//デフォルトページの表示件数
    if($query->is_archive()){
      $query->set('posts_per_page','5');
      return;
    }

//ブログ一覧ページの表示件数(今回の追加部分)
  if($query->is_post_type_archive('blog')){
    $query->set('posts_per_page','3');
    return;
  }

}
add_action('pre_get_posts', 'column_posts');


トップページにてブログ投稿を表示

次に、index.phpにて、ブログの内容を表示させる。

ブログはカスタム投稿タイプで投稿しているため、通常とは異なるリクエストをする必要がある。

<!-- blog項目-->
<div class = "">
  <div class ="">
    <div class="">
    <div class = "">blog</div>

  <!-- カスタム投稿のリクエスト-->
    <?php
      $args = array(
        'post_type' => 'blog', // 投稿タイプのスラッグを指定
        'post_status' => 'publish', // 公開済の投稿を指定
        'posts_per_page' => 3 // 投稿件数の指定
      );
      $the_query = new WP_Query($args); if($the_query->have_posts()):
    ?>

   <!-- カスタム投稿の出力-->
      <ul>
        <?php while ($the_query->have_posts()): $the_query->the_post(); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <div class="">
              <?php if(has_post_thumbnail()){ ?> 
                  <?php the_post_thumbnail('medium'); ?>
              <?php } else { ?>
                <img src="<?php bloginfo('template_url'); ?>/photos/noimage.png" width="300px">
              <?php } ?>
            </div>
            <div class="">
              <div class=""><?php echo get_the_title(); ?></div>
              <div class=""><?php the_content() ;?></div>
            </div>
          </a>
        </li>
        <?php endwhile; ?>
      </ul>
    <?php wp_reset_postdata(); ?>
    <?php else: ?>
    <!-- 投稿が無い場合の処理 -->
    <?php endif; ?>
    </div>
    <div class="">
    <a href="<?php bloginfo('url');?>/blog" class="">Blog</a>
    </div>
  </div>
</div>


カスタム投稿タイプの出力リクエスト

今回は、デフォルトの投稿タイプではなく、カスタム投稿タイプを使った投稿の出力をするため、カスタム投稿タイプ出力のためのリクエストをする必要がある。

下記の記述で、blogの投稿タイプの情報を取得するようリクエストを作成している。

<?php
  $args = array(
    'post_type' => 'blog', // 投稿タイプのスラッグを指定
    'post_status' => 'publish', // 公開済の投稿を指定
    'posts_per_page' => 3 // 投稿件数の指定
  );
  $the_query = new WP_Query($args); if($the_query->have_posts()):
?>


archive-blog.phpでブログ一覧ページを作る

https://localjapan.shotarokamimura.com/


ニュース一覧ページと同じく、blogでも、一覧ページを作成する。

異なるアーカイブページを用意することで、異なるデザインの一覧ページを作成することができる。

archive-blog.phpのファイルを用意して自作テーマのフォルダに移動。

ここでも必要なテンプレートタグを埋め込んでいく。

  • <? php the_post_thumbnail(); ?>...サムネイル画像(メイン画像)を取得
  • <? php the_title(); ?>...タイトルを取得する。
  • <? php the_content(); ?>...各記事の本文を取り出す。
<?php get_header() ;?>

<!-- blog項目-->
<div class = "">
  <div class ="">
    <div class="">
    <div class = "">blog</div>
      <ul class = "">
        <?php if(have_posts()):while(have_posts()): the_post(); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <div class="">
              <?php if(has_post_thumbnail()){ ?>
                  <?php the_post_thumbnail('medium'); ?>
              <?php } else { ?>
                <img src="<?php bloginfo('template_url'); ?>/photos/noimage.png" width="300px">
              <?php } ?>
            </div>
            <div class="">
              <div class=""><?php echo get_the_title(); ?></div>
              <div class=""><?php the content(); ?></div>
            </div>
          </a>
        </li>
        <?php endwhile; ?>
      </ul>
    <!-- 投稿が無い場合の処理 -->
    <?php endif; ?>
    </div>
    <div class="">
      <?php if(function_exists('wp_pagenavi')): ?>
      <?php wp_pagenavi(); ?>
      <?php wp_reset_postdata(); ?>
      <?php else: ?>
      <?php endif; ?>
    </div>
  </div>
</div>


<?php get_footer() ;?>


function.phpへの記述

アーカイブページを作成するためには、news項目の時と同じく、function.phpにも記述が必要。

//各アーカイブページで何件表示させるか?
function column_posts($query){
  if(is_admin() ||!$query->is_main_query()){
    return;
  }

//デフォルトページの表示件数(通常投稿)
    if($query->is_archive()){
      $query->set('posts_per_page','5');
      return;
    }

//ブログ一覧ページの表示件数
  if($query->is_post_type_archive('blog')){
    $query->set('posts_per_page','3');
    return;
  }

}
add_action('pre_get_posts', 'column_posts');

single-blog.phpでblog項目のシングルページを作成

https://localjapan.shotarokamimura.com/


single-blog.phpを用意し、blogの個別ページを用意する。

必要なテンプレートタグを使って情報を取得する。

<?php get_header() ;?>
    <div class="">
      <div class="">
        <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <div class="">
          <?php if(has_post_thumbnail() ): ?>
          <?php the_post_thumbnail(array(1400, 800));  ?>
          <?php else: ?>
            <img src="<?php bloginfo('template_url') ?>/photos/noimage.png" alt="No Image" width="750px"/>
          <?php endif; ?>
        </div>
          <div class="">
            <h1><?php the_title(); ?></h1>
          </div>
      </div>
      <div class= "">
        <div class="">
          <?php the_content(); ?>
        </div>
        <?php endwhile; endif; ?>
      </div>
    </div>
 
<?php get_footer() ;?>


固定ページを追加する(お問い合わせページを追加)

https://localjapan.shotarokamimura.com/


更新をしていくnewsページやブログと違い、一つのページとして固定ページを作成する。

ここではお問い合わせページを作成していく。


ファイルの用意

まずはpage-contact.phpを用意し、自作テーマのフォルダに保管する。

お問い合わせのフォームを作るコードを入れる。または「Contact form7」というプラグインを使ってもOK。


固定ページでページを作成

その後、contactページを作成する。

URLスラッグはcontactにするように確認。

すると作った固定ページにお問い合わせのフォームができていることが分かる。


参考になる動画

下記の動画二つはとても参考になっておすすめ。


まとめ

以上、下記の手順で、HTMLサイトからwordpressサイトへ移行した。

  1. HTMLとCSSを用意
  2. ローカル環境でwordpressを作る準備をする
  3. TOPページの作成
  4. テーマの有効化
  5. テンプレートタグでパスを書き換え
  6. ニュース一覧ページ・個別ページを追加
  7. ブログ一覧ページ・個別ページを追加
  8. 固定ページ(お問い合わせページ)を追加

-Wordpress, ホームページ作成