【ワードプレス】子テーマ・テストサイトの作成方法

ワードプレスでHPを制作する際に初めにするべきこととは
ワードプレスも他のHP制作同様まずはテンプレートを選ぶところから始めます。もちろん一から作成することも可能ですが、ワードプレスの場合HTMLだけでなくPHPやデータベースの知識も必要なのでまずはテンプレートとなるテーマを編集すると良いでしょう。テンプレートを使えば非常に簡単にSEO効果の高いページが作成できます。
SEOとは（Search Engine Optimization）の略でサーチエンジンの検索結果のページの表示順の上位に自らのWebサイトが表示されるように工夫すること。つまり、googleやYahoo!、Bingなどで調べたときの検索結果で上位に表示されるようなサイトを作成することです。ネットを使って買い物や探し物をするときに検索を使うことはもはや常識になっているのでこのSEO対策をしておくとみんなの目に触れやすくなりたくさんの人がHPを訪問してくれるようになります。また、ビックワードで上位表示されることはある意味Web上での信頼や安心につながります。
そしてこのSEO対策はサイトを作り上げた後で行うことは非常に難しく、サイトが完成した後では十分な成果が得られることも少ないです。サイトの制作と同時に行っていくべきものなので、今からHPを作成しようとされている方はまさにチャンスです。詳しく解説していきますのでしっかりと対策しましょう。

ワードプレスのテーマの選び方ついて

ワードプレスはたくさんのかっこいいテーマが無料で利用できるのも大きな魅力の一つですが、無料で利用できるテーマの多くにはマルウェア等の個人情報を抜き取るウィルスが入っている危険性も指摘されています。特に海外のテーマを利用される際は十分に気を付けて使ってください。マルウェア等が入っているかを確認できないし不安だという方は、ワードプレスが公式で出しているテンプレートがあるので、そちらを使うといいでしょう。「Twnty Thirteen」「Twnty Fourteen」などが公式テーマで2013年の公式テーマ、2014年の公式テーマといった形で毎年公開され、最近の公式テーマはスマートフォンやタブレットでページを開いた際に自動で画像サイズが変換されたり、位置がフロートして最適化されたりしますので非常に便利です。特にTwnty Thirteenはグローバルナビやカバー画像を入れるだけでいろんなサイトが作れるのでお勧めです。また、ワードプレスの公式サイトに登録されているテーマも安全性が高いです。

wordpressかっこいい無料テーマ

Twenty Thirteen

Twenty Fourteen

子テーマの作成について

ワードプレスでブログやHPを作成する際には、テーマを編集して制作することになると思うのですが、制作を始める前に注意しておきたいことがあります。ワードプレスのテーマは公式テーマ含めバージョンアップされることがあります。バージョンアップされると編集したCSSファイルなどが全て消えてしまうので、再度バックアップを取ったものを上書きしなければいけません。そんな問題を解決してくれるのが子テーマ（child theme）というものです。子テーマとは何かといいますと本来のテーマが更新されたときに影響を受けないように更新内容を保存しておくテーマのようなイメージです。子テーマを適用させた部分は子テーマの内容が、その他のの部分は本来のテーマの内容が反映されます。
例えば、親テーマTwenty Fourteenの子テーマを作る場合、childというフォルダをTwenty Fourteenと同じ場所に作成します。そしてその子テーマフォルダの中にstyle.cssやhead.php・footer.php・template.phpなど編集したいものをコピーします。スタイルシートは量も多いのでそのままコピーするのではなく、

[css]
/*
Theme Name: Child
Template: twentyfourteen
*/
@import url(‘../twentyfourteen/style.css’);
[/css]

とだけ記述すれば親テーマの内容をそのままインポートできます。そこから編集する内容だけを追記していけば書いた内容が上書きされそちらが適用されます。

設定がが出来ますと管理画面の外観のテーマ管理画面の中に、作成した Child というテーマが表示されますので選択して有効化してみてください。childのテーマ自体が表示されない場合は、もう一度FTPから親テーマと同じ階層にchildのファイルが置かれているかを確認してください。表示が乱れる場合はCSSのインポートの記述が:（コロン）の後半角空いているかや小文字で記述しているかなどをご確認ください。

注意点としては

子テーマフォルダ内にfunctions.phpは作成しないようにしましょう。functions.phpが異なる内容で存在するとエラーの原因となり、またfunctions.phpを触る機会は少ないと思うので触る場合は親テーマに入って編集したほうがいいと思います。
子テーマフォルダの中にイメージフォルダを追加してその中に画像をアップロードするようにしておくと、CSS で画像を指定する際にイメージフォルダ内の画像を相対パスで指定できるので、便利です。
相対パスとは起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式でドメインなどの変更にも対応できるという点で便利です。全て絶対パスを使用した場合、画像毎にドメインからIPを探すので読み込みが遅くなる可能性があります。
子テーマの作成方法について分からない点があれば非常に丁寧に解説されているサイトがありますので、こちらをご参照ください。

テストサイトの構築方法

HPを制作する時はいきなり本番サイトに上げると不特定多数の人に間違った情報を見られたり、想定外のエラーや不具合が出たときにすぐに修正できないというリスクがあります。ですので、テストをする環境を構築する必要がでてくるというわけです。テスト環境を作る代表的な方法をご紹介します。

テスト環境構築方法	メリット	デメリット
プラグインTheme Test Driveを使う方法	早い簡単・コピーテーマを作成するだけでテストサイトは不要・アクセスレベルを設定できる	ネット環境が必要・大きな変更があるときには対応がしにくい
プラグインWP BASIC Authを使う方法	早い簡単・他にもアクセス制限をかけたいときに使える	ネット環境が必要・テスト用にサブドメインでサイトを作成する必要がある
ローカル環境を構築する方法	ネット環境がなくても編集できる・大きな変更やバス置換などの作業も効率が良い	時間がかかる・専門知識が必要

プラグインTheme Test Driveを使う方法

Theme Test Driveのプラグインを使用する方法もあります。こちらの方が手間としては圧倒的に楽です。プラグインをインストールすると、WordPress管理画面の「外観」に「Theme Test Drive」の設定項目が現れるのでそこで変更したいテーマをオンにすると、ログインしている自分だけに変更が見れるようになります。また、アクセスレベルを変更すれば変更を見れる人のレベルも設定出来ます。

流れとしては

wp-content/themes/ の中の編集したいテーマをコピーしてテスト用のテーマを作成する

テスト用のテーマをTheme Test Driveで読み込んで編集する

問題なければ変更を本番のテーマにも適用する

といった感じになるかと思います。

プラグインWP BASIC Authを使う方法

WP BASIC Authは非常に便利なプラグインです。何が出来るかといいますと、ベーシック認証がかけれるのです。
ベーシック認証とはクセスの制限されたWebページにアクセスしようとすると、Webブラウザでユーザ名とパスワードの入力を入力した人だけがページを閲覧できるというものです。WP BASIC Authはプラグインの新規追加で検索して有効化すれば自動的にベーシック認証がかかります。IDとパスワードはワードプレスの管理画面のものと一緒になります。
まずはテスト用のディレクトリにテストサイトを作成します。たとえばhttps://manabic.net/testという形でテストサイトを作成します。
このページにベーシック認証をかけて編集していけば、人に見られることなくテスト出来るというわけです。

ローカル環境を構築する方法

ローカル環境の構築は汎用性が高く勉強にもなるのですが、ある程度の時間と知識がいるので、面倒な作業が苦手という方ははじめに紹介したテストドライブというプラグインを使う方法がいいでしょう。
さて、まずローカル環境を構築するにはwindowsであればxammp、macであればmampというローカルサーバーが必要となります。これは、Webアプリケーションの実行に必要な「Apache」、「MySQL」、「PHP」などのソフトウェアをパッケージ化したものです。まずはインストールしましょう。