【WP】WordPressのPress This機能を応用して超個人的なブックマークサイトを作った話

どうも、小野です。個人的なブックマークサイトを作りました。

onocom.bookmark
http://onocom.net/bookmark/

私がネットサーフィンをする中で見つけたサイト、デザインの参考になりそうなサイト、Amazonの面白かった動画等をざっくばらんにブックマークし、後日私が活用するためのサイトです。

ブックマークをいかにしやすくするかといところに焦点をおいた結果、Press Thisという機能を活用するに致しました。

今回はこのサイトを作る過程で肝となった「Press This」という機能とそのカスタマイズ方法をご紹介致します。

Contents

WordPressのPress Thisという機能をご存知ですか？

WordPressにひっそりと佇むPress Thisという機能をご存じでしょうか？

この機能の画面を見たことはあるけど、使ったことがない！という人がほとんどなのではないでしょうか？かくいう私も全然使っていませんでした。

ちなみに、Press Thisには以下のようにアクセスします。
管理画面 → ツール → 利用可能なツール

Press Thisとは

PressThisとは、外部サイトの紹介記事など書く際に、引用等の負担を減らし、効率よく記事を書くためのツールのことです。

WordPressのCODEX日本語版には以下のような説明がされています。

Press This
「Press This」とは、Web ブラウザのブックマーク（お気に入り）を使って WordPress に素早く投稿・発信できる機能です。「Press This」を使うにはツール画面からブックマークレットを作成し、Web サイトを見ている間に引用したいテキスト、画像、動画などを見つけたら、そのブックマークレットを選択して起動します。

Press Thisの使い方

せっかくなのでPress Thisの使い方を動画にしてみました。

途中エラーになったりしていますが取り敢えずPress This、なんかの役にたちそうやなぁっていうのはご確認頂けるのではないでしょうか？

Press Thisを活用して簡単にブックマーク記事を投稿出来るサイトを作った

今回、このPress Thisの機能を使って個人的なブックマークサイトを作ったのでご紹介したいと思います。

onocom.bookmark
http://onocom.net/bookmark/

なぜこんなサイトを作ったかと言うと、Chromeのブックマークバーのブックマークが多くなりすぎて、同じサイトのブックマークを何個もしていることがあったから。そんな状況では、そもそもブックマークの意味が無い。

自分のブックマークを横断的に調べられたらいいなぁというのと、面白そうやなぁということで、こんなサイトを作りました。

はてなブックマーク使えば解決するのかもしれませんが、まぁ要するに自己満足です。

このサイトはウェブサービスでもなんでもなく、ただのWordPressのサイトを更新しやすくしただけなので、以下に書き記すことは、onocom.bookmarkの閲覧者には何のメリットももたらしません！

肝になるプログラム

このサイトの肝はPress Thisの本文からPress ThisしようとしてるサイトのURLを取得し、画面キャプチャを自動挿入しているところです。

そうすることで、ブックマークしたいURLにリンクする手間や画面キャプチャを取る手間を省き、一言コメントを入れつつブックマークする(投稿する)事が可能になります。

ブックマークするだけなのにいちいちURLをコピーして・・・なんてやってられないですからね。

それを可能にしたのは、【 press_this_save_post 】というフィルターフックです。

該当のフィルターフックを使ってPress Thisで投げられたコンテンツ（本文）を以下のように書き換えています。

また、自動で対象のサイトからメディアを取得するのを防ぐために【enable_press_this_media_discovery】フィルターフックをfalseに設定しています。

<?php
add_filter( 'enable_press_this_media_discovery', '__return_false' );
add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {
    
    $url = "";
    // 本文からURLを抽出する
    $content = trim($post_data['post_content']);
    $pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';
    $result = preg_match($pattern, $content, $match);
    
    if( $result !== 0 && $result !== false ) {
        // デフォルトの情報源という表示は消して、別の方法でリンクを表示
        $content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);
        $url = $linkurl = $match[0];
        $html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';
        
        // サイトのサムネイルをwordpress.comのサービスを利用して取得
        $html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';
        
        // 保存するコンテンツを組み立てる
        $post_data['post_content'] = $content . $html;
    }

    return $post_data;
}

<?php

add_filter( 'enable_press_this_media_discovery', '__return_false' );

add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {

$url = "";

// 本文からURLを抽出する

$content = trim($post_data['post_content']);

$pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';

$result = preg_match($pattern, $content, $match);

if( $result !== 0 && $result !== false ) {

// デフォルトの情報源という表示は消して、別の方法でリンクを表示

$content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);

$url = $linkurl = $match[0];

$html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';

// サイトのサムネイルをwordpress.comのサービスを利用して取得

$html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';

// 保存するコンテンツを組み立てる

$post_data['post_content'] = $content . $html;

}

return $post_data;

}

たったこれだけでPress Thisを使いやすくカスタマイズ出来ました。

めっちゃ簡単！

実際にブックマークする（投稿する）様子を動画にしました。

上記のカスタマイズのおかげで、簡単にブックマークを投稿できるサイトが出来上がりました。しかも画面キャプチャ付きだから、分かりやすい！

https://youtu.be/fabm28w6FKs

地味な機能を弄る喜び

Press This使っている人に出会ったことがないのですが、このブックマークサイトを作ってみて、これは何か他にも使えそうな予感がしました。

そして、誰もいじっていないであろう地味な機能をカスタマイズするっていうのは自己満足するにはピッタリでありました。

皆様も参考に頂ければ幸いです。