2022.11.7

【WordPress】テーマの基本構成（サンプルダウンロード）

WordPressのテーマを作成するにはテーマファイルの種類を知っておかないといけません。このページでは必要最低限のテーマファイルの紹介と、それらをまとめたZIPファイルを配布しています。

テーマファイルとは

テーマファイルとはWEBページ上の見た目と機能の役割をしています。記事の本文はデータベースに保存されていますが、その記事内容を実際に表示させるためにテーマファイルへ記事を読み込むWordPressのタグ（以下 WPタグ）を記述する必要があります。

WordPressのテーマはWordPress専用のタグで構成されていますが、WordPress自体がPHPで出来ているためPHPを使っても色々とプログラムが可能になっています。

テーマファイルは必要最低限のファイルがあり、一つのフォルダにまとめてWordPress内のthemesフォルダへ入れることで外観から選択が可能になります。

最低限のテーマファイル

下記のファイルは全てwp-content＞themes＞テーマフォルダ名の中に入れてください。style.cssをcss/style.cssと階層を分けると動かなくなります。

style.css	・テーマとしてWordPressに判定してもらうために必要・実際のCSSの記述は別でも良い
index.php	・サイトトップページとして利用される・類似テーマファイルに`home.php`がある
header.php	・無くても動くが全ページ共通のパーツを作れるのであったほうが良い
footer.php	・無くても動くが全ページ共通のパーツを作れるのであったほうが良い
single.php	・投稿記事のテーマファイル
page.php	・固定ページのテーマファイル
archive.php	・カテゴリーやタグなどの特定の区分がされた記事一覧に使用される
404.php	・ページが見つからない場合に表示する ※ない場合は`index.php`が表示される
functions.php	・無くても動くがデフォルトCSSの読み込み設定が出来るので入れておきたい

これが必要最低限のテーマファイルになります。このファイル名で作成するとWordPressが自動的に該当するページのテーマファイルを読み込みます。style.cssとindex.php以外のテーマファイルは必要が無いのならばファイルを作らなくても稼働します。

この他にsearch.phpやsidebar.phpがありますがいらない事も多いので今回は除外しています。

絶対に記述が必要なWordPressタグ

テーマを使う際に必ず記述して置かなければならないWPタグがあります。

<?php we_head(); ?>	HTMLの`<head>`内に記述
<?php wp_footer(); ?>	HTMLの`</body>`直前に記述

2つのWPタグをそれぞれ<head>内と</body>直前に記述します。これはWordPressが動くために必要な情報を出力してくれるWPタグです。例えばwe_head();はfunctions.phpで指定したstyle.cssを読み込ませるなど可能になっています。

各テーマファイルへの最低限の記述

style.cssへの記述

テーマであることをWordPressに伝えるために必要です。コメント機能を利用して記述します。

必要最低限のコメント

/*
Theme Name: ★テーマの名前★
*/

この記述をstyle.cssの始めに記述するだけでテーマとして外観画面に表示されます。ただしこの記述だけだとかなり簡素で分かりにくいので下記くらいの記述はした方がいいでしょう。

/*
Theme Name: テーマ名
Author: 作者の名前
Description: テーマの説明テキスト
*/

また、screenshot.png（1200x900）というファイル名の画像をテーマフォルダ内に入れましょう。これがテーマのサムネ画像として利用されてわかりやすくなります。

CSSのコメントに入力してscreenshot.pngを準備するとこのように最低限のテーマ情報が表示されます。

index.phpへの記述

トップページのテーマファイルになります。style.cssとこのindex.phpは必須ファイルです。この2つがテーマフォルダに入っていない場合はテーマとして選択できません。

必要最低限の記述を記載します。

<?php get_header();?>

    <?php while (have_posts()) : the_post();?>
        <article>
            <a href="<?php the_permalink(); ?>"><?php echo esc_html( the_title( '', '', false) ); ?></a>
        </article>
    <?php endwhile; ?>

    <?php the_posts_navigation(); ?>

<?php get_footer();?>

index.phpの最低限の記述はこれだけです。ヘッダーとフッターは共通パーツを読み込みます。WPタグにはヘッダーとフッターを読み込むだけの便利なタグがあるのでそれを使用しています。
while (have_posts()) : the_post();の部分は最新記事のタイトルへリンクを貼ったものをシンプルに表示しているだけです。

header.phpへの記述

ヘッダーの共通テーマファイルになります。

必要最低限の記述を記載します。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

language_attributes();は言語設定を読み込んでいます。bloginfo( 'charset' );は文字コードです。どちらもWordPressの設定に合わせて出力されます。
body_class();はWordPressがページによって自動的に書き出してくれるCLASS名です。<body>にセットしておくことでCLASS名の指定で記事ページや固定ページなどのCSSを調整できます。

重要なのはwp_head();です。これはWordPress本体が必要とする情報を書き出します。主に<meta>や<link>が出力されるのですが、この記述がないとサイトの見た目やプラグインが動作しないので注意してください。

footer.phpへの記述

フッターの共通テーマファイルになります。

必要最低限の記述を記載します。

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

非常にシンプルです。大事なのはwp_footer();を記述することです。wp_head();と同じくWordPress本体が必要とするものを出力します。主にプラグインが利用するのでJavaScript関係に関わるものが多いです。

single.phpへの記述

記事ページのテーマファイルになります。カスタム投稿もこのテーマファイルを参照してくれます。

必要最低限の記述を記載します。

<?php get_header();?>

    <article>
        <header>
            <?php if(has_post_thumbnail()): ?>
                <figure><?php the_post_thumbnail('full'); ?></figure>
            <?php endif; ?>
            <h1><?php echo esc_html( the_title( '', '', false) ); ?></h1>
            <?php the_category(' | '); ?>
            <div>投稿日：<?php the_time("Y.n.j"); ?></div>
        </header>

        <?php the_content(); ?>

        <footer>
            <?php if (get_next_post()): //新しい記事?>
                <?php $next_post = get_next_post(); ?>
                <div>次の記事：<a href="<?=get_permalink($next_post->ID)?>"><?=$next_post->post_title;?></a></div>
            <?php endif; ?>

            <?php if (get_previous_post()): //古い記事?>
                <?php $prev_post = get_previous_post(); ?>
                <div>前の記事：<a href="<?=get_permalink($prev_post->ID)?>"><?=$prev_post->post_title;?></a></div>
            <?php endif; ?>
        </footer>
    </article>

<?php get_footer();?>

ヘッダー・フッターの共通パーツを読み込んでいます。表示させる内容は「記事タイトル」「アイキャッチ画像」「カテゴリーリスト」「投稿日」「記事本文」「前後の記事へのリンク」になっています。

page.phpへの記述

固定ページのテーマファイルになります。基本的にsingle.phpと同じで構わないと思いますが、いくつかの項目は削除しています。

必要最低限の記述を記載します。

<?php get_header();?>

    <article>
        <header>
            <?php if(has_post_thumbnail()): ?>
                <figure><?php the_post_thumbnail('full'); ?></figure>
            <?php endif; ?>
            <h1><?php echo esc_html( the_title( '', '', false) ); ?></h1>
        </header>

        <?php the_content(); ?>
    </article>

<?php get_footer();?>

archive.phpへの記述

アーカイブページ全般のテーマファイルです。このテーマファイルは「カテゴリー」や「タグ」などWordPressがアーカイブとして定めている一覧ページ全てに反映されます。カテゴリーのみのテーマファイルを作りたい場合はcategory.phpファイルを作ります。

必要最低限の記述を記載します。

<?php get_header();?>

    <?php while (have_posts()) : the_post();?>
        <article>
            <a href="<?php the_permalink(); ?>"><?php echo esc_html( the_title( '', '', false) ); ?></a>
        </article>
    <?php endwhile; ?>

    <?php the_posts_navigation(); ?>

<?php get_footer();?>

while (have_posts()) : the_post();のループで記事を読み込めばWordPressが自動的にアーカイブを調べて記事を表示してくれます。カスタム投稿など特定の記事を指定しない限りはwhile (have_posts()) : the_post();が万能で記事一覧を取得できます。

404.phpへの記述

ページが存在しない場合に表示させるテーマファイルです。404.phpがない場合はindex.phpが表示されます。無くても動きますがエラーでトップページが表示されるとユーザーの混乱を招く原因になるため404.phpファイルを設置しましょう。

必要最低限の記述を記載します。

<?php get_header();?>
    
    <h2>404エラー</h2>
    <p>ページが存在しない、またはURLが間違っています。</p>

    <h2>こちらの記事はいかがでしょうか</h2>
    <?php while (have_posts()) : the_post();?>
        <article>
            <a href="<?php the_permalink(); ?>"><?php echo esc_html( the_title( '', '', false) ); ?></a>
        </article>
    <?php endwhile; ?>

<?php get_footer();?>

エラー表示だけだとサイト巡回の動線が消えるので最新記事一覧を表示させています。

functions.phpへの記述

functions.phpは無くても動作します。functions.phpは何かというとWordPressの機能にアクセスできるテーマファイルです。投稿記事の種類を増やしたり、管理画面のいらない項目を消したりなどカスタマイズができます。

必要最低限の記述を記載します。

<?php

/* ========================================================
head 初期設定
=========================================================*/
//デフォルトjsの入れ替えとCSS読み込み
function add_files() {
    /* WPのjQueryを読み込まない */
    wp_deregister_script('jquery');

    /* googleのCDN jQueryをフッターで読み込む */
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js', array(), NULL, true);

    /* 再設定 */
    wp_enqueue_script('jquery');

    // テーマCSSを読み込む
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', '', '2022','' );
}
add_action('wp_enqueue_scripts', 'add_files');

//headの<title>タグを自動出力
add_theme_support( 'title-tag' );

//headのフィード出力
add_theme_support('automatic-feed-links');

//headのWordPressバージョン表示を削除
remove_action('wp_head','wp_generator');

//headの外部ツールの編集用URLの表示を削除
remove_action('wp_head', 'rsd_link');

//headのWindows Live Writerの編集用URLの表示を削除
remove_action('wp_head', 'wlwmanifest_link');

//headの短縮URLのデフォルトパーマリンクタグ削除
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );

//headの絵文字読み込み削除
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles', 10);


/* ========================================================
機能追加
=========================================================*/
//アイキャッチを利用する
add_theme_support( 'post-thumbnails' );

確実にいらない機能を削除しつつテーマのstyle.cssを自動で読み込むようにしています。jqueryはGoogleのCDNに変更し、アイキャッチの利用を許可しています。