この記事では、HTMLとCSSのファイルをWordpress化する手順について説明していきます。
「Wordpress化」と聞くと難しそうに感じますよね。
この記事を読めば、スムーズにWordPress化することができますよ。
HTMLファイルからWordPress化する手順
HTMLファイルからWordPress化する手順は以下の通りです。
- HTMLファイルをテーマフォルダへ移動させる
- テンプレート化する
- パスをphp仕様にする
- 共通パーツを切り出す
- それぞれの場所で呼び出す
この手順通りに作業を行えば、HTMLとCSSファイルが反映されたページが、WordPress上で表示されるようになります。
WordPressを使って、新着記事を出力させるのはまた別の記事で紹介します。
PHPファイルは一文字間違えるだけで、ページが真っ白になったりする可能性があります。
WordPress化に慣れていない人は、バックアップを取ってから行うようにしましょう。
まずはMAMPなどを使いローカル環境で動かしてみることをオススメします。
ローカル環境にWordPressをインストールする方法は別の記事にまとめています。
WordPress化するための準備
WordPress化するのにいじるところは、wp-contentの中のthemesファイルです。
index.phpとstyle.cssさえあれば、何かは表示されるので、用意しておきます。
HTMLファイルをテーマフォルダへ
themesの中に新規フォルダを作成します。
そのテーマフォルダの中にindex.htmlとstyle.cssなどを入れます。
フォルダ名は何でもいいですが、テーマ名にしておくのがいいでしょう。
トップページのファイルをテンプレートに変更
この段階でWordPressのテーマ画面を見ると「壊れているテーマ」と書かれて、テーマを選択することができません。
「以下のテーマはインストール済みですが、足りない部分があります。」と表示される状態です。
index.htmlのままだと、「テンプレートが不足しています。独立したテーマには index.php テンプレートファイルが必要です。」と表示される。
WordPressはPHPで動いています。
そのため、拡張子がhtmlのままだと動かないので、拡張子をhtmlからphpに変更する必要があります。
phpで読み込まれるためにIndex.htmlからindex.phpに変更しましょう。
また、style.cssにテーマ名を入れておくことで、WordPressの管理画面のテーマ選択画面で希望の名前が反映されます。
style.cssの1番上に以下のようにタイトル名を記述しておきましょう。
/*
Theme Name: カスタマイズ用のテーマ
*/
URLをテンプレートタグで読み込むようにする
この段階でファイルを開くと、index.phpの内容だけ反映されて、cssファイルの内容が反映されていません。
index.htmlからWordPressで読み込むために拡張子を変更したように、ファイルの中身もWordPress用に少し変更を加える必要があります。
そのために使うのが、get_template_directory_uri()のいうテンプレートタグです。
このタグを使うことによって、URLを取得することができるようになります。
URLを取得して、文字列として出力するためには、phpの文法で、echoを使って出力できます。
具体的には、<?php echo get_template_directory_uri(); ?>を使います。
head要素の中のスタイルシートを読み込むリンクタグなどは以下のようにします。
イメージタグは以下のようにすることで画像が読み込まれるようになります。
; ?>/img/photo1.JPG)
この他、scriptタグなど、外部からfront-page.php以外から読み込むものには全て同じようにして、きちんと読み込むように変更しましょう。
文章中などのイメージタグなどは、マルチカーソル機能を使って一度に変更しましょう。
WordPressで管理しやすいように共通パーツに切り出す
今のままでは1ページのページでしかありませんが、WordPressは通常ブログやサイトとして使われます。
ヘッダーやサイドバーなどどのページでも使うものは、共通パーツとして切り出します。
共通のパーツを書き出すことで、全てのページに同じことを書くて手間をなくすことができます。
それぞれのphpファイルを作成し、index.phpから切り出しましょう。
共通パーツとして切り出す時ときに、名前は適当に付けてはいけません。
●●のパーツとして切り分けるときには「●●.php」というファイル名にしての●●部分は読み込む内容の名前にするのがルールです。
この点を踏まえて、ファイル名は以下のようにしましょう。
- ヘッダーとして切り出したものは、「header.php」
- サイドバーとして切り出したものは「sidebar.php」
- フッターとして切り出したものは「footer.php」
function.phpを読み込むようにする
切り出す時に、function.phpを読み込むようにするべきです。
</head >の直前に<?php wp_head(); ?>と書く</body>の直前に<?php wp_footer(); ?>と書く
これでfunctions.phpに記載したCSSとJavaScriptが読み込まれます。
WordPressのテンプレートごとに共通パーツを読み込む
それでは、共通パーツとして切り出したものを、必要な箇所で呼び出しましょう。
WordPressでは、大きく分けて3つのページがあります。
- 一覧ページ：archive.php
- 投稿ページ：single.php
- 固定ページ：page.php
一覧ページは、トップページなどいくつかの記事が一覧表示されるページ。
投稿ページはいわゆるブログ記事など、投稿した個別記事のページ。
固定ページは投稿ページと
それぞれ違うファイルを作成します。
そして、共通パーツとして切り出したものを読み込むために、それぞれ呼び出すためのコードを書き込みます。
- header.phpの読み込み:<?php get_header(); ?>
- footer.phpの読み込み：<?php get_footer(); ?>
- sidebar.phpの読み込み：<?php get_sidebar(); ?>
こうすることによって、全てのページで切り出したものが読み込まれるようになります。
まとめ
WordPressする手順を説明しました。
ぜひ挑戦してみてください。
