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

ワードプレスで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

twentythirteen1

Twenty Fourteen

twentyfourteen


子テーマの作成について

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

/*
Theme Name: Child
Template: twentyfourteen
*/
@import url('../twentyfourteen/style.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/ の中の編集したいテーマをコピーしてテスト用のテーマを作成する
arrow11_8d
テスト用のテーマをTheme Test Driveで読み込んで編集する
arrow11_8d
問題なければ変更を本番のテーマにも適用する

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

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


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

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

xampp

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

SnapCrab_NoName_2014-3-1_12-38-30_No-00
開いた画面の「Apache」と「MySQL」のstartボタンを押します。
xammpの設定画面を開きます

詳しい設定方法はこちらのサイトがとても分かりやすいので参考にしてください。ワードプレスの場合eclipseなどのPHPが動くフリーウェアで編集作業を行うことになりますが、設定も時間がかかるので仕事としてHP制作するのでなければプラグインでテスト環境を構築するのがいいかと思います。

ワードプレスでSEOに強いHP制作する方法と流れ

①はじめてワードプレスを触るという方はまずは下の【ワードプレスでHP制作を開始する方法】で無料サーバーか有料サーバーを選択下さい。


まずは無料で試したい方向け

無料サーバーでワードプレス開始

月額1000円でしっかりサイト作成したい方

有料サーバーでワードプレス開始


arrow11_8d

②サーバーの準備とワードプレスのインストールが終わったら、下の「ワードプレス開始時に最初にすること」でテンプレートの選び方、子テーマの作成方法、テスト環境の構築方法を解説しているので参考にしてみてください。取り敢えず触ってみようという方はテンプレート選びだけで大丈夫です。


テンプレートの選び方、子テーマの作成方法、テスト環境の構築方法

WordPressで最初にすること

ワードプレスのお勧めテンプレートの選び方

ワードプレスのかっこいいテーマ


arrow11_8d

③テンプレート選びが終わったら、下のカスタマイズ例を参考にCSSで色や配置を調整してみてください。またワードプレスのプラグインなどをインストールしてHPを編集したりSEO対策をしてみましょう。


検索順位を上げてアクセスアップを目指しましょう

SEOについて便利なツールまとめ

まずはHPのロゴを作成してみましょう

無料でロゴ作成する方法


arrow11_8d

④<サイト全体の構成が決まったら良質な記事やコンテンツを追加していきましょう。良質な記事が増えれば自然と被リンクも増えて訪問者数も増加します。ちなみにマナビックでアクセスの多かった記事には以下のようなものがあります。


起業アイデア

学習塾を低資金で開業する方法

起業に役立つ資格

行政書士試験の情報


arrow11_8d

⑤商材の目的や時期に合わせて集客のためのリスティング広告などを開始