しかし逆に、デフォルトの「投稿」機能から「カテゴリー」や「タグ」といった、 デフォルトで設定されている分類機能を取り外したいといった場合の情報はあまり見つかりません。

そんな時は下記のコードをfunctions.phpに記述して利用します。

function my_unregister_taxonomies()
{
	global $wp_taxonomies;

	/*
	 * 投稿機能から「カテゴリー」を削除
	 */
	if (!empty($wp_taxonomies['category']->object_type)) {
		foreach ($wp_taxonomies['category']->object_type as $i => $object_type) {
			if ($object_type == 'post') {
				unset($wp_taxonomies['category']->object_type[$i]);
			}
		}
	}

	/*
	 * 投稿機能から「タグ」を削除
	 */
	if (!empty($wp_taxonomies['post_tag']->object_type)) {
		foreach ($wp_taxonomies['post_tag']->object_type as $i => $object_type) {
			if ($object_type == 'post') {
				unset($wp_taxonomies['post_tag']->object_type[$i]);
			}
		}
	}

	return true;
}

add_action('init', 'my_unregister_taxonomies');

これだけで簡単に「カテゴリー」や「タグ」などを外すことができます。

特にメディア関してはフィルタをするような項目がなく、自分が投稿したもののみを表示するような仕組みが用意されていません。

そのため、自分が投稿した画像を他人に利用されてしまったり、逆のこともできたりと、少々お粗末な管理になってしまっています。

フィルターフックを使って表示を制限

WordPressではWP_Queryクラスを利用して、一覧や詳細画面を表示する際にデータベースから投稿を取得してきます。

そこで、WP_Queryクラスが投稿を取得する前に、今現在ログインしているユーザーの投稿やメディアのみを取得するようにクエリを書き換える事で、上記のような問題を解決することができます。

下記のコードをfunctions.php等に記述してください。

function my_pre_get_posts_filter(&$wp_query)
{
	global $pagenow;
	$user = wp_get_current_user();

	if (WP_ADMIN && ($post_type = $wp_query->get('post_type'))) {
		if (in_array($pagenow, array('media-upload.php', 'upload.php')) && $post_type == 'attachment') {
			// メディアの表示情報を制限
			$wp_query->set('author', $user->ID);
		}
	}
}

add_action('pre_get_posts', 'my_pre_get_posts_filter', 10, 1);

管理画面で表示しているかどうかの条件判断についてはもっと良い方法があるかと思うんですが、とりあえず上記コードで問題無く動作しています。

WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。

詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。

しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。

かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。

• 投稿の編集 ‹ INSPIRE TECH — WordPress

スマートフォン向け対応できるCSSを書いた

DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。

そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。

.dsq-popup[id] {
	position: absolute !important;
}

.dsq-popup-container .dsq-popup-close {
	right: 5px;
	top: 5px;
	position: absolute !important;
	z-index: 1200 !important;
}

.dsq-popup-container .dsq-popup-title {
	position: relative !important;
}

.dsq-popup-container .dsq-popup-title h3 {
	font-size: 12px !important;
}

.dsq-popup .dsq-tabbed-modal {
	background: none !important;
}

#dsq-popup-message #dsq-login-disqus iframe {
	height: 300px !important;
}

.dsq-popup-body {
	width: auto !important;
}

.dsq-login-box .dsq-popup-body {
	width: 300px !important;
}

.dsq-popup .dsq-modal-tabs {
	width: auto !important;
	float: none !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li {
	float: left !important;
	width: 43px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li a {
	padding: 4px 6px !important;
	text-align: center !important;
	font-size: 0px !important;
	border-bottom: none !important;
}

.dsq-popup .dsq-tab-container {
	padding: 10px !important;
	font-size: 12px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	background: #eee !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a:hover {
	border-bottom: none !important;
}

適用方法

適用したいアカウントのアピアランスパネルを開きます。

スクロールして中ほどより下にある、Custom CSSの欄に上記コードを記述して保存します。

JavaScriptの設置

上記CSSだけではポップアップウィンドウの位置がおかしくなるため、下記JavaScriptを設置してください。

jQuery(function($) {
	setInterval(function() {
		$('#dsq-popup-message').css({
			'position': 'absolute',
			'top': $(window).scrollTop() + 10
		});
	}, 1000);
});

スマートフォンでの表示

こんな感じで表示されます。

注意

カスタムCSSはPC版にももれなく適用されてしまうため、PCとスマートフォンで利用する場合には、上記CSSにスマートフォンのみのクラス名やIDなどを追加するなどして、環境によって表示を切り替えられるよう工夫が必要です。

• 九星気学 – Wikipedia

身近では厄払いの方位除けなどに使われ、方位の吉凶を占う際によく利用されるようです。
方位除けに行った際「五黄殺」や「暗剣殺」なんていう単語を見た・聞いたことがある方が多いかと思いますが、まさにそういった方位と関係があり、自分の生年月日から算出する「本命星」と「月命星」から、方位の吉凶を占います。（間違えていたらごめんなさい！）

九星気学の詳しい説明はWikipediaに任せるとして、仕事で生年月日から「本命星」と「月命星」を算出できるPHPのコードを書きましたので、何かに使えるかと思い、公開します。

必要環境

• PHP5.0以上

ソースコード

NineStarKiというのは、海外での九星気学の呼び方です。

使い方

NineStarKi::yearly(int year, int month, int day)

で、本命星が算出されます。

NineStarKi::monthly(int year, int month, int day)

で、月命星が算出されます。

ただ、このカスタムメニュー、cssのクラス名などを指定する事は可能ですが、リンクボタンに画像を直接利用しようとなると、いろいろな工夫が必要になります。

単純に画像のURLを、メニューのに登録したエントリのタイトルに指定することもできますが、WordPressに多少詳しくないと、アップロードした画像のURLなどを指定するのは敷居が高いですし、メニューの管理上も画像のURLがエントリ名となってしまうため、管理がし辛くなってしまいます。

もっと簡単に画像を使う

そこで、「メニュー名＋メニューに登録したエントリー名」と同一の画像がライブラリに登録されていた場合、自動的にその画像を利用するコードを書いてみました。

利用条件

• PHP 5.2
• WordPress 3.1

functions.php

上記のコードをfunctions.phpとして利用するか、既存のファイルに追記して使って下さい。

使い方

カスタムメニューを下記のような状態で登録したとします。

• メニュー名：　テスト
• エントリー名：　テストの記事

この場合、ライブラリに「テスト/テストの記事」というタイトルの画像があった場合、自動的にその画像をメニューの画像として利用します。

バリデーションルールを切り替えるというのも1つの手段かと思いますが、もっと簡単に、バリデーションの定義だけでそれを実現できる関数を、ビヘイビアとして書いてみたので公開します。

ソースコード

下記のassoc_field_validation.phpをダウンロードして、APP/models/behaviors/以下に設置してください。

使い方

ビヘイビアに含まれるcheckAssocField関数を、バリデーションのルール（ユーザー定義関数）として指定します。

下記のコードは、先ほどの「選択肢A」が選ばれていた場合に「アンケート」の入力を必須入力にする、というサンプルです。

class Contact extends AppModel
{
	public $validate = array(
		'option' => array(
			'inList' => array(
				'rule' => array('inList', array('A', 'B', 'C')),
				'required' => true,
				'allowEmpty' => false,
			)
		),
		'questionnaire' => array(
			'checkAssocField' => array(
				'rule' => array('checkAssocField', 'option', array('A'), 'notEmpty'),
				'message' => '必ず入力してください。',
				'required' => true,
			),
		),
	);
}

checkAssocField関数は3つの引数を取ります。

assocField (string)

値をチェックする入力フォーム名です。

assocValueList (array)

assocFieldで指定してた入力フォームの値がここで指定された値ならば、delegateRuleを用いてバリデーションを行います。

delegateRule (mixed)

assocFieldで指定したフォームの値がassocValueListの値に含まれる場合に、実行するバリデーションのルールを指定します。
ここでは他のバリデーションのルールを自由に指定する事が出来ます。
例）array('maxLength', 30)、array('between', 20, 30)

注意

checkAssocField関数をバリデーションに利用した場合、そのフィールドのallowEmptyとrequiredの指定に気をつけて下さい。

例えば上述の例の場合、allowEmptyをtrueと指定してしまうと、この関数は意味を成しません。（値が空でもOKということになるため、「選択肢」がAだとしても「アンケート」の値が空で通ってしまう）

また、allowEmptyをfalseと指定すると、「選択肢」がAであれBであれ、「アンケート」が空の場合はエラーになってしまうため、これもまた意味がありません。

そこで、requiredのみをtrueとすることで値が空の状態でもバリデーションルールは実行する、という状態にする事が出来ます。

必須のチェックがしたければ、delegateRuleにnotEmptyを指定する事で行う事ができるので、allowEmptyではなくそちらを利用するようにしてください。

この指定にだけは気をつけて下さい。

エントリポイントであるAPP/webroot/index.phpを差し替えるという強硬手段もあるかと思いますが、もっと手軽に実現するためのMaintenanceコンポーネントを作成してみたので公開します。

利用可能な環境

下記環境で作成・テストを行っています。

• PHP 5.3.1
• CakePHP 1.3.11

PHP4系列では動作しません。
また、CakePHP1.2以前では動作するかわかりません。

ダウンロードと設置

下記ソースコードを、maintenance.phpとしてAPP/controllers/components/以下に配置してください。

組み込み

基本的に1つだけのコントローラーをメンテナンスモードにする、というのもあまり考えられないと思うので、AppController自体に組み込んでおくと良いです。

class AppController extends Controller
{
    public $components = array('Maintenance');
}

設定

Maintenanceコンポーネントを動作させる上での設定を、下記の何れかの方法で設定を行います。

Configureクラスを利用する場合

bootstrap.phpなどの設定ファイルに記述する際にこちらの方法を使います。

Configure::write('Maintenance.level', 2);
Configure::write('Maintenance.errorMethod', 'error404');

コンポーネントの指定時に設定を行う場合

class AppController extends Controller
{
    public $components = array('Maintenance' => array(
        'level' => 2,
        'errorMethod' => 'error404',
    );
}

Controller::beforeFilterメソッドを利用する場合

class AppController extends Controller
{
	public $components = array('Maintenance');
	
	public function beforeFilter()
	{
		$this->Maintenance->level = 1;
		$this->Maintenance->errorMethod = 'error404';
	}
}

利用出来る設定の一覧

下記の項目を設定可能です。

動作の仕様上、コンポーネントのコンストラクタで利用する設定や、Component::initializeメソッドの実行時に利用する設定もあるため、そういった設定はbootstrap.phpでConfigureクラスを利用して指定したり、コンポーネントの指定時に設定する方法しか利用できません。

そのため、注釈にbootstrap.phpのみ等と書いてある項目に関しては、設定のタイミングを間違える（例えば、bootstarp.phpと書いてある項目をController::beforeFilterで設定する等）と正しく動作しませんので、ご注意下さい。

level (int) ※bootstrap.php、またはコンポーネントの指定時のみ

メンテナンスモードのレベルを設定します。
0 – メンテナンスモードを利用しません。
1 – allowedCIDRで指定されたIPアドレス帯域以外からのアクセスは、強制的にデバッグレベルを0にします。
2 – allowedCIDRで指定されたIPアドレス帯域以外からのアクセスは、強制的にデバッグレベルを0にした上で、メンテナンス画面へリダイレクトします。

debug (int) ※bootstrap.phpのみ

allowedCIDRで指定されたIPアドレス帯域でアクセスした場合のデバッグレベルを設定します。

allowedCIDR (array) ※bootstrap.php、またはコンポーネントの指定時のみ

メンテナンスモードの影響を受けないIPアドレスをCIDRの形式で記述します。
levelが1以上の時にここで指定されたIPアドレス帯域でアクセスすると、debugで指定されたデバッグレベルでアプリケーションが実行されます。
配列を利用する事で複数のパターンを指定する事が可能です。
例）192.168.0.1/32

baseURL (mixed)

アプリケーションのホームURLを文字列またはCakeURLの形式で指定します。
levelが2の時にこれ以外のURLにアクセスがあった場合、このURLにリダイレクトした後にメンテナンス画面を表示させます。

errorMethod (string)

メンテナンス画面を表示するためのエラーメソッドの名前を指定します。
内部的にはObject::cakeErrorメソッドを利用しているため、cakeErrorクラスもしくはappErrorクラスに定義されているメソッド名を指定します。（デフォルトではerror404です）

errorParams (array)

エラーメソッドに渡すパラメータを配列で指定します。

利用方法

上記設定を参考に、適切な設定を行うだけでOKです。
あとは必要に応じてlevelを2に変更する事で、すぐさまアプリケーション全体をメンテナンス中にすることができます。

その際、allowedCIDRに指定されたIPアドレス帯域からは、debugに指定したデバッグレベルで通常通りのアクセスが可能なため、通常のユーザーにはメンテナンス中を表示させ、その間に管理者がシステムのアップデートやバグの調査などを行う事が可能になります。

levelが1の場合は、通常のユーザーはデバッグレベル0、許可されたIPアドレス帯域からはdebugに指定したデバッグレベルでアクセスする事ができるので、小さなバグの検証などにも利用できるかと思います。

前回のプラグインではツイートが多くなっても、100件までは全て取得して表示するような仕組みになっていたため、そのまま表示してしまうとページが縦に異常に長くなる現象が発生していました。

そこで、今回の改造で1ページに表示する件数を指定可能にし、さらにページネーションの仕組みを取り付けてみました。

ソースコード

利用方法

ツイートの一覧を表示したいDOMオブジェクトを用意し、下記のように利用します。

$('#tweets').twitterTrackback();

オプション

下記のように、twitterTrackbackメソッドにオブジェクトを渡すことで、動作オプションを指定できます。

$('#tweets').twitterTrackback({ exclude: [ 'jyokyoku' ], renderCallback: renderTweets });

オプションの一覧

url (string)

ツイートを取得したいURLを指定します。デフォルトでは、スクリプトを設置したURLが利用されます。

wrapperTag (string)

ツイートの一覧を囲むタグを指定します。デフォルトではulです。

removeHash (boolean)

ツイートを取得するurlにハッシュが含まれる場合に、それを削除するかを指定します。デフォルトではtrueです。

renderCallback (function)

ツイートをレンダリングする関数を指定します。

pagerCallback (function)

ページャをレンダリングする関数を指定します。

pagerPos (string)

ページャを表示する位置を指定します。

• both – ツイート一覧の上下
• top – ツイート一覧の上
• bottom – ツイート一覧の下

perpage (integer)

1ページに表示するツイートの数を指定します。デフォルトでは10です。

noTrackback (string)

ツイートが1件も無い場合に表示するメッセージを指定します。デフォルトでは<p>Twitterからのトラックバックはありません。</p>が表示されます。

exclude (array)

ツイートを表示したくないユーザーIDを配列で指定します。

生成されるHTMLコード

renderCallbackオプションやpagerCallbackオプションに何も指定しない場合、下記のようなHTMLコードが生成されます。

適宜CSSを利用してスタイリングしてください。

ツイート一覧

<ul>
	<li class="tweet1">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
	<li class="tweet2">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
</ul>

ページャ

<div class="tweetPager">
	<span class="current">1</span>
	<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(2); return false;">2</a></span>
</div>

コールバック関数を利用する

renderCallbackオプションやpagerCallbackオプションに適切な関数を渡すことで、表示されるツイートの内容やページャのコードを変更する事ができます。

renderCallbackオプションを指定する

renderCallbackオプションを指定する場合、引数を1つ取る関数を指定してください。
引数にはツイートの番号が数値で渡されます。

また、関数のthisスコープはツイートの情報が格納されたオブジェクトになるため、this.author.nameなどでツイートに関する情報を表示することができます。

デフォルトで実行される関数を載せておきます。

function renderHtml(n) {
	return (
		'<li class="tweet' + n + '">' +
			'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
			'<ul class="section">' +
				'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
				'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
				'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
			'</ul>' +
		'</li>'
	);
}

pagerCallbackオプションを指定する

pagerCallbackオプションを指定する場合、引数を3つ取る関数を指定してください。
引数は下記の値が渡されます。

1. (integer) 現在のページ番号
2. (integer) 1ページにいくつツイートを表示するか
3. (integer) 現在のURLに対する全ツイート数

また、ページャで生成されたリンクがクリックされた場合には、必ず下記の関数を実行して、ツイート一覧を書き換えるようにしてください。

jQuery.twitterTrackback.update(pageNumber)

デフォルトで実行される関数を載せておきます。

function pagerHtml(current, perpage, total) {
	var totalPages = total / perpage;
	var links = '';

	for (var i = 1; i < totalPages; i++) {
		if (current != i) {
			links += '<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(' + i + '); return false;">' + i + '</a></span>';

		} else {
			links += '<span class="current">' + i + '</span>'
		}
	}

	return (
		'<div class="tweetPager">' + links + '</div>'
	);
}

バグやご要望など

バグやご要望などありましたら、ツイッターかコメントフォーム、Facebook、またはお問い合わせフォームからご連絡ください。

この機能は非常に便利ですが、本番環境などでデバッグレベルを0にしていると、発行したSQLを確認する手段がありません。

本番環境で何かしらデータベースエラーが発生した場合に、発行されているSQLを確認したいと思っても、そのままでは方法が無いのが現状です。

そこで、利用しているデータベースのドライバクラスを改良して、CakePHPのデバッグレベルに関わらず、発行したSQLをログファイルに保存できるように改造してみます。

ロギング用のデータベースドライバを作成

CakePHPのコアファイルに手を入れるのは避けたいので、データベースのドライバクラスを継承したログファイル保存用のドライバクラスを作成します。

ここではMySQLを利用する場合を想定します。
他のデータベースを利用している場合は、適宜利用しているデータベースのドライバクラスにを読み替えて下さい。

ファイルを作成

app/models/datasources/ に dbo_mysql_log.php を作成します。

dbo_mysqlを継承したコードを記述する

ここではDboMysqlを継承したDboMysqlLogという名前でクラスを作成します。

そして、SQLを発行するための関数であるexecute関数と、SQLのログ表示に関する処理を行うlogQuery関数をオーバーライトして、SQLをログに保存する設定であれば、実行したSQLをログファイルに保存できるように改良します。

App::import()関数を利用してスーパークラスを読み込んでおかないとエラーが出ますので注意して下さい。

データベースの接続設定を行う

app/configs/database.php ファイルの中で、利用するデータベースのドライバ指定を、先ほど作成したドライバに切り替えます。

public $development = array(
	'driver' => 'mysql_log',
	'persistent' => false,
	'host' => 'localhost',
	'login' => '********',
	'password' => '********',
	'database' => 'test',
	'prefix' => '',
	'encoding' => 'utf8'
);

driverの指定は、作成したドライバのファイル名から dbo_ と拡張子を除いたもので指定しましょう。

ログ保存用の設定を行う

config/bootstrap.php に下記のようなコードを記述します。

Configure::write('Sql.log', true);

これで、デバッグレベルに関係なく、発行されたSQLが tmp/logs/sql.log に出力されます。

• WordPress › WP-OGP « WordPress Plugins

自分もFacebookのいいね！ボタンを導入したときに試してみたんですが、ブログ名やブログの記事タイトルはもちろん、ブログ記事にアイキャッチ画像を指定すれば、そのアイキャッチ画像をブログ記事のサムネイルとしてOGPタグを生成してくれたりと、非常に便利です。

ただ、アイキャッチ画像が存在しない場合に利用される、デフォルトのサムネイル画像が変更できなかったり（変更するにはプラグインに含まれるファイルを差し替える必要がある）、Facebook用のOGPタグであるfb:app_idがスペルミスっていたりと、少し不満な点もありました。

そんな中、下記サイトでマルチサムネイルに対応したWP-OGPプラグインを配布しているのを見つけました。

• WP-OGPを改造してマルチサムネイル対応＆正しいプロパティ表記にしました | Sinack

ブログ記事の中の画像を利用するというアイデアと、マルチサムネイルというアイデアが素晴らしかったので、自分もインスパイアされて、WP-OGPプラグインを詳細設定が出来るような設定画面付きに改造してみました。

カスタマイズしたWP-OGPプラグインの特徴

本プラグインはWordPress3.0以上での対応となります。(2011.08.28)

下記のような管理画面を新たに設けています。

説明文に利用するテキストをある程度選べる

オリジナル版のプラグインでは、og:descriptionに利用するテキストを、下記のような優先順位で取得して利用しようとします。

1. descriptionというキー名のカスタムフィールド
2. 投稿の抜粋
3. 投稿の本文

本プラグインでも、この利用する優先順位は変更していませんが、下記の項目の設定を可能にしました。

• 利用するカスタムフィールドのキー名を変更可能
• 投稿の抜粋を利用するかどうかを選択可能

設定を行って頂くことで、ある程度ですがog:descriptionに利用されるテキストを、選択できるようになっています。

テキストの抽出方法を単語区切りか文字数かを選べる

オリジナルのWP-OGPプラグインでは、og:descriptionに利用するテキストを、単語数で75単語分を抽出して利用します。

そのため、単語区切りが存在しない日本語では、テキストがそのままズラーッと改行無しで入ってしまい、og:descriptionが異常に長くなるという現象が発生します。

それを防ぐために、

• 単語数で抽出する
• 文字数で抽出する

を選択できるようにしました。

その際、抽出する単語数または文字数を、固定の75単語（文字）ではなく、任意の数値で指定する事が可能になっています。

記事中に利用された画像をog:imageとして利用できる

オリジナルのプラグインでは、og:imageに利用する画像を、投稿のアイキャッチ画像が存在する場合はアイキャッチ画像を、存在しない場合はプラグインに含まれるデフォルトの画像が利用されるようになっています。

この場合、アイキャッチ画像が設定されていないとデフォルトの画像が利用されるため、og:imageに任意の画像を指定するにはアイキャッチ画像を利用しなくてはなりません。

それは少し面倒なので本プラグインでは、画像の利用方法を下記の2つから選べるようにしました。

• アイキャッチ画像を利用する
• 記事中の画像を利用する

og:imageのサイズとアスペクト比の自動チェック

Facebookのog:imageの仕様では、画像のサイズは最低で縦横50px以上、アスペクト比は最大で3:1と規定されています。

og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

Open Graph protocol – Facebook開発者

本プラグインでは、og:imageを記事中の画像から利用する場合、画像の縦横のサイズとアスペクト比を自動的にチェックして、規格に合わない画像は埋め込まないようにしました。

og:imageの最大数を設定できる

記事中の画像を使う設定の場合、その最大数を設定できるようにしました。
0を指定した場合は、記事中の画像を全てog:imageとして埋め込みます。

デフォルトでog:imageに利用される画像のURLを指定できる

オリジナルのプラグインでは、アイキャッチ画像が無かった場合に、デフォルトでog:imageに利用される画像はプラグインのディレクトリに含まれていて、変更するにはプラグインのファイルに手を加えなくてはいけません。

それが面倒なので、デフォルトでog:imageに利用される画像を、URLで指定できるようにしました。

常にデフォルトの画像を利用するかを指定できる

og:imageに利用する画像を本文から抽出して使う場合、その最後に、必ずデフォルトの画像を含められるようにしました。

これは、og:imageが複数指定されているページでFacebookのシェアボタンをクリックした場合に、ウォールに表示する画像をシェアしたユーザーが選ぶことができるためです。

もし今後、いいね！ボタンでも同等の機能が実装されたり、他のサービスでも複数のog:imageを利用した機能が実装された場合を考えて、本機能を付けてあります。

プラグインのダウンロード

プラグインをgithubでの管理に移行しましたので、改変履歴や過去のバージョンなどはそちらからご覧ください。（2011.07.09）

プラグインファイルは、下記のリンクからダウンロードしてください。

WP-OGP customizedプラグインをダウンロード

インストール方法

解凍してできたwp-ogp-customizedディレクトリを、wp-content/plugins/ディレクトリにアップロードしてください。
その後、プラグインの一覧から有効化してください。

注意

本プラグインは、オリジナルのWP-OGPプラグインとは共存できませんので、利用する際はオリジナル版を停止してから本プラグインを有効にしてください。

不具合などのご報告

twitterまたはFacebook、もしくは本記事のコメントでご連絡下さると有り難いです。