ここ数日 GameSalad にハマってた @mekemokeです。その話はまたそのうち。

ローカルでWP用のデザインを作っていると、テンプレートパスを入れるのが億劫になってしまいます。そんなことないですか?ソースに /wordpress/wp-content/themes/ 〜 とか表示されるのもなんだかな〜と。

あとはできるだけ <?PHP 〜 ?> を使いたくなくて、表示は echo で対応したい。だから最初にWordPressのソース見た時、うわあぁぁ…となりました。わかりやすいといえばわかりやすいのですが。記述の方法としてはこっちのほうが速いんでしょうか。重宝してたヒアドキュメントは遅いようですね。

参考:ダブルクオート/シングルクオート/ヒアドキュメント、echo/printの速度比較 – [PHP + PHP] ぺんたん info

閑話休題。

例えばテーマで使用している画像を呼び出す際に、通常は

/PATH/TO/WPDIR/wp-content/themes/テーマ名/img/header.jpg

となりますが、これを

./img/header.jpg

で呼び出せるようにします。.htaccess の RewriteRule を使用します。

.htaccess や mod_rewrite については下記がとてもわかりやすくて参考になります。

参考:
ミケネコの htaccess リファレンス
mod_rewriteのインストール・設定 – RewriteRuleのサンプル [Fedora, RedHat, CentOS] – Linux

早速ソースを。

後半はwpが作ってくれるので見たことある方も多いと思います。RewriteBase の次から別の RewriteRule を追加します。

詳しい説明は割愛しますが、使い方としては下記の通り。

  1. テーマファイルのフォルダに img や js フォルダを作ります。
  2. 作ったフォルダに画像などを入れます。
  3. テンプレートで画像などを使う際には img src=”./img/header.jpg” と記述します。template_directory などを入れる必要はありません。
  4. 実際に確認してみると、画像が表示されているのがわかります。

フォルダの命名に制限はないので、フォルダを追加→RewriteRuleを追加でOKです。
注意する点として、home_url と site_url が違う場合は、パスが変わりますが RewriteRuleの方は変わりません。

テーマを自作する際には参考にどうぞ。

※2012.09.27に追記しました。話題になった機会に、内容を深めてまとめてアウトプットしてしまおう。常識知らないっていろいろな意味で怖い・・・

最近話題になっていた記事に感化されたので、テストしてみました。WPには立ち上げたばかりなのでまあ問題ないかなと思ったけれど、PHP4の環境でしかWPを動かせないとかあったら、ちょっとどころじゃなくヤバイよね・・・と心の片隅で若干gkbrしています。まれによくある話。

参考:無料のWordPressテーマをググって使うのは超ハイリスクなので気をつけよう! | firegoby

元ネタ:Free WordPress Themes: Why You Should Never Search For Them on Google

firegobyさんであえて検証方法を元ネタサイトのWPMUに任せているのは、「エラーを見るために安易にフリーのテーマで試さない方がいい」ということであって「自分のテーマを確認する」ことについては問題ないと判断して、検証用プラグインをインストールしてみました。

1. Theme Authenticity Checker (TAC)

プラグイン公式ページ:WordPress › Theme Authenticity Checker (TAC) « WordPress Plugins

参考:WordPressのテーマファイルを簡単にチェックできるプラグイン -TAC | コリス
参考:WordPressのテーマの不正コードを一発検出プラグイン「Theme Authenticity Checker (TAC)」|アマモ場

WPMUの検証記事でよく使われていた、テーマに不正なソースが仕組まれていないかをチェックするプラグイン。ちなみにWPMUの中の人、相当疲れたご様子。(読んでて途中で噴き出した。こういうテンション好き)
体を張った記事に感謝です。

今使っているテーマは公式から拾ったものをカスタマイズして使っているのですが、このプラグインでの検証結果はテーマ作成元へのリンクがあるだけであとは問題なしと表示されました。
WPMUの記事を読むとわかりますが、リンクがあるだけといってもそのリンクがスパムっぽいものの場合もあるようです。気をつけたいところですね。

ちなみに使い方はインストール後に[外観]→[TAC]で確認するだけの手軽さ。英語だけですが直感的にわかります。詳細も確認できます。(わかりやすい=安全ではありません。2012.09.27追記)

120927追記:
コメントいただきましたので、追記です。解説記事に感謝!

ヤバイWordPressテーマを見分けるための方法 | firegoby

tifに見せかけたphp・・・TACが安心できないというのはこういうことですね。rssって拡張子で実はPHPですってことをやったことがあるので、あー、なるほどーと思いました。
そしてテーマを自作してる人は Theme-Check を一度は確認しておきたいですね。

2. Exploit Scanner

プラグイン公式ページ:WordPress › Exploit Scanner « WordPress Plugins

参考:プラグイン:WordPress Exploit Scanner – WordPress Codex 日本語版(ちと古い)
参考:WordPress › フォーラム » WordPress 日本語版用 Exploit Scanner ハッシュファイル

「ワードプレス脆弱性スキャナー」。WordPressのコアファイルが改ざんされていないか調べたり、怪しいソースを発見してくれるプラグイン。インストール後、[ツール]→[Exploit Scanner]で Run the Scan で実行。
…うん?うん…項目多すぎる……。何か事故があった際に復旧した上で走らせて、「Modified」辺りで調べてみるとかでいいと思う。

3. Theme-Check

プラグイン公式ページ:WordPress › Theme-Check « WordPress Plugins

参考:プラグイン:Theme-Check – WordPress Codex 日本語版

テーマのエラーやコードの対応状況がわかるプラグイン。落としてきたテーマのチェックだけでなく、自作テーマのチェックもできます。当然といえば当然なんですが、「作る側」にとっても必須のプラグインですな。
うちはまだ自作プラグインは出していないものの、今後はチェッカーとして利用したいです。

4. Plugin-Check

プラグイン公式ページ:WordPress › Plugin-Check « WordPress Plugins

参考:マトモなWordPressプラグインを見分けるための簡単そうで簡単でないTips | firegoby

もうひとつ、こっちはプラグインのチェッカー。先にデバッグモードで確認しておいたほうがいいかもしれない。
NOTICEはともかく、WARNINGは対応したほうがいいでしょう。あまりに多いようならそのプラグインは使わないほうが吉。
すべてのプラグインに対してチェックするので、一度メモリが足りなくなってエラーになりました。あふぅ。
指摘箇所が多いので、こっちもテーマチェッカーと同様、調べたいプラグインを指定できればいいんですがね〜。

今回の記事に関して検索して調べたのですが、firegobyさんの記事がほとんど上位を占めていたので、諸々参考になりました。ありがとうございました。

5. TimThumb Vulnerability Scanner(2012.09.27追記)

プラグイン公式ページ:WordPress › Timthumb Vulnerability Scanner « WordPress Plugins

参考:【WordPress.orgにも脆弱性のあるものは存在する】WordPressのテーマやプラグインで脆弱性のある「timthumb.php」を検出する方法 | 今村だけがよくわかるブログ
参考:WordPressのテーマやプラグインでtimthumb.phpをお使いの方は脆弱性が見つかったのでご注意! | め組の小ネタ

timthumb.php は画像リサイズのライブラリのようですね。(うわぉ、初めて聞いた…PHPのリサイズ処理とかじゃダメなんか。使いやすくしたものなんか)
その脆弱性を突かれる可能性があるので、timthumb.php の検出に特化したプラグインです。

考えてみれば、公式にアップされているものでも、前の審査は通ったけれど、作成者が更新していなければ、新たに見つかった脆弱性に対応していないものもあるわけですよね。

テーマが多いのはWPのいいところでもあるし、気に入ったものを使うのは、それはそれでいいと思うけど、リスクを背負った上での自己責任で使いましょう、ってことかな。
Twenty Twelveも発表されるし、やっぱり公式→子テーマで弄るのが一番いいかなー。

企業サイト等ではトップページでキャンペーンや特長を大きなイメージで表示したい場合があります。
広告というよりかは、「アイキャッチ」とか「メインイメージ」とか…いろんな呼び方がありますが(主流はなんて言うんでしょ)、それがひとつに限らない時はランダムで表示するより、スライドして表示させるのが主流になってますね。

困ったときのjQueryを使用するのは確定していたので、山のようなプラグインから選ぶことにしました。
選定基準と理由は下記。

1.自動でスクロールする

閲覧者の操作を必要としなくても、ある程度自動で表示させるため。
デメリットとしてはクリックしようかなと思う頃には次に移ってしまうことがアリ。
これについてはユーザビリティーテストや解析結果を確認するといい。

2.キャプションやコメントは必要ない

ギャラリーサイトでは写真のタイトルとして出すんだろうけど、今回のような場合は画像だけで完結するので必要なし。あってもいいけどカスタマイズすれば綺麗に取れるものが理想。

3.サムネイル(大きなイメージを変えるためのボタン的画像)が使える

提供側としては優先順位はあるにしてもすべて見て欲しいものなので、よくある ●●●○● と下にあるだけだと、訴求力に欠ける。すべての人が最初から興味を持って訪れるわけではないので、サムネイルかボタンなどで、どんなスライドがあるかすぐに分かるほうがいい。

4.サムネイルはいくつでも置ける

メインイメージの幅や高さの範囲でしか置けないものも多いので、こっちも自動でスクロールするなどしていくつでも置ける必要がある。表示順序は表示前のプログラムである程度制御できるから、いつも隠れて見えないものがないように配慮。
ついでに、最後まで行ったら違和感なく最初に戻って欲しいな。

ちなみに、「カルーセル」というのは「回転木馬」の意味で、カルーセルパネル=横にスライドして端まで行ってもループして表示するパネルのこと。探してたのはズバリこれでした。
そういう点じゃ、端まで行って戻れないのはカルーセルとは言えないわけで・・・

via: カルーセルパネルとは – IT用語辞典 Weblio辞書

そんな条件付きで探したjQueryライブラリ!

次点:jQuery and WordPress Image Gallery

表示がすごく綺麗。あと、表示が速い??(キャッシュ効いてるのか、サーバのレスポンスがいいのか・・・)

トランジションも滑らかだし、下のサムネイルのカーソル追従もキモチイイ。

だがしかし、説明文は使わないのでスペース的に難あり。そして使用するには登録が必要。
無償のFree版と有償のPro版があって、ただ使うだけならFreeで十分。高機能を活かしたいならProで。
比較については下記にあります。

Comparison table | jQuery and WordPress Image Gallery

本命:GalleryView | spaceforaname

使うのは無料だけど自己責任で使ってね、とのこと。リスクはあるけどこの表示は私が求めていたもの・・・!

デモは下記。

ポチポチ選ぶだけでプロパティ設定をしてくれたら、期待通りになった!!

最近ウェブ解析士のツイートでやたら熱くなっている@mekemokeです、こんばんは。

ウェブ解析士というなにやらカッコヨサゲ(だってサムライつくんだよ!?)な資格については、本部のサイトを見ていただくのが一番かと。

ウェブ解析士認定講座・検定 | 初級・上級・マスター3つの資格を用意

テキストが届いたので、1か月後の試験に向けて予習中。もうね、楽しくってwktkが止まらない。数字苦手だと思ってたのに克服できるかもしれないと淡い期待すら抱くよ。
勢い余って、普段は書かないアマゾンのレビューまで書く始末。そしてすでに参考になったと頂いて嬉しい限りです。

うわあ…画像表示されないお…

ウェブ関係の仕事に携わる人なら、初級は割と楽に取れる内容だなと思います。サーバやユーザビリティーとかログとかその辺の事+略語に慣れればいいだけなので。

ただ、面白いのは知識だけじゃなくて、知識として収集できるデータの使い方と、それの活かし方を学んで利用してみんな幸せになろうよ!というもの。だから初級のあとの上級が楽しみなのです。

・・・たっかいけどな!!

初級でもテキスト4,200円+講習込の試験は16,800円。そして合格後の認定料に10,500円・・・上級は講習+試験で80,000だったか・・・。
有料会員という年会費6,300円もありましてね。これは無料会員もあるんですけど。

高いよ。高いよね。
でもまあ、他にも高い試験ってあるし、できたての資格だし、お金も必要だろうし、サポートしていきたいし、仲間になりたいし、資格とれれば取り返せるくらいの資格だし!とか思うわけです。投資です、投資。

ウェブ解析士って、要するにコンサルタントの職種(何度打ってもころセンセーの方が出るうちのキーボード)になるわけなので、コンサルって高い!ってイメージがあるので、そりゃ金額的には儲かるように見えるかもしれません。
そういうわけで資格取得にかかった分の元は取れるかと思いますが、そういうこと以上に、信頼が一番の仕事だと思うんですよね。

だから知識もさることながら、たくさん経験積んで、信頼されるウェブ解析士になるのが一番の目標です。

上級では実践的な内容もあるというので、マーケティングについても基礎は知っておこうと思って、下記の本も購入。

もともとは、2009年のweb担で連載していたものの書籍化。ちょっと古いけど今でも十分通用する内容だと思います。基礎は変わらないってことかな。

Impress Japan: マンガでわかるWebマーケティング -Webマーケッター瞳の挑戦!-

上のリンクでも読めますが、漫画の部分だけざっと流し読みしただけでもモチベーション上がりました。大変だけどやりがいがある。ウェブ解析士はウェブマーケターの一員なので、まさにこんな感じ。(でもウェブ解析士になって、忙しすぎて家庭崩壊とかやらかしたら洒落にならんw)

ちなみにこの漫画の作者の方、あのスーパーリアルRPGや某有名心療内科のイラスト担当している方なんですよね。どこかで馴染みがあると思ったら・・・!

そしてもう一冊。

出たばかりの新刊です。
仕事用のカバンに入れて帰ってきたままほくほくしてました。

ところで今日の夕方、チビ娘3歳がカバンからiPadを勝手に出してアプリやらせてとせがんできたんですよ。やることやってからやらせてるけれども、6歳の兄貴とは違って、魔の3才児とは毎日同じ事繰り返してます。だからやることやってからね、てか振り回すな!と言って布団敷こうとしたところ、なにやらガサガサと・・・

嫌な予感が当たって、ケースが付いてて滑りにくいiPadは、あろうことか本の表紙ごとバッグの奥へ押しやられ、本のカバーと表紙は無残な状態に・・・

思わずふじこってしまったものの、3才児を相手に怒るわけにもいかず、意気消沈してアイロンかけて、更に悪化したのを何とか伸ばして、只今積まれたジャンプの間に挟まれています。

レビューでは本当に初心者向けとからしいので、テキストがあれば無理して買うこともなかったのかな?と思うので、なおさらカバーに傷がついたのが惜しい・・・orz

まあ、数日後に読んでみます。

そんなわけで、ウェブ解析士の初級資格試験を勉強中。Ankiでカードでもつくろうかなと思ったけれど、意外といけるのでいらんかも、と思った今日この頃。

ちなみに、ブラウザ閉じればセッションきれるけど、タブを閉じても切れますよね?

22. 9月 2012 · 1 comment · Categories: WEB制作 · Tags: ,

昔取ったけれど放置していたドメインを取り直したので、晴れてWPで再構築。

今まで tumblr でブログを書いていたのだけど、あれはリブログ機能で共有して、スクラップブックを作るような使い方が主体のようで、UI自体は悪くないんだけどいまいち使い方に違和感があったので、WordPressに移行しました。

今回はその手順。

1.サーバとあれば独自ドメインを用意して、WordPressを構築

手軽にレンタルサーバを持つなら、やっぱりロリポかさくらかなあと思いましたが、前にも使ってたことがあるので、WordPress使うなら ロリポプラン がオススメかなあ。

ちなみに ロリポプランは 30GB・263円/月〜 です。十分安い。するとドメインはムームードメインで取るといいねとなりますが。お名前.com と比べながら取ってみるといいかも。

まあ、とっつきやすさではダントツだと思います。ここで WordPress も最新版をさくっとインストールしたところで次へ。

2.tumblr2wordpress で tumblr の記事をエクスポート

Tumblr2WordPress: Export Your Tumblr Blog To WordPress RSS

こちらのツールでWP用のXMLをインポートします。なぜかインポート>Tumblrはエラーが出て使えませんでした。バージョンの整合性かな?(WP3.4.2)

  1. Tumblr Account
    自分の tumblr アカウントを入力。(○○○.tumblr.com の ○○○の部分)
  2. Exported Content Format
    「HTML」でいいでしょう。
  3. Permalink Slugs
    「Use original Tumblr text slug only.」を選んでおいたほうが。
  4. Export for
    今回のように独自ドメインやレンタルサーバでWPを利用している人は「Self-Hosted WordPress Installation」を選択。
  5. Post Options
    Imported Post Status … インポートした記事のステータス。公開ならそのまま、下書きにしておきたいなら「Draft」を選択。
    Comments … コメントの受付状態。Disabled のままなら受け付けません。
    Pings … トラックバックについて同じく。
  6. Ready?
    設定が済んだら[Export]ボタンをクリックすると、XMLファイルをダウンロードできます。

3.ダウンロードしたXMLファイルをインポート

ダウンロードしたXMLファイルをテキストエディタで開くと、ここにも説明が書いてあります。

  1. 管理者権限でログインします
  2. 管理画面から[ツール]>[インポート]を開きます。
  3. 「WordPress」を選びます。WordPress Importer のインストールを迫られたら有効化まで行います。
  4. XMLファイルをアップロードします。
  5. tumblrでの投稿者をWPで設定されている投稿者の誰にするか選択します。
  6. WordPressへのインポートが完了します。

通常はこれでインポートできるようですが、私の場合はこのツールを使っていたのがオリジナルのソースだったせいか、うまくいきませんでした。最後の記事だけしかインポートされないのです。
調べたところ、AUTO_INCREMENTの数値が30万とかになるのが原因でした。POST_IDが一気にMAX値になってしまうような現象。bigintのはずなのになあ…とか朦朧と考えていたら、要するに、

tumblrでインポートした際の <wp:post_id> の値がぶっ飛んでいた

というのが理由でした。
いや、tumblr的には問題ないのかもしれませんが、その値をWP側が post_id として使い、ひいてはAUTO_INCREMENTに影響していたと。

そこで、手作業で <wp:post_id> の値を直してインポートしたところ、問題なくインポートできました。件数少なくてよかった。一件落着。

22. 9月 2012 · Write a comment · Categories: WEB制作 · Tags:

WP3.4.2 で Google XML Sitemaps を使おうとしたら、下記のようなエラーが出た。

Warning: Invalid argument supplied for foreach() in /path/to/wp/wp-includes/query.php on line 2762

foreach は配列を処理する関数ですが、そこに配列以外の値が入ってしまうと、PHPがこういうエラーを吐き出します。nullでも入ったんだろうか。ぬるぬる。

ということで、該当箇所を強制的に配列にします。
foreach() で渡す値の前に (array) を入れて配列へのキャスト(変換)を行えば良いわけです。
参考:PHP: 型の相互変換 – Manual

ついでに、crayon syntax highlighter でも同様のエラーが表示されました。

Warning: Invalid argument supplied for foreach() in /path/to/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 368

というわけで、こっちも該当箇所を配列として渡すように。

これで晴れてXMLが生成されました\(^O^)/

15. 9月 2012 · 1 comment · Categories: アプリ開発 · Tags:

Ti でアプリを作ろー!と決心して早数ヶ月…なんていうかもう、わからないところもわからなくなっているのと、作りたいアプリが Ti 向けではないような雰囲気もあったので、アプリ開発のモチベを上げるためにも PhoneGap をいじってみることに。

情報が古くなるスピードがかなり早いようで、私が DL したのは PhoneGap 2.0.0 でした。色々なサイトを拝見しながらのインストールメモ。ちなみにまだ Mac の常識に慣れてない。

Apache Cordova API Documentation – Getting Started with iOS を意訳。
(ちなみに「超訳」って言おうとしたら、アカデミー出版の商標登録なんですなー)

必要なもの

・Xcode 4.3以上
・Xcode Command Line Tools
・Mac OS X Lion か 10.7 以上
・必要に応じて:
・Apple iOS デバイス(iPhone、iPad、iPod Touch)
・iOS デベロッパ証明書

iOS SDK と Apache Cordova のインストール

・Mac App Store から Xcode をインストール。
・Xcode Command Line Tools を下記の手順でインストール。
(Xcode を起動し、Xcode > Preferences > Downloads > Components で Command Line Tools の Install ボタンをクリック)
・Apache Cordova の最新版をダウンロード。
・phonegap.zip を解凍すれば、Apache Cordova iOS は lib/ios の中にあります。

新しいプロジェクトの作成

・「Cordova-2.0.0.pkg(インストーラ)」を実行して、最後まで進みます。
・bin フォルダー(ソースか .dmg のどちらかから)をハードドライブ上にコピーします。
(アプリケーション > phonegap > bin としてコピーした)
・ターミナルを起動します。(アプリケーション > ユーティリティ の中)
・Dock のターミナルアイコンに bin フォルダをドラッグします。新しいターミナルウインドウが起動するはずです。
・ ./create と入力して Enter。
Phongep のインストールフォルダに project フォルダを作って、そこでやってみることに。

(./create /Applications/phonegap/project/HelloWorld com.HelloWorld HelloWorld な感じ。
/Volumes/Cordova-2.0.0/bin/replaces: line 28: tmpFile: Read-only file system
mv: tmpFile: No such file or directory とか出た場合、ハードディスクにコピーされてない可能性大なので見直すこと)
・できたフォルダ内の .xcodeproj を起動します。

シミュレーターを起動する

・ツールバーの Scheme のドロップダウンメニューで、
Target → HelloWorld、Active SDK → iOS [version] Simulator を選択します。
(iPad 4.3 Simulator を選んでみた。More Simulators を選べば他のバージョンも選択できます)
・Run ボタンをクリック!シミュレーターが起動します。

接続デバイスで起動する

・Finder の HelloWorld に戻って、リソースグループ(.xcodeprojと同じ階層にある HelloWorld)の中にある HelloWorld-info.plist を開きます。
・アップルまたは独自のバンドル識別子によって提供される識別子を BundleIdentifier に変更します。
(もし開発者ライセンスを持っていたら、アプリケーションに登録して Assistant を実行できます)
・ツールバーの Scheme のドロップダウンメニューで Target として HellWorld を選択します。
・上記の右側の Active SDK として使用しているデバイス名を選択します。
(USBに接続されたデバイスが必要になるかもしれません)

結果

・緑色の “device is ready” というメッセージが点滅している、以下のような画面を見ることができるでしょう。

9/16追記:
PhoneGap2.0の日本語解説サイトがリニューアルしてた!

PhoneGap Fan – PhoneGap (Cordova) の日本語コミュニティ

うん、やっぱりわかりやすい。

Clock

Post Expirator は、WordPress で投稿した記事やページの有効期限を設定できる、結構便利なプラグインです。

WPを構築する制作側だけでなく、構築したWPで更新するお客様側でも使うことの多いプラグインなので、日本語化ファイルを作ってみました。

追記 2013.04.03:バージョン 2.0.1 に対応しました。

ダウンロード: Post Expirator の日本語化ファイル(Version 2.0.1 用)

WPの翻訳ガイドラインには一応目を通して作りましたが、cron絡みのあたりとか、時々変な日本語や意訳しすぎじゃ?というところもあるかもしれませんので、お気づきの方は @mekemoke にご指摘いただけるとありがたいです。

追記:
ちなみに、9時間ずれちゃうよーって方は、

を function.php の先頭に入れるだけで解決します。

さらに追記:
コメントをいただいたとおり、WordPress が UTC を推奨している以上、date_default_timezone_set を安易に使うべきではないようです。上記が一番手っとり早い解決方法で、個人的には問題が起きていないのですが、慎重に対応する必要がありますね。じゃあどうすればいいのかという答えが見つかっていないので、あくまで暫定措置として。
参考:WordPress › フォーラム » WP-Cronが9時間遅れる