Archive for the ‘ WordPress ’ Category

WordPress入門の動画を一部再収録しました #dotinstall

Pocket

ドットインストールのWordPress入門ですが、「wp_head();」を書く位置を間違えていたので該当部分を再収録しました。とはいっても一つだけですが。

16 header phpを完成させよう | WordPress入門  プログラミングならドットインストール

↑ wp_head();はhead要素内に書かないといけないらしいです。

こ、今週はそんなところで・・・。来週は新しいレッスンを収録できればと思います。

» #16 header.phpを完成させよう | WordPress入門 – プログラミングならドットインストール

ドットインストールに『WordPress入門 (全23回)』を追加&「ロリポップ・レンタルサーバー」にご協賛いただきました #dotinstall

Pocket

さて待望の(で、ですよね?)の「WordPress入門」をドットインストールに追加しました。しかも「ロリポップ・レンタルサーバー」にご協賛いただきました。ありがとうございます!

03 ダッシュボードを使ってみよう | WordPress入門  プログラミングならドットインストール

↑ WordPress設置にも「ロリポップ・レンタルサーバー」は最適ですね!

なお、WordPressはあまりに高機能なのでどこからどこまでをカバーするか迷いましたが、今回は「(ローカル開発環境への)セットアップ」「基本的な使い方」「ゼロからテーマを作る方法」に絞りました。

Screen 1

↑ みんな大好き、WordPressですな。

Screen 2

↑ こうしたシンプルなテーマをゼロから作っていきます。

ゼロからテーマが作れれば既存のテーマの構造も把握しやすいので、カスタマイズもできるようになるかと・・・。なお、テーマを作る前の静的ページ構築もはしょらずに収録したのでHTML/CSSに詳しい人は途中を飛ばしてもいいかもしれません。

というわけでWordPressにご興味がある方は是非どうぞ。

» WordPress入門 (全23回) – プログラミングならドットインストール

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

Pocket

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

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

Face

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

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

■ 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宣言部分を次のように変更します。

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

■ テスト

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

» Debugger – Facebook Developers

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

Aaa

↑ サムネイル来た!

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

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

Pocket

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

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

w

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

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

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

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

Pocket

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

↑ きれいにすっきり。

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

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

» Imbalance 2 WordPress Theme

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

Pocket

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

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

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

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

» WordPress › WP Social Bookmarking Light « WordPress Plugins

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

Pocket

さて、実は先日から、ライブドアさんのご厚意で、百式系ブログを同社サービスの「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』

Pocket

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

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

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

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

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

» WordPress › Like « WordPress Plugins

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

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

Pocket

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

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

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

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

» WordCamp Nagoya 2010

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

Pocket

wordtwit_top

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

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

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

■ WordTwitのインストール

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

» WordTwit WordPress Plugin ↔ BraveNewCode Inc.

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

■ もろもろ設定

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

w_url

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

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

» bit.ly, a simple url shortener

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

w_api

↑ これね。

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

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

w_twit

↑ こんな感じに。

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

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

■ テスト&確認!

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

w_tw

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

■ bit.lyを見てふむふむ

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

w_result

↑ 勉強になりますな。

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

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

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