Archive for the ‘ WordPress関連 ’ Category

WordPressのキラーハック10選


w_top

WordPress初心者なのでメモ的にエントリー。Smashing Magazineでまとめられていた「10 Killer WordPress Hacks」です。いくつかは使ってみたい。

こんなこともできるのですねぇ・・・ということで出来ることを簡単にご紹介。実際の実装方法は元サイトをご参照ください。

  1. 検索エンジン経由の人にだけAdSenseを表示
  2. リファラーをチェックして検索エンジン経由の人だけに広告を表示する方法が紹介されています。これ、利用条件的にOKなんですかね?でもまぁ、こういうことも出来るらしいということで。

    でもこれを応用すれば検索エンジン経由の人にだけ「このサイトのご紹介」といった紹介文をトップに表示するとかできそうですね。

  3. ループで重複した記事を排除
  4. WordPressで最近はやっている「雑誌風テーマ」ではトップページでいくつものループをまわしています。ただ、同じ記事が違うループで出てくるとちょっとかっこ悪いですよね。それを修正する方法が紹介されています。

  5. 「次の記事へ」をページナビゲーションに変える
  6. これは導入したい。次の記事へ、というナビゲーションではなくて、Googleのように好きなページへ飛べる方法ですね。プラグインで導入可能です。

    sm1

    ↑ こういうやつ。

  7. 記事中の画像を自動表示
  8. 記事に出てくる画像をひっぱってきてトップページなんかに表示できたら便利ですよね。そのためのスクリプトが紹介されています。

  9. 「この記事をTwitterに送る」を実装
  10. これも使いたい感じです。簡単そうですし。こういう「Twitterに送る」は今年流行りそうですね。

  11. コードを引用したときの不具合?
  12. コードを引用したときにダブルクオーテーションが含まれるとうまく表示されないという問題を解決する方法です。エンジニアの方にはいいかな。

  13. リファラー無効の人のコメントを拒否する
  14. 個人的にはやりすぎのような気もしますが、リファラーなしの人からのコメントを拒否することもできるようです。

  15. ヘッダーメニューにマウスオーバーすると背景が変わるように
  16. これも使ってみたいです。ヘッダーメニューにマウスオーバーすると背景の画像が変わったりするようにできます。簡単に出来そうなのですが、提供されている関数だとうまくいかないようですね。

  17. ヘッダーイメージをランダムに変える
  18. これも気が向いたら導入してみたいですね。ちょっとしたコードで実現可能です。

  19. 公開予定の記事の一覧を表示する
  20. 今後公開予定の記事のタイトルを表示させるハック。たしかにこれで読者を引き止めたり、RSS登録させたりできるかも?!

以上ですかね。WordPressの世界は奥が深いのでこういう風にまとまっていると助かりますね。原文はこちらからどうぞ。

» 10 Killer WordPress Hacks | How-To | Smashing Magazine

WP Super CacheとKtai Styleを併用する方法


wp_keitai

追記:Yurikoさんのページにもありますが、どちらも最新版を使っていれば以下の手順は不要です。

[追記: 2009-02-22] Ktai Style 1.70 から、WP Super Cache 0.6.8 以降を利用していれば .htaccess が自動で書き換わるようになりました。以下の手順は不要です(原文

WordPressの負荷対策として必須のWP Super Cacheですが、困ったことにKtai Styleとバッティングしてしまいます。作者さんのサイトを見ながらパッチを当てていきます。

» Yuriko.Net » Ktai Style と WP Super Cache を併用する

以下、参考までに作業ログ。なお、Ktai StyleとWP Super Cacheは最新版が導入されているものとします。

  1. WP Super Cacheを止める
  2. とりあえず止めます。プラグインから無効化を選ぶのが手っ取り早いかな。

  3. wp-cache-config.phpを作る
  4. 次にwp-content/plugins/wp-super-cache中のwp-cache-config-sample.phpをコピーしてwp-cache-config.phpに名称変更します。

    wp_0

    ↑ まずはコピーして名称変更。

    次にそれを開き、$cache_rejected_user_agentを設定した直後に次のコードを挿入します。

    if (file_exists(ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php')) {
      include ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php';
    }
    

    できあがりはこんな感じ。

    wp_1

    ↑ こちらに挿入。

  5. wp-cache-config.phpをwp-contentへ移動
  6. ここで作ったwp-cache-config.phpをwp-contentへ移動させます。ローカルで処理している人は作ったファイルをアップしましょう。wp-content/wp-cache-config.phpが出来ることになります。

  7. WP Super Cacheを有効化
  8. ここでプラグイン一覧から再度WP Super Cacheを有効化します。

  9. .htaccessを変更
  10. 次に.htaccessを変更します。手動でがつんと。ケータイのUAに関する記述を2箇所に挿入します。

    wp_2

    ↑ 出来上がり図。この2箇所ね。

    ちなみに挿入するコードは以下のとおり(2009年1月現在)。

    RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo/|J-PHONE/|J-EMULATOR/|Vodafone/|MOT(EMULATOR)?-|SoftBank/|[VS]emulator/|KDDI-|UP\.Browser/|emobile/|Huawei/|Nokia|mixi-mobile-converter/)
    RewriteCond %{HTTP_USER_AGENT} !(DDIPOCKET;|WILLCOM;|Opera\ Mini|Opera\ Mobi|PalmOS|Windows\ CE;|PDA;\ SL-|PlayStation\ Portable;|SONY/COM|Nitro)
    
  11. テスト!
  12. これでOKのはずなのでケータイで見てみましょう。無事にケータイ版が見られれば成功です。

    wp_mobile.jpg

    ↑ 成功!

作者さんもご指摘のとおり、新しいケータイの種類が出てきたら書き換える必要はありますが、とりあえずは大丈夫でしょう。これで快適にケータイで見られるようになりました。Ktai Styleの作者さん、ありがとうございます!

WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ


wp_top1

さてWordPressですが、ようやく納得のいくテーマに落ち着きました。クリーンなコーディングが特徴の人気テーマ、Vicunaをベースに改造したものを適用しました。

コードをいろいろ見ていたのですが、難解そうなCSSのハックがありつつも、とってもわかりやすかったです。素晴らしすぎます、ありがとうございます>開発者の方々。

なお、ところどころ公式サイトでリンク切れを起こしている箇所があったのでまとめてお役立ちリンクなどを(自分用にも)。

あと個人的にはまった点、カスタマイズの仕方などをばメモしておきます。

  • プレビューでCSSがあたらない?
  • テーマをダウンロードしてプレビューをしたはいいが、プレビュー画面がまっさらになってしまいました。フォーラムでも同様の問題を抱えている人がいましたが、これは設定がうまく読み込まれていないせいっぽいです(特に別サーバーから移行した場合)。いったん気にせず強引にテーマを適用し、各種オプションを再度設定すると元に戻りました。

  • WP Super Cacheに気をつけよう
  • カスタマイズしてさぁ確認、というときにキャッシュが利いていて「あれ、変わっていない?」なときがあります。おかしいな?と思ったときはキャッシュを外しましょう。

  • JSViewがおすすめ
  • Vicunaの拡張版は設定によってどのスタイルがあたるかが変わるので(PHPで動的に読み込み先を変えていますね)、Firefoxのアドオン「JSView」を入れておくといいですよ。

    jsview

    ↑ 今読み込まれているJSがわかります。

    jsview2

    ↑ 僕の場合、これが読み込まれているスタイルシート。

    » JSView :: Firefox Add-ons

  • やっぱりFirebug最強
  • Firefox限定ですが、やっぱりあとはFirebug。「調査」しまくりで適宜カスタマイズしていきましょうね。

    firebug

    ↑ やっぱりこれが最強。

    frebug_2

    ↑ 指定した値を無効にしたり、変更してその場で反映させることもできますねぇ。

    fire_3

    ↑ 画像にマウスオーバーするとそれが見えるのもポイント高い。色も同じ。

    » Firebug :: Firefox Add-ons

  • 配色で迷ったらCOLOURlovers
  • あとデザイン系で使えるサイトといったら定番のCOLORlovers。配色やパターンで悩んだらのぞいてみるといいですよ。

    color

    ↑ 色から検索できるいろいろがあります。

    ご利用はこちらからどうぞ。単に壁紙探すのでも楽しいですよ。

    » COLOURlovers :: Color Trends + Palettes

まだまだカスタマイズしたいところはありますが、とりあえずこのテーマでいっときたいと思います。導入したいプラグインもたくさんありますし、時間が足りないなぁ、こりゃww。

WordPressが重いからサーバー移した(not again!)


wp_move

WordPressが重いからさくらのレンタルサーバーに移したのですが、それでも負荷がかかるようです。そこで再度サーバーを移行しましたよ。もうサーバージプシーですな、こりゃ。

今度のは専用サーバー(というか自宅)なので自分でいろいろ対処できる・・・(はず!)。

以下、簡単に作業ログ。自分用のメモなので興味のない方はスルーの方向でお願いします。

  • サーバーのメモリ増設
  • テスト用に使っていたサーバーなので512MBぽっちのメモリしかありませんでした。とりあえずそこらへんに転がっている別のサーバーからメモリをぶっこぬいて1GBに増設。本当は2GB欲しいところですが、とりあえずこれで様子見。

    wp_memory

    ↑ 久しぶりにメモリ増設なんかしちゃった。

    ちなみにサーバーのメモリ容量を調べるのはtopでいいのですが、CPUの性能を知るには次のコマンドらしいです。知らんかった(CentOSの場合)。青い人に感謝!

    less /proc/cpuinfo
    

    CPUはPentium Dの2.8GB・・・うむ。なんとか大丈夫かなw。

  • メンテナンスモードへ
  • ここでさくらのサーバーへのアクセスをとめます。.htaccessをちょこちょこっといじって僕以外の人がアクセスできないように。

    ErrorDocument 403 http://www.100shiki.com/maintenance.html
    Order deny,allow
    Deny from all
    Allow from MY.IP.ADD.RESS
    

    自分のIPアドレスを調べるのはあいかわらず診断くんが便利。

    他の邪魔が入らない状態で移行作業に入ります。

  • いろいろコピー
  • まずは静的なファイルをごっそりコピー。scpでコマンド一発。同時にこちら側のサーバー設定をいろいろ。virtualhost設定や、mysqlのクエリーキャッシュ有効にしたりとか。

  • Export/Import?
  • 次にデータベースの中身を移行します。せっかくなのでWordPressのExport/Import機能を使ってみます・・・が、Exportしたファイルが10MBに達し、新サーバーでアップできないというお粗末な結果に・・・。ファイルを置いておいてサーバー内で読み込んでくれる機能がなぜかないので断念・・・。

    wp_import

    ↑ なんでサーバー上のファイルから読み込むオプションがないのだろう・・・。

    しょうがないので、旧サーバーでmysqldumpをしたあとに新サーバーで読み込ませます。

  • DNS切り替え
  • あとは動作確認をしてDNS切り替えで終了です。

ここまでで作業終了。わりとさくっと行きましたね。40分ぐらいかな。さて、今度のサーバーはどうかなぁ・・・。ちょいと様子を見ますね。メモリは心配だから増設しようかなぁ。

WordPressの好きなところ


wp_top

さて、だんだんWordPress Loveな感じになりつつあるのですが、個人的に「Wordpress、かわいいよ、WordPress」と思う点をあげてみます。移行を検討されている方のご参考までに。

  • その場編集が簡単!
  • WordPressはログインしていると「編集」リンクを表示させることができます。

    wp_edit

    ↑ こういうやつね。

    この編集リンク、使い始めるまで意識していなかったのですが、間違いを見つけたときや追記したいときにさっと編集画面に移れてすごく便利です。

    MovableTypeのときはこのリンクがなかったので(やりようによっては設置できるでしょうが・・・)「間違い見つけたけどログインして記事を探してって・・・あぁ、面倒だからやめた!」という感じになってしまい、過去記事のメンテナンスが十分に出来ていなかったように思います。

    WordPressに移行してから過去記事なんかを見直しているのですが、誤字脱字やらリンク切れを直すときにとっても重宝しています。間違っているところはさっと直してちゃんとしたコンテンツを維持したいですよね・・・。

  • Akismetがやたら強力
  • まだ使い始めたばかりですが、スパムよけのAkismetがやたら強力です。MovableTypeのときは雨あられだったSpamをうまいこと判定してくれているようです。毎朝スパムコメントなんかを削除していた数分間からこれで解放されそうです。

    ちなみにAkismetをMovableTypeに導入することもできますが、やっぱり標準で入っている強さはありますよね。いまさらながらですがかなりおすすめです。

    » 最強のスパムプラグイン「Akismet」をMovableTypeに導入する方法 | DesignWalker

  • 記事のプレビューが本物
  • 本物、という言い方も変ですが、MovableTypeで記事のプレビューをするとスタイルがあたっていない状態で表示されるので、本番環境でどう見えるか微妙にわかりませんでした。

    mt_preview

    ↑ どうにもよくわかりません。

    その点、WordPressのプレビューはちゃんとテーマが適用された状態で見られるのでいろいろな確認がきちんと出来ます。これは当たり前の機能かもしれないですが、今まで出来なかっただけにうれしい限り。

  • トライアンドエラーがストレスフリー!
  • 速攻で移行した青い人も言っていることですが、テンプレートやらプラグインやらを導入したあとの再構築が不要なのでいくらでも気軽に新しいことを試せます。

    ちょっとタグを書き換えて仕上がりを見たいというときも、「えー、めんどくさい・・・」じゃなくて、「よっしゃ、さくっとやるか!」という気分で作業ができます。ブログは日々の改善が読者に与える影響も大きいので、これはわりと大きなメリットではないかな、と思っています。

    » ブログをMT(3.32)からWordPressに移行しました : akiyan.com

以上、まだまだ使い始めではありますが、WordPressで気に入っているところをあげてみました。

ちなみに良いところばっかりだとあれなので最後に一点、困ったところをw。

特にそれで実務的に困るということはないのですが、テンプレートの関数名や設計にいまいち一貫性がない点がとっても微妙です。なんというかPHP文化っぽいですね・・・。

「こっちのプラグインの設定画面はここなのに、あのプラグインの設定画面はここ?」とか、「このタグから連想するに、あれを表示するタグは・・・え・・・違うの?」といったことがよくあります。

PHPに慣れている人は「よしよし」って感じでしょうが、そうでもない人はちょっと気持ち悪いかと思いますです。

でもまぁ、WordPressには総じて満足しています。あとは負荷にどれぐらい耐えうるかを数日ウォッチしてみたいところです。

WordPressに移行完了!


wp_idea_top

負荷が高かったので以前使っていたサーバーを諦めて「さくらのレンタルサーバー」(プレミアム)に移転してみました。今のところ快適です。なお、WP Super Cacheも有効化しています。

» 大容量レンタルサーバは「さくらのレンタルサーバ プレミアム」|さくらインターネット

プロフィールページなんかがまだできていないですが、それはおいおい。さて次はとりあえずPOP*POPかな。最後に百式を移行したい感じです。

WordPress導入後の設定いろいろ


wp_top.gif

さて年末年始にいろいろ調べまくりました。やったことやわかったことをメモ書き程度にシェアしておきます。

■ テーマ探し

まずは一番楽しいテーマ探しから。わかったのは公式サイトで提供されているテーマであっても不安定なものが多いということ(ブラウザによって見え方が違ったり、カスタマイズがやたら難しいとか)。

最終的には自分でフルスクラッチから作ってみたいですね。調べたらそれほど難しそうでもなかったので・・。

ちなみに個人的に気に入ったテーマを3つほどご紹介。3カラムでいろいろ詰め込めるのがいいなぁ、と思ったのでそんな感じのものを。もっとシンプルなものだと他にもたくさんあるかと思います。

  • dailypress
  • dailypress.png

    SIMPLE*SIMPLEで本採用したテーマ。横幅が1000pxなのがあれですが、メディアらしく情報をいろいろ詰め込める点が気に入りました。カスタマイズもそれほど難しくありませんでしたよ。スタイルシートが編集しやすかったのが好印象。

  • iNove
  • inove.png

    最初に本採用しようとしたテーマです。dailypressよりややシンプル。3カラムにしたときに180pxのブログパーツやらを入れ込めなかったので断念。でもいいテーマだと思います。

  • wp.Vicuna Ext.
  • vicuna.png

    こちらはW3CやSEOを考慮したとってもクリーンなテーマ。カスタマイズが容易っぽいです。MovableTypeのテーマから移植されたようで人気ですよね。よくこのテーマのブログを見かけるような。

    ただWidgetが使えないので断念。Widgetを使えるようにするカスタマイズはそれほど難しくないので、将来的にはこのテーマをベースに自分でテーマ作ってみたいっす。(コメント欄にあるように、Widgetが使えるバージョンもありました。ご指摘感謝!)。

WordPressのテーマはたくさんあっていいのですが、それだけに迷いまくりですよね。自分の好きなブログのテーマを調べてみたり、サイト製作会社の人に聞くと良いかと思いますよ。

■ Feedburnerやめた

前回「WordPressで導入したプラグインまとめ」でFeedburnerに移行したと書きましたが、SEO的に良くなさそうなのでやめました。

噂によるとYahoo!のブログ検索で引っかかってくれないとかそうでないとか・・・あまり詳しくないので真偽のほどは不明ですが、確かに同じドメインにFeedがないのは気持ちが悪いのでやめちゃいました。

代わりに次のプラグインを導入予定(ご紹介、感謝!さすがWordPressエヴァンジェリスト!)。

» WordPressでRSSフィード購読者数を計測するプラグイン FeedLogger – EC studio 技術ブログ

こちらについては導入後にまたレポートしたいと思います。

■ Broken Link Checker

追加でプラグインをいくつか入れたのですが、その中でも便利なのがこれ。バックグラウンドでリンク切れをチェックしてくれます。出るわ出るわw。これは便利ですね。読者のことを考えるとリンク切れは適宜チェックしておきたいところです。

wp_bl_1.gif

↑ ダッシュボードに表示してくれます。

wp_bl_2.gif

↑ ちなみリンク切れを起こしているものに関しては自動的にカスタマイズしたスタイルを付与してくれるなどいたれりつくせり。

ご利用はこちらからどうぞ。

» WordPress › Broken Link Checker « WordPress Plugins

■ パッチ当てる方法?

単なる報告ですが、他にも試そうと思っている人がいるかもしれないので一応ご紹介。

前回の「固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ」でご紹介した、以下のサイトで紹介されているMTとWPにパッチを当てる方法ですが、WordPressの最新版ではコードが変更されているので出来ませんでした・・・。簡単そうな方法だっただけに残念。

» MovableTypeからWordPressへのURL込みの移行方法 – Wiki@browncat.org

■ パフォーマンス?

現在WordPressはSIMPLE*SIMPLEのみで動かしていますが、さきほどこのブログでも試してみました。

結果ですが・・・アクセスが多すぎてぜんぜん駄目でした・・・。WP Super Cacheも使ってみたのですが「うーむ・・・」という感じですね。

サーバーがちょっと非力というか、他のブログやサービスと共有しすぎているので今から新しいサーバー借りてやってみますね。海外ではTechCrunchやMashableもWordPressなのでなんとかなると思うのですが・・・。続報をご期待ください。

WordPressで導入したプラグインまとめ


wp_top.gif

さて「固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ」でもご紹介したとおり、WordPressの絶賛勉強中です。

いろいろいじり倒している最中ですが、いまのところのおすすめプラグインをご紹介。ちなみにWordPressって管理画面から直接プラグインをダウンロード&インストールできるのですね。FTPのID&PWD入れればがつんとやってくれます。すばらしい。削除も簡単にできますよ。

wp_install.gif

↑ 管理画面から直接インストール可能。便利だ!

では早速。

  • AdSense Manager
  • まずはAdSenseから。このプラグインを導入後、AdSenseのコードを貼り付けると勝手に解析してくれて、そのコードをもとにさまざまなサイズ&外観の広告ユニットを作ることができます。

    wp_adsense2.gif

    ↑ こんな感じ。

    そのユニットに名前をつけ、あとはテンプレート内やウィジェット、記事内に指定のやり方で貼り付けるだけ。

    自由自在にAdSenseを貼り付けることができるので、効果を見ながらいろいろ実験できて便利です。MovableTypeのときはいちいち再構築していたので面倒だったのですが、これなら簡単でいろいろ試してみたくなりそうです。

  • All in One SEO pack
  • 次にSEOちっくな設定を一気に行えるプラグインをば。記事のタイトルやらメタタグやらを変更するときに便利ですね。

    wp_seo.gif

    ↑ 記事タイトルの並び順も細かいですが大事です。

  • FeedBurner FeedSmith
  • MovableTypeからWordPressに移行したらフィードのリダイレクトもかけましょう。具体的には.htaccessに次のような記述を加えるといいでしょう。

    Redirect 301 /atom.xml http://www.simplexsimple.com/feed
    Redirect 301 /index.xml http://www.simplexsimple.com/feed
    

    また今回はせっかくなのでFeedburnerも導入してみます。このプラグインを入れておけば、WordPressのフィードを全部FeedBurnerにリダイレクトしてくれます。FeedBurnerのアカウントが必要なのでまだの人は登録しておきましょう。

  • Google XML Sitemaps
  • GoogleのSitemapsを生成してくれるツールです。生成してくれるだけなので、ちゃんとGoogleにクロールされるように「Google ウェブマスター ツール」の方でも設定を忘れずに。

  • Popular Posts/Similar Posts
  • ブログ上で人気記事や関連記事を表示させるためのプラグインです。どちらもブログ内のアクセスアップには欠かせないですよね。MovableTypeのときは手動でやっていたのですが、これでぐっと楽ができそうです。

    wp_related.gif

    ↑ こういうのが自動で出る!うれしい!

    ※ どちらもPost-Plugin Libraryなるライブラリが必要なので導入しておきましょう。

  • Ultimate Google Analytics
  • こちらはGoogle Analyticsのコードを自動でフッターに挿入してくれるプラグイン。UA-XXXXXなるコードを入れるだけなので楽チンです。なお、デフォルトではログインユーザーのアクセスを除外するようなので、一度ログアウトしてからブログを表示させてコードが貼り込まれているか確認しましょう。

  • Ktai Style
  • 最後になりますが、今回このために移行したといっても過言ではないプラグイン。ケータイからアクセスするとちゃんと見られるようにしてくれるという超絶便利ツールです。

    ケータイ版だけURLを変える必要もありません。カスタマイズも柔軟に出来るし、絵文字を使ったメニューもあるし、ショートカットにも対応しています。

    wp_mobile.jpg

    ↑ どうですか、これ!

プラグインってなんか面倒なのかな・・・と思っていたのですが、Firefoxのアドオンなみの手軽さですね。気に入らなければ削除すればいいだけですし。

なお、まだまだWordPress初心者なので「こっちのほうがいいよー」なんてことがあればぜひ教えてください。

さてさて、あとはデザインのカスタマイズだけですね。そこらへんをマスターしたら他のブログも一気に移行する予定。楽しみ、楽しみ。

あと、WordPressってやっぱりみんな興味あるようですね。先日の記事を見て移行します!という人がちらほら。こちらもうれしい限りです。