WordPress 3.1 へアップデート…は、まだしてません。

このサイトではWordPressを使ってます。先日から英語版のアップデート通知が出ていて今日から(?)日本語版もアップデートできるようになってますが、「WordPress3.1にアップして少し慌てる」など一部のプラグインに非互換のものがあるらしいので、まだ適用してません。時間が取れてからアップデートする予定。

で、… portal shit!さんの「WordCamp Fukuoka 2011に行った」を引きつつWordPressについて少し書こうかと思ったんですが、なんかうまく書けそうにないので今日のところはフェイドアウトします。
眠い …。

新編・WordPressでAmazonのリンクを貼り付けたいとき、どうするか(序)

ずっと昔に「WordPressでAmazonのリンクを貼り付けたいときは、どうするか。」というエントリを書いたことがあります。結局「amazlet + グリモンスクリプトがとりあえずの結論」としていました。
それから1年以上が過ぎて、新たな候補が見つかっていたのでリストアップしておきます。

  • AmazonJS
    WordPressプラグイン。
    値段表示可能、カスタマイズ前提の設計、DBを使わない、JavaScriptでデータ取得など、かなり気になるスペック。
  • ヨメレバカエレバ
    amazlet同様のリンク生成サービス。
    前者が書籍用、後者が一般商品用。Amazonだけでなく楽天など他の通販業者へのリンクも同時掲載できるのは画期的。

見つけただけでまだ詳細は確認してません。 😕
後日改めてチェックしてみる予定です。取り急ぎ、メモ。

テーマ変えてみた

デフォルトテーマを元に色々いじってみてましたけど、もうなんだかわからなくなってきたのでもう切り替えました。デフォルトテーマからあまり変わってないところがアレですが、まぁ、いいです。
今後もじわじわといじっていく予定。

WordPressプラグイン「W3 Total Cache」を導入したら…

昨晩のこと。

ふと、「WordPressでキャッシュを効かせたら表示が速くなるんじゃないか?」と思いつく

W3 Total Cacheを導入してみた

有効にするにはサイトのURL表記を変更しないといけないことに気付く

変更してみた

キャッシュは有効になった! 速くなったような気もする! 😀

アンテナで更新時刻が取得できなくなってた… 😕

自分でやってるアンテナで自分のサイトの更新時間が拾えてないって、マヌケすぎます。
WordPressの場合はサイトのURLをなつみかん(アンテナのソフト)で見に行っても正しい更新時刻を返してくれないのでFeedをチェックしてたんですが、それがキャッシュのものだったため本来の時刻が取得できなくなってたのです。
あれこれ調べたけどわからず、結局Feedのキャッシュをあきらめることで何とか拾えるようになりました。

で、W3 Total Cacheですが、設定がかなりたくさんありローカライズもされてないのでどこか間違ってる可能性もあります。一通り見直さないといけないかも。

WordPressのコメントにキャラクタ画像(アバター)を表示

WordPressではコメントにアイコン画像が表示されるんですが、独自の画像をセットしないとと思いつつ設定手順がわからず、気付いたら1年以上経ってました…。

ググって参考にさせていただいたのがWordPressのコメント欄にアバターを表示する方法です。このキャラ画像を「アバター」と呼ぶこともこのタイトルを見てやっと思い出しました。
詳細は参照していただくとしておおまかにいうと「Gravatarにメールアドレスと画像を登録すればよい」ということです。
早速メアドを入力したところ「すでに登録されてるよ」というような警告が出てかなり焦りましたが、これはwordpress.comにも登録していたせいでした(WordPressセットアップ時に登録するはず)。両ドメインのサービスで情報を共有しているとのことです。
ログイン後に画像をアップロードすればサイト上で適正なサイズにトリミングもできて、完成。わりとすぐに反映されました。 🙂

使った画像はこれ ↓。


特に何も考えずに、そのあたりに転がっていたぬいぐるみを撮ったしだいです。

… 次は、そろそろいい加減にテーマを変えたいぞ。

WPプラグイン「Photo Dropper」

Golden moon
photo credit: Kain Kalju

WordPressにしてからなるべく画像を使おうと心がけてはいるものの、用意するのは結構手間だったり適当な写真が手元になかったりするのです。そんなときに使えるプラグインがPhoto Dropper。Flickrなどから、キーワードに対応した使用が許可されている写真(CCライセンス)を探してきてくれます。おもしろい!使える! 🙂
上の写真は実際にそうやって取得したキーワード「Moon」の写真です。

ついでにもう一枚。
Moon
photo credit: andypowe11

キーワードが日本語でもいけます。もちろん、Flickr側に登録されているものであれば、ということなんでしょうけど。↓こちらは「月」で検索しました。
Nearly full moon
photo credit: wolfpix

検索にやや時間がかかる場合があることや使われているタグ(<small>とか)が気になりましたが、おおむね好印象です(上の3枚の写真は取得できるタグをそのまま使ってます)。
問題はむしろ、「ひとさまのとった大事な写真を権利表記をしているとはいえシレッと自分のブログに掲載することへの抵抗感」です。理屈では問題ないはずだとわかっているのに、何か後ろめたいのです。慣れですかね。
あと、検索対象サイトにフォト蔵が入ってればいいのにと思いましたが、それは無理というものですね。

Re: re:当ブログはこんなモノでできている

E-WA’S BLOG「当ブログはこんなモノでできている」および、向かい風でも軽やかに「re:当ブログはこんなモノでできている」を拝見して「おぉー」とつぶやいたりしてるわけです。読んでるだけじゃいけないと奮起して、リストアップしてみました。
あ、現行テーマは8someです。

まだあまり使いこなせてないって感じ…。「もうちょっとなんとかしたい」というところがあちこちにあるので、手を入れていきたいです。
# 本谷さん、LiTaGのご利用感謝! 🙂

「あまなつ」を忘れてた

昨日の記事「WordPressでAmazonのリンクを貼り付けたいときは、どうするか。」いろいろ迷ってたけどとりあえずということで結論を出したと書いたわけですが、タイトル通り、すっかりあまなつの存在を忘れてました。以前試したこともあったのですが、今回は検討対象に入れるのを忘れてたのでした。値段も表示できますね。
さて、どうするか。

WordPressでAmazonのリンクを貼り付けたいときは、どうするか。

WordPressでAmazonのアフィリエイトを使って商品を掲載しようとしたとき、方法はいくつかあります。おおまかには、WordPressのプラグインを使う方法とhtmlを貼り付けるもの。後者はさらに、ウェブ上のサービスを使って生成する場合と、自分で作る場合にわけられます。自分で作る場合はAmazonのAPIを使うこともできるし、手作業で作ることもできます。というふうにいろんな方法があるのだけど、結論から言うと「これで間違いなし」と言えるようなイチ押しはないです。だから、どの方法をとればいいのか結構悩んでしまうのです。
WordPress程のメジャーなシステムでプラグインとしてAmazonのリンクを扱える決定的なものがないというのはちょっと予想していませんでした。Amazonからデータを取得して整形することは簡単にできるようになっているので、当然「これは定番」というようなものがあると決めてかかってたのです。
なぜ決定的なものがないかというと、「かつてはあったけれど、開発が停止してしまった」かららしいです。確かに継続的なサポートが難しいのはわかりますし、無理もないとも思います。Amazonが公式プラグインを作ってくれればうれしいけど、そこまでは求めすぎか…。あるいは、どこかの会社で相応なサービスはしてくれないかな。

さて。
こういうような迷いにはやはり偉大な先人がいて、検証や考察をしてくださってます。

  1. amazonアソシエイトを始めてみる-登録編- ? atl*weblog
  2. amazonアソシエイトを始めてみる-リンク生成サービス編- ? atl*weblog
  3. amazonアソシエイトを始めてみる-wordpress plugin編- ? atl*weblog
  4. amazonアソシエイトを始めてみる-結局どうしたの編- – atl*weblog

私もほぼ同様の道筋を辿りました。
サービス停止や仕様の変更といったリスクを回避できるのはAmazon標準の商品リンクですが、デザイン的にちょっとなじめないし情報は見づらいし、で却下。ちなみにわたしはhtml的にvalidじゃなくなってしまうことはもはや気にならなくなりました(かつてはすごく気にしてました)。

わたしが次に考えたのはWordPressのプラグインでした(atl*weblogさんとは異なる順)。しかし日本語対応の壁が高かったり更新が停止してたりデザイン的に手を加えたくなったりで、安心して任せられるものは見当たらなかったというのが実情。どれかを選んで使い始めても、将来開発が停止したらかなり面倒なことになります。

続いて、ウェブ上のAmazonリンク生成サービスを検討しました。小粋空間: Amazon アソシエイト作成支援ツール一覧にあるようにたくさんありますが、すでにサービスが終わってたり継続使用に不安が漂うものもあります。実質、amazletG-Toolsのどちらか、でしょう。
実はG-Toolsは以前P_BLOG時代に使っていまして性能面にはほぼ満足していたのですが、いつの間にか価格表示ができなくなってしまいました。価格を表示するためには、現在のAmazonの価格との乖離を防ぐためか動的に情報を取得・更新する必要があるのですが、そのあたりの仕組みがばっさりと削られてしまったようです。この変更についてはサイトに情報は見つけられず、そういう意味でも残念です。

ということで、わたしもatl*weblogさんと同じくamazletのお世話になることとしました。また、わたしも「target=”_blank”」が不要でしたので、atl*weblogさんのグリモンスクリプト「no blank amazlet」を使わせていただくことにしました。

が、残念なことに「no blank amazlet」はわたしの環境(SnowLeopard + Safari 4.0.3 + GreaseKit 1.7)では動作しませんでした。コンセプトをありがたく拝借して自分で書き換えることとし、ついでに下記の変更も盛り込むことにしました。

  • 「target=”_blank”」が不要(atl*weblogさんと同じ)
  • 画像にドロップシャドウをつけたい
  • 「売り上げランキング」不要
  • 画像にtitle属性をつけたい
  • すぐにコピーしたいので「商品情報リンク (レビューなし/スタイルなし)」テキストを選択状態に
  • 不要な項目を非表示にしたい

本当は値段も掲載したいところですが、規約上できないので見送りです。どうしても金額が必要なときは、記事中で触れるようにすればいいでしょう。

// ==UserScript==
// @name           no blank amazlet plus
// @namespace      https://www.aynimac.com/
// @description    no blank amazlet plus (based on http://weblog.atl-r.net/blog/amazon_affiliate_end/ )
// @include        http://app.bloghackers.net/amazlet/*
// ==/UserScript==

/* UTF-8 */

(function(){
    ne=document.getElementsByClassName('amazlet-box');
    ne[0].style.display="none";

    // 「コピー ( IEのみ )」「戻る」ボタンを非表示に
    ib=document.getElementsByTagName('INPUT');
    for (i=0; i<ib.length; i++) {
        if ((ib[i].value == 'コピー ( IEのみ )') || (ib[i].value == '戻る')) {
            ib[i].style.display="none";
        }
    }

    // 使用しないテキストエリアを非表示に、表示するものは内容を置換する
    ta=document.getElementsByTagName('TEXTAREA');
    for (i=0; i<ta.length; i++) {
        if (i<2) {
            ta[i].style.display="none";
        } else {
            ta[i].value = replaceTextareaValue(ta[i].value);
        }
    }

    // 「レビューなし/スタイルなし」の文字列を全選択する
    ta[4].focus();
    ta[4].select();


    // テキスト置換関数
    function replaceTextareaValue(value) {
        var oStr = '';
        if (value.length) {
            oStr = value;
            // 「target="_blank"」削除
            oStr = oStr.replace(/ target=\"_blank\"/g,'');
            // 画像にドロップシャドウを追加
            oStr = oStr.replace(/_.jpg/g,'_PA10,6,6,8_.jpg');
            // 「売り上げランキング」削除
            oStr = oStr.replace(/売り上げランキング: \d+/,'');
            // img要素にtitle属性を追加
            oStr = oStr.replace(/alt=\"(.+?)\"/,"alt=\"$1\" title=\"$1\"");
        }
        return oStr;
    }

})();

で、こんなふうに。 🙂

バクマン。 5 (ジャンプコミックス)
大場 つぐみ
集英社 (2009-11-04)

(↑ 作者名が原作しか出てないですが…。)

しかし昨日テストしているときに、amazletで一部の商品ページからブックマークレット経由で直接にはリンクを作れないことがありました。今もう一度チェックしてみると昨日ダメだった商品もうまくいくようになってるな…。タイミングが悪かったのか、何か勘違いしてたのか。
様子を見てみます。

2009.11.13追記:やっぱりAmazonの商品ページからAmazletブックマークレットを実行してもうまくリンクを生成してくれないときがあります。上の「バクマン。」でもダメなときがありました。 🙁 なんだろう…?)

WordPressのスマイリーアイコンの利用


WordPressでは簡単に使えるはずだと思っていたのに意外に面倒で、しかも情報が少なくててこずってしまいました。
もともとWordPressではデフォルトでスマイリーアイコンが内蔵されていて、設定ひとつで記事やコメントに表示できる。しかし、入力のためのインターフェイスがなく、「:-)」というような文字列を手入力してそれが表示されるときに置換されるという方式になっています。これがわかるまでにもてこずったけど、ここまでは前提。

で、やりたいことは「デフォルトで用意されているアイコンの置換」と「入力のためのスイッチの装備」です。前者はSmilies Themer、後者はSmilies Themer Toolbarで実現できました。両方とも少し前のプラグインですが、今のところ2.8.5日本語版で問題なく使えてます。

Smilies Themerではあらかじめ置換用のアイコンセットが用意されていますが、その中でもぴったり来るものが見つけられず、JAM LOGのkazさん作成「JL-Smiley-ver.9.5.19」の一部を使わせていただくことにしました。プラグイン内の既存のアイコンセット同様、専用フォルダを作ってアイコン画像とそれらの定義ファイルを置き、WordPressの設定内でアイコンセットを選択すれば完了です。

Smilies Themer Toolbarはプラグインを有効化すれば投稿画面とコメント欄にスマイリーアイコン入力ボタンが表示されます。コメント欄での表示位置の微調整は、添付ファイルに書かれている通り、テーマのcomments.phpの希望の位置に
<?php if (function_exists('sm_toolbar_show')) sm_toolbar_show();?>
を書き加えればOKです。 🙂