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

WordPressで自作テーマを作成するための基本的なガイドラインを紹介します。このガイドでは、テーマのファイル構成と各ファイルのソースコードの詳細について説明します。初心者の方でも理解しやすいように、シンプルなテーマの例を用意しました。

0.1 ファイル構成
0.2 各ファイルの説明

1 まとめ

ファイル構成

まず、テーマの基本的なファイル構成を以下に示します。

my-theme/
├── 404.php
├── archive.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── screenshot.png
├── single.php
├── style.css

WordPressのファイル読み込み順序（テンプレート階層）についてはこちらをご確認ください。

WordPressのファイル読み込み順序の完全ガイド

各ファイルの説明

`style.css`

テーマに関する基本的な情報とスタイルを定義します。このファイルにはテーマのメタ情報（テーマ名、作者、バージョンなど）も含まれます。

/*
Theme Name: My Theme
Theme URI: http://example.com/my-theme
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
Tags: custom, theme
Text Domain: my-theme
*/

/* Add your custom styles below */
body {
    font-family: Arial, sans-serif;
}

`functions.php`

テーマの機能を追加するファイルです。このファイルでテーマサポートの設定やウィジェットエリアの登録、スクリプトやスタイルシートの読み込みを行います。

<?php
function my_theme_setup() {
    // サポートする機能を追加
    add_theme_support('title-tag'); // タイトルタグをテーマに追加
    add_theme_support('post-thumbnails'); // サムネイル画像のサポートを追加
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-theme'), // ナビゲーションメニューを登録
    ));
}
add_action('after_setup_theme', 'my_theme_setup'); // テーマの初期設定を行うフックを追加

function my_theme_widgets_init() {
    register_sidebar(array(
        'name' => __('Primary Sidebar', 'my-theme'), // サイドバーの名前
        'id' => 'primary-sidebar', // サイドバーのID
        'description' => __('Main sidebar that appears on the right.', 'my-theme'), // サイドバーの説明
        'before_widget' => '<div class="widget">', // ウィジェットの前に表示されるHTML
        'after_widget' => '</div>', // ウィジェットの後に表示されるHTML
        'before_title' => '<h2 class="widget-title">', // ウィジェットタイトルの前に表示されるHTML
        'after_title' => '</h2>', // ウィジェットタイトルの後に表示されるHTML
    ));
}
add_action('widgets_init', 'my_theme_widgets_init'); // ウィジェットの初期設定を行うフックを追加

function my_theme_scripts() {
    // スタイルシートとスクリプトを登録・読み込み
    wp_enqueue_style('my-theme-style', get_stylesheet_uri()); // テーマのスタイルシートを読み込む
}
add_action('wp_enqueue_scripts', 'my_theme_scripts'); // スクリプトとスタイルシートを読み込むフックを追加
?>

`header.php`

サイトのヘッダー部分を定義します。このファイルにはHTMLの<head>セクションと<header>セクションの内容が含まれます。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    
    <!-- Favicon -->
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/path/to/your/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/path/to/your/favicon.ico" type="image/x-icon">
    
    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/path/to/your/apple-touch-icon.png">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="<?php wp_title(''); ?>">
    <meta property="og:description" content="<?php bloginfo('description'); ?>">
    <meta property="og:url" content="<?php echo esc_url(home_url('/')); ?>">
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
    <meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/path/to/your/image.jpg">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php wp_title(''); ?>">
    <meta name="twitter:description" content="<?php bloginfo('description'); ?>">
    <meta name="twitter:url" content="<?php echo esc_url(home_url('/')); ?>">
    <meta name="twitter:image" content="<?php echo get_template_directory_uri(); ?>/path/to/your/image.jpg">

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

`footer.php`

サイトのフッター部分を定義します。このファイルにはHTMLの<footer>セクションの内容が含まれ、フッターに必要なスクリプトを読み込むためのwp_footer()も含まれます。

<footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p> <!-- 現在の年とサイト名を表示 -->
</footer>
<?php wp_footer(); ?> <!-- フッターに必要なスクリプトやスタイルを追加 -->
</body>
</html>

`index.php`

テーマのメインテンプレートファイルです。投稿のループ処理を行い、サイトのメインコンテンツを表示します。このファイルは他のテンプレートファイルが存在しない場合に使用されます。

<?php get_header(); ?> <!-- ヘッダーを読み込む -->
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- 投稿があるか確認し、ループ開始 -->
        <article>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <!-- 投稿タイトルをリンクとして表示 -->
            <?php the_content(); ?> <!-- 投稿内容を表示 -->
        </article>
    <?php endwhile; else : ?> <!-- 投稿がない場合の処理 -->
        <p><?php _e('Sorry, no posts matched your criteria.', 'my-theme'); ?></p> <!-- 投稿がない場合のメッセージ -->
    <?php endif; ?>
</main>
<?php get_sidebar(); ?> <!-- サイドバーを読み込む -->
<?php get_footer(); ?> <!-- フッターを読み込む -->

`404.php`

404エラーページのテンプレートです。このファイルは存在しないページがリクエストされた場合に表示されます。

<?php get_header(); ?> <!-- ヘッダーを読み込む -->
<main>
    <h1><?php _e('Page Not Found', 'my-theme'); ?></h1> <!-- 404エラーメッセージを表示 -->
    <p><?php _e('Sorry, the page you are looking for does not exist.', 'my-theme'); ?></p> <!-- 404エラーの説明メッセージ -->
</main>
<?php get_sidebar(); ?> <!-- サイドバーを読み込む -->
<?php get_footer(); ?> <!-- フッターを読み込む -->

`page.php`

固定ページのテンプレートです。このファイルは固定ページ（例：会社概要、プライバシーポリシーなど）を表示する際に使用されます。

<?php get_header(); ?> <!-- ヘッダーを読み込む -->
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- 投稿があるか確認し、ループ開始 -->
        <article>
            <h2><?php the_title(); ?></h2> <!-- ページタイトルを表示 -->
            <?php the_content(); ?> <!-- ページ内容を表示 -->
        </article>
    <?php endwhile; endif; ?>
</main>
<?php get_sidebar(); ?> <!-- サイドバーを読み込む -->
<?php get_footer(); ?> <!-- フッターを読み込む -->

`single.php`

単一投稿ページのテンプレートです。このファイルは個別の投稿ページを表示する際に使用されます。

<?php get_header(); ?> <!-- ヘッダーを読み込む -->
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- 投稿があるか確認し、ループ開始 -->
        <article>
            <h2><?php the_title(); ?></h2> <!-- 投稿タイトルを表示 -->
            <?php the_content(); ?> <!-- 投稿内容を表示 -->
        </article>
    <?php endwhile; endif; ?>
</main>
<?php get_sidebar(); ?> <!-- サイドバーを読み込む -->
<?php get_footer(); ?> <!-- フッターを読み込む -->

`archive.php`

アーカイブページのテンプレートです。このファイルはカテゴリ、タグ、日付別のアーカイブページを表示する際に使用されます。

<?php get_header(); ?> <!-- ヘッダーを読み込む -->
<main>
    <?php if (have_posts()) : ?>
        <h2><?php the_archive_title(); ?></h2> <!-- アーカイブタイトルを表示 -->
        <?php while (have_posts()) : the_post(); ?> <!-- 投稿のループ開始 -->
            <article>
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <!-- 投稿タイトルをリンクとして表示 -->
                <?php the_excerpt(); ?> <!-- 投稿の抜粋を表示 -->
            </article>
        <?php endwhile; ?>
    <?php else : ?>
        <p><?php _e('Sorry, no posts found.', 'my-theme'); ?></p> <!-- 投稿がない場合のメッセージ -->
    <?php endif; ?>
</main>
<?php get_sidebar(); ?> <!-- サイドバーを読み込む -->
<?php get_footer(); ?> <!-- フッターを読み込む -->

`sidebar.php`

サイドバーの内容を定義します。このファイルにはウィジェットエリアや検索フォーム、最近の投稿、カテゴリリストなどが含まれます。

<aside>
    <?php if (is_active_sidebar('primary-sidebar')) : ?>
        <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <!-- アクティブなサイドバーを表示 -->
            <?php dynamic_sidebar('primary-sidebar'); ?> <!-- サイドバーのウィジェットを動的に表示 -->
        </div>
    <?php else : ?>
        <!-- デフォルトのサイドバーコンテンツ -->
        <div class="widget">
            <h2><?php _e('Search', 'my-theme'); ?></h2> <!-- 検索ウィジェットタイトル -->
            <?php get_search_form(); ?> <!-- 検索フォームを表示 -->
        </div>
        <div class="widget">
            <h2><?php _e('Recent Posts', 'my-theme'); ?></h2> <!-- 最近の投稿ウィジェットタイトル -->
            <ul>
                <?php wp_get_archives('type=postbypost&limit=5'); ?> <!-- 最近の投稿を表示 -->
            </ul>
        </div>
        <div class="widget">
            <h2><?php _e('Categories', 'my-theme'); ?></h2> <!-- カテゴリウィジェットタイトル -->
            <ul>
                <?php wp_list_categories('title_li='); ?> <!-- カテゴリリストを表示 -->
            </ul>
        </div>
    <?php endif; ?>
</aside>

まとめ

WordPressの自作テーマを作成するための基本的なファイル構成と各ファイルのソースコードを紹介しました。このガイドを参考にして、自分のサイトに合ったカスタムテーマを作成してみてください。テーマの機能を追加したり、デザインをカスタマイズすることで、オリジナルのテーマを完成させることができます。

この記事を書いた人

connecti

CONNECTIは人と人を繋ぐ架け橋になるという思いで創業しました。

制作のご相談等は下記よりお願いいたします。

お手数ではございますが、下記リンクよりお問い合わせください。

お問い合わせフォームはこちら

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

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

ファイル構成

各ファイルの説明

`style.css`

`functions.php`

`header.php`

`footer.php`

`index.php`

`404.php`

`page.php`

`single.php`

`archive.php`

`sidebar.php`

まとめ

connecti

制作のご相談等は下記よりお願いいたします。

関連記事

Categories

Popular Articles

【WordPress】Advanced Custom Fieldsの使い方と出力方法

SAIKYO towa & Web Design

wordpressのfunctions.phpでJSやCSSを一元管理する

コピペで使うcss/jsのひと味違うスライドショー

コピペで簡単！カード型のデザインサンプル9選

Tag Cloud

Banner