WordPressのテーマを「2010 Weaver」から「Weaver」に変更

先日、WordPress用のテーマ「Weaver」がリリースされた。

2010 Weaver」の後継が「Weaver」という位置づけのようだが、2011年になったので、今更、「2010」でもないのだろう。

このブログでも、テーマに「2010 Weaver」を使っていたので、早速、「2010 Weaver 1.5.4」から「Weaver 1.7」に変更した。

と言っても、フッターのクレジットを除いては外観は変わっていない。

「2010 Weaver」も「Weaver」も、WordPress標準のテーマ「Twenty Ten」の流れをくむテーマであり、シンプルでカスタマイズし易い点が特徴だ。

「2010 Weaver」と「Weaver」では、サブテーマを選択できるシステムになっているが、どちらも「Twenty Ten」をサブテーマに持っている。

「Weaver」のテンプレート構成や中身は、「2010 Weaver」から多少、変更されていた。

そのため、カスタマイズに関して、多少、悩んだ点もあった。

「2010 Weaver」同様に専用の管理項目を持っており、管理画面の「外観 -> Weaver Admin」からアクセスする。

ここではサブテーマを選ぶことが出来る。

1つのテーマでありながら、予め24種類のサブテーマが用意されており、様々なデザインが楽しめる点も、このテーマの魅力だ。

Weaver サブテーマの選択

このブログでは、シンプルな「Twenty Ten」をサブテーマに設定している。

「Main Options」では、PHPやCSSファイルを直接、変更することなく、デザインのカスタマイズが可能だ。

WeaverのMain Options

初心者でも簡単に、デザインのカスタマイズが楽しめ、直接、ファイルを編集する方法と違って、リスクも殆ど無い。

「Advaced Options」では、ヘッダーなど特定の領域にコードを追加できる。

WeaverのAdvanced Options

CSSやJavaスクリプなども、直接ファイルを編集せずに簡単に組み込むことが可能だ。

以上のように「Weaver」は、初心者から上級者まで、使いやすい易いテーマである。

個人的にも「Weaver」は気に入っている。

このブログでは、過去記事においては、テーマが「2010 Weaver」の場合を例に、コードの挿入場所などを解説しているが、テーマが「Weaver」の場合も追記しておいた。

Posted in WordPress, ネット・PC | Tagged , , | Leave a comment

WordPressの中途半な404エラーを改善する

存在しないページがリクエストされた時に表示する、404エラーメッセージを用意しているサイトも多い。

404エラーメッセージ

「お探しのページが見つかりません。~」というヤツだ。

WordPressでも、404エラーメッセージは、用意されているのだが、その動作には少々難がある。

パーマリンクの設定でも、条件は変わってくるが、このブログに限って言えば、例えば、

http://www.near-mint.com/blog/?p=999

の様なアドレスの場合。

WordPressが処理できそうなアドレスだが、(少なくとも現時点では)存在しないページである。

この場合は、WordPressが用意した、404エラーメッセージが表示される。

対して

http://www.near-mint.com/blog/404message

の様に、WordPressで処理できなさそうなアドレスで、かつ存在しないページがリクエスされた場合は、WordPressが用意した404エラーメッセージは表示されない。

(別途、エラーメッセージを用意していないなら)単にブラウザのエラーメッセージとなる。

WordPressが用意した404エラーメッセージなのだから、WordPressが処理できるURLでなければ、表示されないというのは当然といえば、当然だが、統一感がないので、これを何とかしようと思う。

その前に、前者の場合は、404エラーメッセージが表示されてはいるが、本当にステータスコード「404」を返しているのかという疑問もあった。

ステータスコード「404」は、サーバーが返すコードで「ページが存在しない」という意味になる。

404エラーメッセージのページが表示されるか否かは別として、ステータスコード「404」を返し、サーバーが、明確に「ページが存在しない」事を伝えるのは重要である。

例えば、404エラーメッセージを表示しながら「リクエストが成功しました」の意味のステータスコード「200」を返しているなら、ブラウザはともかく、検索エンジンのエージェントなどは、ページが存在すると勘違いしてしまい、本当は存在しないページに対してクロールを繰り返すかも知れない。

挙句の果ての404エラーメッセージのページが、検索エンジンに登録されることになる。

ステータスコードを調べるには、「ステータスコードチェッカー」というサイトが便利なので紹介しておく。

存在しないURLを入力して、下の図ように「404」となっていれば、正しく、存在しないページとして通知されている。

ステータスコード404

WordPressが処理して404エラーメッセージを表示した場合も、正しく、ステータスコード「404」を返しているので問題ない。

今度は、WordPressの404エラーメッセージが表示されない後者の例にを解決するために「.htaccess」に

ErrorDocument 404 /blog/index.php?error=404

という1行を追加し、404エラーメッセージの指定を行い、対応することにした。

これで、WordPressが処理できるURLについては、WordPressが処理して404エラーメッセージを返し、それ以外のURLについては、「.htaccess」に従う。

「.htaccess」は、WordPressのインストールディレクトリに存在する筈なので、それを編集すれば良い。

エラーメッセージの指定は、「index.php?error=404」としているが、WordPressが用意しているものを流用した。

パスの部分は、自分の環境に合わせて書き換えること。

ちなみに、404エラーメッセージは、テーマの「404.php」で生成しているので、これを自分のブログに合わせて書き換えると良い。

余談だが、ステータスコードを調べる際に、最初は、Telnetで80ポートを叩けば良いと思ったのだが、その時、初めて、「Windows Vista」ではTelnetコマンドが標準でインストールされていない事を知った。

コントロールパネルから、追加インストールする必要がある。

Posted in WordPress, ネット・PC | Tagged , | Leave a comment

WordPressで省略表示時の「Continue reading」を「続きを読む」に変更

WordPressでは、カテゴリ別、月、日付別、タグ別、検索結果等の画面は、記事が全文表示されるのではなく、省略表示になる。

WordPress 記事の省略表示

「Continue reading」をクリックすると全文表示されるのだが、どうも「Continue reading」という表現は頂けない。

そこで「続きを見る」に置き換えることにした。

ちなみのこのブログのテーマは、「2010 Weaver 1.5.4」である。

まず、テーマのテンプレート「loop.php」の中に

<?php the_content( __( 'Continue reading <span calss="meta-nav">&rarr;</span>', TTW_TRANS ) ); ?>

<?php ttw_the_content_featured( __( 'Continue reading <span calss="meta-nav">&rarr;</span>', TTW_TRANS ) ); ?>

と言う記述があったので、「Continue reading」の部分を「続きを読む」に置き換えて見たが、結果は上手くいかない。

どうもIF文で分岐しているようなので、直前の関数が怪しい。

そこで、テーマのテンプレート「2010functions.php」を調べたところ、

function twentyten_continue_reading_link() {
 return ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span>&rarr;</span>', TTW_TRANS ) . '</a>';
}

と言う記述があったので、「Continue reading」を「続きを読む」に置き換えてみたところ、これで上手く行った。

「loop.php」での変更がどこで効いているのかは分からなかったが、とりあえず、変更した状態のままにしている。

・補足

テーマ「Weaver 1.7」では、「テーマのための関数(functions.php)」の

function weaver_continue_reading_link() {

の部分のみを変更すれば良い。

管理画面の「外観 -> Weaver Admin -> Main Optiins」の「Continue reading Message」でも変更できるが、ここで変更すると、省略を表す文末の「…」が消えてしまう。

・補足

現在、日本語表示の問題に関しては、*.po、*.moファイルを編集して対応している。

多言語化をサポートするテーマでは、この方法が最も適しており、テーマのアップデートの際も、(表示項目が変わるような変更がない限り、)*.po、*.moファイルをアップロードし直すだけで対応できる場合が多い。

Posted in WordPress, ネット・PC | Tagged | Leave a comment

多機能ツールバー「Wibiya」をWordPressに導入

Wibiya」とはブログやHP向けの多機能ツールバーを提供するサービズである。

ブラウザの表示領域の一番下に表示されため、邪魔にならず、最小化することも出来る。

wibiyaツールバー

「Wibiya」ツールバーには、様々な機能を追加することができ、サイトに合わせた機能が提供できる。

登録の際に、サイトの言語として日本語を選択できるので、日本語のサイトへの設置にも対応していると思われるが、全ての文字コードで問題ないかは不明。UTF-8でしか試していない。

従来は、ウィジェットの形態や、コードの形態で、個別に追加する必要があった検索機能、メールフォーム、共有ボタン、チャットと言ったアプリケーションを簡単に、一括で追加出来る。

wibiya Contact Form

多言語への翻訳アプリケーションも用意されている。

wibiya iTranslation

「AddThis」、「ツイート」ボタン、Facebookの「いいね」ボタンなどソーシャルメディアに関連したアプリケーションも豊富だ。

wibiya SmartShare

これら豊富なアプリケーションに中から、自分のサイトに適したものを自由に選択できる。

デザインの変更やアプリケーションの追加、設定は管理画面から行う、残念ながら管理画面は日本語化されていない。

wibiyaの管理画面

管理画面では、統計情報も用意されている。

ただし、統計情報では日本語は文字化けしてしまう。

アプリケーションのラベルや代替テキストは、本来英語だが、殆どのアプリケーションでは管理画面で日本語に変更することも可能だ。

wibiya Contact Formの管理画面

WordPressへの導入は、プラグインを利用して行えるため簡単だ。

「Wibiya」の管理画面からもダウンロードできるが、「Wibiya Toolbar」で検索すると直ぐに見つかる。

ツールバーの追加が完了したら「外観 -> Wibiya Configuration」で「Wibiya Toolbar Path」を入力する。

「Wibiya Toolbar Path」は、「Wibiya」の管理画面の「Edit Toolbar -> Install Again」で、導入先のサービスを選択すると表示される。

「Wibiya」は、豊富な機能を、ブログやHPのデザインを損ねずにスマートに追加できるので、これだけで完結できると言った印象のツールである。

また、これら豊富な機能を一元管理できるというメリットも大きい。

Posted in WordPress, ネット・PC | Tagged , , , , , , | Leave a comment

WordPressのヘッダを変更してフィードをカスタマイズ

お気に入りのブログの更新をフィードを購読して確認している人も多いだろう。

実際、ブログを参照して更新の有無を確認するのは面倒だ。フィードは、ブログの訪問者にとって便利な機能である。

WordPressも様々なフィードを吐き出している。

WordPress Ver.3.0.4が吐き出しているフィードの形式は、

  • RSS 2.0
  • RSS 0.92
  • Atom
  • RDF/RSS 1.0

の4つである。

ヘッダーの「<link rel=”alternate” type=”application/rss+xml”~」タグでは、「ブログタイトル  »  フィード」、「ブログタイトル  »  コメントフィード」が記述してある。どちらもRSS 2.0形式。

デフォルトのフィード

WordPressでは、コメントのみのフィードも吐いている様だが、正直、これは余計だ。

そこで、「<link rel=”alternate” type=”application/rss+xml”~」を好みのものに置き換えることにしたが、テーマの「ヘッダー(header.php)」では、見た限りどうすることも出来ない。

フィードに関しては「/wp-includes」ディレクトリ以下のfunctions.phpやfeedで始まるファイルなどに関連する記述があるようだが、私のPHPの知識では、手も足も出ない。

そこで調べてみると、テーマの「テーマのための関数(functions.php)」に記述を追加して、ヘッダーから「<link rel=”alternate” type=”application/rss+xml”~」を消す方法があることが分かった。

ちなみに、このブログのテーマは、「2010 Weaver 1.5.4」である。

テーマの「テーマのための関数(functions.php)」の最後の

?>

の直前に

remove_action('wp_head', 'feed_links', 2 );
remove_action('wp_head', 'feed_links_extra', 3);

の2行を追加した。

これで全てのページのヘッダーから「<link rel=”alternate” type=”application/rss+xml”~」の記述が無くなった。

誤解がないように書くが、フィードを吐かなくなった訳ではない、フィードは吐いてはいるが、そのURLがブラウザなどからは見つけられなくなっただけだ。

後は、テーマの「ヘッダー(header.php)」に好みの「<link rel=”alternate” type=”application/rss+xml”~」を追加するだけだ。

追加場所は、

</head>

の直前が良いだろう。

なお、本ブログを例とすると、各フィードのURLは下記のようになる。

フィード(記事)
RSS 2.0:http://www.near-mint.com/blog/?feed=rss2
RSS 0.92:http://www.near-mint.com/blog/?feed=rss
Atom:http://www.near-mint.com/blog/?feed=atom
RDF/RSS 1.0:http://www.near-mint.com/blog/?feed=rdf

または、

RSS 2.0:http://www.near-mint.com/blog/wp-rss2.php
RSS 2.0:http://www.near-mint.com/blog/wp-feed.php
RSS 0.92:http://www.near-mint.com/blog/wp-rss.php
Atom:http://www.near-mint.com/blog/wp-atom.php
RDF/RSS 1.0:http://www.near-mint.com/blog/wp-rsd.php

フィード(コメント)
RSS 2.0:http://www.near-mint.com/blog/?feed=comments-rss2
RSS 0.92:http://www.near-mint.com/blog/?feed=comments-rss
Atom:http://www.near-mint.com/blog/?feed=comments-atom

または、

RSS 2.0:http://www.near-mint.com/blog/wp-commentsrss2.php

このブログのテーマ、「2010 Weaver 1.5.4」には、「外観->2010 Weaver->Advanced Options」にタグをヘッダーに追加する機能があったので、header.phpを直接、編集するのは止めて、この機能を使うことにした。

ヘッダーにフィードを設定

以上の様に、分かってしまえば、簡単な作業で置き換える事ができる。

カスタマイズ後のフィード

このブログでは、RSS 2.0、Atom形式のフィードに絞って公開することにした。

Posted in WordPress, ネット・PC | Tagged , , , , , | 2 Comments

WordPressに「AddThis」、「AddToAny」、「ShareThis」、「AddClips」を設置する

このブログには、ソーシャルブックマークへ登録や、SNSへの投稿を助けるソーシャルボダンを設置している。

これらのボタンからは、簡単な操作で、ページをブックマークに追加したり、Twitterでつぶやいたり、FacebookのNewsfeedに投稿したり出来るので、ユーザーにとっては利便性が高く、管理者にとっては、ソーシャルメディアを利用したマーケティングの手助けになる。

現在では、ブログに限らず、多くの商用サイトが、この様なソーシャルボタンを設置している。

この記事を書いている段階では、評価中のため、様々なボタンを設置しているが、不要なものは整理する予定だ。

という事で、今回は、ソーシャルボタンについてまとめてみた。

・AddThis

AddThis」は、国内のサービスではないが、50以上の言語に対応し、300を超えるサービスに対応している。日本語にも対応しているので、日本語サイトにも導入し易い。

ユーザー登録を行えば、ユーザーの利用状況などを知ることが出来る統計サービスも利用できるが、ソーシャルブックマークなどに登録する際のURLに解析のためのパラメーターを付加するめ、本来のURLで登録できず、あまり好きではない。

逆に、統計が不要なら、ユーザー登録無しで利用できる。

様々なボタンが用意されており、コードの変更によって独自にものを作成する事も可能。コードの発行も簡単だ。

addThisの様々なボタン

WordPressの場合は、コードを手作業でテーマに追加する必要はなく、「AddThis」というプラグインを追加すれば良い。

管理画面の「プラグイン->新規追加」から「AddThis」で検索すれば、容易にインストールできる。

しかし、このプラグインを利用した場合、ソーシャルブックマークなどに登録する際のURLが、前述のパラメーターが付加されたURLになってしまうため、プラグインの利用はやめ、コードを直接追加する事にした。(新たにリリースされたVer.2.0.0では、usename、passwordが未入力ならURLにパラメーターが付加されない。)

メニューのウィジェットにテキストとして追加しただけなので、コードの追加は簡単だった。

記事の中に挿入したい場合は、もう少し複雑になるが、その説明は、別のサービスの解説の中で行う。

「AddThis」では、サービス別のボタンが配置できる他、マウスオーバーで、様々サービスにアクセスできるウインドウが開く。

AddThis ボタンの動作

「もっと見る」をクリックすれば、更に多くのサービスを表示するウインドウを開くことも可能。

対応サービスが多いのが特徴だが、これだけ多いと、逆に使い勝手が悪い。

APIも公開されているので、腕に覚えがあれば、厳選したサービスだけを表示するようなボタンも作成できるが、実際にやっている強者がいた。

AddThis ソーシャルブックマーク登録ボタンのカスタマイズ

・AddToAny

AddToAny」は、「AddThis」と類似したサービスだ。

対応言語、対応サービスも豊富で、日本語にも対応している。

また、「AddThis」と比較して、表示するサービスの選択が簡単に出来るようになっている。

WordPressには「AddToAny: Share/Bookmark/Email Button」というプラグインが用意されているので、導入には、これを利用すれば簡単だ。

共有ボタンの他、RSS用のボタンも用意されている。

AddToAnyの様々なボタン

マウスオーバーで開くサービス一覧のウインドウは、タブで分類されているので、多少は、使い勝手が良い。

AddToAny サービスの一覧

もっと多くのサービスを表示する場合も、このウインドウで完結でき、新たにウインドウを開く必要もなく、操作性も悪くない。

機能とは関係ないが、アイコンのデザインのせいか、地味に見えるのが玉にキズだ。

・ShareThis

ShareThis」も上記2つの類似サービスだが、対応サービスは少なく、日本語にも対応していない。

特徴を上げるなら、他のサービスにはない視覚的効果のあるボタンを持っている事だろう。

ShareThisの様々なボタン

と言っても、よく見かけるデザインのものだが、少なくともTwitter、Facebook用の共有ボタンを個別に作成する手間は省ける。

WordPressへの導入は、「ShareThis」というプラグインがあるので、これを利用する。

インターフェース自体は使い勝手が悪い物ではないが、日本語表示ではない。

ShareThis 対応サービス一覧

メニューは日本語で表示されないが、共有操作で、サービスへ渡した日本語が文字化けすることはない、ただし、UTF-8以外の文字コードでは試していないので、SJIS、EUCでは、化ける可能性もある。

・AddClips

AddClips」は、国産のサービスであり、対応するサービスも日本で好んで使われるものが選択されており、日本語サイトには使い勝手が良い。

はてなアカウントかLivedoorIDがあれば、統計機能付きのコードも選択できる。

ブックマーク用とRSSリーダー用のボタンが用意されているが、付加する機能は別途設定できるので、いずれを選んでも構わない。

AddClipsの様々なボタン

ボタン上をマウスオーバーすることで、サービスの一覧が開く。

AddClip 対応サービス一覧

ブックマーク、RSSの両方の機能を選んだ場合は、タブで分けて表示されるので、使い勝手は良い。

日本の環境によく適しているので「AddClips」だが、WordPressへの導入は若干面倒である。

プラグインは用意されていないので、テーマのテンプレートにコードを追加する必要がある。

※2011/4/17 当ブログで公開中のプラグイン「EZ zenback」のHTML、Javaスクリプト機能を利用すれば、コードの追加は簡単になる。

なお、追加位置は、バージョンやテーマによって異なる場合がある。このブログの「2010 Weaver 1.5.4」である。

個別の記事の先頭に表示したい場合は、まず「単一記事の投稿(single.php)」の

<?php ttw_the_content_featured_single(); ?>

の直前にコードをコピーする。

続いて、トップページやカテゴリ別、日付別などのページでも表示させるために、loop.phpの

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

の直後にコピーする。これで、カテゴリ、日付、タグ別など、記事が省略表示になる画面でも表示される。必要がない場合は省略して構わない。

さらに、もう一箇所

<?php ttw_the_excerpt_featured('post-thumbnail'); ?>

<!-- .entry-summary -->

<?php else : ?>

の直後にもコピーする。これでトップページなどへ反映される。

「AddClips」以外のサービスで、直接コードを貼り付ける場合も、上記と同様の作業を行えば良い。

————————————————————

・補足

テーマ「Weaver 1.7」では、「単一記事の投稿(single.php)」の

<?php weaver_the_content_featured_single(); ?>

の直前と、loop.phpの

<?php weaver_the_excerpt_featured(); ?>

<?php weaver_the_content_featured(); ?>

の直前に追加する。

————————————————————

4つのサービスを紹介してきたが、個人的には「AddThis」と「AddClips」の印象が良い。

面白ところでは、複数の共有ボタンサービスに対応した「WP Socializer」というプラグインも存在する。

様々なソーシャルボタンの他、「AddThis」の共有ボタン、「Google Buzz」の投稿、フォローボタン、リツイートボタン、Diggボタン、Facebook「いいねボタン」、Facebook共有ボタンなどのボタンの追加が、これ1つで出来る優れものである。

実際に試してみたが、私の環境では、このプラグインを有効にするとフィードが異常を起こしたため、現在は使用していない。

ブログ、HPもソーシャルメディアに対応させた方が面白いので、この手のボタンを1つは用意しておくと良いだろう。

Posted in WordPress, ネット・PC | Tagged , , , , , , | Leave a comment

「メイリオ」をブログのフォントとして指定する

このブログを構築する際に、初めて試みた事がある。

それは、CSSでにフォントの指定に「メイリオ」を加えたことだ。

今まで構築した他のサイトでは、その様な事をした経験が無かったが、最近は、フォントとして「メイリオ」を指定しているサイトも増えて来た。

「メイリオ」とは、Windows Vista以降のマイクロソフトのOSに標準搭載されている日本語ゴシック体フォントで、可読性の高い美しい書体が特徴である。

下に様々なフォントサイズでの表示例を上げる。

メイリオ 書体例

このフォントは、ClearTypeの使用が前提となっており、アンチエイリアスを効かせることで滑らかな書体を実現している。

逆にアンチエイリアスが効かない環境では、美しさが失われる。

特にフォントサイズが小さい場合に不利になるだろう。

「メイリオ」はマイクロソフトのOS、しかもVista以降で標準搭載されたフォントであるため、MacやUnix系のOSの場合は勿論、Windows XPなどの古いOSには標準では搭載されておらず、「メイリオ」の恩恵は受けられない。

当然、CSSには、別のフォントも指定してある。

しかし、英数字も含む「メイリオ」を最も優先順位が高いフォントとして指定してあるため、「メイリオ」を搭載したPCであれば、英数字も「メイリオ」で表示されている筈だ。

アルファベットなどは、英文フォントで表示したいならば、本来は「メイリオ」より先に「Arial」などを指定すべきであろう。

Windos 7、Windows Vistaユーザーでなければ恩恵がない「メイリオ」ではあるが、もし、OSがWindows XPならば救いがある。

マイクロソフトは、Windows XP用の「メイリオ」を無償提供している。

インストールしていないなら、この機会に、ぜひ、試して欲しい。

Windows XP 向け ClearType 対応日本語フォント

個人的には「メイリオ」が好きなので、CSSで「メイリオ」を指定しているサイトが増えると有難い。

・補足

日本語サイトの場合、最近は、以下のようにCSSで設定している。

* { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif; }

決まりはないので、好みに応じて設定すれば良い。私の場合、末尾に英文フォントをもう少し付け加える場合もある。

WordPressで構築されたサイトの見ていると、テーマのフォント定義、そのまままのサイトも少なくない。

CSSで日本語フォントが定義されていないと、私のように日本語でないPCを使っている場合、美しくないフォントが使われ見栄えが非常に悪くなる。

WordPressの場合は、「テーマ編集」からスタイルシート内のフォントの定義を修正する。

Posted in WordPress, ネット・PC | Tagged , , | Leave a comment

WordPressに「zenback」を導入する

zenback」は、自動的に記事を解析し、関連性の高い記事やソーシャルメディアの反応をブログに表示してくれるブログパーツだ。

zenback

「Movable Type」などで知られる「Six apart」が提供している。

今回は、ブログのカスタマイズの一環として、この「zenback」を導入した。

現在、数多くのソーシャルメディア関連のツールが存在するが、その殆どが海外のものであり、必ずしも日本の状況に即したものであるとは言えない。

ソーシャルメディアのシェアにしても、国によって大きな違いがあり、日本も特殊な事情を抱えている。

「mixi」の存在もその1つであるし、日本では「Facebook」のシェアが低いこともそうだ。

対応するソーシャルメディアの数を謳ったツールも少なくないが、これらは、必ずしも使い易いとは言い難い。選択肢が多い分、使い方を誤ると逆効果になる。

その点、「zenback」は、けして高機能とは言えないが、魅力的な機能を提供してくれるツールと言える。

機能的には「LinkWithin」に類似しているが、対応するサービスも日本の事情を意識したものになっているので使い勝手が良い。

まず、「zenback」は、ブログに「ツィート」、「はてなブックマーク」「mixiチェック」、「Evernoteサイトメモリー」、Facebook「いいね!」といったソーシャルボタンを提供してくれる。

ソーシャルボタンについては、正直、強力とは言えないが、あまり数を求めるより、これくらいの方が使い易いかもしれない。

しかし、「zenback」の真骨頂は、ソーシャルボタンではない。

「zenback」は、記事を解析し、

  • 関連キーワード
  • 関連記事
  • 関連リンク
  • Twitter(での言及)
  • はてなブックマーク(への登録)

を自動的に抽出し、一覧表示してくれる。

「関連キーワード」の項目では、記事から主要なキーワードを抽出し、表示する。また、キーワードをクリックすると、そのキーワードを含む「zenback」ユーザーの記事の一覧が表示される。

これは外部へのアクセスを促す機能とも言えるが、逆に言えば、同じキーワードを持つ外部の記事からの訪問を促す機能でもある。

「関連記事」では、自分のブログ内の関連性の高い記事を抽出、一覧表示してくれる。これには、自ブログ内での動きを活性化する効果があるだろう。

「関連リンク」では、関連性のある「zenback」ユーザーの記事を一覧表示してくれる。これは外部へのリンクであるが、自分の記事へのリンクも同様に、どこかの「zenback」ユーザーの記事に表示される可能性がある。

「Twitter」では、記事に対して言及したツィートを一覧表示してくれる。「はてなブックマーク」では、「はてなブックマーク」への登録状況を知ることができる。これらは、記事への反響を知る需要な指標になる。

すべての機能を使うと、ブログパーツとしては、かなり場所を取る類のものになるので、短い記事をたくさん投稿するスタイルでは、アンバランスになるかも知れない。

導入も簡単と言いたいところだが、実は、一癖ある。

「zenback」では、1つのアカウントで、複数のブログ用のコードを発行できるようになっている。

zenback 新規ブログを追加

設定画面も至ってシンプルだ。

zenback 設定

「WordPress」への導入は、単純に、発行されたコードをテンプレートに貼り付けて行う。

※2011/4/17 当ブログで公開中のプラグイン「EZ zenback」を利用すれば、「zenback」の導入が簡単になる。

コードを貼り付ける場所は、使用しているテンプレートやWordPressバージョンによっても異なってくる。

このブログの場合、テンプレートは「2010 Weaver 1.5.4」。コードは「単一記事の投稿(single.php)」というテンプレートに貼り付けた。

<!-- #content -->

の直前に貼り付け、先に導入した「DISQUS」コメントシステムの直後に「zenback」が表示されるようにしている。

もし、コメントより、先に「zenback」配置するなら、

<!-- #nav-below -->

の直後に貼りつけても良い。

以上で、コードは導入できたが、「zenback」を活かすためには、これだけでは不十分で、関連記事の精度を上げる「zenbackタグ」をテンプレートに追加する必要がある。

まず、「単一記事の投稿(single.php)」というテンプレートの

<?php the_title(); ?>

という部分を

<!-- zenback_title_begin --><?php the_title(); ?><!-- zenback_title_end -->

に変更する。

続いて

<?php ttw_the_content_featured_single(); ?>

という部分を

<!-- zenback_body_begin -->
<?php ttw_the_content_featured_single(); ?>
<!-- zenback_body_end -->
<!-- zenback_date  -->

に変更する。

これで作業は完了だが、やや厄介だ。

プラグインの形で導入出来れば有難いところだ。

記事の投稿後、解析が完了し、実際に表示が開始されるまでに若干の時間を要するが、それも許容の範囲だ。

—————————————————————-

・補足1

テーマ「Weaver 1.7」でも、「単一記事の投稿(single.php)」の同様の場所にコードを貼り付ける。

「zenbackタグ」の追加は、

<!-- zenback_title_begin --><?php weaver_post_title(true); ?><!-- zenback_title_end -->

<!-- zenback_body_begin -->
<?php weaver_the_content_featured_single(); ?>
<!-- zenback_body_end -->
<!-- zenback_date  -->

と言った具合になる。

・補足2

テーマ「Weaver 2.0」を例に説明するが、「<!– zenback_title_begin –>」と「<!– zenback_title_end –>」タグの挿入場所は、「単一記事の投稿(single.php)」よりも、「テーマのための関数(functions.php)」に、下記の例の様に挿入した方が、余分な<a>タグを除外でき、純粋にタイトルのみがマークアップされるため、精度上も良いと思われる。

<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', WEAVER_TRANS ),
the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><!-- zenback_title_begin --><?php the_title(); ?><!-- zenback_title_end --></a>

上記の場合、意図しないページにもタグが挿入されるため、あまり良くないかもしれない。

Posted in WordPress, ネット・PC | Tagged , , , , , , | 7 Comments

高度なコメントサービス、「DISQUS」をWordPressに導入する

このブログでは、万年筆や革製品などの私にとって愛おしいモノたち、こだわりの製品、優れたツールなどについて語って行こうと思う。

新規にブログを立ち上げるにあたって、今回は「WordPress」を選択した。

以前は、「Movable Type」なども使ったことがあったが、今更「Movable Type」でもないし、使った事がないものを使ってみたかったという気持ちも、「WordPress」の選択を促した。

「WordPress」は、SQLサーバーが必須となり、多少の面倒もあるが、殆どのレンタルサーバーが、SQLサーバーを標準機能として備えているので問題ない。

「WordPress」と言えども、素の状態での利用は厳しい。色々とカスタマイズが必要になるが、ソーシャルメディアを意識したカスタマイズを行いたいと考えていた。

また、以前から、どうしても導入したかったサービスがあった。

それが「DISQUS」である。

「DISQUS」は、ブログのコメント機能にあたる部分のみを提供しており、「WordPress」にも導入できる。

自身が管理する複数のブログやHP上に投稿されたコメントを独立して一元管理できると言うサイト運営上のメリットもあるが、「DISQUS」の場合、コメントする側にとっても同様のメリットがある。

他のブログに投稿したコメントも、そのブログへアクセスすること無く、「DISQUS」上で一元管理できるのである。

「DISCUS」によって提供されるコメント欄では、「DISCUS」アカウントでログインしてコメントする以外に、Twitter、Facebook、OpenID、Yahoo!のアカウントでもログインが許されている。

勿論、ゲストとしてコメントを投稿を許すことも出来るが、登録ユーザーとして投稿した方が色々と面白い。

登録ユーザーのプロフィールでは、「フォロー」機能が提供されている他、自身のTwitterやFacebookのIDなども表示され、従来のブログのコメント欄とは比較にならない程、投稿者の顔が見えてくる。(当然、これを嫌う方も少なくないだろうが・・・。)

TwitterやFacebookのアカウントを持っているなら、コメントを共有することも可能だ。その他のサービスとの連携も出来る。

「DISQUS」では、登録ユーザー同士で、ちょっとしたソーシャルネットワークが構築できる仕組みになっている。

ユーザー同士のコミュニケーションを意識してか、返信が分かりやすいスレッド型のコメント欄を採用しており、Ajaxを用いることで、コメント投稿時にページの再読込が発生せず、スムーズは投稿が可能となっている。

特徴やメリットをまとめてみた。

  • (投稿されたもの、投稿したものを含めて)複数のサイトのコメントが一元管理できる。
  • 様々なサービスのアカウントでログイン出来る。
  • 外部サービスとの連携。
  • 投稿者同士でソーシャルネットワークの構築ができる。
  • ブログやサイトではなく、むしろコメントの投稿者に光を当てるシステムになっている。
  • ゲスト投稿を許可することで、従来の様な匿名性の高い投稿も可能。

これだけ面白そうな「DISQUS」を使わない手はない。

ただし、問題もある。「DISQUS」が提供するコメント欄自体は、日本語に対応しているが、その管理画面が日本語に対応していない。

英語の画面を見ながら、登録、設定、管理を行うことになる。

「DISQUS」のアカウントを作成したら、プロフィールの設定で、「DISQUS」と連携する外部サービスを設定しておくと便利だ。TwitterとFacebookでは、コメントを共有できる。

アバターも登録しておいた方が良いだろう。

プロフィールの設定は、主として投稿者としての設定になるが、自身のブログやサイトのコメント欄の設定も必要になる。

サイトの設定で重要な部分は、「General」というタブに集中している。

出だしに下記のような設定項目がある。

  • Twitter@Replies・・・コメントをツィートした場合のリプライ先となるTwitter ID。
  • Disable Like Buttons・・・Likeボタンを表示しない。
  • Media Attachments・・・画像、動画の添付を許可する。
  • Trackbacks・・・トラックバック機能を追加する。
  • Akismet・・・スパムフィルタ「Akimet」を有効にする。要API Key。
  • Reactions・・・記事への言及を外部サービスから探し、表示する。検索対象のサービスを指定する。
  • Display login buttons with comment box・・・外部サービスのIDでのログインを許可する。ログインを許可するサービスにチェックする。
  • Who Can Comment?・・・コメントを許可する条件。「Anyone」の場合、ゲスト投稿が許可される。

 

下の方を見てゆくと言語とタイムゾーンの設定がある。

更に下には、FacebookのAPI Keyの設定項目がある。

DISQUS サイトの設定 Facebook API Key

Facebookにログインした状態で、「Click here to get one」をクリックすると、Facebook上で、アプリが自動的に作成され、API Keyが入力される。

作成されたアプリは、下記で参照、修正、削除できる。

http://www.facebook.com/developers/

以前は、Facebookでのログインを許可する場合の必須入力項目だったが、現在は、自分で作成したアプリを経由させない限りは必要ないのかもしれないが、テストしていないの詳細は分からない。

他にも設定項目はあるが、ここまで設定しておけば、通常は問題ない。

続いて「WordPress」への組み込みを行う必要があるが、「プラグイン」の形で提供されているので、難しくはない。

プラグインは、サイトの管理画面の「Install」からダウンロードできるが、「WordPress」の管理画面から「Disqus Comment System」で検索したほうが早いかもしれない。

プラグインを有効にしたら、後は指示に従って設定すれば良い。

ちなみに、一覧にないサービスや一般のサイトに「DISQUS」を組み込む場合は、「Universal Code」を使うが、コード中の「var disqus_shortname = ‘example’」の「example」をサイト登録時に設定した「short name」で置き換えてから使うこと。

実物が、この記事の直ぐ下に表示されているので、そちらを見て欲しい。

Posted in WordPress, ネット・PC | Tagged , , , , , | 64 Comments