WordPress 自作テーマの作り方

2024年5月24日2024年7月2日

今回は、WordPress の基本的な仕組み、必要なテーマファイル、そして自作する際の注意点について解説します。

WordPress の仕組み

WordPress は、PHP と MySQL に基づいたオープンソースのコンテンツ管理システム（CMS）です。

テーマは、WordPress サイトの外観を定義するファイルの集合で、

PHP、HTML、CSS、および JavaScript を使用して構築されてます。

必要なテーマファイル

ここからは必要なテーマファイルを順番に解説していきます。一覧にすると以下のような感じです。

functions.php
style.css
index.php
header.php
footer.php
sidebar.php
comments.php
single.php
page.php
search.php
screenshot.png
404.php

一つずつ解説していきます。

1. functions.php

functions.php は、テーマに全体に関わるとても重要なファイルです。

このファイルに記述することで、WordPress の動作を変更したり、新しい機能を追加したりすることができます。

ショートコードの定義ができたり、管理画面の設定などが可能です。

記述をミスるとサイトが表示されなくなることもあるので、編集前にはバックアップを取ることを強くおすすめします。

<?php
function mytheme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'mytheme'),
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

function mytheme_scripts() {
    wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mytheme_scripts');
?>

2. style.css

style.css は、テーマのスタイルシートです。

このファイルの先頭にはテーマの情報を記述するコメントが必要です。

それ以降については普通のCSSと同じでスタイリングのためのCSSを記述していけばOKです。

/*
Theme Name: MyTheme
Theme URI: http://example.com/mytheme
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
*/

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

3. index.php

index.php は、テーマのメインテンプレートファイルです。フロントページをはじめとして、サイト全体のデザインの基礎となるファイルです。

ページごとのテンプレートを用意していない場合は、すべてのページでこのファイルが読み込まれることになります。

index.phpを作成するときは、まず最初にheader.phpと一番最後にfooter.phpを呼ぶコードを書いておきましょう。

その後、間に表示させたい内容に応じたコードを書いていくといいです。

<?php get_header(); ?>

<div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; else : ?>
        <p>No posts found.</p>
    <?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

4. header.php

header.php は、サイトのヘッダー部分を定義するファイルです。

つまりすべてのページで、ページ上部に表示される部分のファイルです。

よくあるのはWebサイトのタイトルやロゴ、ナビゲーションメニュー、全ページで共通で使用したい項目などをここに書いて表示させるようにします。

HTMLの書き出し時に一番最初となるファイルなので、bodyやhtmlの開始タグ、ヘッダーで読み込む情報なども忘れず記述するようにします。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><?php bloginfo('name'); ?></h1>
        <nav><?php wp_nav_menu(array('theme_location' => 'primary')); ?></nav>
    </header>

5. footer.php

footer.php は、headerの下バージョンと思えばOKです。サイトのフッター部分を定義するファイルですね。

よくあるのはコピーライトや会社情報、サイトの運営情報、免責事項などを盛り込んだりします。

ここにはbodyタグやhtmlの終了タグを忘れず書いておきましょう。

    <footer>
        <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

6. sidebar.php

sidebar.php は、ページの横に表示されるサイドバー部分を定義するファイルです。

サイドバーには人気記事やカテゴリ一覧、プロフィール、広告エリアなどを表示できます。

<aside id="sidebar">
    <?php if (is_active_sidebar('main-sidebar')) : ?>
        <?php dynamic_sidebar('main-sidebar'); ?>
    <?php else : ?>
        <p>No widgets added yet.</p>
    <?php endif; ?>
</aside>

7. comments.php

comments.php は、記事につくコメント表示部分を定義するファイルです。

コメントリストの表示機能と、コメントフォームを表示する機能があります。

見た目のカスタマイズはstyles.cssなどですると良いです。

<?php if (have_comments()) : ?>
    <h2>Comments</h2>
    <ul>
        <?php wp_list_comments(); ?>
    </ul>
<?php endif; ?>

<?php comment_form(); ?>

8. single.php

single.php は、個別の投稿ページを定義するファイルです。

こちらの投稿ページは非常に多く使われるものなので、必要な要素をしっかりと盛り込みます。

page.phpなどと共通している部分も多いので、複製してsingle.phpとして作り始めてもOKです。

<?php get_header(); ?>

<div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
        <?php comments_template(); ?>
    <?php endwhile; endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

9. page.php

page.php は、投稿ではなく「固定ページ」を定義するファイルです。

こちらはindex.phpやsingle.phpが完成していればそれを複製して造ると手間が省けます。

「index.php」「page.php」「single.php」の3つは、似ている部分が多いので、

どこを共通にするのかを決めてからそれぞれ作っていくと効率的に作成できますね。

<?php get_header(); ?>

<div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

10. search.php

search.php は、検索結果ページを定義するファイルです。

検索フォームはよくヘッダー内などにあるので、全ページ共通で使えるところに置いておくといいですね。

<?php get_header(); ?>

<div id="content">
    <h2>Search Results for: <?php echo get_search_query(); ?></h2>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <div><?php the_excerpt(); ?></div>
    <?php endwhile; else : ?>
        <p>No results found.</p>
    <?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

11. screenshot.png

screenshot.png は、テーマのサムネイル画像です。管理画面でテーマを一覧で見たときのサムネイル画像にあたります。推奨サイズは 1200×900 ピクセルですが、自作の画像でも問題ありません。

WordPressにログインできる方しか見る事はないですが、揃えておくとわかりやすいですね。

12. 404.php

404.php は、ページやファイルが見つからなかったときの404エラーページを定義するファイルです。

謝罪のメッセージと、TOPへのリンクなどを置いてあげると親切かと思います。

<?php get_header(); ?>

<div id="content">
    <h2>Page Not Found</h2>
    <p>Sorry, the page you are looking for does not exist.</p>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>