IDEA*IDEA » WordPress関連

WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法

taguchi — Fri, 02 Dec 2011 10:13:58 +0000

Facebookの「いいね！」したときに、サムネイル付きできちんとシェアするにはOGPなるものに対応しなくてはなりません。

そのためのWordPressプラグインが「WP-OGP」ですが、これがくせ者すぎる・・。以前挫折して放置していたのですが、facebookが普及してきたので重い腰をあげて設定してみましたよ・・。

↑ 正しく設定しないと、こんなかっこわるいことに。サムネイル欲しい！

というわけで、以下、ざざっと作業ログね。

■ WP-OGPの導入

以下からどうぞ。

» WordPress › WP-OGP « WordPress Plugins

インストールしたらActivateしておきましょう。

■ facebookアプリの設定

「Facebook Developers」へ行き、「Apps」から新しいアプリを作って（「App Display Name」はブログ名、「App Namespace」は空欄で）、ずんどこ登録していくと「App ID」というものがもらえます。

あとは自分のIDを調べなくてはいけないので https://graph.facebook.com/(ユーザー名) にアクセスして調べます。

■ WP-OGPの設定

WordPressに戻って左側メニューから「設定」→「WP-OGP」を選択、さきほど調べたApp IDを「fb:appid」に、自分のIDを「fb:admins」に入力します。

■ wp-ogp.phpの編集

プラグインページにいって、WP-OGPのところにある「編集」をクリックして以下を変更します。

まずは「fb:appid」というのを「fb:app_id」に変更（タイプミスらしいです・・・なぜ修正しない・・・）。

function load_wpogp_settings() {
    global $ogpt_settings;
    $ogpt_settings['fb:app_id']  = get_option(OGPT_SETTINGS_KEY_FB_APPID);
    $ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}

次にwpogp_image_url()の関数を編集。

function wpogp_image_url() {
    global $post;
    // $image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID)); ← こちらをコメントアウト
        $image = get_the_post_thumbnail_src($post->post_content); // ← こちらを追加。
    if ( empty($image) )
        { return wpogp_image_url_default();}
    else
        { return $image; }

}

■ html宣言を編集

テーマの編集で「header.php」のhtml宣言部分を次のように変更します。

■ テスト

facebookが提供するツールでテストします。以下にブログの個別記事のURLを入れてください。

» Debugger – Facebook Developers

次のようになればOKです。

↑ サムネイル来た！

ふー・・・わりと長い道のりですよね・・・。なぜプラグインが修正されない、もしくは新しいプラグインが出てこない・・・。他にもし便利なプラグインとか設定方法とかあったら是非教えてください・・・。

【参加受付開始】 WordCamp Tokyo 2011に参加します

taguchi — Mon, 31 Oct 2011 03:20:56 +0000

さて11月27日（日）に開催されるWordCamp Tokyo 2011に参加しますよ。一般参加申し込みも始まったようなので告知協力も兼ねてエントリーしておきます。

WordCampは、WordPressユーザーや、ブログ周辺、もしくはそのあたりの技術に興味がある人達があつまってわいわいするお祭りですね。お申込はこちらから出来ますよ。

» WordCamp Tokyo 2011 参加申込を開始しました | WordCamp Tokyo 2011

なお、今回は「百式ブログの毎日更新を10年+続けてわかったことと、これからの展望（仮）」というお題でスピーカーもさせていただくことになりました。

ソーシャルメディアはいろいろありますが、その中でブログをどう使っていくかとか、日々の更新で気をつけていることなんかを話してみたいと思います。よろしければ是非ご参加くださいな。

ポートフォリオサイトに使えそうなシンプルな無料WordPressテーマ『Imbalance 2』

taguchi — Wed, 15 Jun 2011 06:01:57 +0000

こういうのメモしておかないとすぐ忘れるのでエントリーしちゃいますよっと。WordPress用の無料テーマ、Imbalance 2です。シンプルで美しい感じ。

↑ きれいにすっきり。

↑ 特徴なぞ。Ajax的なロードや、ソーシャルメディアにも対応。

というわけでご利用は以下からどうぞ。

» Imbalance 2 WordPress Theme

WordPressブログにGoogleの「+1」ボタンをつける方法

taguchi — Tue, 07 Jun 2011 04:17:54 +0000

いろいろやり方はありますが、WordPressのプラグイン『WP Social Bookmarking Light』がバージョンアップして対応したみたいだからそれでいいんじゃないかな！

↑ ドラッグ＆ドロップで追加できて便利。バージョンアップされてPaddingも指定できるとはこれまた素晴らしい。

↑ あまりにも簡単にできてしまった・・・。

共有系のボタンは個別につけるよりもこうしてまとめてつけてくれるプラグインが便利ですな。

» WordPress › WP Social Bookmarking Light « WordPress Plugins

ライブドアのサーバーエンジニアさんに百式系ブログ（WordPress）の負荷対策について聞いてきた

taguchi — Mon, 28 Feb 2011 01:52:07 +0000

さて、実は先日から、ライブドアさんのご厚意で、百式系ブログを同社サービスの「EX-SCALE」にてホストしてもらうことになりました！

今まで何かと不安定だったブログがこれでかなり安定するようになりました！安心して旅行に行けるようになりました！快適すぎる！

なお、ホストしていただくかわりに、ライブドアさんのブログメディアまわりの活動を応援したり、ブログにバナーがついたり、という感じになりますのでよろしくお願いいたします（金銭を受け取ってはいませんよ）。

というお知らせではありますが、ここ数ヶ月、ブログの負荷対策に相談にのっていただいたのでそこで学んだことをまとめてみます。やっぱりプロはすごいですね（というか、僕が素人すぎる・・・）。WordPressの負荷でお困りな方は是非参考にしてみてください。

↑ いろいろ教えていただいたライブドアの田畑さん。問題を理詰めで特定していく姿がかっこいい！

では、施した対策について紹介していきましょう。

サーバーの分離

まず、WebサーバーとDBサーバーを分けて問題の切り出しをしやすくしました（これは前もそうだったのですが、大事なことなので）。予算にもよりますが、もし可能ならやっておくといろいろ便利です。

リソース監視ツールの見方を学ぶ

EX-SCALEに標準装備されているリソース監視ツール、「Munin」の見方を教わりました！実は、今までもこうしたツールの存在は知っていたのですが、見方がわかっていなかったのです・・・。

正直、今までは「top」を見ながらあーでもない、こーでもない、と手探りで対策をしてきたのですが（← 大きな間違い）、モニタリングツールを使うことでより的確に問題箇所を把握することができるようになりました。

すごく簡単に書いてしまうと「あるプログラムで負荷が高まったときに、どのプログラムの負荷が変化しているか？」を見ていくことで問題箇所にあたりをつけていくことができます。muninではプログラムごとに同じ時系列で負荷グラフを眺めていくことができるのですごく便利です。

今まで知らなかったのが恥ずかしいのですが、「リソース監視ツールの見方ってよくわからないなぁ」となんとなく感じている人は一度詳しい人にレクチャーを受けてみることを強くおすすめします。

なお、EX-SCALEのマニュアルにMuninで出来ることがまとめられていますのでこちらもご参考までに。

» リソース監視ツールMuninについて EX-SCALEプラン livedoor レンタルサーバガイド livedoor ヘルプ

mysqlのキャッシュを増やした

さてここからは実際に設定した点をば。設定値は個々のサーバーによるかと思いますが、一応ご参考までに。

まずmuninを見ていてわかったのが、mysqlの負荷が高くなりすぎていた点。そこでmysqlのquery_cacheを次のように設定して様子を見ます。

query_cache_limit=5M
query_cache_min_res_unit=4k
query_cache_size=64M
query_cache_type=1

こちらでしばらく運用してみて、muninで確認したところ、キャッシュが効き始めてどんどん負荷が落ちていきました（muninではmysqlのqueryがキャッシュによるものか、そうではないのか、がわかります）。

mysqlのmax_conncetionを増やす

これだけでもだいぶ改善されたのですが、エントリー投稿直後にCPU負荷とロードアベレージが上昇し、mysqlのスレッドが限界値に達していたので、max_connectionsを増やします。

また同時にDBサーバーのユニット数を一つ増やしました。ユニットを増やす際に無停止で追加できるのはやはり感動ですよ！

max_connections=300

これでだいぶOKになりました。

WP Super Cacheの導入

これはまだ導入していない人向けですが、やはりWP Super Cacheは必須です。muninとあわせてみるとぐっと負荷が下がるのがわかります。

» WordPress › WP Super Cache « WordPress Plugins

以上、結局のところ、my.cnfをいじりつつ、ユニット数を無停止で追加、という処置ですが、「muninを見る→問題箇所の特定→対策を施す→muninで確認」というサイクルを経ることでより確実にサーバー管理ができるようになりました。

サーバーエンジニアの方からすると「いまさら、何言っちゃってるの？」ということばかりでしょうが（汗）、適当に設定値をいじってなんとかなるだろう・・・といきあたりばったりの対策をしちゃっている人の参考になればということで恥をしのんでエントリーしておきます・・・。

最後になりますが、EX-SCALEさん、快適でいいですよ！他にもクラウドサーバーはありますが、動的にユニット数を変更できたり、お手頃価格だったりするのに加え、転送料無制限！というのが強みではないですかね。

負荷が読みにくいソーシャルアプリやキャンペーンサイトなどによく利用されているようですね。詳細は以下からどうぞ！

» クラウド時代のレンタルサーバー livedoorレンタルサーバ EX-SCALEプラン

WordPressにFacebookの「Likeボタン」を設置するプラグイン『Like』

taguchi — Thu, 08 Jul 2010 02:00:29 +0000

まぁ、なんというか今さら感たっぷりですが、このブログにも「Likeボタン」を導入しましたよ。最初はテーマにコードでも組み込むか！と思ったのですが、あっさりプラグインが見つかりましたよ。そりゃそうですよね。

いくつかあったのですが、Bottomlessによるシンプルな「Like」というものが良さそうです。

↑ こんな感じで「Like」できます。

日本ではまだまだっぽいFacebookですが、最近友達申請もじわじわ増えてきているし、今年はFacebookの映画も公開されるのでこうしたプラグインを入れておいても悪くないかもですね。

Likeプラグインの詳細＆ダウンロードは以下からどうぞ。

» WordPress › Like « WordPress Plugins

あ、そういえばTwitterのプラグインも入れなくちゃな・・・。今から探そう。

『WordCamp Nagoya 2010』の公式サイトがフリーダムすぎる…

taguchi — Thu, 24 Jun 2010 01:05:48 +0000

WordPressも3.0が出てかなりいい感じですが、名古屋でWordCampが開かれるようですね…。が、その公式サイト…、ちょっとフリーダムすぎやしませんか。

↑ あえてモザイクかけてみた（クリックして元サイトへ）。

まぁ、WordPressでここまで出来る！というデモとしては良いかもしれませんｗ。

10/30開催らしいのでお近くの人は是非どうぞ。

» WordCamp Nagoya 2010

ブログの更新情報はFriendfeedじゃなくて、WordTwitでTwitterに流すことにした

taguchi — Wed, 13 Jan 2010 02:49:25 +0000

さてブログの更新情報をずっとFriendfeedでTwitterに流すようにしていたのですが、通知してくれる間隔がやたら長くなってきたので（数時間に1回とか？）、WordTwitに乗り換えましたよ。Wordpressのプラグインですね。

WordTwitだとほぼリアルタイムに通知してくれたり、通知する際のテキストをカスタマイズできたりして便利ですね。

せっかくなので以下、作業ログをば。

■ WordTwitのインストール

まずはプラグインのダウンロード＆インストール。以下からダウンロードしてpluginsフォルダに突っ込みます。

» WordTwit WordPress Plugin ↔ BraveNewCode Inc.

インストールしたあとは有効化しておきましょうね。

■ もろもろ設定

WordTwitの設定を行います。まずはURL短縮サービスの選択です。

↑ メジャーどころのbit.lyでいっときましょう。

なお、bit.lyを使う場合はAPIキーが必要なのでまずは以下のサイトでユーザー登録しましょう。

» bit.ly, a simple url shortener

そのあとにログイン、右上の「Account」リンクからAPIキーを表示します。

↑ これね。

これをさきほどのWordTwit設定画面で入力しておけばOKです。

次にTwitterのアカウントですね。ID&PWDは自分のサーバーだからまぁ、がつんと入力しちゃいましょう。

↑ こんな感じに。

Twitterに通知するときのテキストをカスタマイズすることもできますね。必要だったらなにかいれておきましょう。「ブログ更新：」とか。

なお、ここでパスワードなどを間違えるとWordTwit設定画面の上にエラーが出るので確認しておきましょうね。

■ テスト＆確認！

次にテスト投稿してちゃんとTwitterに流れるか確認します。

↑ ちゃんとWordTwitから、になっていますね。

■ bit.lyを見てふむふむ

余力があればbit.lyをときどき見てみると良いでしょう。どれぐらいの人が実際にそのエントリーを見てくれたかわかりますよ。Twitterでの傾向がわかってよいですね。

↑ 勉強になりますな。

以上、Wordpressユーザー限定になりますが、WordTwitでブログ更新情報をTwitterに流す方法でした。ご参考までに。個人的にはかなり満足しておりますよ。

なお、WordTwitは西川さんに教えてもらいました。こちらもよろしければどうぞ。

» Twitterからのリンクを拾い集めてブログコメントにまとめてしまうWordPressプラグイン「Topsy Widgets」、短縮URLもOK。 | 本質思考道場

WordPressに『WordPress Related Post for Japanese』を導入する方法

taguchi — Tue, 01 Dec 2009 00:06:52 +0000

もう既に導入している人も多いでしょうが、「WordPress Related Post for Japanese」の導入方法を友達のためにまとめてみますよ（いまさら？とか言わない！ｗ）。関連記事を表示するためのプラグインですね。

関連記事を表示しておくと訪問者がたくさんのページを見てくれるのでいろいろ良いですよ。おすすめです。

なお、英語版では有名な「WordPress Plugins」を導入しているWordPressユーザーも多いですが、「WordPress Related Post for Japanese」の方が日本語に特化しており、精度が高いのでおすすめです。

なお、関連記事を計算するためにYahoo! JAPANのAPIを使っているのでちょっとややこしいですね。以下、作業ログをまとめてみます。

プラグインをダウンロード＆インストール

以下のサイトからダウンロードしてプラグインフォルダに突っ込みます。ここまでは他のプラグインと一緒ですね。

» WordPress Plugins/JSeries » WordPress Related Post for Japanese (関連投稿表示プラグイン)

Yahoo! JAPANにてアプリケーションIDを取得

解析にAPIを使うため、アプリケーションIDを登録する必要があります。「Yahoo!デベロッパーネットワーク」にアクセスしてもらっちゃいましょう。なお、事前にYahoo! JAPANに登録してログインしておきましょうね。

↑ ここからどうぞ。

次にいろいろ設定します。アプリケーションというか、自分のブログの情報ですね。

↑ こんな感じで。

あとはガイドラインに同意すればOK。

↑ もらえた！

このアプリケーションIDをプラグインの設定で使います。

プラグインの設定

ここまで出来たらWordPressに戻ってプラグインの設定を行います。

↑ こんな感じに設定しましょう。一番上にアプリケーションIDを入れます。

関連記事を表示する際のヘッダーも工夫すると良いですね。

しばらく待つ

このプラグインでは、ページがアクセスされたとき、もしくは新規投稿されたときにインデックスをつくるようなので関連記事が表示されるまでちょっと時間がかかります。適当にお茶でも飲んでから確認してみましょう。

以上かな。なお、友達はアプリケーションIDをなぜか二回貼り付けしていて、ずっと結果が表示されないまま・・・というポカミスをやっちゃってましたよ。表示されなかったらきちんとアプリケーションIDが正しいか確認しましょうね。

WordPressに『AdSense Manager』を導入する方法

taguchi — Wed, 25 Nov 2009 06:00:12 +0000

友達に個人的に教えなくちゃいけなかったのですが、他にも知らない人もいそうなのでブログでご紹介。

WordPressにAdSenseの定番プラグイン、「AdSense Manager」を導入する方法です。

なお今回いれるのは個別エントリーのタイトル下と、本文下ね。

↑ こことここ。

では早速、作業ログをば。

AdSenseに登録

まだ登録していない人はこちらから。

» Google AdSense へようこそ

AdSense Managerをインストール

こちらからダウンロードしてPluginフォルダに突っ込み、有効化しておきます。

» WordPress › AdSense Manager « WordPress Plugins

タイトル下のリンクユニットのコードを取得する

次にタイトル下にいれるAdSenseのコードを取得します。AdSenseにログインして「AdSense設定」から「コンテンツ向けAdSense」。

↑ こんな感じね。

↑ 次は「リンクユニット」で「続行」。

↑ サイズにもよりますが、こんな感じであとはデフォルトオプションで「続行」を押しまくり。

↑ 最後にこうしたコードを取得できます。

ここでコードをコピーしておいてWordPressに戻ります。

Ad Unitsを作成

WordPressの管理画面、「Posts」のメニューに「Ad Units」が現れるのでクリック、「Create New Ad」へ進みます。

↑ こことここをクリック。

↑ さきほどのコードを貼り付け、「Import to New Ad Unit」へ進みます。

↑ 変更するのは2箇所。まずはこのAd Unitの名前をつけます。「ad-links」とか適当に。

↑ 広告のまわりにDivをつけることもできます。僕のブログのスタイルだと左側に30pxのマージンが必要なので「

」「

↑ こんな感じでできた！

AdSenseの貼り付け

次にテーマの編集へ進み、「Single Post (single.php)」のh1の下あたりに次のようにコードを入れます。

↑ 「adsense_ad(‘ad-links’)」と入れればそこにAd Unitが挿入されます。

ページ下に入れるAd Unitを作る

同様の手順でページ下にいれるAd Unitも作ります。AdSense側だと「コンテンツ向けAdSense」→「広告ユニット」→形式を「レクタングル（大）(336×280）」を選択。

そこで取得したコードをAdSense Managerの「Create New Ad」に突っ込み、名前を「ad-entry-footer」とします。

そのあとにテーマの編集、single.phpの本文下あたりに入れます。

↑ articleの下あたり。

ふー・・・以上ですかね。思ったより長文になってしまった。広告の貼り付けすぎもあれですが、やっぱり少しでもマネタイズできるとうれしいですよね。ご参考までに。