1. テーマフォルダおよびファイル構造
WordPressのテーマディレクトリ（例: wp-content/themes/hobbylog/）内に配置するファイル構成です。
wp-content/themes/hobbylog/
├── style.css ← テーマの基本情報定義ファイル（必須）
├── functions.php ← CSS/JSの自動読み込み＆機能設定（必須）
├── header.php ← 共通ヘッダー（<head>〜<header>）
├── footer.php ← 共通フッター（<footer>〜</body>）
├── page.php ← 標準の固定ページ用テンプレート
├── page-bookmark.php ← マニュアル等で使う個別固定ページ用テンプレート
└── css/
├── layout.css ← 共通レイアウトCSS
├── sample-for-test.css ← ページ基本スタイルCSS
└── bookmark-setting.css ← 拡張スタイルCSS
2. 移行のステップと各ファイルの役割
Step 1: テーマ基本定義（style.css）の作成
WordPressにテーマとして認識させるため、テーマフォルダ直下に style.css を作成し、冒頭にテーマ情報を記述します。
/*
Theme Name: HobbyLog Theme
Author: Your Name
Description: 静的HTML構成から移植したオリジナル自作テーマ
Version: 1.0.0
*/
Step 2: CSS・JSの読み込み指定（functions.php）
<link rel="stylesheet"> をHTMLに直書きせず、functions.php からWordPressに自動登録・一括読み込みさせます。
<?php
function hobbylog_enqueue_scripts() {
// Google Fonts 読み込み
wp_enqueue_style( ‘google-fonts’, ‘https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap’, array(), null );// 既存CSSファイルの読み込み
wp_enqueue_style( ‘hobbylog-layout’, get_template_directory_uri() . ‘/css/layout.css’, array(), ‘1.0.0’ );
wp_enqueue_style( ‘hobbylog-sample’, get_template_directory_uri() . ‘/css/sample-for-test.css’, array(‘hobbylog-layout’), ‘1.0.0’ );
wp_enqueue_style( ‘hobbylog-bookmark’, get_template_directory_uri() . ‘/css/bookmark-setting.css’, array(‘hobbylog-sample’), ‘1.0.0’ );
}
add_action( ‘wp_enqueue_scripts’, ‘hobbylog_enqueue_scripts’ );// 管理画面の「外観 > メニュー」機能を有効化
function hobbylog_setup() {
register_nav_menus( array(
‘global-menu’ => ‘グローバルナビゲーション’,
) );
}
add_action( ‘after_setup_theme’, ‘hobbylog_setup’ );
Step 3: 共通ヘッダー（header.php）の作成
header.js による動的描画を廃止し、WordPress標準の wp_nav_menu() に置き換えます。<head> 内に <?php wp_head(); ?> を配置するのが重要です。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<?php wp_head(); ?> <!– CSSやメタタグが自動挿入されます –>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?><header>
<div class=”main-nav”>
<div class=”logo”>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” style=”color: inherit; text-decoration: none;”>HobbyLog</a>
</div>
<nav>
<?php
wp_nav_menu( array(
‘theme_location’ => ‘global-menu’,
‘container’ => false,
‘menu_class’ => ‘nav-links’,
‘fallback_cb’ => false,
) );
?>
</nav>
</div>
</header>
Step 4: 共通フッター（footer.php）の作成
footer.js の内容をPHPに移植します。閉じ </body> の直前には必ず <?php wp_footer(); ?> を記述します。
<footer>
<div class=”container”>
<p class=”copyright”>© <?php echo date(‘Y’); ?> HobbyLog Project. All Rights Reserved.</p>
<p class=”powered”>Powered by Works & My Coding Passion</p>
</div>
</footer><?php wp_footer(); ?> <!– スクリプト類が自動挿入されます –>
</body>
</html>
Step 5: 固定ページテンプレート（page.php）の作成
管理画面で作成したタイトル（the_title()）や本文（the_content()）が自動出力されるように組み込みます。
<?php get_header(); ?><div class=”page-header”>
<div class=”container”>
<h1><?php the_title(); ?></h1>
<p>サブページの説明文テキスト</p>
</div>
</div><main class=”container”>
<div class=”content-area”>
<?php
while ( have_posts() ) :
the_post();
the_content(); // 管理画面で入力した「HTML本文」が出力される領域
endwhile;
?>
</div>
</main><?php get_footer(); ?>
3. WordPress管理画面へのコード入力範囲
自作テーマ化完了後、各固定ページの編集画面（カスタムHTMLブロック）には、カード枠内の「本文コンテンツのみ」を記述すれば良くなります。
| パーツ要素 | 配置・記述場所 | 理由・メリット |
|---|---|---|
<head> / メタタグ / CSS link | header.php / functions.php | 全ページ共通管理され、個別ページでの記述が不要になるため |
<header> ナビゲーション | header.php | WP管理画面「外観 > メニュー」から一括管理できるため |
メイン本文（<section> 等） | WordPress 固定ページ編集画面 | デザイン枠を崩さずにページごとの記事作成に集中できるため |
<footer> 著作権表示 | footer.php | コピーライト年号などを自動で最新化・全ページ共通化できるため |
💡 ポイント: JSによる要素挿入からの脱却
静的HTML運用時に
静的HTML運用時に
header.js や footer.js で行っていたヘッダー・フッターの共通化処理は、WordPressの get_header() / get_footer() に完全に置き換わります。これにより表示遅延がなくなり、SEO上も有利になります。