WordPress

さのまる

Googleの検索ワードはどんどん取れなくなる?”encrypted_search_terms”ってなんすか?の件。


WordPressのアクセス解析用プラグイン”WordPress.com Stats”をふわーっと見ていたら、
検索キーワードに、“encrypted_search_terms”がたくさん出ている。
encrypted_search_terms

こんなワードでアクセスがくるん??と思いつつ、調べてみたら、
どうやらGoogle検索からの流入らしい。ソース(えいご)

PCブラウザでは、Chromeをはじめ、FirefoxでもSafariでも、Google検索すると、
非ログイン状態でもSSL通信になるので、そのあたりが影響しているのかなと推測してみる。

この、”WordPress.com Stats”の”encrypted_search_terms”の数値と、
Google Analyticsのオーガニック検索トラフィックの(not provided)の数値が同じになるのか?
と思ったけど、Google Analyticsの”(not provided)”の方が約2倍多かった。

一方で、Googleウェブマスターツールだと、”encrypted_search_terms”や”(not provided)”と
ならずに、それらの検索ワードが取得出来る。そのうえ検索ワード毎のCTRまで取れるのであります。

さらに、Analyticsとウェブマスターツールを連携させることも出来るので、一度連携させてしまえば、Analytics上で(not provided)の無い、検索ワードを確認することが可能になります。

facebook

必ず押さえておくべき WordPressとFacebookの連携方法②


以前、WordPressで投稿した記事をFacebookのウォールに書き込む、WPBookというプラグインについてブログを書きましたが、気がついたらWordPressの管理画面にこんなアラートが出る事案が発生。
WordPress ダッシュボード

“Facebookのアプリ用アクセストークンの有効期限が切れてるよ”
“新しいアクセストークンを設定しなさいよ”
“じゃないと、WPBookからFacebookにアクセスさせないよ”

と怒られている模様。

Facebookのアクセストークンについて調べてみたら、
こちらのページにあるように、3種類のアクセストークンがある。
で、Facebookのディベロッパーサイトで、アクセストークンを確認できるページがあるので、
アクセスしてみる。
トークンツール

見てみると、”User Token”と”App Token”の2つがある。
WPBookをインストールした際にWordPressの管理画面では、”App Token”の値を設定していたので、”App Token”の有効期限が切れたっぽい。
でも、調べてみると”App Token”は、有効期限が無いらしいので、Facebook側が仕様変更したのか、あるいは、Facebookのoffline_accessパーミッションが廃止された影響なのか、良く解らない。

とは言うものの、アラートをなんとかしなくちゃなので、以下の手順で改めてアクセストークンを取得してみる。

■Facebookのディベロッパーサイトにて
(1)アプリページにアクセス ※”アプリのシークレットキー”の値を念のためメモっとく
アプリ画面
(2)「設定を編集」リンクを押下
(3)基本設定ページで、「再設定」リンクを押下
基本設定
(4)ダイアログが出るので、「再設定」ボタンを押下
(5)アプリページに戻って、”アプリのシークレットキー”の値が変わっていることを確認
(6)https://graph.facebook.com/oauth/access_token?client_id=[アプリID]&client_secret=[アプリのシークレットキー]&grant_type=client_credentials にアクセス
(7)アクセストークンが表示される(アプリID|アクセストークン)ので、メモっとく
access token

■WordPressの管理画面にて
(8)管理画面メニュー「設定」から”WPBook”を選択
(9)Required Settings Facebook App Secretに、(7)でメモったアクセストークンの値を入力し、Saveボタンで保存

以上の操作で、WordPressの管理画面のアラートが回避できました。
回避はできたんだけど、ググってもWPBookのおんなじエラーで引っ掛かったページは見つからないし、なんかスッキリしない。

masa

WordPressの投稿記事にYouTube動画を貼りつけよう!!”Viper’s Video Quicktags”プラグイン


便利そうな”Viper’s Video Quicktags”プラグインというのがあるとのことで、早速インストール。
手順は以下の通り。

①WordPress管理画面メニューのプラグインから、”Viper’s Video Quicktags”を検索しインストール。
②プラグインを有効化。ここまではいつも通り。
③投稿編集画面で、以下のようなボタンが出るようになるので、ボタンを押下(ビジュアル、HTMLタブどちらも出る)
Viper's Video Quicktags
④貼り付けたい動画のURLを入力
Viper's Video Quicktags

以上で動画の貼り付けが完了。すごく簡単!
せっかくなので、お気に入りの山本昌の動画を貼り付け!!
YouTube Preview Image

あとは、④の”settings page”リンク、若しくはプラグイン一覧の”Settings”リンクを押下して、設定画面でいろいろ設定ができます。

YouTubeの場合だと、以下のような設定が可能。
Viper's Video Quicktags
Dimensions:プレイヤーサイズ
Maintain aspect ratio:縦横非を維持するか
Color Presets:バーの色
Enable HD video by default:デフォルトでHDビデオを有効にするか
Show fullscreen button:フルスクリーンボタンを表示するか
Show border:プレイヤーの外枠に境界線を表示するか
Show the video title and rating:動画のタイトルと評価を表示する
Autoplay video (not recommended):動画の自動再生(推奨はしてない)
Loop video playback:動画のループ再生をする

yslow

W3 Total CacheプラグインでWordPressの動作を軽くしてパフォーマンスを向上させたい!!①


ウェブサイトのパフォーマンス計測ツール、YSlowやPage Speedで、
当ブログを計測してみると、あまり良い点数がいただけない。
yslow
Page Speed

涙目になり注意されている項目を調べてみると、
JavaScriptとCSSを圧縮すればパフォーマンスが上がるよ」とある。
Apacheのモジュール mod_deflateでもできそうだけど、
ここはいっちょ、WordPressのプラグインを検索。

“W3 Total Cache”というプラグインが素晴らしいという記事があったので、
まずはインストール前に仕組みを確認。

そもそも、”W3 Total Cache”ってどんなプラグインなん?と言うと、

(1)CSS、JavaScriptを圧縮してくれる
(2)MySQLからデータを取得するクエリをキャッシュしてくれる
→同じクエリであれば、DBに問い合わせをせずに結果を返す
(3)動的に出力されたhtmlをキャッシュしてくれる
→これは“WP Super Cache”でもやってくれます。
(4)オブジェクトをキャッシュしてくれる
→PHPの変数を1個としてキャッシュする
(5)プロキシサーバーやブラウザに対して、HTTPヘッダフィールドに設定する値が制御できる
→Cache-Control、Expires、Last-Modifiedを指定して、無駄なHTTPリクエストの削減が可能

とまぁ、このご時世、帯域が太くなってインターネットが高速化されているとはいえ、
通信しなくても良い余計なトラフィックは発生させないようにしようぜ!っていう考えは
Webアプリとしてあるべき姿だと思っております。

なので、他のプラグインとの併用やインストール時の設定など、もうちょい調べた後インストールしてみよーっと。

WordPressの投稿記事に、jQueryでかっこいいイメージスライダー「Coin Slider」を組み込む方法


WordPressの投稿記事に組む込める、良いイメージギャラリーはないだろーか?
というわけで探してみたところ「Coin Slider」のエフェクトが気に入ったので実装。
こんな風にイメージギャラリーがWordPress(3.0.3)に組み込めました。


—以下設定方法—
(1)coin-sliderのサイトから、cssとjsをダウンロード
(2)フォルダごと、/wordpress/wp-content/uploads にアップロード
(3)画像ファイルをアップロード

※ディレクトリ構成はこんなかんじ
/wordpress/wp-content/uploads
└ coin-slider
├ images
│ ├ image_1.jpg (スライダーに入れたい画像1)
│ ├ image_2.jpg (スライダーに入れたい画像2)
│ └ image_3.jpg (スライダーに入れたい画像3)
├ coin-slider.js (coin-sliderのサイトから)
├ coin-slider.min.js (coin-sliderのサイトから)
└ coin-slider-styles.css (coin-sliderのサイトから)

(4)coin-slider-styles.cssに、下記1行を追加
#coin-slider-coin-slider {width:600px;}

—ここからWordPress側の設定—
(5)となりのソフト屋さんからプラグインをダウンロード
(6)(5)を解凍し、/wordpress/wp-content/pluginsに保存
(7)管理画面のプラグインから、’add css js’を有効化
(8)管理画面の投稿から、カスタムフィールドを追加。追加内容は以下の通り。

名前:cssfile 値:/wordpress/wp-content/uploads/coin-slider/coin-slider-styles.css
名前:js
値:$j = jQuery;
$j(document).ready(function() {
$j(‘#coin-slider’).coinslider({
width: 600, //画像幅
height: 400, //画像高
spw: 7, //画像切替時の横四角数
sph: 5, //画像切替時の縦四角数
});
});
名前:jsfile 値:/wordpress/wp-content/uploads/coin-slider/coin-slider.js
名前:jsfile 値:/wordpress/wp-content/uploads/coin-slider/coin-slider.min.js

(9)htmlを書く。
<div id=”coin-slider”>
<!– 画像ファイルの設定 ここから–>
<a href=”#” target=”_blank”><img src=”/wordpress/wp-content/uploads/coin-slider/images/image_1.jpg” alt=”画像1″ /><span><strong>画像1</strong>コメント1</span></a>
<!– ここまで 画像数分以降繰り返し–>
</div>
設定は以上。ナイススライダー!!

カール君

WordPressの表示速度を高速化したい!!


WordPressプラグイン「WP Hyper Response」をインストールして、ページ表示を高速化。

このstocker.jpさんの「WP Hyper Response」は、何をするプラグインかと言うと、
phpのflush()関数を使って表示を高速化しますよ、というプラグイン。

で、何故速くなるかと言うと、通常WordPressで作られたページは、
htmlの最後の</html>までをWebサーバからブラウザに返却するところを、
flush()関数が呼ばれた時点でWebサーバからブラウザに返却するため、
体感速度が速くなるとのこと。

実際、プラグイン導入後に高速化されるのかどうかを、
サーバレスポンス時間測定」で計測。

■導入前
測定結果 = 0.237(秒)

site-speed

■導入後
測定結果 = 0.207(秒)

site-speed
結果若干ではありますが、レスポンスが向上しました!!!

ただし、Apacheのモジュール「mod_gzip」と比較すると、Webサーバの負荷が
高くなるようなので、大量のトラフィックがあるサイトには向いていないそうです。
※当サイトにはあまり関係ないです(T-T*)

google +1

簡単設定!! WordPressにGoogle +1 ボタンを設置する方法


2011年6月1日に予定通り、“Google版いいね!”とも言える「+1」ボタンが、一般サイトにも提供が開始されました。

Google +1(プラスワン)とは、

・FacebookのLike(いいね!)の用に、Google検索サービス上でユーザー同士が
ウェブページのレコメンド(推薦)を行うことが出来る機能

・一般のウェブサイト運営者が、「+1」ボタンのコードを自身のウェブページに貼り付けることで
同ボタンを設置することも可能。

・ただし、2011年6月1日時点では「+1」によるお勧めが検索結果に反映されるのは今のところ、Google.comの英語版のみ。

早速設置するべ!!という訳で、WordPressプラグインをインストール。

(1)このサイトの「Google +1 Plugin for WordPress」リンクから、zipファイルをダウンロード
(2)解凍したら、”/wp-content/plugins”配下にフォルダごとコピー
(3)wordpress管理画面メニューの「プラグイン」を選択し、「ILC +1」を有効化
(4)ILC Plus One設定画面を開き、以下の項目を設定

Select language → 言語設定
Track +1 vote → とりあえずチェック
Include count → カウントを表示するかどうか。
Button Size: → ボタンの大きさ。
Button Placement in Posts/Pages: → 投稿記事の前か後どちらに設置するか。
Align left or right: → 位置は左寄せか右寄せか。
ilc-plus-one

WP Social Bookmarking Lightを併用する場合、且つ並べて設置したい場合は、以下phpファイルの修正を行う。

“wordpress/htdocs/wp-content/plugins/wp-social-bookmarking-light/modules/content.php”46行目
return “<div class=’wp_social_bookmarking_light’>{$out}</div>”;

これで設置完了!!日本語版対応はいつになるんでしょうか。

ishige

超便利なプラグイン Facebook向けにOGPを設定する”WP-OGP”


Facebook向けのOGP(Open Graph Protocol)の設定が超重要です。やらなきゃソンです。
的な記事があったので、”WP-OGP”というプラグインをインストール。ついでにソーシャルブックマークのプラグインもインストール。

そもそもOGPってなに!?っていうと、
「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML のmeta要素として記述する方法のこと。

で、OGPを設定しておくと、Facebookに対してこんなメリットがあるとのこと。

(1)「いいね!」した情報がfacebookの友達のニュースフィードに表示される。
(2) ニュースフィードに表示される際の内容を指定できる。
(3) 「いいね!」してくれたユーザーにアップデート情報が送れる。

以下Facebook側の設定。

(1)developersサイトから、アプリを作成
(2)OGPを設置したサイト名・URLを入力
(3)作成完了画面で、「アプリID」をメモ
(4)ユーザーID取得画面にアクセスし、「ユーザーID」をメモ

以下WordPress側の設定。

(1)プラグイン「WP-OGP」をインストールし、有効化
(2)メニュー→設定→WP-OGPから、”fb:appid”(アプリID)と”fb:admins”(ユーザーID)を入力
(3)使っているテーマの”header.php”のhtml開始タグに以下の記述を追加。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"xmlns:fb=”http://www.facebook.com/2008/fbml”>

キチンとOGPが設定されたかどうかは、URLリンターで調べることが可能。

以下の記事が大変参考になりました。

<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記
OGP(Open Graph Protocol)設定をちょっとだけ学んで、facebook向けに実装はWordPressのプラグイン「WP-OGP」を使ってみた
【5分】Facebook向けにOGPをセットアップする方法 (※Wordpress プラグイン)

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
facebook

必ず押さえておくべき WordPressとFacebookの連携方法


WordPressのプラグイン”WPBook”を使って、Facebookへ投稿記事を反映させる方法。
※WordPress ver3.0.3 WPBook ver2.2.1

ざっくりと、以下のような流れです。

WPbookのインストールし→Facebookでアプリ作成し→WordPressとFacebookの設定を一生懸命行う。(時間かかる…)

■WPbook側の設定①
(1)管理画面メニュー「プラグイン」→「新規追加」から”WPBook”(ver2.2.1)をインストール
(2)プラグインを有効化
(3)管理画面メニューの「WPBook」をクリック
(4)WPBook Set UP画面の「facebook」リンクから、Facebook開発者ページへ
wpbook setup

■Facebook側の設定
(1)開発者ページの「Set Up New App」ボタンをクリック
(2)アプリケーション名を入力、利用規約に同意して、「アプリケーションを作成」ボタンをクリック
(3)アプリケーションの編集画面の、「Web Site」タブをクリック
Site URL→ブログのURL
Site Domain→ブログのURLからドメイン部を入力

(4)「Facebook Integration」タブをクリック
Canvas
Canvas Page→任意のURLを入力
Canvas URL→ブログのURLを入力
Secure Canvas URL→未入力
Canvas Type→IFrame を選択
iFrameサイズ→Auto-resizeを選択
ブックマークURL→未入力 ※Canvas Pageがブックマークされる。

Discovery
Social Discovery→有効 ※友人にアプリを使用していることを伝える

Page Tabs
タブ名→任意のタブ名
Page Tab Type→IFrame を選択
タブのURL→?app_tab=true を入力 ※FBMLの場合は、?app_tab=true&fb_force_mode=fbml を入力
Secure Tab URL→未入力
編集用URL→未入力

(5)「Mobile and Devices」タブをクリック
Core Settings
アプリケーションのタイプ→HTML5 / mobile web を選択
※それ以外は未入力でOK

(6)「Advanced」タブをクリック
Authenticaton
Deauthorize Callback→未入力
サンドボックスモード→無効にする を選択

移行
Disable Deprecated Auth Methods→有効 を選択
Stream post URL security→無効 を選択
OAuth 2.0 for Canvas→有効 を選択
Timezone-less events→有効 を選択
Upgrade to Requests 2.0→有効 を選択

※以降は未入力でOK
facebook

■WPbook側の設定②
(1)管理画面メニュー「設定」から”WPBook”を選択
Required Settings
Facebook App ID→Facebook側のアプリIDを入力
Facebook App Secret→Facebook側のアプリの秘訣を入力
YOUR Facebook Profile ID→Facebook側のProfile IDを入力
Facebook Canvas Page URL→Canvas Pageのhttp://apps.facebook.com/から後の部分を入力

Stream/Wall Options
Stream Profile/Page Options
Publish new posts to YOUR Facebook Wall
Stream Comment Options
Import comments from Facebook Walls
Automatically approve imported Wall comments
→上記項目にチェックを入れる。

Application View Options
→チェックなし。

以上で設定完了。WordPressの投稿記事がFacebookに反映されます。
facebook

tubuyaki

WordPress Twitter連携 プラグインなど


Twitterに疎いくせして、いっちょまえにwordpressと連携させてみました。

連携方法のまとめ。

■tweetableプラグインで、記事投稿をTwitterへ反映、投稿記事にTweetボタンを設置、
wordpress管理画面からのTweetなどを可能にする。

(1)管理画面メニュー「プラグイン」→「新規追加」から”tweetable”(ver.1.1.8)をインストール
(2)プラグインを有効化
(3)管理画面メニューの「Twitter」をクリック
(4)Tweetable Setup(Step1)画面で、「Register Application」ボタンをクリック

tweetable_2

====ここからTwitter設定画面
(1)[アプリケーション名]フィールドに、ブログの名前を入力 ※アイコンは未登録でも良いみたい。
(2)[アプリケーション説明]ボックスにブログの簡単な説明を入力
(3)[アプリケーションのウェブサイトURL]を入力 (例:http://www.seibu_lions.com)
(4)[アプリケーションの種類]を「ブラウザアプリケーション」にチェック
(5)ここで、Tweetable Setup画面に戻り、「5. In the Callback URL field, paste」に
記載されいてるURLを貼り付ける。
(例:http://seibu_lions.com/wordpress/wp-admin/admin.php?page=tweetable_install&installing=1&oauth=1)
(6)[標準のアクセスタイプ]は「Read & Write」にチェック
(7)[Twitterでログインする]は「はい、Twitterをログインに使用します。」にチェック
(8)「保存する」ボタンをクリック
(9)Consumer Key と Consumer Secret が生成されるので控える

tweetable_1

====ここまで

(5)Step1の画面に戻り「Continue」ボタンをクリック
(6)Tweetable Setup(Step2)画面で、生成されたConsumer KeyとConsumer Secretを入力
(7)「Save and Continue」ボタンをクリック
(8)Tweetable Setup(Step3)画面で、Twitter Usernameを入力
(9)「Save and Continue」ボタンをクリック
(10)Tweetable Setup(Step4)画面で、「Sign in with Twitter」ボタンをクリック
(11)Twitter側のアクセス許可画面が表示されるので「許可する」をクリック
(12)Tweetable Setup(Step5)画面で、「finish」ボタンをクリック

ちょっと長いけど、以上をもちまして一通り設定完了。

また、管理画面メニューの「Twitter」→「Settings」で設定画面が開く。
主な設定は以下の通り。

・Tweetmeme Button → 記事内にTweetボタンを設置するかどうか
・Auto-Tweet Posts → 記事投稿と同時にTwitterに反映させるか

tweetable_3

■サイドバーにTwitterを表示する

(1)「外観」→「ウィジェット」をクリック
(2)利用できるウィジェットからTwitterを選択
(3)サイドバーに表示する際の”タイトル”、”twitterユーザ名”、”表示するtweet数”を入力
(4)「保存」をクリック

sidebar

■Mystiqueテーマとの連携

(1)「外観」→「Mystiqueの設定」をクリック
(2)「ナビゲーション」をクリック
(3)エキストラナビゲーション項目に、”TwitterID”を入力。
(4)「変更を保存」をクリック

extra_navigation