公開日: 2017年09月27日
更新日: 2021年12月18日

HTMLのWordPress化についてその3

こんにちは、クロコロールの熊田です。
本日は初心者向け！HTMLのWordPress化第3回（最終回）です。
第1回はコチラ。第2回はコチラ。

1 wp_headとwp_footer
2 共通部分をパーツテンプレート化して…
3 固定ページのテンプレートは…
4 FTPソフトでアップロード
5 まとめ

wp_headとwp_footer

第1回で重要な事を忘れてましたが…
各テンプレートに分ける前にタグの直前に <?php wp_head(); ?> 、タグの直前に <?php wp_head(); ?> と記述しましょう。

（省略）

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

（省略）

<?php wp_head(); ?>

</head>

（省略）

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

（省略）

<?php wp_footer(); ?>

</body>

これを記述することでWordPressが用意してあるjQueryやプラグインに必要な各種CSSファイル・JSファイルが読み込まれます。
逆にこれを忘れるとプラグインが動かなかったりします。
第1回で自分が説明し忘れたように結構記述を忘れがちです。みなさん気をつけましょう。

共通部分をパーツテンプレート化して…

あとは各ページを見比べながら共通部分をパーツテンプレート化、各テンプレートで必要に応じてパーツテンプレートを読み込む記述をしましょう。
仮にトップページが上の画像のようにヘッダー・フッター・サイドバーがあるページの場合はindex.phpが

<?php get_header(); ?>

（省略）

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

（省略）

<?php get_sidebar(); ?>

<?php get_footer(); ?>

な感じになるのではないでしょうか。

固定ページのテンプレートは…

トップページ以外の、ブログのように頻繁に更新されるわけではないページは固定ページ用のテンプレートであるpage.phpを作成します。
といっても当然サイト上には複数のページを置きたい場合がほとんどだと思います。
そのため例えば会社概要のページを置きたい場合、URLが https://サイトのURL/company/ としたいならば page-company.php というテンプレートを作成します。

FTPソフトでアップロード

出来上がった各種テンプレートはFileZilla等のFTPソフトを使ってサーバーにアップロードしましょう。
アップロード先のディレクトリは、サイトのURL/wp-content/themes/任意でつけたテーマ名になります。

まとめ

ブログのような投稿系コンテンツのページでない限りWordPressだからといって難しいわけではないです。
ちょこちょこっと追記して共通部分をパーツテンプレート化して各ページ用のテンプレートを作成するだけです。
これが投稿系コンテンツだとWordPressループやら出てきて難しくなるわけですが…

その説明はまたの機会に（予定は未定）。

この記事を書いた人
最新の記事

熊田賢太郎

株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。