プラグインを使用せずに Send to Kindle ボタンの設置 [WordPress]

Amazon よりウェブサイト用の「Send to Kindle ボタン」が公開されました。
早速、問い合わせをいただきましたので、設置を試してみました。

WordPress 用にプラグインが用意されているのですが、試してみたところ、ウェブサイト上で生成をしてしまった方が手っ取り早かったので、こちらの方法をメモとして残します。

まず注意点ですが、現時点では Amazon.co.jp のアカウントでは Kindle に送信をすることができませんので、Amazon.com のアカウントが動作検証のために必要になります (まだ、用途が限られるということですね)
僕はこの 2 つのアカウントの統合は行っていないので、以前に使用をしていた iPhone 4 を英語環境にし、Kindle アプリにて確認をしています。

以下は、Amazon.com: Send to Kindle Button にて設定を行います。

ボタンスタイルの指定

「Choose your button style」にあるプルダウンメニューとチェックボックスより任意の項目を選択することで見た目の指定を行います。
この記事の下に表示をしていますが、以下の指定としています。

Text Kindle
Font Sans Serif
Icon Color Light
Icon Size Small
Theme Light
Border チェック

タイトル、作者、公開日時の指定

「How do you mark the title, author, and publication date on your pages ?」部分ですが、Facebook の Like Button や Like Box の設置をしていれば Open Graph protocol (OGP) の記述はあるかと思います。
このブログの場合も記述済みですので [Open Graph] を選択します。
ここで必要なものは以下の 3 つになります。

[php]<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo(‘name’); ?>" />
<meta property="og:article:author" content="<?php the_author(); ?>" />
<meta property="og:article:published_time" content="<?php the_time(__(‘Y-m-d’)) ?>" />[/php]

実際はもっと多くの OGP の記述がありますが、ここでは割愛をします。
気になる方は HTML をご覧ください。

表示をさせるコンテンツの指定

「How do you mark the main body of content on your pages ?」の部分になります。
このブログは Wpshower の「Blogum」というテーマを使用していますが、コンテンツ部分の CSS セレクタが「post_content」で、その中に記事のタイトルが含まれる構造となっており、うまく抽出をできませんでした。
構造の変更をする余裕がありませんので [Custom CSS Selectors] の使用は見送り [schema.org] に準じて Microdata のプロパティの記述をします。
この部分のみで気持ちが悪いのですが、いずれ対応をするということにしたいと思います。
記事であれば single.php、ページであれば page.php のコンテンツ表示部分を以下の様に「articleBody」の指定をすることにより抽出されます。

[php]<div itemprop="articleBody"><?php the_content(); ?></div>[/php]

Kindle ストアで定期刊行物の販売をしているかの指定

「Do you sell a periodicals subscription on Kindle ?」の部分ですが、多くの方は当てはまらないと思いますので [No] にて問題は無いでしょう。

ウェブサイトへの設置と動作の確認

以上で設定は終了となりますので [Generate widget code] をクリックし、コードを取得します。
「Step 1」を footer.php にある </body> タグの直前に記述します。
「Step 2」は表示をさせたい任意の位置に記述します。ずらずらと style がありますので、カスタマイズも可能ですね。
以下が表示結果になります。

最初は左側の設定画面が表示されますが、次回からは右側の画面が直接、表示される様になります。
この右側の画面にて [Send] をクリックすることで指定の Kindle デバイス、またはアプリに送信されます。
受信をした Kindle アプリでの表示が以下になります。
CSS の問題かもしれませんが、表示にズレが見られます。
今後、当然の様に設置されるボタンになった場合は、Kindle での表示確認も検証項目に含まれるかもしれません。

後ほど読むためのクリップとしての用途が多いかとは思いますが、普段は Pocket を利用していますので、使い分けはどうなっていくでしょうか。
持ち歩いている Kindle は Paperwhite なので転送はしないでしょうが、Fire 等のタブレット端末とは相性の良いボタンかと思います。

エンブックス ウェブサイトリニューアルと WordPress プラグイン

エンブックス ウェブサイト
連絡を頂いて、上島珈琲店 高円寺北口店で話をしたのは昨年の夏でした。
合間、合間で少しずつ進めてきたのですが、ちょうど最初の絵本「こわくないもん」が発売されてから 1 年、4 月 20 日の公開となりました。
ペーパーバック絵本のレーベル エンブックス主宰の西川 さんとはもう数年前に高円寺にあるバール タッチョモにて出会ったのですが、これも「エン」ですね。 Continue reading “エンブックス ウェブサイトリニューアルと WordPress プラグイン”

class-simplepie.php を使用したアメーバブログの RSS フィード取得、PR の削除、記事内容の抜粋 [サンプル]

当記事は「アメーバブログの RSS フィードを取得、PR の削除、記事内容の抜粋をする [WordPress]」のサンプルになります。
ここでは交流のある、ペーパーバック絵本レーベル エンブックス さんのブログの RSS フィードを取得しています。 Continue reading “class-simplepie.php を使用したアメーバブログの RSS フィード取得、PR の削除、記事内容の抜粋 [サンプル]”

アメーバブログの RSS フィードを取得、PR の削除、記事内容の抜粋をする [WordPress]

アメーバブログ (アメブロ) の投稿記事の一部を抜粋し、WordPress の固定ページに一覧表示をさせる機会がありましたので、メモとして残しておきます。
今回は WordPress 3.0 から非推奨となった rss.php を使用せず、/wp-include/class-simplepie.php を使用して外部 RSS フィードの取得を行うこととし、それに当たって以下のウェブサイトを参考にしました。
外部 RSS フィードの取得・表示 2: WordPress | FindxFine -Web 制作に関するメモ-
紹介されている内容に加えた処理は、以下の通りです。 Continue reading “アメーバブログの RSS フィードを取得、PR の削除、記事内容の抜粋をする [WordPress]”

公開した記事のツイートプラグイン WordTwit Pro を導入 [WordPress]

当サイトの記事を公開した際には、プラグイン WordTwit にてツイート、Twitter のタイムラインに表示させていたのですが、Pro が公開されたので早速導入しました。
WordTwit Pro スクリーンショット
ツイートという本来の目的を考えればそのままでも問題はありませんでしたが、同社 (BraveNewCode Inc.) より公開されている WPtouch Pro の現状を考えると、同様に Pro への移行を促すことは容易に想像できます。 Continue reading “公開した記事のツイートプラグイン WordTwit Pro を導入 [WordPress]”

Twitter の新しいフォローボタンの設置、簡単にボタン、文字色を変更する

2011 年 5 月 31 日、米 Twitter が新しい Follow Button を発表しました。
ウェブサイトから Twitter に遷移することなく、フォローが可能となります。
当サイトも試しに早速設置しました。
設置するための HTML は設定ページより簡単に取得することができます。
背景に使用する色の選択 (明るい、暗い) ができる様になっており「暗い」を選択した場合、HTML に以下の 3 つの項目が追加されます。

  1. data-button=”grey”
  2. data-text-color=”#FFFFFF”
  3. data-link-color=”#00AEFF”

Continue reading “Twitter の新しいフォローボタンの設置、簡単にボタン、文字色を変更する”

カスタマイズが容易な Wpshower の WordPress テンプレート

ポートフォリオ スクリーンショット
何となくポートフォリオを WordPress にてまとめようと思い立ったので、合間に制作しています。
現時点では誰でも見られる様な状態にて公開する予定はありません。公開はできないですね、いろいろと。
一からデザインを制作しようかとも思ったのですが、当サイトでも使用している Wpshower より簡素で良いテンプレート Portfolium が公開されていましたのでこちらを選択します。 Continue reading “カスタマイズが容易な Wpshower の WordPress テンプレート”

文字列を一括置換するプラグイン Search Regex [WordPress]

この前の記事で触れましたが、プラグイン AdRotate の削除に伴い、文字列を置き換える必要がありました。
phpMyAdmin 上で編集しても良いのですが、不得手なのでプラグインを使用します。
Delete Revision 等と同様に常に有効にしておく必要はありませんので、必要に応じて有効にします。
Search Regex は記事、タグ、コメントを対象に置換を行うものですので、テンプレートに記述したものに関しましては、別途書き換える必要があります。
インストール後、左側の [ツール] 内に表示されます。
Search Regex スクリーンショット Continue reading “文字列を一括置換するプラグイン Search Regex [WordPress]”

WordPress の表示高速化を試みました

久々に WordPress に関する記事です。
記事を書いている場合ではないのですが、書き殴った下書きがたまってきたことと、少しの気分転換です。
現在利用しているお名前.com レンタルサーバーは、WordPress に限らず「ンッ」とつっかえる感じの反応なので気にしていなかったのですが、Google ウェブマスターツールの「サイトのパフォーマンス」が “あまり” なので、少し手を加えることにしました。
もともとはドメインの保管用で、ブログに利用する予定は無かったのですよね…。phpMyAdmin が使用できることすら最近知りました。
Google ウェブマスターツール スクリーンショット
共有サーバーなのでできることは限られています。 Continue reading “WordPress の表示高速化を試みました”

再整理、30 のプラグイン 一覧 [WordPress]

テーマの変更に伴い、プラグインを再整理しました。整理後は減るはずだったのですが、暫定的に使用しているものもあり、増えました…。多いですね。
テーマファイルやウィジェットに直接記述できるものは、追って差し替える予定です。
ここに記載する一覧はこれまでの記事内容と重複するものがあります。

管理

AdRotate

ウェブサイト: AdRotate Plugin for WordPress
広告を管理するためのプラグインです。指定したブロック、グループ内でのローテーション、広告の終了期日設定等が可能です。 Continue reading “再整理、30 のプラグイン 一覧 [WordPress]”