WordPressテーマにEvernoteのクリップボタンを取り付けるカスタマイズ方法

Evernoteて便利ですよね。

あまりにも便利なので、僕も毎日結構な頻度でメモやらスクラップやらで使用しています。

そこでふと昨日、Wordpressで使用しているテーマに記事の本文部分をサイトメモリー（WEBクリップ）する機能を取り付けたいと思い立ちました。昔そういうボタンを結構見かけたよなと。

それで調べたら、どうやらEvernoteは、アプリなどでクリップして欲しいらしく、本サイトの設置ツールなどはなくなっていました。

残念に思いながらも、さらに詳しく調べたら、何とかやり方を見つけることができたので、その方法を紹介します。

テーマにクリップボタンを取り付ける主な手順

WordPressテーマに、サイトメモリー機能を取り付ける主な手順は以下です。

画像の準備
テンプレートのクリップボタンを取り付けたい場所にコードを書く
クリップしたい本文箇所をIDをつけた要素で囲む

やることといっても、これくらいです。では順を追って説明していきます。

画像の準備

まずは画像を準備します。

小さなクリップボタンを作成する場合は、以下の画像を。

大きなクリップボタンを作成する場合は、以下の画像あたりを使用するといいかもしれません。

もちろん自分で作成してもOKです。

用意した画像は、テーマフォルダ内の「images」フォルダに入れておいてください。

取り付け位置のテンプレートを編集

EvernoteのWEBクリップ機能を取り付けたい位置のテンプレートを編集します。

ボタンを取り付けるには、取り付けたい箇所に以下のコードを追記します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({url:'<?php the_permalink();?>',
  providerName:'<?php bloginfo('name'); ?>',
  title:'<?php the_title();?>',
  contentId:'the-content',
  }); return false;" class="evernote-btn-link"><img src="<?php echo get_stylesheet_directory_uri();?>/images/article-clipper-vert.png" alt="Evernoteに保存"class="evernote-btn-img" /></a>

内容を簡単に説明すると、script箇所は、Evernoteのサイトメモリー機能を実行するためのJavaScriptファイルの呼び出しです。

アンカーリンクのクリックイベントでEvernote.doClip()を呼び出し、引数の配列を設定します。

配列に設定する項目は、以下のようになっています。

URL（ページのURL）：the_permalink()で取得
providerName（サイト名）：bloginfo(‘name’)で取得
title（ページタイトル）：the_title()で取得
contentId（要素ID）：投稿本文を囲むdiv要素などのIDの指定

画像は好きな画像を選択してください。

これらのコードをテーマテンプレートに書き加え、ブラウザで表示させるとこんな感じになりました。

参考 SNSにシェアしたりソーシャルブックマークに登録するコードを取得する – Waka8*Stakes

本文をIDで囲む

先程、contentId（要素ID）で要素のIDを「the-content」に設定しました。

そうすることでEvernoteは、設定した#the-content要素内からコンテンツを取得します。

その取得範囲となるdiv要素を設定します。

通常なら、single.phpや、page.phpの中のコンテンツ表示関数「the_content()」の周りを以下のように囲めばOKだと思います。

<div id="the-content">
<?php the_content(); ?>
</div>

こうすることで、本文部分のみを綺麗にEvernoteにクリップすることができます。

動作確認

最後に動作確認をしておきます。

クリップボタンを押すと、

次のようなポップアップダイアログが表示されるので「クリップ」を押します。

すると、Evernote上に次のように綺麗に本文部分のみがクリップされます。

まとめ

Evernoteのサイトメモリー機能をユーザーに使いやすく提供することによって、後から読み返して情報を整理したいなんて方の利便性は多少上がると思います。

後から読む、なんてのは大抵は読まれないんですけどね。

それはさておき、この方法だととても簡単に本文部分だけ綺麗にEvernote上にスクラップできる（余分なものは入らない）ので使い勝手は悪くないと思います。

ただ、最近はパソコンやスマホのアプリを使用している人が多数だと思います。

実際に、Evernoteはこれらサイトメモリーボタン作成ツールは既に公開していませんし、おそらく非推奨でしょう。もしかしたら、今後使えなくなる可能性もなきにしもあらずです。

2014年11月時点では、使用できていますが、もし今回の方法を使用される場合は、そういったことも加味しながらご使用ください。