Contact Form7の問い合わせをGoogle Analyticsでトラックできなかった原因と解決法

定番プラグインContact Form7で作った問い合わせフォームからメッセージが送信されたときに、そのイベントをGoogle Analytics側で取得して、目標値として計測したかったのですが、色々思うようにいかずハマってしまったので、その状況と解決に至った道をまとめたいと思います。

contactform7-googleanalytics

 

今回やりたかったのは、前述のとおり

Contact Form7の問い合わせが送信されたときにGoogle Analyticsでイベントとして取得したかった

ということで、そのあたりの具体的な方法は以下の二つのサイトが参考になります。

【Googleアナリティクス】目標設定とイベントトラッキングを設定しよう!

簡単で完璧!WordPressの問い合わせフォームのプラグイン『Contact Form7』にGoogle Analyticsのコンバージョンタグを設定する方法

 

上のサイトの手順通りにやっていけば普通ならそれでイベントがトラックできるはずです。が、私の場合はトラッキングできなかった。。その時の状況としては

  • Thank youページには飛ばない設定で送信ボタンをクリックすると、送信完了メッセージが表示されない
  • Contact Form7で利用できるアクションフック(ユニバーサルアナリティクス用)を設定
  • Google Analyticsではユニバーサルアナリティクスになっていることを確認済み

という感じでした。

順に詳細を記述していきます。

 

Google Analyticsでイベントが取れなかったときの状況

Contact Form7では送信ボタンをクリック後、thank you ページ(送信完了ページ)に遷移するのではなく、フォームのあるページ内に「送信完了しました」というメッセージを表示させる方法を推奨しています。

Thank youページに遷移させるなら、そのページへの遷移をGoogle Analytics側でイベント計測すればいいので問題はないのですが、今回はわざわざThank youページに飛ばすのではなく、送信完了メッセージを同一ページ内に表示させたいという希望がありました。

Contact Form7では、以下のようなon_sent_okアクションフックを使うことで送信イベントを取れるようになります。

 

が、このアクションフックを設定すると、問い合わせの送信完了メッセージが表示されなくなってしまいました。

問い合わせ自体は送信されているのですが、「送信完了しました」というメッセージが表示されないと、送った側は「アレレ、送信されたのかな??」と不安になりますよね。

 

で、この状況を調べてみたところ、以下のサイトに「Javascriptのコンフリクトの可能性がある」という情報がありました。

Contact Form7でコンバージョンを計測する方法

on_sent_okフックを使うとメッセージが表示されないのは他のプラグインで使われているjavascriptとのコンフリクトが起きている可能性があるため、これを解決するには、使用中のプラグインを全部止めてどれが原因なのか調べる必要があると。。

「ええー、面倒くさいよ・・・」と思いつつ、止められるプラグインは全部止めてみたものの、変化なし。

 

必須プラグインとコンフリクトしているとしたらどうしようもないな・・・と思い、半ばあきらめモードになりました。

が、ふと思い立って、ブラウザのデベロッパーツール(Windowsの場合 Ctrl + Shift + i または F12キー)を開いてみたところ、こんなエラーが発生していることが判明。

Reference Error: ga is not found 

 

gaという変数がありませんよ、というエラーですよね。これ。調べてみると、Google Analyticsでユニバーサルアナリティクスに設定されているかいないかで、gaだったり_gaqだったりするらしいです。

ユニバーサルアナリティクスに変更したときは、Contact Form 7のコンバージョン設定も変更するべし! http://hamatte-wataru.com/analytics_contact_form_7/

しかし、私の場合はGoogle Analyticsはユニバーサルアナリティクスになっているし、これはちょっと違う話だなと。

 

解決に至った道。原因はYoast Google Analyticsだった!

問題が起こると最近はデベロッパーツールで中身を覗くことが多いのですが、生のソースコードを一覧するっていうのも時には大切なんだなということを学びました。

 

コンタクトフォームを設置しているページのソースコードを見てみると… なんと、gaとなっているはずのところが、__gaTrackerになっている!!

 

なんでだろう!??と思い、よくよく見てみると、このトラッキングコードはプラグインGoogle Analytics by Yoastが吐き出しているものだと分かる。

 

そこでこの件について調べてみたところありました!こんな情報が。

Yoast Google Analytics Reassign ‘__gaTracker’ Tracker to ‘ga’ Variable

 

つまり、このプラグインはga変数を__gaTrackerにリアサインしているということらしい。そんなぁ。。。なんでわざわざ。。

解決方法は上のサイトにもありましたが、

 

このコードをYoast Google AnalyticsプラグインのAdvancedタブにあるカスタムコードに追加すればOK。

Yoast Google Analyticsプラグインを使用している方は要注意ですね。

 

これでContactForm7からの送信イベントがGoogle Analytics側でトラックできるようになり、送信完了メッセージも表示されるようになりました!

 

サイト移転時の301リダイレクト手順とSearch Consoleでのアドレス変更まとめ

301redirectこんにちは!先日、あるサイトのリニューアルに伴って、旧URLから新URLへの301リダイレクトの設定をしたので、やったことをこの記事にまとめてみました。.htaccessに記述するリダイレクト情報の書き方とか、Search Console(旧ウェブマスターツール)でのアドレス変更通知のやり方などを書いています。サイトの構成やURLの形が大きく変わるリニューアルをされた方は、参考になることがあるかなと思いますので、よかったら見てみてください。

そもそもリダイレクトさせる必要があるのはなぜか

ホームページやブログのリニューアルなどで、ドメインを移転させるときは301リダイレクト(恒久的なURLの移転)でアクセスを旧サイトから新サイトに流す必要があります。

その理由は、新しくドメインを取得した場合、最初のうちは検索エンジンにインデックスされてサイト内のページの検索順位が上がるまで時間がかかるので、旧サイトからアクセスを流さないと、当然ながらアクセスがしばらくガタ落ちしまう、っていうのが一つあります。

さらに、旧サイトの内容と新サイトの内容が重複していると、リダイレクト設定しなければ、検索エンジンはそれぞれ別のサイトとして扱うため、新サイトのページが「重複コンテンツ」とみなされ、検索結果に表示されなくなる可能性も高くなってしまう。

もちろん、旧サイトを削除すれば、時経つうちに検索エンジンのインデックスからも消えて行って、新サイトのページがインデックスされるようにはなるでしょうが、時間がかかりますよね。「重複コンテンツ」とみなされるとペナルティ扱いになるかもしれないですし。。

訪問者の視点で見れば、せっかく見たい記事にアクセスしたのに404エラーで「ページが見つかりません」となったら、ガッカリですよね。「ユーザーフレンドリー」という意味でも、ちゃんと新しいサイトに飛ぶようにリダイレクトさせることは大事です。

 

では以下、具体的なリダイレクトの設定手順です。

ちなみに、今回は

  • 旧サイトと新サイトが両方とも存在している(ドメインがあって、各ページが見れる状態)
  • .htaccessファイルが旧サイト側にあり、ApacheのMod Rewriteが使える
  • サイトのリニューアルに伴って、URLの形式が大幅に変わった

という条件で設定をしています。

 

旧サイトの各ページと新サイトの各ページのマッピングを行う

今回のように、サイトのリニューアルに伴って、URLの形式が大幅に変わり、個別で各ページのリダイレクト先を指定しないといけない場合は、まず間違いのないよう、Excelなどで旧サイトの新サイトの各ページのURL対応表を作っておくのがいいと思います。

Excelで対応表を作れば、それをもとにリダイレクト設定情報を作りやすくなるのでオススメです。私は以下のような感じに対応表を作りました。

旧サイトの新サイトのページの対応表

この対応表について少し説明しておきますね。

まず、旧サイトページURLのほうは、.htaccessのある場所からの相対パスでURLを書きます。

例).htaccessと同じ階層にoldpage.htmlがあるなら、oldpage.html

例).htaccessの階層より下のaaaディレクトリにoldpage.htmlがあるならaaa/oldpage.html

 

もし.htaccessの中にRewriteBaseの記述があって、起点となるディレクトリがあえて指定されている場合は、そこからの相対パスを書く必要があります。

例).htaccessの階層より下のaaaディレクトリにoldpage.htmlがあって、RewriteBase /aaa/となっている場合は、oldpage.html

 

新サイトのほうは、http(またはhttps)からの絶対パスで書きます。

例)http://newsite.com/newpage.html

 

301リダイレクト情報を生成する

対応表が出来上がったら、リダイレクト設定の文字列を作成します。これは、Excelの文字結合の式を使って、以下のように入力すると簡単です。

Excel文字結合

式のところはこんな感じになっています。

=CONCATENATE(“RewriteRule ^”,A2,”$ “,B2,” [R=301,L]”)

 

以下のような感じに文字列が出来上がったらOKです^^

RewriteRule ^oldpage.html$ http://newsite.com/newpage.html [R=301,L]

 

最初の行の式が作れたら、あとはそのセルをコピーして続きの行に貼り付けていくだけで、自動的に文字列を生成してくれます。

Excelでリダイレクト文字列生成

あとは、これらの生成された文字列を.htaccessにコピペすれば、記入ミスを防いで簡単に個別ページのリダイレクト設定ができますね^^

 

ドメイン名が変わるだけの場合のリダイレクトの書き方

例えば、旧:abc.com/xxx/yyy.html ⇒ 新:def.com/xxx/yyy.htmlのように、ドメイン名が変わるだけで旧サイトと新サイトのURLの形が変わらない場合は、以下のように、.htaccessに書くだけでOKです。

例)aaa.comをサブドメインのbbb.aaa.comに移転する場合

RewriteEngine On
RewriteCond %{http_host} ^aaa.com
RewriteRule ^(.*) http://bbb.aaa.com/$1 [R=301,L]

 

.htaccessファイルに各ページのリダイレクト情報を記述する

旧サイトの.htaccessファイルを開いて、以下のようにRewriteEngine onのあとに、Excelで作った対応表の一番最初のリダイレクト情報だけ試しにコピペします。

RewriteEngine on
RewriteRule ^oldpage.html$ http://newsite.com/newpage.html [R=301,L]

これで.htaccessを保存して、旧サイトのoldpage.htmlにアクセスし、リダイレクトされるかどうかチェックしてください。

リダイレクトされることが確認できたら、そのほかのページのリダイレクト情報も同様にコピーして.htaccessに貼り付けます。

 

リダイレクトがうまくいかない場合

旧サイトのURLのところは

^oldpage.html$

または

^\oldpage.html$

という風に\がいるときと要らない時があるみたいなので、もし最初の方でうまくリダイレクトされなかったら、バックスラッシュを追加してみてください。

そのほかにも、.htaccessに色々記述がある場合、RewriteRuleを記述する位置によってはリダイレクトされないこともあります。ちょっと面倒ですが、.htaccessに書かれている内容の意味をネットで調べてみると、どこに記述すれば正しく動くのか、わかることもありますので、調べてながら試してみてください。

 

トップページのリダイレクト情報の書き方

ちなみにトップページの場合はこんな感じなります。

RewriteRule ^$ http://newsite.com/newpage.html [R=301,L]

または

RewriteRule ^\$ http://newsite.com/newpage.html [R=301,L]

 

これで、個別ページのリダイレクト設定が完了しました!

 

 

ただし、もう一つ気になることがあります。それは…

新サイトには移転させないページの扱い

旧サイトには存在しているページでも情報が古くなったなどの理由で新サイトには移さないページも出てくることがありますよね。こういうページはどうしたらいいのか。ページを削除して終わり、っていうのでもいいのかもしれませんが、今回は新サイトの404エラーページに飛ばす設定にしてみました。

新サイトの404エラーページにメニューやサイトマップを載せておけば、少なくとも新しいサイトから興味のある情報を見つけてもらいやすくなりますので^^

.htaccessに、以下の一行を追加すればOKです。http://newsite.com/404.htmlのところはご自分の404ページに合わせて適当に変更してくださいね。

ErrorDocument 404 http://newsite.com/404.html

 

新サイトがWordpressなら

ErrorDocument 404 http://newsite.com/index.php?error=404

と書けば大丈夫だと思います。(新サイトに404.phpがない場合は作ってくださいね)

 

ちなみに、こういうページをすべて新サイトのトップページに301リダイレクトさせるのはSEO的によろしくないようなので、注意してください。

 

 

ここまで終わったら、Search Consoleで検索エンジンにドメイン移転を知らせるようにしておきます。

Search Consoleでアドレス変更

アドレス変更の解説がありますので、参考にしながらやってみてください。

アドレス変更ツールの使用

注意点は、以下の手順を踏む時点で、まだ旧サイトが確認できる(アクセスできる)状態にしておく必要がある(=ページを消してはいけない)ということです。

まず、旧サイトと新サイトを両方Search Consoleに追加しておきます

旧サイトのプロパティを開いて、右上の設定ボタンから「アドレスの変更」をクリック

SearchConsoleアドレス変更

新しサイトを選択したら、順に確認ボタンをクリックしていって、アドレスの変更通知を完了させる

Search Consoleアドレス変更

これで、新サイトのページを「重複コンテンツ」扱いされる心配もなくなりますね!

 

以上、サイトリニューアルに伴うドメイン移転時のリダイレクトのまとめでした。ご覧いただきありがとうございました!

フラットデザイン・ワンページのお洒落な無料HTML5テンプレート8選

こんにちは!最近のWebデザインの主流になっている「フラットデザイン」、そして一ページで完結する縦長(LP、ランディングページ)のHTMLテンプレート。お洒落なデザインはたくさんあるのですが、何十個も何百個も見ていると、特に無料のものはどれも似たような感じだな~と飽きてくることがあります。今回は色々見ていくなかで、「お!?」と興味をひかれたものを一覧にしてみました。記事の最後で無料のHTML5テンプレートがダウンロードできるサイトもご紹介しているのでよかったらそちらからも探してみてくださいね。

一画面に収まったアプリっぽい使い勝手のテンプレート

Screenshot of www.templatemo.com

 

一ページの縦長サイトが結構流行っていますが、こちらは左サイドが固定されていて右側がメニューに合わせてスライドしていく感じです。なので、一画面で完結しているようなアプリっぽい感じの印象になります。縦長のサイトに飽きたらこういうのもいいかもしれませんね。

HTML5 + CSS3 + Bootstrapフレームワークで作成されたレスポンシブ対応のテンプレートです。

デモ

ダウンロード

 

ファーストビューの色使いとレイアウトが大胆なテンプレート

Screenshot of www.templatemo.com

 

なかなか無いカッティングのレイアウトで、ファーストビューのインパクトがすごい一枚モノのテンプレートです。ポートフォリオ向け。色を自分でカスタマイズすれば印象がガラッと変わりそうですね。HTML5 で作られ、レスポンシブ対応。

デモ

ダウンロード

 

 

シンプルだけど色使いがお洒落なテンプレート

Screenshot of templates.websitetemplatesonline.com

 

かなりシンプルなフラットデザインですが、色使いがお洒落だったので載せてみました。

デモ

ダウンロード

 

 

ふわふわっと表示されるのが今風のテンプレート

Screenshot of pixelhint.com

 

スクロールに合わせて表示されるコンテンツがふわふわっと浮かび上がる感じになっているのが今風のテンプレート。HTML5 + CSS3。

デモ

ダウンロード

 

斜めのカッティングがアクセントになったテンプレート

Screenshot of www.gt3themes.com

 

斜めになっていなかったら、何でもないよくある一枚モノのテンプレートですが、斜めにカッティングされているのがアクセントになってお洒落感が増していると思いました。木の質感とフラットデザインの組み合わせもいいですね。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがいい感じのシンプルなテンプレート

Screenshot of templates.websitetemplatesonline.com

 

テンプレートに含まれるのはトップページだけであとは作りこみが必要になりますが、ホバー時のエフェクトがよかったので載せてみました。ホバー時やスクロール時のアニメーションを取り入れるのも最近流行っているので参考になりそうです。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがお洒落なテンプレート

Screenshot of webthemez.com

 

こちらもスクロールとホバー時のエフェクト(アニメーション)がとてもお洒落だったので載せてみました。

デモ・ダウンロード

 

ナビゲーションメニューの位置が一工夫あるテンプレート

Screenshot of webthemez.com

 

ナビゲーションメニューは普通ページの上のほうにありますが、このテンプレートの場合、ファーストビューでは画面下に表示されるようになっています。その後スクロールすると上に固定されるので使い勝手も悪くありませんし、第一印象をパシッと決めたいときに使えそうなレイアウトだなと思いました。

デモ・ダウンロード

 

無料でレスポンシブ対応のHTML5テンプレートがダウンロードできるサイト

この記事に載せたのはほんの一部で、以下のサイトではHTML5の無料テンプレートが多数そろっているので、お気に入りのテンプレートを見つけてみてください。

Templatemo

WebThemez

WebsiteTemplateOnline

ThemeWagon

 

BootstrapをWordPressテーマに組み込んでレスポンシブ対応のナビゲーションメニューにする方法

wp-bootstrap-navこの記事ではWordpressのテーマを自作する際に、Bootstrapフレームワークを使ってナビゲーションメニューをレスポンシブ対応させるための設定について書いています。

WordPressではナビゲーションメニューを動的に作成してくれるテンプレートタグwp_nav_menu()がありますが、これとBootstrapの組み合わせ方について具体的なコードの書き方の例を載せてみました。

 

用意するもの

まずは以下のファイルをそれぞれダウンロード。(jQueryやBootstrapをCDNからの読み込みにしている場合はnavwalkerのみダウンロード)

jQuery

jQueryはBoostrapを動かすために必須なので、まだテーマに組み込んでいない場合はダウンロードする。上のリンクから公式サイトに行って「Download the compressed, production jQuery 1.11.3」のリンクをクリック。ダウンロードしたファイルを自分のテーマのjsフォルダに入れておく。

 

Bootstrap

Boostrapをまだ組み込んでいない場合は上のリンクからダウンロード。ダウンロード後、zipファイルを解凍してbootstrap.min.cssとbootstrap.min.jsを自分のテーマのcss,jsフォルダにそれぞれ入れておく。

 

Bootstrap navwalker

ナビゲーションメニューを表示させるwp_nav_menu()タグにBoostrapを組み込むためのクラス。上のリンクからダウンロードし、wp_bootstrap_navwalker.phpをテーマフォルダに入れておく。

 

function.phpに記述すること

 

header.phpに記述すること

headタグ内に以下のタグを記述してBootstrapのCSSファイルを読み込み。

 

bodyタグ内、ヘッダーのナビゲーションメニューを表示させたい部分に以下のコードを記述する。

 

wp_nav_menu()のパラメータのmenu_classの部分は、Bootstrapで用意されているクラスを記述している。fallback_cbとwalkerのところは上記のとおりに記述。その他は適宜変更してOK。

具体的なパラメータの設定方法については以下を参照

テンプレートタグ/wp nav menu

 

footer.phpに記述すること

Bootstrapのjsファイルの読み込み。

 

出力されるHTMLタグの例

以下のようなHTMLタグが出力される。

 

これは使える!ギャラリー用無料WordPressプラグイン6選

pictures-365641_640

こんにちは!先日とあるHTMLサイトをWordpress化しているときに、フォトギャラリーをどうやって表示させるかで結構悩んだので、そのときに調べたギャラリー用Wordpressプラグインについてまとめてみました。

HTMLサイトの場合は大抵jQueryを使ってギャラリー表示がさくっとできますが、Wordpressの場合、どのプラグインがいいか、無料版でどんな機能が使えるか(無料版は大抵なにかしらの制限がかかってますので…)結構決めるまでに考えることが色々あると思います。どのプラグインもメリット・デメリットあるので、自分に一番合ったギャラリープラグインを探すのにこの記事が参考になれば幸いです!

お洒落なポートフォリオが作成できるギャラリープラグイン

HUGE IT Portfolio Gallery

Screenshot of wordpress.org

 

写真だけでなく、自分の作品をポートフォリオとして紹介したいときに役立つプラグイン。もちろん写真もOKですよ^^ デフォルトのデザインがとてもよくて、作品や写真が映えるギャラリーが作れます。タイトルや説明文があるときの表示が特にお洒落なので、ただ単に画像や写真だけ載せるというより、解説をしっかり書きたい人におススメです。ファイルの管理や説明文の記入なども便利。追加できる写真の枚数制限もなしです。

難点は、無料バーションだと細かいオプション設定ができないことでしょうか。デフォルトのままで十分いけそうな気もしますが。試してみてください。

プラグインのデモはコチラ

 

タイル状の表示がお洒落なギャラリープラグイン

Unite Gallery Lite

Screenshot of wordpress.org

 

写真が映えるタイル状の表示やグリッド表示、スライダー、ビデオギャラリーなど、色んな表示方法が選べるギャラリープラグイン。使い勝手もよくて個人的には一番使いたいプラグインでした。

が、無料版は一つのギャラリーに12枚までしか写真を追加できないという制限がついています。これが難点で使用をあきらめましたが、厳選した写真を載せると決めて使うのもアリですね。

デモはコチラ

 

無料版でかなり自由度の高いカスタマイズが可能なギャラリープラグイン

WP Photo Album Plus

Screenshot of wordpress.org

 

デフォルトのデザインはいまいちですが、その見た目だけでこのプラグインを葬り去るのはもったいない!相当自由にカスタマイズができます。ダッシュボードのプラグインのオプションから(=コードをいじらずに)ここまでカスタマイズができるギャラリープラグインは他にないんじゃないかと思います。

もちろんスタイルのカスタマイズもできますし、ギャラリーの表示の仕方や表示内容に色々とこだわりがある場合はこのプラグインを使うのがベストだと思います。もちろん有料版を使えばカスタマイズ度が高いプラグインはたくさんありますが、「無料で使いたい。でもカスタマイズもしっかりしたい」というあなたにはかなりおススメです。

 

何だかんだ一番メジャーで使いやすいギャラリープラグイン

NextGEN Gallery

Screenshot of ja.wordpress.org

 

色々インストールして試してみたものの、結局落ち着いたのがこの一番メジャーなギャラリープラグインNexGENでした。欲しい機能は無料版で一通り設定できることや、動作に安心感があること、また利用者が多い分、調べた時に情報が多かったので結局このプラグインを導入して今に至っています。

画像ファイルのアップロード数制限などもないですし、なんだかんだ言っておススメです^^

 

WordPress標準ギャラリーをLightBox風に表示させるプラグイン

Easy FancyBox

Screenshot of ja.wordpress.org

 

前述のプラグインはダッシュボードにギャラリー専用の管理メニューが作られて、画像ファイルもWordpressのメディアとは別に保存されるタイプのプラグインでした。このプラグインは、Wordpressにデフォルトで用意されているギャラリー機能を使ってギャラリーを作った時に、jQueryのLightBox風のポップアップ表示ができるようにします。

ガッツリとギャラリーサイトを作るわけじゃなくて、サイトに一ページギャラリーを追加したいという場合なんかは、この方法が一番楽で動作も軽いのでは、と思います。

使い方は以下のサイトの解説が分かりやすいので参考にしてみてください。

写真・ギャラリー用にLightbox風のWPプラグイン「Easy FancyBox」

 

WordPressの標準ギャラリーを使ってタイル風の表示ができるプラグイン

Slim JetPack

Screenshot of wp-themetank.com

 

意外にこれもいいんじゃないか、と思ったのが、Jetpackの機能を使って、Wordpress標準のギャラリーをタイル風に表示させる方法。「標準ギャラリーでいいけど、表示のスタイルを一工夫したい」という場合はこの使い方、試してみてください。具体的な使い方は以下のサイトを参考にしてくださいね。

タイルギャラリー、スマホサイト作成など便利ツール11個を搭載。WPプラグイン「Slim Jetpack」

 

 

HTMLサイトをWordPressに移行する手順のまとめ ‐ その2

前回はHTMLサイトをWordpressに移行するための作業の前半部分、既存のHTMLファイルからベースとなるWordpressテーマを作るところまでの流れをざっと書きました。

ここからは肝心な作り込みに入っていきます。今回も自分の覚書風に書いていくので分かりにくいところがあるかと思います。もしあまりに意味不明だったり、間違ってるよ?というところがあったらコメントあるいはお問い合わせからご連絡いただけると嬉しいです。

では早速、後半の作業に入っていきます!

大まかな流れ

ここからはHTMLサイトを公開状態にしたまま、裏でWordpress版のサイトを作成していく。そしてWordpress版が完成したところで切り替え作業を行い、Wordpress版のサイトを公開する。

前提条件としては、以下のような環境で移行作業を進めて行く。

  • 独自ドメイン(or 独自ドメインのサブドメイン)でHTMLサイトを運営
  • WordPressインストールが可能なサーバーを利用している

サーバーにWordpressをインストールし、前回の作業で作成したテーマをアップロード。サーバー上で作り込み&デバッグ作業をガンガン進めていく。

 

ローカルで作り込んでからサーバーにアップしたい場合は、以下の作業のX~Xまでをローカル環境に構築したWordpressで行い、最後にサーバーにアップする。

ローカル環境の作成やサーバーへのアップまでのフローで参考になるサイトはこちら

XAMPPでローカル環境構築 インストールからWordPressの設置までやってみる。

XAMPPを使ってローカル環境にWordPressをインストールする方法

 

WordPressをサーバーにインストールする

HTMLサイトを運営しているサーバーにWordpressをインストール。
このとき、HTMLサイトのファイル類が置かれているディレクトリ直下ではなく、サブディレクトリを作成してインストールするのがポイント。

例)abc.comというサイトの直ディレクトリがabcの場合、abcディレクトリ直下にはHTMLサイトのファイル類やフォルダ類が保存されている。このabcディレクトリの中にサブディレクトリ(wp)を作成し、その中にWordpressをインストールする。

www
∟abc
∟ index.html
∟about.html
∟contact.html
∟ ….html
∟cssフォルダ
∟jsフォルダ
∟imagesフォルダ
wpフォルダ (←ここにWordpressをインストールする)

 

WordPressのレンタルサーバへのインストール方法

インストールが完了したら、独自ドメイン/wp/にアクセスして、Wordpressの初期テーマでのトップページが表示されることを確認する。

今後は
独自ドメイン/wp/ (例: http://abc.com/wp/ )
からWordpressのサイトを参照しつつ、作り込みを進めて行く。

※厳密には独自ドメイン/wp/のURLを直打ちすれば一般の人もアクセスできてしまうが、個人レベルのサイトやブログではその可能性は限りなく0に近いという前提で進める。もし完全に外から見られないようにしたい場合は、ローカルで作り込むか、.htaccessでアクセス制限をする必要がある。

 

wp-config.phpをデバッグモードにする

ここからの作業では何らかのエラーが発生することが多々あるが、この時に原因がつかめないと先に進めない。

デフォルトの状態ではデバッグモードがオフになっていて、エラーが発生すると、作成中のWordpressサイトにアクセスしても真っ白なページが表示されるだけ、ということがしょっちゅうあるので、デバッグモードをオンにする。

そうすると、エラーの原因とエラーが発生しているテンプレートファイル(と行番号)を教えてくれるので解決しやすい!

WordPressをインストールしたフォルダ(この記事ではwpフォルダとする)にFTPでアクセスし、wpフォルダ直下のwp-config.phpを見つけてローカルにダウンロードする。

ファイルを開くと以下のような場所があるので、falseをtrueに変更し、ファイルを再アップロード。

define(‘WP_DEBUG’, false);

define(‘WP_DEBUG’, true);

 

テーマをアップロードする

前回の作業で作っておいたWordpressテーマをアップロードする。

ダッシュボードから 外観>テーマ にアクセスし、ファイルのアップロード画面からzipファイル形式でアップロードする。

 

サイトを作る場合は固定フロントページの設定を

デフォルトではindex.phpがトップページとして表示されるようになっている。ブログの場合はこれでOKだが、サイトの場合は、front-page.phpがトップページとして読み込まれるように設定したい。

この場合は、以下のように固定フロントページの設定を行う。
1.トップページとブログページ用にダミーの固定ページを作成する(空ページでOK。タイトルも適当に)
2.ダッシュボードから 設定>表示設定 の「フロントページの表示」の設定で、固定ページを選択し、フロントページ、投稿ページそれぞれに1で作成しておいた固定ページを選択する。

これでトップページの表示にはfront-page.phpが読み込まれるはず!

 

PHPファイルの記述の誤りを修正していく

まずは基本となる以下のファイルの作り込みを完了させることが先決

  • front-page.php
  • index.php
  • single.php

そして上記のファイルで読み込む以下のテンプレートファイルも確認&修正をする

  • header.php
  • footer.php
  • sidebar.php

※header.phpやfooter.phpではcssやjsファイルの読み込み設定があるが、そのファイルのパスがちゃんと通っているかなども確認する。

※サイトのトップページ(front-page.php)は、画像スライダーがあったり、新着情報の表示欄があったりと、少しカスタマイズが必要なことが多いので、まずはindex.phpとsingle.phpの方から手を付けるのがおススメ。

 

index.phpとsingle.phpは基本となるループが正しく書けていれば、あとはそんなに難しくない。記事のタイトルやリンク、サムネイル画像、コンテンツを動的に読み込むための関数に誤りがないかの確認(&修正)や、レイアウトの調整などをここで進めて行く。

この辺りはWordpressのテーマを自作したことがある人は楽々だが、そうでない場合は、まずテーマの自作方法を解説している以下の記事を参考にしながら作り上げるのが良い。

WordPress オリジナルテーマの作り方

HTMLからWPテーマを作成する

テーマの作成

※前回のテーマを作る段階でも、同じような手順があったけれど、ここでは表示を確認しながらミスなく作り上げていくことが重要。

 

フロントページについて

フロントページは、新着記事の表示など、動的に読み込む必要があるところは、サブループ(WP_Query())と呼ばれるループを使う。このあたりについては以下の記事を参考に。

WordPress ループの基本

WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット

ちょいちょい忘れる『WP_Query』の使い方

 

フロントページの静的な部分は、ウィジェットであとから内容を変えられるように切り分けてもいいし、今後そうそう変更する予定もない、という場合は、リンク部分だけ以下のように変更しておけば取りあえずOK。

 

CSSの調整もここで同時に進めて見た目を整えていく。

 

残りのテンプレートファイル(page.php、archive.phpなどの作成)

index.phpとsingle.phpが出来上がったら、これらをベースにpage.phpやarchive.phpなど、必要なテンプレートファイルを作っていく。

index.phpをベースに作成するとよいテンプレート

  • archive.php
  • taxonomy.php
  • category.php
  • search.php

など。

single.phpをベースに作成するテンプレート

  • page.php
    404.php

など。

テンプレート階層を参照し、自分のサイトに必要になるものを作成する。

 

パーマリンク設定

ここはHTMLサイトから移行する場合、結構大事なところなのでよく考えて設定する。

HTMLサイトからWordpressサイトになると、URLが変わってしまう可能性がある。301リダイレクトで旧URLから新URLへアクセスを転送することはできるが、URLが変わるのを最小限に抑えたい場合は以下の方法を取る。

1.ページや投稿のスラッグをもとのHTMLサイトのスラッグと合わせる

例えば、http://abc.com/contact.html という問い合わせページがあったとしたら、Wordpressでも固定ページで問い合わせページを作る際にcontactというスラッグにする。

2.パーマリンク設定で、URLの最後に.htmlが付くようにする。

ダッシュボードの設定>パーマリンク設定で、カスタム構造を選択し、入力欄に「/%postname%.html」と入力する。

ただし、固定ページは別途functions.phpのほうで以下のコードを記述しないと.htmlが付かないので注意。

 

上の方法で合わせられない部分も出てくると思うが、その場合は301リダイレクトの設定をする(後述)。

 

コンテンツの作成・メニューやウィジェットなど

このあたりは作業が前後するかもしれないが、ページの作成やメニューの作成、サイドバーのウィジェットの作成なども順次行っていく。
HTMLサイトから必要なテキストや画像素材などをWordpressサイトのほうに移していく感覚で。

  • 各ページのコンテンツ⇒固定ページで作成
  • ナビゲーションメニュー⇒メニューで作成
  • サイドバーやフッターのコンテンツ⇒ウィジェットで作成

 

基本的なプラグインの導入

ここまでくると元のHTMLサイトと同じものがWordpressでできあがっているはず。なので、必要なプラグインの設定などを進めて行く。

導入プラグインのおススメリストはコチラ

 

全体的な動作確認

変な動きをしたりしないか、色んなページにアクセスしたりリンクをクリックしたりして確認する。

 

wp-config.phpをデバッグモードをオフに

動作確認が終わったらデバッグモードをオフにする

 

トップページをhtmlからwordpressに切り替える作業

いよいよ切り替え作業。一応メンテナンスモードにして、アクセスが少なくなる時間帯に切り替え作業を行うのがベター。

「工事中」「準備中」「メンテナンス中」呼び方は色々ですが、ページの公開を一時的に中止したいときに便利なプラグイン WP Maintenance Mode

これまでは独自ドメイン/wp/へのアクセスでWordpressのサイトが表示されていたが、独自ドメインのみでWordpressサイトが表示されるように設定する。やり方は以下の記事を参考に。

WordPressでサイトのトップページURLにドメインだけが表示されるように設定する方法

HTMLサイトのファイル・フォルダ類はひとまず削除せず、適当なフォルダを作って移動させる。(移行後少し経つまでは削除しないほうが何かの時に困らないかも?)

無事Wordpress版のサイトが表示されればOK!

リダイレクト設定(必要な場合)

プラグインSimple 301 Redirecsを使用すると便利。

Simple 301 Redirectsプラグインの使い方

 

 

 

本当に自分にしか分からない覚書風になってますが、最後までご覧くださりありがとうございました!

何かのヒントになれば嬉しいです。ではまた!

WordPressでCSSの変更内容が表示に反映されない4つの原因と解決法

cache-problemWordPressでスタイルシート(cssファイル)の内容を変更しても、その変更内容が表示に反映されないときがあります。特にキャッシュ系のプラグインやCloud FlareなどのCDNサービスを使っている人に起こりやすいのですが、最近、変更してずいぶん時間が経っているのに変更内容が一向にブログの表示に反映されないことが何度かありました。その時の解決法も含めて、考えうる原因と解決法についてまとめたいと思います。

原因その1: 変更したcssの記述が正しくない

あたりまえですが、cssが正しく記述されなければ表示もちゃんとされませんよね。単純なことですけど、コロン(:)やセミコロン(;)が抜けていないか、{}で閉じられているか、など再チェックしましょう。

cssの変更の際には、ブラウザの開発ツールを使うとミスが少なくなり、編集スピードもグッとあがります。

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

 

原因その2: ブラウザのキャッシュが効いている

ブラウザのキャッシュにより、以前の状態が表示されていることがあります。ページを2~3度、再読み込み(F5キー押下)すると表示が新しくなることがあるので、試してみてください。でも、Wordpress側で、ページの読み込み速度を高速化するためのキャッシュプラグインを使用している方は、これだけだとうまくいかないことが多いです。その場合は次!

 

原因その3: Wordpressのキャッシュ系プラグインのせい

私はW3 Total Cacheプラグインを使用して、ページキャッシュ、ブラウザキャッシュなどの設定をしています。こういうキャッシュ系のプラグインを使っていると、スグに変更が反映されないときが多いです。W3 Total Cacheの場合、Purge from cacheやEmpty all cachesといったメニューがあるので、それを実行してキャッシュをいったん削除します。その他のプラグインも似たような機能がついていると思うので、Wordpressのダッシュボードから確認してみてください。

 

原因その4: Cloud Flareのキャッシュのせい

W3 Total Cacheと併せて利用するとかなり高速化の効果が高い、CDNサービスCloud Flareですが、少し前に仕様が変わったのか、以前のやり方では、変更前のcssの状態がかなり長く続いてしまう、ということに気づきました。。

Cloud Flareについてはこちらの記事も見てみてください。

ブログ表示速度をアップさせるために使っているプラグインとCloudFlare

 

以前は、ログインして、一時的にDevelopment Mode(開発モード)に設定しておけば、cssやjavascriptなどをキャッシュしないで(CDN経由にしないで)表示してくれ、編集がすべて終わった後に、Development modeを終了しておけば、その編集内容が引き続き表示に反映されていました。

が、最近は、Development modeを終了すると、編集内容がすべてなかったかのように、以前の表示に戻ってしまう…という事態が何度か発生。「一日経てば表示が更新されるだろう」と思って放っておいたら、ナント一週間たっても更新されないままでした!

焦って、CSSが書き戻されていないかなどチェックしなおしたりしたのですが、最終的に分かったのは、これです。

Cloud FlareのCacheメニューからキャッシュをクリアーしないと、変更が反映されない。

でした。。

 

いや~、意外にハマってしまった。。以下、キャプチャとともに解決法を載せたのでCloud Flareをお使いの方はぜひ一度確認してみてください!

 

CSSの編集をする際には、Overview のところでStatusをDevelopment modeに変更します。

Cloud flare

 

Development Modeが有効になっているときは、cssの変更がスグに表時に反映されるはずです。(されない場合は、キャッシュプラグインの方のキャッシュも削除)

 

重要なのは、CSSの編集を終えて、Development Modeを無効化するとき。まず、Cachingのメニューに移って、Purge everythingをクリックします。こうすることで、以前Cloud Flareがキャッシュしていたファイルはクリアされ、変更後の状態を新たにキャッシュしてくれます。
Cloud flare

 

最後にDevelopment Modeを無効化して完了。

Cloud flare

HTMLサイトをWordPressに移行する手順のまとめーその1

こんにちは!最近、HTMLサイトをWordpressに移行するという作業を何回か行う機会がありました。立て続けに同じような作業を行っていたので、だいぶ流れも覚えられたのですが、ちょっと時間が経ったらきっと色々忘れてしまうだろう・・・ということで、HTMLサイトからWordpressへの移行の手順についてまとめてみました。

自分の備忘録的な感じで書いたので、分かりにくいところも多々あると思いますが、何かのヒントになれば・・・。もし間違っているところや質問などあったらぜひコメント欄からご連絡いただけると嬉しいです!

HTMLサイトのコピーをローカルに作成

サーバーからローカルにコピー。バージョン管理システムなどを使っていない場合は、バックアップ用にzipファイル化しておくと万が一の時に解凍して元に戻せる。

 

HTMLファイルを整理する

HTMLファイルの中で同じような構成のページ(内容が違うだけ)のものは一つを残し、あとは別フォルダに移動する(あとで使うファイルやフォルダもあるので削除はしない)。

例えば、

  • トップページ
  • 会社概要
  • お問い合わせ
  • 製品一覧ページ
    • 製品情報ページ1
    • 製品情報ページ2
    • 製品情報ページ3
  • ブログ記事一覧
    • ブログ記事1
    • ブログ記事2
    • ブログ記事3

というような構成のサイトの場合、製品情報ページ1~3やブログ記事1~3は内容が違うだけでHTMLの構成はほぼ同じはずなので、製品情報ページ1のhtmlファイルのみを残す。ブログ記事も同様にブログ記事1のhtmlファイルのみを残す。

 

HTMLファイルとWordpressテンプレートとの対応を考える

WordPressテンプレート階層を参考に、HTMLサイトのページがそれぞれ、どのWordpressテンプレートで対応できるかを考える。

例えば、前述の例の場合、

  • トップページ ⇒ フロントページ(front-page.php)
  • 会社概要 ⇒ 固定ページ(page.php)
  • 問い合わせ ⇒ 固定ページ(page.php)
  • 製品カタログ ⇒ カスタムテンプレートファイル または archive-カスタム投稿タイプ.php
  • 製品情報 ⇒ 固定ページ(page.php) または single-カスタム投稿タイプ.php
  • ブログ ⇒ インデックス(index.php)
  • ブログ個別記事 ⇒ 個別投稿記事(single.php)

 

注意点1: トップページに使うのはhome.phpかfront-page.phpか

WordPressでブログではなくサイトを作成する場合、トップページはindex.phpにならないのでhome.phpかfront-page.phpを用意する必要があります。個人的にはフロントページをいつも使用。index.phpとhome.php、front-page.phpの違いや使い分けについては以下のサイトで確認。

WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い

 

注意点2: 製品カタログ(製品一覧)と製品情報のページの作り方

幾つか考えられる方法があるので、サイトに適したものを選ぶ。

製品カタログと製品情報ページを両方固定ページで作成

カスタム投稿タイプの作成がいらないのでその分、簡単。製品の数が少ない場合はこれで十分いけそう。この場合、カタログ(一覧)ページは、通常の固定ページで作るとなると、新しい製品を追加したり、古い情報を削除するたびに、カタログの内容を手動で編集しなくてはいけない。が、これは専用にテンプレート(カスタムテンプレートファイル)を作成すればok。

具体的には、

製品カタログ(親ページ)

―製品情報1(製品カタログの子ページ)

―製品情報2(製品カタログの子ページ)

―製品情報3(製品カタログの子ページ)

という風に固定ページの親子関係を指定しておき、製品カタログ用に、子ページの一覧を取得して表示するテンプレートを作成する。こうすれば、子ページが増えたり減ったりしても、カタログを編集することなく最新の情報で表示できる。

このあたりのやり方は以下のサイトが参考になりそう。

WordPressで親ページに子ページの一覧を表示する方法

 

製品情報をカスタム投稿で作る

より本格的なのがこっち。クライアントさんのほうで情報を追加・更新したいなどの要望がある場合は、カスタム投稿タイプを使って他の固定ページやブログ投稿と分けてあげるほうが分かりやすい。

例えば、製品情報(product)というカスタム投稿タイプを作成する場合、single-product.phpを用意すると、製品情報ページの表示の際は、このファイルを読み込んでくれる。(single-product.phpがない場合はsingle.phpで代用されます)

この場合、カタログ(製品一覧)は、専用のアーカイブページ(archive-product.php)を用意してもいいし、archive.phpやindex.phpので代用してもOK。あるいは、固定ページで、カスタム投稿タイプ一覧を取得して表示する専用のテンプレート(カスタムテンプレート)を用意するのもあり。

カスタム投稿タイプの具体的な使い方については以下のサイトが参考になっています。

 

カスタム投稿タイプの一覧ページ作成で参考になるサイト:

カスタム投稿タイプの一覧ページの作成

カスタム投稿タイプのアーカイブページを作成する

 

カスタム投稿タイプを一から設定するのに参考になるサイト:

WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト

 

カスタム投稿タイプとカスタムタクソノミーを初めて使う時に参考にしたいサイト:

カスタム投稿タイプとカスタムタクソノミーまとめ

 

WordPressテーマの基本的なファイルを作成

いよいよWordpressのテーマファイルにhtml内のコードを移行していく。まず、Wordpressテーマ用のフォルダをローカルに作成します。フォルダ名はテーマ名に合わせる(例えばnomadというテーマ名にする場合は、nomadという名前のフォルダに。)

いちばん基本的な以下のphpファイルとスタイルシートをフォルダ内に作成しておく。空ファイルでOKなので、以下に挙げる通りのファイル名で一通りファイルを作成!

 

共通部分のパーツファイル

  • header.php :ヘッダー部分
  • footer.php :フッター部分
  • sidebar.php :サイドバー部分

HTMLサイトでは基本、ヘッダーからフッターまで一つのファイルに記述していたものが、Wordpressでは幾つかのパーツごとにファイルを分けてコードを記述できる。ヘッダーやフッター、サイドバーのコードがそれぞれパーツ化されることで、メンテナンスもグッとしやすくなるのはありがたいですね^^

 

基本となるテンプレートファイル

  • index.php :ブログ投稿の一覧を表示させるテンプレート
  • front-page.php :サイトのトップページのテンプレート
  • single.php :個別投稿記事のテンプレート

これらのファイルに、header.php、footer.php、sidebar.phpを読み込む設定をし、それ以外のコンテンツ部分のコードを記述する。ちなみに、index.php、single.phpをある程度作り込んでからarchive.phpやpage.phpなどを作る方がラクなので、まずは上記のテンプレートファイルだけ作成していけばOK。

 

WordPressテーマに必須の二つのファイル

  • functions.php :関数を定義
  • style.css :スタイルを定義

functions.phpには、もともとのWordpressの設定を変更したり、拡張したりするための関数を記述するファイル。何も書かなくてもいいけど、このファイル自体が存在しないとWordpressテーマとして認識してもらえないのでファイルは必要。絶対何か記述する必要はでてきますけど^^;

style.cssにはCSSを記述し、他のphpファイルと同じ階層に配置しておきます。(cssフォルダ内とかに配置するのはNG)

 

 

ちょっと寄り道

実はWordpressテーマには、index.phpとfunctions.php、style.cssさえあればテーマとしては成り立ちます。なので例えば一枚モノのサイトを作るときは最低限の三つのファイルだけでもいいわけですよね。でもたいていの場合は、パーツを共通化したほうが便利だったり、ページによってレイアウトやデザインを変えたいはずです。私もまだまだですが、テンプレート階層をちゃんと意識して、必要なところは切り分けたり、別のテンプレートを使ったりと、サイトの構成に合わせてテンプレートファイルを用意していくのが良さそうですね。

テンプレート階層

 

元のHTMLファイルをパーツ化しWordpressテンプレートファイルに移行

WordPressに必要な基本ファイルが用意できたところで、HTMLファイルの内容を各phpファイルに移していく。

まずは何も編集せず、htmlファイルからphpファイルに該当する部分をコピペするだけ。例えば、以下のようなhtmlの場合には、こんな風にパーツごとにコピペしていく。

 

header.php

DOCTYPE宣言から始まって、<head></head>の部分、そしてサイトのヘッダータイトル、ナビゲーションメニュー部分まで。

上の例で言うと

の部分。

 

footer.php

サイトのフッター部分から最後の</body></html>まで。

 

sidebar.php

コンテンツのサイドバー部分。上の例だと、section#content内のsidebarのdiv。

 

残りの部分

で、残った部分のコードを、トップページのhtmlならfront-page.phpにコピペ、記事のhtmlならsingle.phpにコピペする。そして、ヘッダー、フッター、サイドバーがあったところを以下のようなコードに置き換える。

 

htmlの一部をphpコードに置き換える

htmlではサイトのタイトル名や読み込むcssやjavascriptのファイルの場所を直に書いていたが、Wordpressの場合、phpで動的に取得する。

一例をあげると、ヘッダー部分はこんな感じ。

<? php … ?>のコードに置き換わっている部分が動的に読み込まれる。

header.php、footer.php、sidebar.php、index.php、single.phpのコードの置き換えには、以下のサイトの解説が非常に分かりやすい。オリジナルテーマを作る手順の解説ですが、ベースとなるhtmlを作成してからそれをwordpress化するという方法で解説されているので、ループの部分なども含めて見ながらやるとラク!

WordPressオリジナルテーマの作り方

※front-page.phpの解説は上のサイトにはありませんがひとまずコンテンツ部分は編集しなくてもOKです。

 

 

style.cssとfunctions.php

style.cssの始めには必ずテーマの名前を設定する必要がある。以下のコードをコピペ。Theme Nameは必ず指定すること。他は必要な部分の情報を設定。

 

functions.phpによく使うコード。必要な部分をコピペして使う。

 

WordPressテーマをzip化し、アップロード

htmlサイトのほうで使っていたcss、js、imagesなどのフォルダ類を、この作業の最初の方で別フォルダに取り分けておいたところから移してくる。ただし、imagesフォルダには、サイトのデザインに関係した素材ファイルのみを移動させ、コンテンツに使う写真や画像ファイルなどは含めない。

HTMLサイトのトップページのスクリーンショットを撮って、screenshot.pngという名前でWordpressテーマフォルダ内に保存。

以下のファイルやフォルダ類が揃っていることを確認する。

  • header.php
  • footer.php
  • sidebar.php
  • index.php
  • front-page.php
  • single.php
  • functions.php
  • style.css
  • cssフォルダ
  • jsフォルダ
  • imagesフォルダ
  • fontフォルダ(あれば)
  • screenshot.png

 

確認できたら、zipファイルに圧縮。ここまででWordpressテーマづくりは一息^^

残りは、phpの処理の記述の間違いなどもあるかもしれない(というか必ずある!)が、そういったものは、WordPressにテーマをインストールしてからデバッグしていく。

 

この後の作業をリストアップ

ちょっと長くなってしまったので、Wordpressをインストールしてテーマをアップロードした後の手順は次回の記事にまとめます。残りの作業としては

  • WordPressのインストール(まだの場合)
  • テーマのアップロード
  • wp-config.phpをデバッグモードにする
  • PHPファイルの記述の誤りを修正していく
  • 残りのテンプレートファイル(page.php、archive.phpなどの作成)
  • メニューやウィジェットの作成
  • front-pageの編集
  • 基本的なプラグインの導入
  • パーマリンク設定
  • コンテンツの作成
  • 全体的な動作確認
  • リダイレクト設定(必要な場合)
  • wp-config.phpをデバッグモードをオフに
  • htmlからwordpressにトップページを切り替え

といった作業が残りのタスク。これらについて注意点や参考になるサイトなども含め次回まとめたいと思います。