wordpressでGoogle Analyticsを使う

自分が作ったページにどれくらいの人が来てくれるのか。
やっぱり気になりますよね(゚∀゚ )

ということでweb解析ツールとして前から使っている
Google Analyticsを使おうと思います。

Google Analyticsについて

webページのアクセス解析を行う場合はページが表示されるときに、
Javascriptなどでアクセス解析サービス業者が準備している
解析用サーバにアクセスをさせます。そのアクセスログから
アクセス時間や使用ブラウザなどの情報がわかる訳です。
このアクセスを行うものをビーコンと言います。
「ページにビーコン埋める」なんて言い方したりします^^

さて、Google Analyticsも例に漏れずビーコンにより
アクセス解析をしてくれます。今までにいくつかの
web解析サービスを使いましたがAnalyticsは
ダントツで情報量が豊富!しかもタダ!

ただ、ちょっと気になる点は1日1回のレポートです。
他のサービスではビーコンからのアクセスがあると
けっこう直ぐに反映する場合が多いです。
ここだけちょっとマイナスヽ(`Д´)ノプンプン

でも、頻繁に更新されなくとも、見れるレポートは
他の解析サービスとは比べ物にならない量と質。しかもタダ!(w
ということで今ではめっきりGoogle Analyticsのお世話になってます。

wordpress PluginはGoogle Analyticator6.2 を入れます。

インストールはいたって簡単ヽ(´ー`)ノ
f:id:kuchida123:20110903221916g:image:w360

Google Analyticator6.2 設定

インストールよりもその設定の方がちょっと手間です。#ほんとにチョット(w
f:id:kuchida123:20110903222722g:image:w360

設定したのは数ポイントなので簡単でした。
UA-xxxxxxxx-x という設定と、機能のEnable設定だけ^^
あと、赤丸で囲んだところをクリックするとGoogleページにとんで
ログイン許可も求められます。

許可してみると「Google Analytics UID」の入力欄がなくなりました。
きっと許可するとUIDの入力が必要なくなるということですかね。
ひとまずこの設定はスルーして、UIDを入力しておきました。

Google Analytics動作確認

wordpressのGoogle Analytics設定は完了しましたヽ(´ー`)ノ
でも直ぐにはデータが反映されません><
f:id:kuchida123:20110903225126g:image:w360

でも確認方法というのが以下ページにありました^^
http://www.google.com/support/forum/p/Google%20Analytics/thread?tid=6f4860c83afd0448&hl=ja

確認方法とはFireFoxのLive HTTP headersを使い、
ビーコンが動作しているところを確認するという方法です。
ということで確認してみます。

確認方法はLive HTTP headersを起動した状態で、ページを表示するだけ。
そうすると通信内容がズラズラズラズラでてきます^^)b
その中を良く見てみると以下のホストにアクセスしてます。

http://www.google-analytics.com/__utm.gif?ずらずら
ずらずらずらずらずらずらずらずらずらずらずらずら
ずらずらずらずらずらずらずらずらずらずらずらずら

ということでビーコンは間違いなくwordpress作のページに
仕込まれていることが確認できました(σ`・ω・)σ

h2とかh3タグで目次を作るPlugin

wordpressで作るページに自動で目次をつくるPluginがあります。
この機能を提供するPluginはたくさんあるようですが、
いくつか試した結果Table of ContentsというPluginにしました!
Pluginの名前がまさに目次(table of contents)Σ(゚Д゚;ヒネリゼロ!

wordpress Plugin 「Table of contents」をインストール

インストールは簡単ヽ(´ー`)ノ
いつものように検索してきて「インストール」をクリック。
これで完了しています♪
f:id:kuchida123:20110905005556g:image:w360

wordpress Plugin 「Table of contents」を使う

使い方は至ってシンプル。
目次を挿入したい位置に以下を書くだけ!

[toc]

そうすると以下のような目次が固定ページ中に現れます♪
f:id:kuchida123:20110905005557g:image:w360

しかし、、、む。。
なんか目次の横に本分が回りこんでしまっています。。
これは正直、自分のイメージしていたものとちょっと違う。
自分は目次に続いて本分を表示させて欲しいのです。

イメージ的にはPukiwikiの#contentsと同じのを期待してました。
ただ、本分の位置はちょっとイメージ違いではあったものの、
目次の表示はとてもシンプルでうまくまとまっていたので
見やすくて気にいりました♪

「回り込みさえ回避できればなぁ( ´ー`)フゥー...」
ということで、CSSとの戦いが始まりました。

wordpress Plugin 「Table of contents」回り込みとの戦い

ここでFirebugを使って、テーブル要素を見てみました。
目次自体はdivタグでくくられていたので、
プラグインの「編集」からPHPを上からズラズラ眺めて、
いろいろ改行
を入れてみたものの期待通りにならない。
「何で回り込みになる設定になっているんだo(`ω´*)o」

設定を探してみても、章や段落の表示方法ばかり出てきて
期待するような設定はありません。

そこで「HTML 回り込み」などで調べてみるとDIVタグには
回り込み設定があり、CSSではfloatという設定みたい(゚∀゚ )

ということでサーバにログイン!
関連しそうなファイルをfloatでgrepしていると発見!

$ cd /www/xxxx.xxx/wp-content/plugins/content-table/css
$ grep float *
css_front.css:  float:left;
コレ━(゚∀゚)━チャウ!?

ということでこの部分を編集します。
ちゃんとバックアップもとります♪

$ cp css_front.css css_front.css.bak
$ sudo vim css_flont.css
left を clear に変更
$ diff css_front.css css_front.css.bak
10c10
<       float:clear;
---
>       float:left;

ということで再描画すると!!
キタ━(゚∀゚)━!
f:id:kuchida123:20110905005558g:image:w360

これで理想通りです♪

まとめ

今までのwordpressはほとんどクリックでやっていましたが、
とうとうPHPやCSSの中身を見て編集するような段階になってきました。

「自分の持っていたイメージとちょっとだけ違う><」
というような場面は今後増えてきそうな気配です。
でも、理想を目指し、臆せずビシバシ突き進もうと思います!

Google XML Sitemapでインデックスしてもらう

wordpressで作成しているページをGoogleさんに見つけて欲しい♪
ということで、sitemap.xmlを設置してGoogleクローラさんにアピール!

クローラとは

クローラとはインターネットのあらゆる所を探しまわって、
いろんな情報を探し回っているプログラムの総称です。

「いろんな情報」とはwebページだったり、メールアドレスだったり、
求めている情報はクローラによって様々のようです。
詳細はWikipediaをどうぞ^^

Googleのクローラ

ということで、Googleさんのクローラはwebページを探し回っています。
そしてページにどんな情報があるのか?などを見て回ってます。

自分のページランキングなど、皆気にします(自分もですがw)。
それはこのクローラさんが持っていった情報が精査された結果で、
つまりクローラさんにちゃんと情報を持っていってもらいたい訳です。

ということで人間に見やすいページを作るのはもちろんですが、
このクローラさんにもやさしいwebページを作ることも大切です(゚∀゚ )
人間に見やすいページは文章を考えたり、ページ構成を考えたり
することでわかりやすいですが、クローラに優しいページとは何でしょうか??
相手はプログラムですので行間や空気を読んではくれません(w

ということでクローラへの優しさの一つがsitemapです^^
sitemapに自分のwebページの全体構成を書いておいて、
そこを見てもらうということが重要!

sitemapというくらいでwebページ内の地図をクローラさんに
渡すためのものがsitemapです。これはxmlで書かれていて、
人間向けに書かれたものではありませんので、
いろいろなページのリンクにある「サイトマップ」というのは違います。

sitemapを作る

http://xxxx.xxxxx.xxxx/sitemap
http://xxxx.xxxxx.xxxx/sitemap.xml

URL的にはこんな感じになるかと思います。
この中身に従いページを持って行ってくれる訳ですね♪

そうすると、ページが増えたり、既存ページの更新と同時に
このSitemapの内容を増やしたり、もう一回持って行って欲しいですよね!

Google XML Sitemapプラグイン!

前置きが長くなりましたがsitemapに対していろいろな要求があるわけです。
それを満たしてくれるのがwordpressのGoogle XML Sitemapプラグインです^^

インストールは至って簡単です。
「Google XML Sitemap」を検索してインストールボタンをポチ^^)b
いくつか同じような名前がついたプラグインがありますが、
初めのほうに出てきている「詳細」を見てみると2600件くらいの
評価が付けられていて、星が4.5くらいのやつです。スゴイ!!
f:id:kuchida123:20110911150217g:image:w360

入れてみてイザ設定!!
となってみると、改めてこのプラグインのすごさがわかります。
これは、、スゴイ(゚∀゚ )

どの検索エンジンにページの更新を通知するか(ping機能といいます)を
設定できたり、送り先を選べたりします。

そのsitemap作成にどれくらいのリソース(メモリ量と時間)を利用したかを
レポートしてくれています。失敗した場合にはその解決方法も載ってました。

更新頻度もページの種別単位で設定可能です。
あとはsitemapも指定できます。(今のとこあまり重要でないカモ)

という感じ。
こんなことできるのね!?ってことまで設定できます(笑

ということでGoogleウェブマスターツールに登録してみると、
Google Analyticsの時と同じように1日くらいでインデックスしてくれました。
やはりGoogleに何か処理をお願いすると1日くらいはかかるようですね。

ということで新しいwebページを作った場合にはこの作業も忘れずに~(≧∇≦)b

あ。robot.txtという、クローラに対してページを持っていくor持っていかない
というよな事を指示するような仕組みもありますが、
今回は割愛~ヽ(´ー`)ノ

wordpressのページにお問合わせフォームを作る

webページによくあるお問合わせフォームを作りたいです!
管理人にweb経由で連絡をもらえるので、いいですよね^^
日本語文字化けの少ないと噂のContact Form 7を入れます。

Contact Form 7インストール

普通に設定する分には特に問題ないです。
wordpressのプラグインのインストールから「Contact Form 7」を選択。
流れに従い入れてあげます。

ただ、ちょっとだけやりたかったのが、人間確認のために
画像の中に書かれている文字を入力させてメールを送るようにしました。
これを入れておけば変なスクリプトでメール送るのは大変です^^)b
f:id:kuchida123:20111116002019g:image:w360

これを入れるためにはGD(画像系ライブラリ)とFreeType(フォント)
をサーバに入れてやる必要があります。

しかもそれらをPHPから使えるようにしてやる必要があるわけです。
ここにちょっとだけ手間取りました。まぁ~ 久々だったし!(言い訳w)

PHPでGDとFreeTypeを使う

まずはFreeTypeを入れてやります。
もちろんここはyum先生にお願いします(w

$ sudo yum install freetype
ズラズラ

FreeTypeはこれでオッケーです。

続いてphp53のgdです。
普通のlibgdでないのがミソ。って、、当然なのですが
これに気付くのにちょっと時間かかりましたf^^;

$ sudo yum install php53-gd
ズラズラ

ここまで来るともう大丈夫!
最後はphpinfoでちゃんと動くか確認です。
f:id:kuchida123:20111116002621g:image:w360

こうやって文章にしてみると、、、、
とてもアッサリに見えますよね。やっぱり。。
ここまでくると、php53がgd(&FreeType)を認識するので
Contact Form 7中のCaptchaがエラーを出力しなくなります。
ここまできたらあとちょっと!!

Contact Form 7でCaptchaする

上に貼ったキャプチャのように画像の中に文字を入れて
人間確認できるようになるまであと少し。

自分はこんな感じで作りました。

<p>画像内の文字を入力してください<br />
[captchac captcha-271 size:m]
[captchar captcha-271]
</p>

こんな文言をよくネットで見る気がします。
みんなこうやってやってたのねぇ~w
まぁ、もっと高度なの見た事ある気もしますが、
ちょっと使う分には十分すぎるかな♪

まとめ

久々にyum使いました。
改めてコマンド1発でいろいろ解決するyumに感動!
そして、ファイルIncludeで特に設定が必要ないファイルの
作りにも感動しておりました。その割りに時間はかかったけど(w

そして一歩先行く?web機能を提供することができました♪