WordPressのテーマの作り方

今回はWordPressでオリジナルテーマを作る方法を解説します。
意外と簡単ですよ！

テーマディレクトリの場所

テーマファイルは下記にフォルダ毎に格納されています。
wp-content/themes

ここにオリジナルテーマのディレクトリを設置してファイルを格納します。

テーマのテンプレートファイル

WordPressのテーマが動作するためには「どのページでどのテンプレートファイルを読み込むか」を理解しておく必要があります。
主なテンプレートファイルは下記の通りです。

index.php	汎用的なページを出力　※必須
style.css	テーマファイルを定義　※必須
functions.php	関数定義
header.php	サイトのヘッダー部分
footer.php	サイトのフッター部分
single.php	投稿ページを出力
post.php	固定ページを出力
archive.php	一覧ページを出力
404.php	404エラー（Not Found）時の動作を定義
javascript.js	テーマ全体で使うJavaScript

以下、一つずつファイルを解説します。

index.php

WordPressはテンプレートファイルの優先順位があります。

例えば、投稿ページを出力するのに「single.php」が無ければ「index.php」が使われます。

ページを出力するのに最低限必要な内容を記載しておきます。

<?php
get_header();
?>
<div id="content">
<?php
while ( have_posts() ):
the_post();
the_title( '<h1 class="entry-title">', '</h1>' ); 
?>
<div class="entry-content">
<?php the_content();?>
</div>
</article>
<?php endwhile;?>
</div>
<?php
get_footer();

style.css

下記のコードを書いて「テンプレート名」のところを適宜変更すると、WordPressの管理画面でテーマを選択する画面に表示されるようになります。

/*!
Theme Name: テンプレート名
Description:  original theme
Version: 1.0.0
*/

使いたいWEBフォントを読み込む場所はheader.phpでも良いのですが、デザイナーにcssだけ触らせれば良いようにしておくならstyle.cssの冒頭に記載しておくと良いです。

Googleフォントも日本語フォントが充実してきましたね！

@import url("https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDPGothic:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");

functions.php

テーマ全体で使う関数を定義しておくファイルです。

個人的にはjsやcssのバージョン情報の付与を削除して、その代わりにタイムスタンプを付与する関数を定義しておくのがオススメです。

jsやcssを変更した際、キャッシュから読まれずにサーバからの読み込みがかかります。

//ver情報の削除
function remove_cssjs_ver( $src ) {
  if ( strpos( $src, '?ver=' ) ) {
    $src = remove_query_arg( 'ver', $src );

    /*cssとjsにタイプスタンプを自動付与してキャッシュ対策*/
    if ( strpos( $src, home_url() ) !== false ) {
      $resource_path = str_replace( home_url( '/' ), ABSPATH, $src );
      $src .= '?' . date( 'YmdHis', filemtime( $resource_path ) );
    }
  }
  return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 999 );

header.php

サイトのヘッダー部分を出力するファイルです。

htmlで言うところの<body>タグまでは書いておくと良いです。

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Google Tag Manager のコードがあればここに記載-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
</header>

footer.php

サイトのフッター部分を出力するファイルです。

</body>タグ以降を記載しておきます。

<?php wp_footer(); ?>
<footer>
</footer>
</body></html>

single.php

投稿ページを出力します。

ページの内容だけでなく、ページネーションの出力コードを記載しておきましょう。

post.php

固定ページを出力します。

こちらはページネーションの記載は不要ですね。

archive.php

カテゴリーやタグの一覧ページを出力します。

それぞれを別のファイルにしたいなら

category.php
tag.php

それぞれに分けて記載します。

ページネーションの出力も必要です。

404.php

ページが存在しない場合、404エラーのときに出力する内容を記載します。

でっかく「404」と表示するのも良いですが、TOPページにリダイレクトさせるのもアリです。

<?php
wp_safe_redirect( home_url(), 301 );
exit;
?>

javascript.js

テーマ全体で使うJavaScriptを記載します。

ページ内リンクをシュッとスクロールさせるコードなどがオススメです

$('a[href^="#"]').click(function () {
let speed = 100;
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top ;
$('body,html').animate({
scrollTop: position
}, speed, 'swing');
return false;
});

おまけ

こういうページでテーマテンプレート一式を生成してダウンロードすることも可能です。

そのまま使わず、一つずつファイルを見て必要な箇所だけ使うことをオススメしますが。

https://underscores.me/

まとめ

WordPressのテーマ作成も意外と簡単です。

少しphpやcssを書ける人なら是非挑戦してみてください。

（TK）

スタッフblog