Springfalfal

【WordPress】HTMLサイトのWordPress化の流れマニュアル

HTMLで制作した静的なWebサイトをWordPressのオリジナルテーマ（カスタムテーマ）に変換する際、

WordPressのシステムが正しく動作するために守るべき「基本ルール」や「必須の手順」があります。

既存のHTML構造やBEMを用いたSCSSの設計を活かしつつ、WordPress化するための重要なルールをまとめま、マニュアルを作成しました。

1. テンプレートファイルの基本ルール（ファイル分割）

HTMLでは1枚のファイル（index.html など）にすべてを記述しますが、

WordPressではパーツごとにファイルを細分化するのが基本ルールです。

最低限必要なファイル構成

WordPressテーマとして認識させるには、同じフォルダ内に最低限 index.php と style.css の2つが必要です。

通常は運用性を高めるために、以下のように分割します。

  • index.php: メインのテンプレート（他の専門ファイルがない場合のフォールバック）。
  • header.php: サイト共通のヘッダー部分（<!doctype html>から </header> まで）。
  • footer.php: サイト共通のフッター部分（<footer> から </html> まで）。
  • sidebar.php: サイドバー部分（必須ではないが、あると便利）。
  • style.css: テーマの情報を記述するメインスタイルシート（中身はSCSSからコンパイルしたものでOK）。

詳しくは、テンプレート階層をまとめた記事があるのでこちらをチェックしてください。

2. テーマ認識のためのルール（style.css の記述）

WordPressに「これは独自のテーマです」と認識させるため、

テーマフォルダ直下の style.css の最上部に必ず以下のコメント（テーマヘッダー）を記述する必要があります。

CSS

/*
Theme Name: テーマの名前（例：Springfalfal Portfolio Theme）
Author: 制作者名
Description: テーマの説明文
Version: 1.0.0
*/

これがないと、WordPressの管理画面の「外観 ＞ テーマ」に表示されません。

3. 必須の共通関数（テンプレートタグ）の埋め込み

WordPressのシステムやプラグインが正常に動作するために、絶対に記述しなければならない関数（フック）が2つあります。

① wp_head() の配置

header.php の </head> タグの直前に必ず記述します。 プラグインのCSSや、WordPress全体の制御スクリプトがここに自動挿入されます。

PHP

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

② wp_footer() の配置

footer.php の </body> タグの直前に必ず記述します。 JavaScriptの読み込みや、管理画面にログインしている時に画面上部に表示される「ツールバー」の制御などに必須です。

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

③ wp_body_open() の配置 

header.php（または index.php など）の <body> 開始タグの直後に必ず記述します。

WordPress 5.2から追加された必須の関数で、

アクセス解析のタグ（Google Analyticsなど）や、

プラグインが画面全体（<body>の直後）に挿入したいコードやスクリプトを安全に自動挿入するために使用されます。

<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>

4. パーツを呼び出す

分割した header.php や footer.php を、各ページ（index.php や front-page.php など）で結合するための専用の関数が用意されています。

  • ヘッダーを読み込む: <?php get_header(); ?>
  • フッターを読み込む: <?php get_footer(); ?>
  • サイドバーを読み込む: <?php get_sidebar(); ?>
  • その他の自作パーツ（例: _loop-news.php）を読み込む: <?php get_template_part('loop', 'news'); ?>

【例：index.php の基本構造】

<?php get_header(); ?>

<main class="l-main">
  <!-- ここにメインのコンテンツやBEMで設計したコンポーネントを記述 -->
</main>

<?php get_footer(); ?>

5. パス（URL）の書き換え

HTMLサイトでの相対パス（href="./css/style.css" や src="./img/logo.png"）は、

WordPress化するとすべてリンク切れになります。

テーマフォルダの場所を動的に取得する関数に書き換える必要があります。

画像やアセットの読み込み

テーマフォルダ（記述しているテーマのルート）までのパスを出力する get_theme_file_uri() を使用します。

  • HTML: <img src="./img/logo.png" alt="ロゴ">
  • WordPress: <img src="<?php echo esc_url(get_theme_file_uri('/img/logo.png')); ?>" alt="ロゴ">

サイト内のリンク（URL）

トップページのURLを出力する home_url() を使用します。

  • HTML: <a href="./about.html">
  • WordPress: <a href="<?php echo esc_url(home_url('/about/')); ?>">

6. CSSやJavaScriptの読み込みルール

HTMLのように header.php に <link rel="stylesheet"> や <script> を直接ベタ書きするのは、

WordPressの作法としては推奨されません（プラグインとの競合や二重読み込みの原因になります）。

原則として、functions.php という制御ファイルを作り、そこで一括管理・読み込みを行うのがルールです。

【functions.php での記述例】

Sassからコンパイルした style.css や、jQuery、Slickなどの外部ライブラリを登録します。

function my_enqueue_scripts() {
    // Google Fonts などの外部フォントの読み込み
    wp_enqueue_style('my-fonts', 'https://fonts.googleapis.com/...', array(), null);

    // メインのテーマCSS（style.css）の読み込み
    wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), '1.0.0');

    // 自作のJavaScript（jQueryに依存させる場合）
    wp_enqueue_script('my-main-script', get_theme_file_uri('/js/main.js'), array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

※第5引数を true にすることで、

自動的に wp_footer() のタイミング（画面最下部）でスクリプトが読み込まれるようになり、

表示速度の向上につながります。

実務的な読み込み方法

functions.phpを用いてstyleやscriptを読み込む際に、

条件分岐（管理画面では適用しない）や、

あえて読み込みを遅延させることでサイトの表示速度を改善することができます。

SEO的にも重要になるので、気になる方は次の記事を参考にしてください。

WordPressサイトの表示速度高速化のためのアセット読み込み方法

7. 投稿データを表示するルール（メインループ）

お知らせやブログ記事など、WordPressの管理画面から投稿されたデータを動的に取得してHTMLに表示する場合、「ループ」という決まった構文を使用します。

<?php if (have_posts()) : ?>
  <div class="p-news-list">
    <?php while (have_posts()) : the_post(); ?>
      
      <!-- ここに1記事分のHTML（BEMのComponentなど）を記述 -->
      <article class="c-card">
        <a href="<?php the_permalink(); ?>">
          <time datetime="<?php echo get_the_date('Y-m-d'); ?>"><?php echo get_the_date(); ?></time>
          <h2 class="c-card__title"><?php the_title(); ?></h2>
        </a>
      </article>

    <?php endwhile; ?>
  </div>
<?php else : ?>
  <p>記事が見つかりませんでした。</p>
<?php endif; ?>

まとめ

  1. ファイルを細分化する（header.php, footer.php への分割）
  2. 必須タグを忘れない（wp_head(), wp_footer()）
  3. パスはすべて関数に変える（get_theme_file_uri(), home_url()）
  4. CSS/JSは functions.php で読み込む

この基本マニュアルさえ押さえておけば、

HTML/SCSSで緻密に組んだデザインシステム（BEMの設計など）を崩すことなく、

スムーズにWordPressの動的なテーマへと移行させることができます。

学習記録一覧へ

Coding

関連記事