Twenty内で完全自作HTML/CSS/JSページを作る方法

WordPress / Twenty / Blank Page

Twenty内で、完全に自作HTML/CSS/JSのページを作る方法

Twentyテーマを使いながら、特定の固定ページだけを通常のテーマ表示から切り離し、独自HTML・独自CSS・独自JavaScriptだけで構築するための実装メモです。

結論

Twentyを親テーマとして使い、子テーマ側で特定ページだけ専用PHPテンプレートに差し替えます。 これにより、そのページだけTwentyのヘッダー・フッター・標準CSS・標準JSを使わずに表示できます。

固定ページにHTMLブロックを貼る方法ではなく、ページテンプレートごと差し替えるのが安全です。

1. 全体像

WordPressのTwentyテーマを使っている場合でも、子テーマを作れば、特定のURLだけ完全独自のページとして表示できます。たとえば固定ページのスラッグを blank-lp にして、そのページだけ blank-lp.php を読み込ませます。

やりたいこと	対応方法
Twentyは残したい	親テーマはTwentyのままにする
特定ページだけ自作したい	子テーマでページテンプレートを差し替える
TwentyのCSS/JSを避けたい	`wp_head()` と `wp_footer()` を呼ばない
SEOや解析タグも使いたい	`wp_head()` と `wp_footer()` を残す。ただし完全まっさらではなくなる

2. ファイル構成

例として、親テーマを Twenty Twenty-Four、子テーマ名を Twenty Blank Child、固定ページのスラッグを blank-lp とします。

wp-content/themes/twenty-blank-child/ ├─ style.css ├─ functions.php ├─ blank-lp.php └─ blank-lp/ ├─ style.css └─ main.js

blank-lp.php が完全独自ページの本体です。 blank-lp/style.css と blank-lp/main.js はそのページ専用のCSS/JSです。

3. 子テーマを作る

style.css

子テーマの style.css を作成します。親テーマがTwenty Twenty-Fourの場合は Template: twentytwentyfour とします。

/*
Theme Name: Twenty Blank Child
Template: twentytwentyfour
Version: 1.0
*/

親テーマごとのTemplate指定

親テーマ	Template指定
Twenty Twenty-Five	`twentytwentyfive`
Twenty Twenty-Four	`twentytwentyfour`
Twenty Twenty-Three	`twentytwentythree`
Twenty Twenty-Two	`twentytwentytwo`
Twenty Twenty-One	`twentytwentyone`
Twenty Twenty	`twentytwenty`

親テーマを直接編集するのは避けてください。テーマ更新で変更が消えます。それは、砂浜に設計図を書くのと同じです。

4. 特定ページだけテンプレートを差し替える

子テーマの functions.php に以下を追加します。固定ページのスラッグが blank-lp のときだけ、子テーマ内の blank-lp.php を使う設定です。

<?php

add_filter('template_include', function ($template) {
    if (is_page('blank-lp')) {
        $blank_template = get_stylesheet_directory() . '/blank-lp.php';

        if (file_exists($blank_template)) {
            return $blank_template;
        }
    }

    return $template;
}, 99);

固定ページを作成
WordPress管理画面で固定ページを作り、スラッグを blank-lp にします。

子テーマを有効化
外観＞テーマから作成した子テーマを有効化します。

ページにアクセス
/blank-lp/ にアクセスすると、通常のTwentyテンプレートではなく独自テンプレートが表示されます。

5. 完全独自テンプレートを作る

子テーマ直下に blank-lp.php を作成します。ここではあえて get_header()、get_footer()、wp_head()、wp_footer() を呼びません。これによりTwentyやプラグインのCSS/JSが混ざりにくくなります。

<?php
/**
 * Completely blank custom page.
 */
?><!doctype html>
<html lang="ja">
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo esc_html(get_the_title()); ?></title>

  <link rel="stylesheet" href="<?php echo esc_url(get_stylesheet_directory_uri() . '/blank-lp/style.css'); ?>">
  <script defer src="<?php echo esc_url(get_stylesheet_directory_uri() . '/blank-lp/main.js'); ?>"></script>
</head>
<body>
  <main class="page">
    <section class="hero">
      <p class="label">Twenty内の完全独自ページ</p>
      <h1>このページだけ、HTML/CSS/JSを完全独自にできます</h1>
      <p>
        Twentyのヘッダー、フッター、ブロックCSSを使わずに、
        このページ専用の構成で表示しています。
      </p>
      <button id="demoButton">動作確認</button>
    </section>
  </main>
</body>
</html>

6. 専用CSSとJS

blank-lp/style.css

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
  background: #f5f7fb;
  color: #111827;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.hero {
  width: min(920px, 100%);
  padding: 64px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}

.label {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2563eb;
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.1;
}

p {
  font-size: 18px;
  line-height: 1.9;
}

button {
  margin-top: 24px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

blank-lp/main.js

document.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("demoButton");

  if (!button) return;

  button.addEventListener("click", () => {
    alert("独自JSが動いています。Twentyの檻から脱出成功です。");
  });
});

7. 注意点

完全まっさら構成

wp_head() と wp_footer() を呼ばない場合、そのページはかなりクリーンになります。一方で、WordPressやプラグインが自動出力するものも出なくなります。

メリット	デメリット
余計なCSS/JSが入らない	SEOプラグインのmetaタグが出ない場合がある
表示崩れが起きにくい	アクセス解析タグが入らない場合がある
LPやアプリ紹介ページを自由に作れる	管理バーや一部プラグイン機能が使えない場合がある

WordPress連携を残したい場合

SEOプラグインや解析タグを使いたい場合は、wp_head() と wp_footer() を入れます。ただし、その場合はWordPressやプラグインのCSS/JSが混ざる可能性があるため、完全まっさらではありません。

<head>
  ...
  <?php wp_head(); ?>
</head>

<body>
  ...
  <?php wp_footer(); ?>
</body>

LP・アプリ紹介・実験UIなら完全まっさら構成。SEOや解析重視ならWordPress連携あり構成。目的で切り替えるのが現実的です。

最終まとめ

Twentyテーマ内で完全自作ページを作るなら、親テーマを直接編集せず、子テーマを使います。そして、template_include フィルターで特定ページだけ独自PHPテンプレートへ差し替えます。

これで、Twentyを使いながらも、指定ページだけは完全に自分のHTML/CSS/JSで制御できます。 WordPressの中に、独立した小さなWebアプリやLPを埋め込むイメージです。