はじめに

現在制作しているポートフォリオサイトを、HTMLサイトからWordPressテーマ化しました。

これまで静的HTMLで管理していましたが、更新作業やお知らせ追加をしやすくするため、WordPress化に挑戦しました。

今回はその中でも、

• header / footer の分割
• 共通パーツ化
• WordPressテーマ化の基本構成

について、制作ログとしてまとめます。

HTMLサイトをWordPress化した理由

WordPressテーマ化を行った理由は、主に以下の3つです。

• 更新作業を簡単にするため
• CMSとして運用できるようにするため
• WordPress自作テーマ制作を学ぶため

HTMLのみで制作していると、全ページ共通の修正でも複数ファイルを編集する必要があります。

特に header や footer の修正は手間がかかるため、WordPressのテンプレート分割を導入しました。

WordPressテーマ化で最初にやったこと

まずはHTMLサイトを、WordPressテーマとして動かせる構成に変更しました。

作成した主なファイル

• style.css
• functions.php
• header.php
• footer.php
• index.php

WordPressでは、これらをテーマフォルダ内に配置することで、自作テーマとして認識されます。

header / footer を分割した理由

共通管理がしやすくなる

HTML制作時は、各ページに同じheaderコードを書いていました。
しかしWordPressでは、

<?php get_header(); ?>

を使うことで、共通headerを呼び出せます。
footerも同様に、

<?php get_footer(); ?>

で管理できます。
これにより、header.php を1回修正するだけで全ページへ反映されるようになりました。

実際に苦労したポイント

wp_head() と wp_footer() の理解

最初は、

<?php wp_head(); ?>
<?php wp_footer(); ?>
の意味が分からず、CSSやJavaScriptが正常に読み込まれませんでした。

特にSwiperやGSAPなどを使用していたため、読み込み順で動作しない場面もありました。
WordPressでは、プラグインやスクリプト管理のために重要な記述になるので、自作テーマ制作では必須だと感じました。

functions.php でCSS・JSを管理

CSSやJavaScriptは、functions.php で読み込むように変更しました。

function my_scripts() {
	wp_enqueue_style('style', get_stylesheet_uri());
	wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_scripts');

最初はHTMLと同じ感覚で書いていましたが、WordPressでは enqueue を使った管理が基本になります。

WordPressテーマ化して感じたメリット

実際にテーマ化して感じたメリットはかなり大きかったです。

更新がしやすい

共通パーツ管理が非常に楽になりました。

実務に近い学習ができる

静的HTMLだけでは学べなかった、

• WordPress構造
• テンプレート分割
• functions.php管理

などを実践的に学べました。

まとめ

HTMLサイトをWordPressテーマ化することで、更新性や拡張性が大きく向上しました。
特に header / footer の分割は、管理効率をかなり改善できたと感じています。

現在は、

• レスポンシブ調整
• 投稿機能のカスタマイズ
• SEO設定
• 表示速度改善

なども進めています。

これからWordPress自作テーマ制作を始める人の参考になれば嬉しいです ☺️