1. WordPressテーマの基本構造
WordPressテーマは、特定のファイル構成に基づいて動作します。最低限必要なファイルは以下の通りです。
style.css（テーマの情報を記載するスタイルシート）index.php（メインのテンプレートファイル）functions.php（テーマの機能を追加するファイル）header.php（ヘッダー部分）footer.php（フッター部分）sidebar.php（サイドバー）single.php（個別記事ページ）page.php（固定ページ）screenshot.png（スクリーンショット）
2. テーマフォルダを作成
wp-content/themes/ ディレクトリ内に新しいフォルダを作成し、テーマ名を付けます。例えば、mytheme/ というフォルダを作ります。
3. style.css の作成
mytheme/style.css を作成し、以下のようにテーマ情報を記述します。
|
1 2 3 4 5 6 7 8 |
/* Theme Name: MyTheme Theme URI: https://example.com/ Author: あなたの名前 Author URI: https://yourwebsite.com/ Description: 自作WordPressテーマ Version: 1.0 */ |
4. index.php の作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php get_header(); ?> <main> <h1>Welcome to MyTheme</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); the_title('<h2>', '</h2>'); the_content(); endwhile; else : echo '<p>記事がありません</p>'; endif; ?> </main> <?php get_footer(); ?> |
5. header.php と footer.php の作成
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <h1><?php bloginfo('name'); ?></h1> <nav> <?php wp_nav_menu(array('theme_location' => 'main-menu')); ?> </nav> </header> |
footer.php
|
1 2 3 4 5 6 |
<footer> <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p> </footer> <?php wp_footer(); ?> </body> </html> |
6. functions.php の作成
functions.php にテーマの基本機能を追加します。
|
1 2 3 4 5 6 7 8 9 |
<?php function mytheme_setup() { add_theme_support('title-tag'); add_theme_support('post-thumbnails'); register_nav_menus(array( 'main-menu' => 'メインメニュー' )); } add_action('after_setup_theme', 'mytheme_setup'); |
8. screenshot.png
次のサイズでテーマスクリーンショットを作成します。
幅：1200px
高さ：900px
7. テーマの有効化
すべてのファイルを作成したら、WordPress管理画面の「外観」→「テーマ」からMyThemeを有効化します。
これで、基本的な自作テーマの構築は完了です！次はカスタマイズを進めて、自分だけのデザインに仕上げていきましょう。