Category Archives: 開発

コーダーは須く死ぬまで続く修錬の旅の途上にいる……ナンチテ:-p

FacebookのOGPに対応してみました

ブログの新規投稿時にリンクをTwitterとFacebookに貼ってたんですが、Facebookの方のフィードで、せっかくリンク紹介されてもアイコン欄が白紙のままだとやっぱりちょっと寂しいな、ということで、OGPに対応しました。

手っ取り早いのはプラグインの導入!
ググってみるとopen graph proやWP-OGPといった名前がヒットするんですが、Facebook側でアプリ登録が必要とか、うまく動作しないといったネタが次々出てきて何だかかえって面倒臭いな、と。

検索結果リストの中には「プラグインを使わずに」という枕詞でOGP対応を説明して下さってるページも幾つか含まれてまして、中身をざっと見たらそんな大変そうでもないし、じゃぁコレ、ということで。


メインに参照させて頂いたのはコチラです。
[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ

コピーさせて頂いたソースを若干カスタマイズ調整しましたが、理屈はシンプル、要はmetaタグにog:~付けてheadに必要情報を並べるだけなので、これならプラグインに頼る必要ないですねd(^_^)


…とコレで終われば万々歳なんですが、実はチとハマりましたd(^_^;;

最初、

<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●" /><!– 自分のFacebookアカウントに対応するid –>

とあったもんですから、な~にも考えずに自分のfacebookユーザーネームをcontentに入れてみたら何だか上手くいかない。
Facebook デバッガーにURLを放り込んでチェックすると、表示されるはずの「オブジェクトのプロパティ」欄が反映されてないのです。

なんでやねん、と思ったらこのidはユーザーネームでなくて、http://graph.facebook.com/ユーザーネーム で表示されるidのことなんですって(´・ω・`)シランガナ
(参照:FacebookのユーザーIDをサクッと確認する方法ふたつ | Diwao2.0

そこを修正したらデバッガーは無事通過して、og:imageで設定した画像も出てくれました。が、しかし自分のフィードに投降した過去記事のURL参照アイコンは空欄のまんま(´・ω・`)
新規記事でないと反映されないんですかね?


get_option( ‘siteurl’ ) は使わないで下さ~~い!

ホストサイトのURLを取得するための関数として、相当メジャーどころのプラグインでも未だに get_option( ‘siteurl’ ) が頻用されてるようなんですが、
この方法だとSSLを介した接続であってもプロトコルとして https:// でなく http:// を返してしまいます。

ウチでは管理画面へのアクセスはSSL経由にしてありまして、結構な数のプラグインに動作不良が出てました。

サイトURLの取得には、get_option( ‘siteurl’ )でなく、site_url() を使いましょう!


ついでに書くと、WP_CONTENT_URL, WP_PLUGIN_URL も https:// 返してくれません。定義元を調べてみると、

wp-include/default-constants.php

		define( ‘WP_CONTENT_URL’, get_option(‘siteurl’) . ‘/wp-content’); // full url – WP_CONTENT_DIR is defined further up

ありゃりゃ、自分で非推奨つっといて、直し忘れですか?(^^;>wordpress.org

*参照サイト
WordPressでサイトのURLを取得する方法を整理してみた。 | firegoby
wordpressをSSL化したらpluginが動かなくなった | PIYOPI-YO 〜プログラマー風メモブログ〜


プラグイン(非)インストール・メモ

WordPressのプラグイン紹介ページは色々ありますが、逆に「インストールしてみたけど、問題あったので辞めました」的情報をまとめて載せているサイトというのは少なそうですね。

以下、当サイトでの動作チェックの備忘録として書いたものを一般公開してみることにしました。
語調が若干べらんめえなのは、元が内輪向けだったということでご容赦を。


●AmazonJS
Windowsだと動作しない。
正確に言うと、動作はするがAmazonからのサーチ結果エリアが白紙になり、何も表示されない。●Amazon Productも全く同じ症状。
(WordPressの管理画面をSSL経由にしているのが原因か?)
代替として●wp-tmkm-amazonを使用。

●wp-tmkm-amazon
実はこちらもデフォルトのコードでは動作しない。以下をパッチ処理することで動くようになった。
1.PHP5では動作しない古い文法(&newによるインスタンス生成)を使っていた。
2.セキュリティ的に固めてあるLive WireサーバのPHP設定では動作しない、file()関数での外部テキストの読込を行っていた。
3.関数の選択に問題があり(get_option(‘siteurl’))、SSL環境下では誤った値を返していた。

●TinyMCE Advanced, ●Ultimate TinyMCE, ●CKEditoor for WordPress
ビジュアルエディタの強化にこれらをテストし、いずれも動作を確認できたが、最終的にデフォルトのビジュアルエディタとの類似性と、適度な強化項目のバランスを考えTinyMCE Advancedを採用
→後に削除。WPのhtml自動整形機能はどう考えても性悪だ。Live Wire Blogでは、ビジュアルエディタの使用は非推奨、という断固としたスタンスで臨むことにする!

●PS Disable Auto Formattingの方が●brBrbrより理にかなった動きをするので、そちらをオンにしてbrBrbrは使用停止。
ただしこれをオンにすると、ビジュアル・タブ←→テキスト・タブの変換が効かなくなる。他プラグインとの干渉ではなさそう。ブラウザに関係なく、Windowsだと症状が100%再現。Macだと再現する場合もあるが、しない場合もあり、正直よく分からない。(原因特定。get_option(‘siteurl’)→site_url()に修正。)

結局、PS DATやTinyMCE Adv.のようなエディタ強化プラグインを使っても、ビジュアル・タブ←→テキスト・タブの変換時に、WPが勝手にソースコードを改変してしまう〝悪癖〟は回避できない。
各ブログ運営者には、以下のどちらかを選択して貰うしかないだろう。
・PS DATをオンにして、ビジュアルエディタは使わず、テキストエディタだけを使用する。
・PS DATをオフにして、プラグイン強化したビジュアルエディタを使用する。

●AddQuicktag
動作しないどころか、テキストエディタのタグバー全体が白紙になった。更に自前のアイコン登録機能とコンフリクト? コレがあるとインハウスで追加したアイコン選択機能のjQueryが動かず。ページのhtmlを読むと、アイコン選択JavaScriptの直前にAddQuicktagのJavaScriptが読み込まれている。何らかのエラーを吐いてるのか?
→原因判明
その1. マルチサイト化されたWordPressでは、このプラグインの設定項目は各ブログの管理画面でなく、ネットワーク管理者の管理画面に追加表示される。当初はこれを見落としていて、各ブログの管理画面を見て「動いてない」と勘違いしていた。
その2. 上記の管理画面は、インストール直後は当然空っぽ。この状態でプラグインがロードされると、何らかのエラーが生じて以後のWordPressの一部動作に不具合が生じている模様。試しに1コだけタグを追加してみたら、ちゃんと動くようになった。ネット上でこのことについての記載は見当たらないので、ウチだけ或いはマルチサイト時のみの現象か?
いずれにせよ、追加項目を各ブログ個別でなくマルチサイト管理者による一括設定しか出来ないのであれば、わざわざプラグインを追加しなくても直接テンプレートのJavaScriptにQtags.addButtonを追加すれば済む話だよなぁ、と思ったので、このプラグインは解除した。

●Comment Form Quicktags
動作しない。設定を保存するボタンを押した途端に全部のボタンが白紙になる。データベースに設定値が書き込まれていない。Multisiteへの非対応のせい?
代替として●Basic Comment Quicktagsを使用。

●Category Order and Taxonomy Terms Order
動作しない。原因追究してないが、これもMultisite関連?
代替として、レガシーだが●Category Orderを使用。

●DB Cache Reloaded Fix
動作するが、キャッシュの確認の関係かwp-adminへのアクセス時にwp-login.phpへの再入力を要求されてしまう。
Live Wire サイトではwp-login.phpから自前のlogin.phpへ誘導するようにしているので、この部分とコンフリクトして結果的に管理ユーザーがwp-adminに入れなくなってしまう。
DB CRFの内部を調べてコンフリクト回避のハックを噛ますなどすれば併用可能かとも思われるが、とりあえずdefer.

●Easy FanceBox
動作するが、タブレットで表示された画像をピンチインして拡大しようとすると、常に画像ポジションがリロードされて画面の左上部分しか見られなくなってしまう仕様上の欠陥があり、不採用。

●Facebook Comments
意図したものと違っていた。コメント欄から投稿した内容をそのままFBに投げてくれるものを期待していたのだが、これはコメントフォームとは別個に、FB専用のコメントフォームエリアをarticle下に配置するもの。

コメント投稿をそのままFB及びTWにリダイレクトしてくれるプラグが欲しいのだが、見当たらないなー。自分で書くしかないのだろうか。
→代替案として●Twitter Commentsと●Facebook Comments(OTF)を採用。前者はTwitterサーチで当該ポストのURLが書かれているツイートを自動的にコメント欄に読み込んでくれるもの。後者はFBのコメントAPIを読み込んでくる関数のみをインクルード出来るプラグインで、挿入位置等は自前での実装。しかしおかげで自由度の高いインプリメントが出来て納得している。
それにこれらなら、閲覧者にTwitterやFacebookのアプリ認証を一々要求する必要もない。結果的にはこっちの方が良かったと思う。

●Simple Tweet
詳細設定をユーザーのプロフィール設定内で行う仕様になっており、ユーザー欄をLive Wire のプロフィールページでハックしているLive Wireでは使用出来ない。●WP to Twitterも試してみたが、いきなりphpエラーが出たのですぐさま使用停止。
最終的に●WordTwitを採用。しかしこちらもウチではWindows環境下だと読込中マークが回り続けて設定画面が表示されない。Win環境下では他にもAmazonJSやRakuten Productの非動作、テキストエディタとビジュアルエディタの切り替えが効かなくなるなどの不具合がある。WordPressとWindowsは相性が悪いのだろうか?しかし同様の症状についてのネット上の声は殆ど拾えないので、ウチだけなのだろうか?

●Better WordPress Recent Comments
名前と違ってインターフェースがWorst! もうUgly WordPress Recent Commentsとでも改名すべき。一応突っ込んであるが、もっとマトモなプラグインがあれば差し替える。
(或いは自分で書いてWordPressに登録申請してみるか。勉強にもなるし。)

●About Me 3000
基本的な筋は悪くないのだが、widgetの書き方が旧API仕様で、そのため複数のウィジェットを設置できないなどの弱点があった。
ベースになる関数ソースを新型APIに移植し、さらに複数メンバーに対してそれぞれの自己紹介設定を保持出来るように徹底改造したった。(しかしオリジナルソースのライセンシー記述が見当たらない割に、Donate募る表示はシッカリ出してたりするので、この改造強化版はインハウスでの使用に留めるべし)
後で●Smart About Me Widgetてのも見つけたが、まぁせっかく自前で改造したし、機能的にはむしろ勝ってると感じたのでスルー。

なおLive Wireテーマテンプレートには、インハウス機能でComment欄にTweetオファーするボタンを付けたが、そこではこのAbout Me欄に書かれたTwitterアカウント名を参照している。

●Standard Widget Extensions
アコーディオン要らないし、sidebarやメインコンテンツのid指定などの設定インターフェースも(プラグインの性質上止むを得ないにせよ)面倒臭い。
採用停止して、自分でsticky機能書いた。

●WP-PageNavi
自分でテンプレート書いてるんだから自分で実装すりゃイイじゃん。ページナビの関数自体はWordPressがfunction用意してるんだし。
…というわけで、非採用。

●WP Social Bookmarking Light
アイコンの高さが不統一なのが気になったので差し替えてやった。