WordPress のテーマ(theme)開発を学びたいと思ったとき、有名なスターターテーマ(starter theme)「Underscores」や「Sage」を触ってみた方も多いと思います。
しかし、これらはすでに多くの機能やコードが組み込まれていて、ある程度知識がある方向け。
「これから初めてテーマを作ってみたい」という初心者の方には、かえってハードルが高く感じられるのではないでしょうか。
そこで、本当に最低限だけを残したスターターテーマ「AMARGA Bone」 を作成しました。
本当に最低限のスターターテーマ「AMARGA Bone」
今回作った「AMARGA Bone」は、WordPressテーマ開発を初めて体験する人向けの“超最小スターターテーマ”です。
- ファイルは5つだけ
- デザインや便利機能は一切なし
- 必要最低限の関数だけをfunctions.phpに記述
header.phpで <main> を開き、footer.phpで </main> を閉じる、というごくシンプルな構成にしています。
WordPressの基本を理解するうえで、余計な仕組みを排除し、学習に集中できる環境を用意しました。
シンプルだからこそのメリット
このテーマの最大の特徴は「余計なものが入っていない」ことです。
それによって、次のようなメリットがあります。
- コードの全体像がすぐ理解できる
- 自分で機能を足した効果が直感的に分かる
- CSSフレームワークやライブラリを自由に導入できる
たとえば、style.cssに自分でデザインを追加したり、functions.phpにアイキャッチ機能を追加したり、single.phpやpage.phpを作って表示を分けたり、などなど。
一つひとつ「自分で作った感覚」を持ちながら勉強できるのではないでしょうか。
これが WordPress テーマ開発を理解する一番の近道だと考えています。
ダウンロードZIPのファイル構成
- style.css
- header.php
- index.php
- footer.php
- function.php
style.css
/*
Theme Name: AMARGA Bone
Theme URI: https://example.com/amarga-bone
Author: AMARGA
Author URI: https://example.com
Description: 超シンプルなWordPressスターターテーマ。最小限の構成で、自由にフレームワークを導入可能。
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: amarga-bone
*/
heder.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div style="border:1px solid #ccc; background:#f9f9f9; padding:10px; margin:15px 0; font-size:1rem; color:hotpink;">
This template is header.php
</div>
<h1 class="site-title">
<a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
</h1>
<?php if (get_bloginfo('description')): ?>
<p class="site-description"><?php bloginfo('description'); ?></p>
<?php endif; ?>
<?php wp_nav_menu(['theme_location' => 'primary']); ?>
</header>
<main id="content" class="main">
index.php
<?php get_header(); ?>
<div style="border:1px solid #ccc; background:#f9f9f9; padding:10px; margin:15px 0; font-size:1rem; color:hotpink;">
This template is index.php
</div>
<?php if (have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
<article <?php post_class('article'); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="meta">
<time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html(get_the_date()); ?></time>
<?php if (has_category()): ?> / <?php the_category(', '); ?><?php endif; ?>
</p>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
<nav class="pagination">
<?php next_posts_link(__('← Older Posts', 'amarga-bone')); ?>
<?php previous_posts_link(__('Newer Posts →', 'amarga-bone')); ?>
</nav>
<?php else: ?>
<p><?php _e('No posts found.', 'amarga-bone'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
footer.php
</main>
<footer class="site-footer">
<div style="border:1px solid #ccc; background:#f9f9f9; padding:10px; margin:15px 0; font-size:1rem; color:hotpink;">
This template is footer.php
</div>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>コード内のソースについての補足
<div style="border:1px solid #ccc; background:#f9f9f9; padding:10px; margin:15px 0; font-size:1rem; color:hotpink;">
This template is index.php
</div>このコードは、「現在どのテンプレートファイルが読み込まれているか」 を確認するためのものです。
※AMARGAやamargaの部分は、ご自身のサイト名に置き換えてご利用ください。
WordPressテーマ開発では、メインコンテンツを <main></main> タグで囲むことが一般的ですが、content.php や content-page.php など複数のテンプレートファイルを使う構成にすると、
「今どのファイルが反映されているのか？」が分からなくなることがあります。
そこで開発中は、このような臨時表示コードをテンプレートごとに仕込んでおくと、
- テンプレート階層の動きを即確認できる
- コードの読み込みミスに気づきやすい
- 開発が終われば簡単に削除できる
というメリットがあります。
プレビューイメージ
今はデータが何も入っていないので、こんな感じです
ダウンロード
以下のzipをダウンロードし、テーマフォルダに配置し、外観 ＞ テーマ で有効化をしてください。
「AMARGA Bone」は、これからWordPressテーマ開発を始めたい人が、最小のコードから安心して学べる環境を目指しました。
- 余計なコードがないから迷わない
- 必要なものを自分で足せるから理解が深まる
- どんなフレームワークとも組み合わせやすい
最小限の構成から始めることで、WordPressテーマ作成の全体像がつかみやすくなります。
ぜひ、自分の学習やオリジナルテーマづくりのベースとして活用していただけると嬉しいです。