「Wordpressって聞いたことはあるけど、難しいんじゃないの？」
「更新が楽になるって聞くけど本当？」
「えっ、Wordpressって無料なの？」
「ブログと何が違うの？普通の個人サイトに使えるの？」

これは全て、私がWordpressを導入する前に思っていたことです。
とくに4番目の、「個人サイトにどうやって使うのか」がサッパリ分かりませんでした。
当時、自分の書いた小説をひたすら掲載していくだけの個人サイト(いわゆる同人サイトです……)を持っていた私ですが、流行のwordpressを自分のサイトにどう導入したらいいのかがサッパリわかりませんでした。
ブログみたいに投稿できたら確かに楽だけど、見た目をブログっぽくしたくはないしなあ……と。

そんな私が、無料のテキストエディタでサイトを作っていて、不満に思っていることがありました。

ヘッダーやサイドメニューの更新が面倒くさい！！

フレームを使用してのサイト制作が推奨されなくなって以降、
すべてのページに同じヘッダーやサイドメニューを用意しようとすると、全ページに同じヘッダーやサイドメニューのソースを書かなくてはなくなりました。
ヘッダーやサイドメニューを少し修正しようとすると、全てのページを直す必要が出てきたんですね。
とくに、小説をひとつ投稿する毎に、何十ページものサイドバーを修正するのがとても面倒でした。

wordpressを導入すると、PHPが使えるので、
ヘッダーやサイドメニューを分割して、別ファイルとして管理することが出来るようになるんですね。
ヘッダーやサイドメニューを表示したいところに、wordpressの「インクルードタグ」を書くだけです！
たったこれだけで、サイトの管理が驚くほど楽になるんです！

自分が運営している個人サイトをwordpressのテンプレートに変換して、
ヘッダー・サイドバー・フッターを分割し、サイト管理を楽にする方法をご紹介します！

(1)Wordpressを導入するための準備をする

まず、wordpressが使えるサーバを準備します。
少し前までは、wordpressが使えるサーバは、ほぼ有料のレンタルサーバしかありませんでした。
ところが今は、wordpressが使える無料のサーバが増えてきています！

「wordpress サーバ　無料」で検索すると色々出てきますので、自分に合ったサーバを選択しましょう。
wordpressをイチから導入する自信がない方は、wordpressを最初からインストールしてくれるサービスを提供しているサーバを選ぶことをおススメします。

私が使っているのは、「freeweb」さんです！
http://www.daiwa-hotcom.com/
登録して「wordpressを設置する」を選ぶだけで、簡単にwordpressを設置してくれます。
サポートメールもすぐに対応して下さるのでありがたいです。
今は新規登録受付を停止していますが、「再開は１２月上旬」とのことです！

(2)wordpressをサーバにインストールする

wordpressの導入方法は、サーバによって異なります。
自分でwordpressをイチから導入しなければならないサーバもあれば、
freewebさんのように、サーバの登録の際に「wordpressを設置する」を選ぶだけで、自動的に設置してくれるサーバもあります。
イチからwordpressを導入する場合は、wordpressコーデックスを参考にするか、「wordpress インストール」で検索してみると色々出てきます！

(3)FTPツールを使って、wordpressを自分のPCにダウンロードする

wordpressのインストールが完了したら、FTPツールを使ってwordpressを自分のPCにダウンロードします。
いつも自分のサイトを管理するのに使っているFTPツールでOKです！
(1)で登録したサーバのFTPにアクセスして、「wordpress」フォルダごとダウンロードしてきます。

(4)自分のサイトを「テーマ」に変換する

①自分のテーマフォルダを作る

まず、先ほどダウンロードした「wordpress」フォルダの中に、自分のサイトを置く場所を作ります。
「wordpress」フォルダを開き、「wp-content」フォルダの中の「themes」フォルダを開きます。

wordpress > wp-content > themes

「themes」フォルダの中に、自分のサイトをコピーして入れます。
いざという時のために、必ず元のファイルをコピーして手元に置いておくようにしましょう。

②TOPページをwordpressテーマに変換する

それではtopページをwordpress用テーマに変換します！
とても簡単です！TOPページの名前を「home.php」にするだけです。
なぜ「home.php」かというと、wordpressでは、自動的に「home.php」という名前のテンプレートをTOPページとして読み込んでくれるからです。
「index.php」は、ブログのように記事を投稿するタイプのページのアーカイブページになります。

同人サイトの場合は、「home.php」に注意書きページを、本当のTOPページはmain.phpという名前にして、以下の説明文では「main.php」をテーマ化していただいたらいいかもしれませんね！

③CSSの名前を変更する

メインで使っているcssの名前を「style.css」という名前にして、home.phpと同じ階層に置きます。
もしcssの階層が変わる場合は、画像などのリンクをこのタイミングで直してくださいね！

③home.phpを分割する

次に、home.phpを分割していきます。
htmlのヘッダー部分を選択して切り取り、別のphpファイルとして保存します。
同じように、フッター、ある場合はサイドバーなども切り取って、下記の名前で保存していきます。

ヘッダー　→　header.php
フッター　→　footer.php
サイドバー　→　sidebar.php

これで、それぞれの部品のテンプレートが出来ました！

④分割したテンプレートを読み込む「インクルードタグ」を書く

home.phpのそれぞれのパーツがあった場所に、下記のインクルードタグを書いていきます。

ヘッダー

フッター

サイドバー

これで、分割したテンプレートをメインのテンプレートに読み込むことが出来るようになりました！

同様に、全てのページのヘッダー、フッター、サイドバーを削除して、かわりにこのインクルードタグを埋め込んでいきます。
全てのページの拡張子を「.html」から「.php」に変更していきます。
また、ヘッダーのインクルードタグを、下記のようにして各ページ毎にテンプレート名を付けていきます。

たとえばnovelページの場合は、/* Template Name: novel */のようにして付けていきます。
これはあとでwordpressの管理ページから各テンプレートを読み込むときに必要です。

ちょっと面倒ですが、あとでヘッダーやサイドバーを弄る時に、header.phpやsidebar.phpを修正するだけで良くなるので頑張りましょう！

⑤作成したテンプレートのリンクを修正する

wordpressのタグを使って、作成したphpファイルの中のリンクを修正していきます。
wordpressではphpでページを表示していきますので、相対パスのリンクはそのままでは使えませんので、下記を参考にリンクを修正していって下さい！

style.cssへのリンク

その他のcss等へのリンク
↓たとえばcssフォルダの中のmain.cssという名前のcssにリンクを貼るとき

これがjsフォルダの中のmain.jsという名前のjavascriptsの場合は↓みたいになります。

TOPページへのリンク

その他のページへのリンク
たとえばnovelというページの場合

たとえばnovelというページの下層にある「novel_01.html」というページの場合

画像のリンク
たとえば「img」というイメージフォルダに入れているJPEG画像の場合

※javascriptsやcssの中にある画像ファイルのリンクを修正する場合は、http://からはじまる絶対パスを書きます。
大抵「http://ドメイン/wordpress/wp-content/themes/テンプレート名/イメージフォルダ名/画像名.拡張子」というリンクになると思います。

⑥header.phpとfotter.phpにwordpressの機能を読み込むタグを追記する

header.phpの/headタグ直前に

fotter.phpの/bodyタグ直前に

……を追記します。
このタグを書くことで、wordpress側で必要なコードを自動で追記してくれます！

以上で、自分のサイトの「テーマ化」が終了です！
本当はもっと、小説や画像の投稿をブログのようにしたりも出来るのですが、今回はヘッダーとフッターを分割することだけに絞ってテーマ化していきますね！
投稿ページの作り方は、後日別のエントリーで紹介しようと思います。

(5)作ったテーマをアップロードする

FTPツールで、作ったテーマをフォルダごとアップロードします。
「themes」フォルダの中に自分で作ったフォルダを、そのままアップロードしてください。

(6)テーマを有効化する

wordpressの管理ページにログインします。
ダッシュボードの「外観」＞「テーマ」の中に、さきほどアップロードした自分のテーマが表示されますので、それを選択し「有効」にします。

(7)ダッシュボードの「固定ページ」でテンプレートを読み込んでいく

ダッシュボードの「固定ページ」＞「新規作成」で、homeという名前のページを作成します。
右サイドバーの「ページ属性」＞「テンプレート」の中に、先ほど自分で作ったテンプレートがずらっと並んでいると思います。
この中から、「home」テンプレートを選び、「公開」ボタンを押します。

同様に、すべてのテンプレートをここで読み込んでいきます。
また、ここの「ページ属性」で、ページに親子属性をつけることができます。
たとえば、novelページをhomeの一つ下の階層にしたい場合は、novelテンプレートを作る時に、「親」で「home」を選択します。
同様に、novelページの下の各小説ページを読み込む場合は、「親」で「novel」を選択します。

このように、全てのページを「公開」していきます。

(8)ダッシュボードでフロントページを設定する

最後に、ダッシュボードの「設定」＞「表示設定」で、フロントページの表示を
「固定ページ」＞「フロントページ」＞「home」を選びます。

これでwordpressテーマの完成です！！
念のため、各ページのリンクが外れていないかを確認し、外れているところがあれば修正してください！

いかがでしたか？
少し手間はかかりますが、これでヘッダーやサイドバーを修正するときに、一々全ページを修正する必要がなくなりました！
また、wordpressにはたくさんの便利なプラグインがあり、それを気軽に使えるようになるのも大きな魅力です！

更に更新の手間を少なくするための「投稿ページの作り方」や、
便利なプラグインの紹介なども、そのうち紹介していきたいと思います！