Notes

テーマ作成

執筆者:

buff

カテゴリ:

WordPress でテーマを自作する際に必要なものについて、重要なファイルや知識、手順を整理してお伝えします。

WordPress テーマを自作するために必要なもの

1. 必須ファイル

WordPress テーマとして機能するには、最低限以下の2つのファイルが必要です。

a. style.css

  • テーマのスタイルシート。
  • 必須ヘッダーコメント（テーマ情報）を記述する必要があります。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme created for learning purposes.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/

b. index.php

  • WordPress テンプレート階層で最終的に利用されるファイル。
  • 例：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php bloginfo( 'name' ); ?></title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <h1><?php bloginfo( 'name' ); ?></h1>
  <p><?php bloginfo( 'description' ); ?></p>
  <?php wp_footer(); ?>
</body>
</html>

2. 推奨ファイル

テーマをより実用的にするために、以下のファイルを追加するのが一般的です。

a. header.php

  • ヘッダー部分のテンプレート。
  • <?php get_header(); ?> を使って他のテンプレートから呼び出されます。

b. footer.php

  • フッター部分のテンプレート。
  • <?php get_footer(); ?> を使って他のテンプレートから呼び出されます。

c. functions.php

  • テーマに機能を追加するためのファイル。
  • 例：テーマサポートやウィジェットエリアの登録。

d. single.php

  • 投稿（ブログ記事）を表示するテンプレート。

e. page.php

  • 固定ページを表示するテンプレート。

f. archive.php

  • カテゴリーやタグなどのアーカイブページを表示するテンプレート。

g. 404.php

  • 存在しないページにアクセスされたときに表示するテンプレート。

3. フォルダ構成

基本的なフォルダ構成例：

/my-custom-theme/
│
├── style.css         # テーマ情報とスタイル
├── index.php         # メインテンプレート
├── header.php        # ヘッダー
├── footer.php        # フッター
├── single.php        # 投稿ページテンプレート
├── page.php          # 固定ページテンプレート
├── archive.php       # アーカイブテンプレート
├── 404.php           # エラーページ
├── functions.php     # 機能追加
└── /assets/          # 画像、CSS、JavaScript などのリソース
    ├── css/
    ├── js/
    └── images/

4. 必須知識

  • HTML:
  • テンプレートの基本構造を作るために必要。
  • CSS:
  • サイトのデザインを整えるために必須。
  • PHP:
  • WordPress のテンプレートタグやカスタム機能を実装するために必要。
  • 例: <?php echo bloginfo( 'name' ); ?> でサイト名を表示。
  • WordPress テンプレート階層:
  • 各ページで使用されるテンプレートファイルを理解する。
  • 例：single.php → 投稿ページ、archive.php → カテゴリー一覧など。
  • JavaScript（任意）:
  • 動的な動きをつけたい場合に利用。

5. 開発環境

  • ローカル環境：
  • WordPress をインストールしてテストできる環境を準備する。
  • 推奨ツール：XAMPP, Local by Flywheel, Docker など。
  • コードエディタ：
  • Visual Studio Code や PhpStorm が便利。
  • ブラウザデベロッパーツール：
  • デザインや動作を調整する際に役立ちます。

6. カスタマイズ

テーマをオリジナルにするために以下を検討してください。

  1. カスタムメニュー:
  • functions.php に登録。
  • 例：
    php function register_my_menu() { register_nav_menu('primary', __('Primary Menu')); } add_action('init', 'register_my_menu');
  1. カスタムウィジェットエリア:
  • ウィジェットをテーマ内に表示。
  1. レスポンシブデザイン:
  • CSS メディアクエリを使用。
  1. テンプレートパーツの分割:
  • get_template_part() を使って、コードを再利用しやすくする。

7. デバッグと検証

  • デバッグモード:
  • wp-config.php でデバッグモードを有効にする：
    php define('WP_DEBUG', true);
  • W3C Validator:
  • HTML の構文チェック。
  • WordPress のテーマ検証:
  • Theme Check プラグインで検証。

8. 画像

screenshot.png （サイズ 1200x900px）

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

投稿をさらに読み込む