wp-functions-manual

静的サイトからWordPressへの移行において、共通要素（ヘッダー・フッター・ハンバーガーメニュー）およびCSS/JSファイルを子テーマ側で自動一括制御するための functions.php 設定解説です。

1. 親テーマおよび子テーマの style.css 読み込み

親テーマのスタイル（ベースCSS）を先に読み込み、その後に子テーマのスタイルを読み込むことで、子テーマでのカスタマイズを安全に優先反映させます。

// ① 親テーマ＆子テーマの CSS 読み込み
add_action( ‘wp_enqueue_scripts’, ‘my_child_theme_styles’ );
function my_child_theme_styles() {
// 親テーマの style.css を読み込み
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );// 子テーマの style.css を読み込み（親テーマのCSS依存として定義）
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(), array( ‘parent-style’ ) );
}

2. 子テーマ内の js/index.js を読み込み（フッターで実行）

子テーマフォルダ内の js/index.js を読み込みます。DOM構築後の処理やハンバーガーメニューの開閉動作などを安全に行うため、HTMLのフッター領域（画面最下部）で読み込む設定にしています。

// ② 子テーマの JS ファイル読み込み
add_action( ‘wp_enqueue_scripts’, ‘my_child_theme_scripts’ );
function my_child_theme_scripts() {
// 子テーマの js/index.js をフッターで読み込み (第5引数を true に設定)
wp_enqueue_script(
‘child-custom-js’,
get_stylesheet_directory_uri() . ‘/js/index.js’,
array(), // 依存関係（必要に応じて jQuery など）
filemtime( get_stylesheet_directory() . ‘/js/index.js’ ), // キャッシュ対策用バージョン指定
true // true = フッター（</body>前）で出力
);
}

3. 全ページの画面最上部にヘッダー＆ハンバーガー/スライドメニューを自動挿入

WordPressの wp_body_open フックを利用し、<body> 開始タグの直後に共通ヘッダーおよびハンバーガーメニューのHTML構造を全ページへ自動出力します。

// ③ 全ページの <body> 直後にヘッダー＆ハンバーガーメニューを自動挿入
add_action( ‘wp_body_open’, ‘insert_custom_header_and_drawer’ );
function insert_custom_header_and_drawer() {
?>
<!– 共通ヘッダー領域 –>
<header class=”site-header”>
<div class=”header-inner”>
<div class=”site-logo”>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>サイトロゴ</a>
</div><!– ハンバーガーボタン –>
<button class=”hamburger-btn” id=”js-hamburger” aria-label=”メニューを開く”>
<span></span>
<span></span>
<span></span>
</button>
</div>
</header><!– スライド/ドロワーメニュー領域 –>
<nav class=”drawer-menu” id=”js-drawer”>
<ul class=”drawer-nav-list”>
<li><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>ホーム</a></li>
<li><a href=”<?php echo esc_url( home_url( ‘/about/’ ) ); ?>”>当サイトについて</a></li>
<li><a href=”<?php echo esc_url( home_url( ‘/service/’ ) ); ?>”>サービス概要</a></li>
<li><a href=”<?php echo esc_url( home_url( ‘/contact/’ ) ); ?>”>お問い合わせ</a></li>
</ul>
</nav>
<?php
}

4. 全ページの画面最下部にフッターを自動挿入

WordPressの wp_footer フックを利用し、画面の最下部（</body> の直前）に共通フッターを自動挿入します。

// ④ 全ページのフッター手前に共通フッターを自動挿入
add_action( ‘wp_footer’, ‘insert_custom_footer’, 5 ); // 優先度5で少し早めに実行
function insert_custom_footer() {
?>
<!– 共通フッター領域 –>
<footer class=”site-footer”>
<div class=”footer-inner”>
<p class=”copyright”>&copy; <?php echo date(‘Y’); ?> Your Site Name. All Rights Reserved.</p>
</div>
</footer>
<?php
}

5. 子テーマ style.css によるヒーローエリア＆余白調整

Arkheテーマ標準の自動生成ヘッダーや上部余白を完全に打ち消し、自作の全幅ヒーローエリア（青帯 .hero）をヘッダー直下に隙間なく（margin-top: -85px）密着させるためのCSS設定です。

/* テーマ自動生成タイトル・ページヘッダー要素の非表示＆余白リセット */
.l-main > *:not(.l-main__body),
.p-pageHeader,
.p-entryHero,
.p-entryHeader,
.entry-header {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}.l-main, .l-content, .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}/* 自作ヒーローエリア（青帯）：ヘッダー直下に密着させる設定 */
.hero {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
color: white !important;
padding: 60px 0 !important;
text-align: center !important;
margin-bottom: 30px !important;
/* 隙間を無くしてヘッダー直下に密着させるためのネガティブマージン */
margin-top: -85px !important;
position: relative !important;
z-index: 1 !important;
/* 画面幅いっぱいに広げる全幅指定 */
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
box-sizing: border-box !important;
}

※ margin-top: -85px !important; の数値でヘッダーと青帯の重なり具合を調整します。テーマの構造やヘッダー高さに応じて適宜微調整を行ってください。

6. 変換ツールを使用したWordPress投稿ページへの貼り付け

静的HTMLをWordPressの「カスタムHTML」ブロックへ貼り付ける際は、自作の HTML/CSS/JS 結合＆変換＆分割ツールを使用してWordPress用に最適化してから配置します。

【重要】削除・除外する項目
`functions.php` の `wp_body_open` / `wp_footer` フックによりヘッダーとフッターが自動挿入されているため、投稿ページ側のHTML内にある以下の要素は削除（未記述）とします：

<header></header>（ツールで自動除去）
<footer></footer>（ツールで自動除去）
<!DOCTYPE html>, <html>, <head>, <body> タグ（ツールで自動除去）

【1. HTMLタブ（カスタムHTMLブロック）に配置する構造例】

<!– 全幅青帯（ヒーローエリア） –>
<section class=”hero”>
<div class=”container”>
<h1>趣味の備忘録「Hobby Log」</h1>
<p>日々の活動や記録を、シンプルに。自由に。</p>
</div>
</section><!– メインコンテンツ領域 –>
<div class=”container”>
<!– 本文コンテンツやカードグリッドなどをここに配置 –><!– 戻るボタンエリア –>
<div class=”action-area”>
<a href=”page5.html” class=”btn btn-primary”>マニュアル一覧に戻る</a>
</div>
</div>

【2. CSSタブ（または子テーマ style.css）に配置する補正設定】

/* — 戻るボタン・アクションエリアのスタイル（テーマ干渉の強力リセット） — */
.action-area {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin-top: 40px !important;
padding-top: 20px !important;
border-top: 1px solid #eeeeee !important;
}.action-area .btn-primary {
display: inline-block !important;
background-color: #007bff !important;
color: #ffffff !important;
font-weight: bold !important;
padding: 12px 36px !important;
border-radius: 8px !important;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
transition: all 0.3s ease !important;
text-align: center !important;
line-height: 1.5 !important;
}.action-area .btn-primary:hover {
background-color: #0056b3 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4) !important;
color: #ffffff !important;
}

マニュアル一覧に戻る

趣味の備忘録「Hobby Log」