WordPressでのEvernoteのサイトメモリー導入について

以前簡単に紹介しまたが、もう少しまとまったものとWordpress初心者の方への説明も加えて、バージョンアップ記事を書いておきます。

導入したいけど手の付け方が分からない、という方の参考になれば幸いです。

逆にすでに導入している、あるいはwordpressについての知識はばっちりという方は、GTFしてください。
※GTF・・・Go to next feed(or Blog).

基本となるコード

基本となるコードは以下のリンクからゲットできます。

サイトメモリーボタン

わかりやすいように入力できる部分にすべて文字列を入れてコードをはき出すと以下のようなコードが生成されます。

<script type=”text/javascript” src=”http://static.evernote.com/noteit.js”></script>
<a href=”#” onclick=”Evernote.doClip({providerName:’入力項目A’,contentId:’入力項目B’,suggestNotebook:’入力項目C’,code:’入力項目D’,title:’入力項目E’,url:’入力項目F’,suggestTags:’入力項目G’}); return false;”><img src=”http://static.evernote.com/article-clipper.png” alt=”Clip to Evernote” /></a>

この入力項目＋アルファベットの部分を入れ替えることでカスタマイズすることができます。

基本の４つ

まずは、基本で表示されている４つの入力項目から。

• Webサイト名
• 候補となる保存先のノートブック
• クリップするコンテンツ
• Evernote紹介コード

Webサイト名：入力項目A

空白にしておくと、ドメイン名になります。Blogの名前などを入力しておけばよいでしょう。Wordpressをお使いの方であれば、

<?php bloginfo(‘name’); ?>

の中にブログのタイトルが入っているのでこれを使うのも一手です。

つまり、

providerName:'<?php bloginfo(‘name’); ?>’

こんな感じですね。この方法をとっておけば、後でブログのタイトルを変更したときに勝手にクリップの方のタイトルも変更されます。

候補となる保存先のノートブック ：入力項目B

当たり障りない対応をしたければ、空白にしておけばよいでしょう。できればタグと同じで提案型であればよかったのですが、今のところEvernoteでのノートブックの使い方の多様性を考えるとけっこう「余計なお節介」な気分がしています。特に「自分のブログのタイトル」を入れるとそうとう「目に付き」ます。

仮に入力するとしても、「自分はこのジャンルで書いているんだ！」ということが明確になっている場合の「ジャンル」を入力しておくぐらいが無難だと思います。

クリップするコンテンツ：入力項目C

簡単に説明だけすると「指定したHTMLのID要素に囲まれている部分をクリップ対象にする」というもの。

難しいことを考えたくなければ、テンプレートを見て、一番上最初にでてくる<div id=”○○”>を探して、その○○を指定しておけばとりあえずクリップをしてもらうことだけはできます。mainあるいはcontentなどの可能性が高いです。単一記事のテンプレならばこれでも問題ないでしょう。

インデックスページ（トップページ）の場合、これをやってしまうとページ全体がクリップされてしまう可能性があるのでその辺に注意が必要です。

できれば「post」あるいは「entry」という文字列がでてくる付近のidを探した方がよいでしょう。

例えば、テンプレ内に

id=”post-<?php the_ID(); ?>”

こういう表記ががあれば、これを指定してしまうのも一手です。つまり

contentId:’post-<?php the_ID(); ?>’

こういう感じに。

もしテンプレの意味がはっきり分かっている方ならば、既存のDivにidを追加するか、クリップ用のDivを追加するか、という選択もできると思います。一応注意すべき点は、id名はそのページ内に一つしか存在してはいけない、というルールになっているということです。class指定の重複は可能ですがid指定は重複不可＿＿言葉の意味から考えても当然ですが＿＿です。これは頭の片隅にでも置いておいてください。

なので、インデックスページでの運用を考えると、独自のIDを作る場合は、

id=”clip-<?php the_ID(); ?>”

というようなエントリーごとに異なる名前が割り振られるIDの指定をしておくのが無難でしょう。

Evernote紹介コード ：入力項目D

これは好みの問題ですが、アフィリエイト用のコードを埋め込む所です。
アフィリエイトが気になる方＆少々の英語を読むのを厭わない方は、

http://www.evernote.com/about/affiliate/

からコードを入手して、

code:’rashita△’

みたいな感じでもらったコードを入力してください。

個別の詳細４つ

では引き続いて、詳細の方の入力項目も見ていきましょう。

• 候補となるノートタイトル
• URL
• 候補となるタグ
• 保存様式

候補となるノートタイトル：入力項目E

空白の場合はページのタイトルが使われますので、単一記事のテンプレの場合は空白でも問題ありません。インデックスページで空白にするとノートのタイトルがブログのタイトルになってしまうので使う人にとっては不便です。

WordPressであれば、

<?php the_title(); ?>

を使うことで、記事のタイトルを持ってくることができます。例えば

title:'<?php the_title(); ?>’
title:’R-style <?php the_title(); ?>’

のような感じが考えられます。

URL：入力項目F

これもタイトルと同じ考えで。単一記事の場合は空白でも問題ありません。インデックスページなどは、その記事のURLを引っ張ってくる必要があるので、

<?php the_permalink(); ?>

を使います。こんな感じに。

url:'<?php the_permalink(); ?>’

候補となるタグ：入力項目G

これも空白で問題ありませんが、ブログのタイトルやあるいはジャンルなどを入れておけば使う人にとって便利かも知れません。考えられるものとしては

• 「ブログのタイトル」
• 「Blog」「ブログ」
• 「日記」「ニュース」「ネタ」「ハック」などのブログのジャンル

があるでしょうか。

以前の記事でも紹介しましたが、ワードプレスの記事のタグをEvernoteのタグとして提案することもできます。具体的には以下のような書式。

suggestTags:'<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->name . ‘ ,’;
}
}
?>’});

好みに応じてお使いください。

保存様式

これは入力項目ではありません。スタイルの保存と言ったところでしょうか。基本的に推奨されている「テキストのみ」を選択しておけば問題ないでしょう。

以下は、「開発者向けガイド（英語）」より　

The clip styling strategy that the clipper should use. Valid values are “none” to ignore page styles, “text” to only apply page styles to textual elements, and “full” to attempt to copy the full styling of the page. The default value is “text”, which we suggest using as it yields clips that display consistently across platforms. “full” styling often looks good one one platform but fails to render well on others. Note that there is currently no way to style clips made from IE.

超概略意訳：
「none(無し)」はページのスタイルを無視します。「text（テキストのみ）」は文章要素を最適な形で保存します。「full（全て）」はページをまるっとコピーします。デフォはテキストでOK。フルは良いときもあるけども、プラットフォームが変わると酷いときもあるっす。IEくんには要注意だね！

とりあえず、「テキストのみ」を選択しておきましょう。ブログならこれで問題ないはずです。
※テキストのみはデフォルトなのでコードに記入するところはありません。

どこにつける？

さて、コードが出来たところでテンプレに追加しましょう。単一記事の表示テンプレと、トップページのテンプレ、この二つを押さえておけば無難です。

記事中のボタン設置の場所ですが、考えられる場所は、記事の前の方か後ろの方だと思います。

今回は記事タイトルの後ろに付けるとして話を進めていきます。テンプレを開いてみて、the_titleとかタイトルがらみの場所を見つけましょう。どこかにあるはずです。大体<h2>あたりで囲まれていると思いますが、テーマごとに違うので断言はできません。もし見つからなければ、一度自分のブログをブラウザで開いてみて、ソースを確認してみてください。右クリックなり、メニューの「表示」なりにあるはずです。

ソースを見たら、記事のタイトルが表示されている部分を探して、そのあたりに出てくる要素を憶えておきます。H2とかあるはclass=””とかが手がかりになるはずです。

あとは、テンプレにかえって先ほどの表示を作っていた部分を探します。発見したらタイトルの直後に、作ったコードを入れればOKです。
※<h2glt;</h2>でタイトルが表示されていたら、</h2>の直後に入れる。

ボタンを別の部分に入れる場合でも、おなじような感じで設置場所を見つけてみてください。

コードを入れたら、忘れずに保存（orアップロード）を実行しておきましょう。

おわりに

これで大体WordpressでのSiteMemoryボタンの導入はできるのではないかと思います。ページのテーマにもよりますが、完璧に対応するのであれば、

• tag.php (tag.php)
• アーカイブ (archive.php)
• カテゴリーテンプレート (category.php)
• ページテンプレート (page.php)
• メインインデックスのテンプレート (index.php)
• 単一記事の投稿 (single.php)
• 検索結果 (search.php)

あたりのテンプレをいじる必要があります。

あと、おまけ的な紹介になりますが、すでにプラグインがあります。

Evernote Site Memory for WordPressプラグイン（kwLog）

使い方(kwLog)

最新のバージョンがどうなっているのかはわかりませんが、自分でボタンを導入したい場所にコードを埋め込む作業は必要な感じです。

プラグインのサイトはこちら

http://wordpress.org/extend/plugins/site-memory-for-wordpress/

自分で一からやるも良し、テンプレの助けを借りるも良しです。Evernoteを使っていてるブロガーの方は、「おれもEvernote使っているよ」のアピールと共にボタンを設置してみてはいかがでしょうか。

▼こんな一冊も：

EVERNOTE「超」仕事術
	倉下忠憲 シーアンドアール研究所 2010-08-18 売り上げランキング : 478 おすすめ平均 クラウド時代のGTD指南本 GTDに使えそうです EVERNOTEを利用した『知的生産の技術』指南本 Amazonで詳しく見る by G-Tools