WordPressは、ブログやECサイトの開設に定評のあるコンテンツ管理システム（CMS）です。柔軟性に優れ、何千もの無料および有料テーマをサポートしているため、素早くサイトを構築することができます。
しかし、WordPressの真の力はそのカスタマイズ性にあり、さまざまなページビルダーやブロックテーマを利用して思い通りの外観を作り上げることができます。要件を満たすテーマが見つからなければ、ゼロから開発することも可能です。
そこで今回は、WordPressクラシックテーマの構築方法を取り上げます。シンプルなテーマの作り方を順を追って見ていきますので、高度なテーマを自分で構築するための「基礎編」として参考にしてみてください。
前提条件
ゼロからテーマを開発するには、コーディングが必要になります。今回ご紹介する手順は、以下に精通していることを前提とします。
また、開発環境を用意することも重要です。Kinstaでは、WordPressのローカル開発ツールDevKinstaを無料提供しています。以下の手順で開発環境を作成できます。
- DevKinstaのページにアクセスし、使用しているOS用アプリケーションをダウンロード
- インストール手順に従ってセットアップ
- DevKinstaを開いて「新規WordPressサイト」をクリック
- 「新規WordPressサイト」を選択して、「サイト名」「WordPress管理画面ユーザー名」「WordPress管理画面パスワード」をそれぞれ入力
- 「サイト作成」をクリックし、サイトが生成されるまで30～60秒待つ
サイトが作成されると、サイトをプレビューしたり、WordPress管理画面にアクセスしたり、コンピュータ上のローカルWordPressサイトへのファイルパスを確認したりすることができます。すべてのコードにアクセス可能です。
WordPressテーマの構造
クラシックテーマの作成手順をご紹介する前に、テーマ開発の基本として、クラシックテーマの構造と関連する主要なファイルを理解しておきましょう。
WordPressのテーマディレクトリ
WordPress テーマは、WordPressのwp-content/themes directoryに保存されます。各テーマはこのディレクトリ内のフォルダに格納されます。
WordPressテーマの主要ファイル
クラシックテーマの主要なファイルは以下の2種類です。
index.php：すべてのテンプレートファイルのフォールバックとして機能するメインのテンプレートファイル。WordPressがコンテンツを表示するのに使用。style.css：テーマのメタデータとカスタムCSSスタイルが含まれる。テーマの外観を定義し、名前、作者、バージョンなどの重要な情報を提供するのに必要。
テーマをうまく構成して機能を追加していくには、以下のようなテンプレートファイルも必要になります。後ほどご紹介する手順でも使用します。
header.php：サイトのロゴとナビゲーションメニューを含む、テーマのヘッダーセクションfooter.php：フッターセクション<code>functions.php：カスタム関数、機能、テーマサポートオプションsingle.php：個々のブログ記事page.php：静的ページ
主要なファイルとその役割を理解したところで、早速WordPressのクラシックテーマ作りに取り掛かりましょう。
WordPressでクラシックテーマを作成する方法
何事も実践あるのみ。ということで、カスタムCSSと追加機能を使って、WordPressサイトのトップページに投稿を表示するシンプルなブログテーマを構築していきます。
1. テーマフォルダの作成
themesディレクトリ内にmyblogthemeのようなフォルダを作成します。
2. メタデータ情報の追加
style.cssファイルにテーマの情報を設定します。style.cssに追加できるメタデータ情報の例は以下のとおりです。
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/- Theme Name（テーマ名）：WordPress管理画面の「外観」＞「テーマ」に表示されるテーマ名
- Author（テーマ開発者）：テーマ開発者の名前
- Author URI（テーマ開発者のURI）：テーマ開発者のウェブサイトやプロフィールへのリンク
- Description（説明文）：テーマの用途と機能の概要に関する説明
- Version（バージョン）：テーマの現在のバージョン
- License（ライセンス）：配布条件を指定
- License URI（ライセンスURI）：ライセンス全文へのリンク
これらの詳細については、WordPress Theme Handbookを参照してください。
この情報をstyle.cssファイルに追加した後、WordPress管理画面の「外観」＞「テーマ」に移動すると、作成したテーマが表示されます。「テーマの詳細」をクリックすると、追加した情報がすべて表示されます。
style.cssファイルをセットアップしたところで、他の必須テーマファイルの作成に移りましょう。
3. メインテンプレートファイルの作成
index.phpファイルは、テーマのメインテンプレートファイルとして機能し、ここに追加するコードは全て、サイトのメインコンテンツを表示するために使用します。
このファイルに基本的なHTMLコードを記述すると、テーマを有効化してプレビューした際にすべて表示されます。WordPressのCMSから情報を引き出し、テーマのテンプレートファイルを通して表示するには、PHPを使用してWordPressの関数を追加します。
index.phpファイルの基本的な構造は以下のようになります。
<?php get_header(); ?>
<main>
<!-- Main content goes here -->
</main>
<?php get_footer(); ?>上の構造では、get_header()とget_footer()は、それぞれのテンプレートファイル（header.phpとfooter.php）からヘッダーとフッターのセクションを引き出すために使用します。
index.phpファイルでコードを書く前に、まずはテーマのヘッダーとフッターのセクションから作っていきましょう。
4. ヘッダーファイルの作成
header.phpファイルは、サイトのヘッダーセクションを表示し、通常サイトのロゴやナビゲーションメニューなどの要素に加えて、スタイルシート、スクリプト、メタタグなどが含まれます。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// フォールバック画像
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>以下、各部分を掘り下げて、対応する関数とフックをfunctions.phpに追加していきます。
まずは<head>から。ここには必須のメタデータ、サイトタイトル、文字エンコーディング、wp_head()を記述します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>language_attributes();はHTML文書の言語属性を設定します。wp_head();は、WordPressやプラグインでスタイルシートやスクリプトなどの重要な要素を<head>セクションに挿入できるようにする重要な関数です。
functions.phpに以下を追加して、スタイルシートをエンキューします。
function my_custom_theme_enqueue_styles() {
// メインのスタイルシートをエンキュー
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');wp_enqueue_style()は、メインのスタイルシートを<head>エリアに追加します。他のテーマやプラグインとの干渉を避けるため、この関数の接頭辞はmy_custom_theme、<link>、headタグに直接追加することも可能です。
同様に、サイトタイトルを<head>エリアに追加する関数を定義してみます。
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');これでwp_head()によって、スタイルとタイトルタグが動的にヘッダーに追加されます。ブラウザの開発者ツールでWordPressサイトを検証して確認可能です。<head>エリアにスタイルシートのリンクと動的に生成されたタイトルタグが表示されるはずです。
次に<body>セクションでナビゲーションバーを定義し、ダミーロゴを表示するようにします。WordPressサイトのアイデンティティ（サイトの基本情報やブランド要素）でカスタムロゴを設定することを想定し、そのロゴを使用できる設定も行っています。
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// フォールバック画像
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>カスタムロゴを設定している場合、ロゴセクションはthe_custom_logo()で表示します。カスタムロゴを設定しない場合は、デフォルトの画像を表示します。
カスタムロゴのサポートを有効にするには、以下のコードをfunctions.phpに貼り付けます。
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');この関数によってカスタムロゴがサポートされます。最後は、ナビゲーションメニューセクションです。
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>wp_nav_menu()は、ヘッダーメニューの場所に割り当てられたナビゲーションメニューを表示します。ナビゲーションメニューを登録するには、functions.phpに以下のコードを貼り付けます。
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));function.phpファイルは以下のようになります。
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// メインスタイルシートをエンキュー
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// headセクションにサイトタイトルを追加する機能
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>この手順に従うことで、カスタムロゴをサポートするヘッダー、およびナビゲーションメニューを表示して、WordPress管理画面から簡単かつ動的にカスタマイズできるようになります。
5. フッターファイルの作成
footer.phpファイルは、サイトのフッターセクションを表示します。今回のテーマでは、著作権の年だけを表示します。
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>ヘッダーでwp_head()を含めたのと同じように、wp_footer()を含めます。wp_footer()を使用すると、WordPressやプラグインがスクリプトなどの重要な要素を</body>の直前に挿入できるようになります。これは必要なリソースが正しく読み込まれ、サイトが期待通りに機能させるために非常に重要です。
6. WordPressループでブログ記事の表示
続いてindex.phpファイルに戻り、コンテンツを動的に表示するWordPressループを使用して、WordPressサイトの投稿を表示する方法を見ていきます。ループは以下のようになります。
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>投稿者：<?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>投稿がありません</p>
</article>
<?php endif; ?>
</div>上記のコードでは、ループに入る前に表示する投稿があるかどうかを確認します。ループの中では、the_title()、the_author()、the_time('F j, Y')、the_excerpt()のようなWordPress関数が各投稿に関する情報を表示します。
the_post_thumbnail()はサムネイルを表示するために使用されますが、if文でラップされているため、投稿にアイキャッチ画像がある場合のみに適用されます。functions.phpファイルでは、この関数で投稿のサムネイルのサポートを追加し、新規投稿を作成する際にアイキャッチ画像をアップロードできるようにする必要があります。
add_theme_support('post-thumbnails');これをfunctions.phpファイルで作成したmy_custom_theme_setup()に追加します。index.phpファイルは以下のようになります。
<?php get_header(); ?>
<main>
<div class="hero">
<h1>ようこそ！</h1>
<p>プログラミングやウェブ開発などに関する記事を投稿しています</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>投稿者：<?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>投稿がありません</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>静的な（実行時に変更されない）コードは、「ようこそ！」のバナーとブログの簡単な説明文が表示されるようにスタイル面で設定されています。
7. 投稿用テンプレートの作成
テーマをスタイリングする前に、ブログ内の任意の固定ページや投稿からクリックされた際に、個別のブログ投稿を表示するための基本的なテンプレートを定義します。これを行うには、テーマフォルダのルートにsingle.phpファイルを作成し、以下のコードを貼り付けます。
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>投稿者:<?php the_author(); ?> 投稿日時：<?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>上のコードでは、get_header()とget_footer()がそれぞれヘッダーとフッターを含み、その他の部分では、WordPressの関数が動的コンテンツを表示します。
8. 固定ページ用テンプレートの作成
投稿用のテンプレートを作成したら、固定ページ用のテンプレートも作成します。テーマフォルダのルートにpage.phpファイルを作成して、以下のコードを貼り付けてください。
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>9. テーマのスタイリング
以上でテーマの基本的なテンプレートを作成できました。続いては、テーマの見栄えを整えるためにスタイリングを行います。テーマフォルダ内のstyle.cssファイルにスタイルを追加します。手始めに、この記事で作成したテーマのGithub Gistからスタイルをコピーしてみましょう。
10. テーマのテストとデプロイ
WordPressテーマの作成を終えたら、あとはテストしてデプロイするのみ。
まず、WordPress管理画面で「外観」＞「テーマ」を選択し、作成したテーマが有効化されていることを確認し、有効化されていない場合にはテーマをクリックして有効化します。また「カスタマイズ」をクリックすると、メニューの調整など、デザインや設定を微調整することができます。
テーマの調整を終えたら、以下のいずれかの方法でテーマを設置します。
- ローカルサイトをステージング環境に反映する─DevKinstaを使用してローカルで開発している場合は、ステージング環境に簡単にサイトを反映可能です。これにより、本番環境に反映する前に、本番とほぼ同じ環境でテーマをテストすることができます。この手順の詳細はこちらをご覧ください。
- テーマをパッケージ化してアップロードする─テーマをZIP形式のフォルダに圧縮して本番環境にアップロードすることができます。WordPress管理画面の「外観」＞「テーマ」＞「新しいテーマを追加」＞「テーマのアップロード」をクリックし、ZIPファイルを選択してアップロードします。
ステージング環境でテーマを念入りにテストし、本稼働前に問題がないかを確認します。潜在的な問題を特定し、サイトの外観と機能を正しく表示・動作させるための重要なステップです。
まとめ
今回は、ゼロからWordPressのクラシックテーマを作成する手順をご紹介しました。必須ファイルの設定、カスタムスタイルの追加、投稿と固定ページのテンプレート作成などを行なって構築していきます。
自分が思い描く機能と外観をサイトで実現するには、WordPressテーマを自分で開発してしまうのがベストです。テーマ開発のための時間やスキルなどのリソースが足りない場合には、開発者に依頼すれば、効率的に目標を達成できます。
理想のサイトを完成させたら、サイトのダウンやDDoS攻撃などの問題を避けるために、堅牢なホスティングサービスが必要になります。
Kinstaでは、隔離コンテナ技術を利用したアーキテクチャを持つWordPress専用マネージドホスティングを提供しています。すべてのプランにGoogle Cloud Platformのプレミアムティアネットワークのみを採用しています。
ご興味がありましたら、営業担当までお気軽にお問い合わせください。
コメントを残す