Home > WordPress

WordPress Archive

ページ送りをかっこ良くする:WP-PageNavi

WordPressのデフォルトのページ送りは、前のページと次のページがそれぞれ1ページずつ表示されるというもの。個別記事のページならそれでもいいと思いますが、トップページやカテゴリ別ページが全部で何ページあるのか分かったり、直前または次以外のページにもジャンプできたりするのがこの「WP-PageNavi」です。

インストールは一般的なWordPressのプラグインと同じく、ダウンロードしてフォルダをアップロードし、管理画面でプラグインを利用開始するのですが、それだけでなくテンプレートの書き換えが必要になってきます。

WP-PageNavi 2.31 のUsage Instructionsにはfooter.phpに指定したPHPのコードを埋め込むように書いてありましたが、私の場合これではうまくいきませんでした。現在のテーマでは本文部分が白背景、その外側が黒背景となっていますが、私が使っているテーマのfooter.phpは黒背景の部分のようで、footer.phpの最初にコードを埋め込むと、白背景と黒背景をまたぐようにページナビゲーションが表示されてしまい、元々あった(あるいは、今使っているテーマで埋め込まれている?)ページナビゲーションも消えないのです。

なので、以下は私が使っている「ligneous」というテーマ限定かもしれませんが、以下のようになりました。

コードを埋め込むのはテーマエディタのアーカイブ (archive.php :月ごと、カテゴリごとの記事)、メインインデックスのテンプレート (index.php :トップページの表示)の2つ。<div class=”navigation”>と指定している部分に入れました。

以下の太字にした「<?php if~」という部分が埋め込んだコードです。さらに、元々あったページ送りのリンクはコメントアウトしています。


<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<!-- wp_pagenaviを入れるため、代わりに消す
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
-->
<br style="clear: both" />
</div>

次に、スタイルシートで見た目をいじります。スタイルシートはプラグイン解説にある通り、「/wp-content/plugins/wp-pagenavi/pagenavi-css.css」にあるので、ローカルでテキストエディタを使っていじり、FTPでサーバにあげました。これが管理画面でできるようになると良いなあと思います。

デフォルトでは、ジャンプできるページのリンク色が#0066cc(青色)なのでこれを置換します。ここでは、このテーマでポイント的に使っている#ff4666(ピンク)にしました。

見た目は、このブログのトップページをずずっと一番下までスクロールしてみてください。「Page 1 of 4」(10月17日時点)に続いてページごとのリンクがついていると思います。

WordPress.com Stats導入で引っかかりやすい2点のポイント

アクセス解析:WordPress.com StatsとUltimate Google Analyticsで書いたように、WordPress.com StatsとUltimate Google Analyticsという2種類のアクセス解析を導入しました。

後者のGoogle Analyticsは特に問題なく動くようになったのですが、WordPress.com Statsはいつまで経っても解析結果はゼロのまま。WordPress.com Statsの方が結果の反映が早いはずなのに、なんでだろう? と数日間悩んでいました。結局原因は、私が英語の解説を斜め読みしていたせいだったのですが、2点ほど引っかかったのでそれについて書いておきます。

statsフォルダではなくstats.phpをプラグインディレクトリに入れる

インストールの説明にも書いてあるのですが、ダウンロードできるstatsというフォルダではなく、その中にあるstats.phpというファイル1つだけをプラグインディレクトリに入れます。

statsというフォルダを入れても、管理画面でプラグインを有効にできますし、ダッシュボードにも解析ウィンドウが現れたりする(実際は、解析結果はいつまで経ってもゼロのままなのですが…)ので、気づきにくいです。

WordPressのプラグインでは、このようにphpファイル1つだけをプラグインディレクトリに入れるものと、フォルダごとアップロードするものとの両方があるので、ちゃんと説明を読んでどちらなのか確認することが必要です。

<?php wp_footer(); ?>タグをフッターに埋め込む

上記のようにプラグインを入れ直し、再度有効にしても、まだ統計が出てこないので、しばらく悩んでいました。

このプラグインのFAQページに書いてあるのですが、「<?php wp_footer(); ?>」というタグを</body>タグのすぐ前に入れないといけないそうです。これ、どうしてFAQではなくインストール方法のところに書いてないのかなあと思いますが…

これは私の環境の場合、管理画面で「デザイン>テーマエディタ>フッター」のところに</body>タグがありましたので、その前に上記のタグを書き込んだら、やっと動き出しました。

Dagon Design Sitemap Generatorで人間向けサイトマップを作成

Dagon Design Sitemap Generator」というプラグインを入れてサイトマップを作成しました。これは以前入れた「Google XML Sitemaps」とは異なり、検索エンジンではなく人間向けのサイトマップを作成するものです。

早速作成してみましたが、あくまでもカテゴリ単位のサイトマップを作るページ。○年○月といった単位でのまとめはできないようです。なお、日付処理は海外仕様で「10月11th」みたいになっていたので、日本仕様に直しました。設定画面で「(Y/n/j)」と指定しています。

ブログの投稿だけではなく、ページ(このサイトならば、AboutContactなど)も含めて両方あるいはどちらかだけを表示するのを選択できますし、また投稿とページのうちどちらを先に表示するか選択できます。

最初は、sitemapという名前のページ(パーマリンクが http://blog.yuco.net/sitemap/ となる状態)を作ったのですが、なぜかプレビューまではできるのにページを作成すると、アクセスしても404 not foundになってしまい、うまく作成できませんでした。いろいろ試した結果、他の名前のページは作成できるので、先に作ってあった検索エンジン向けのsitemap.xmlと衝突したのかもしれませんが、よく分かりません。パーマリンクをarchivesにしたら作成できました。

Amazonプラグイン:Amazon Reloaded for WordPress

WordPressのAmazon対応プラグインを探すと、多数見つかってどれを使うか迷ったのですが、結局WordPress公式サイトで紹介されている「Amazon Reloaded for WordPress」にしました。解説は英語ですが、日本のAmazonにも対応しています。インストール後、設定画面で自分のアソシエイトIDを入力して、どの国のAmazonを使うか(日本のほか、カナダ、ドイツ、フランス、イギリス、アメリカから選べます)を選択します。なので、日本とアメリカのAmazonアソシエイトを併用というのはできません。

このプラグインを入れると、エントリを投稿する画面にAmazon検索ボックスが出てきて、検索結果をクリックすると画像のみ、またはタイトルのみのリンクをつけたものをHTML化してテキストボックスに入力してくれます。プラグインによっては、独自のタグをテキストボックスに投稿するものもありますが、そういうのを使うとそのプラグインをずっと入れ続けなければいけないので、将来プラグインを使うのをやめたとき、あるいはプラグイン作者がWordPress本体のアップデートに追随するのをやめて使えなくなったときなどに不安が残ります。

Amazonが公式に提供しているような、画像が小さくてAmazonボタンだけが大きく目立つのはデザイン的にいやだったので、このプラグインはシンプルなのが気に入っています。画像とタイトルだけで、その他の価格とか出版社とかレビューの星の数のような細かい情報は出力できません。これは好き好きでしょう。個人的にはそういう表示も選択できる方が良かったかな…とも思いますが、まあシンプルでいいやということで。

画像の大きさは大中小の3種類から選択できます。万波麻希のエントリで使ったのは中サイズの画像です。大だと以下くらいの大きさになります。これいろんな意味で凄いですね。紅白歌合戦ではありませんよ。

楽天アフィリエイトとYahoo!ショッピングアフィリエイトの表示

少し前ですが、このブログで楽天アフィリエイトとYahoo!ショッピングアフィリエイトを利用してみました(楽天の例Yahoo!の例)。

両者の生成するHTMLはあまりきれいではないようで、Markup Validation Serviceでエラーが出まくります。このブログ内でも、これらのアフィリエイトHTMLを含まないページだったらエラーが出ないのですが…。

商品画像に文字を回り込ませるために、商品画像を<div class=”photo”></div>で囲んでいます。先に追加した携帯対応プラグインで、携帯からアップした画像にこのタグをつけてCSSを追加して回り込ませているので、それを流用しています。

Yahoo!ショッピングアフィリエイトでは、Yahoo!IDでログインしていれば、リンク生成ページですぐさまアフィリエイトリンクが作れます。仕組みは非常に単純で、リンク先と画像のURLをユーザーが指定すれば、その画像で指定したリンク先URLにジャンプさせるアフィリエイトリンクHTMLを生成しています。画像のURLは、例として「http://shopping.yahoo.co.jp/photo.gif」なんてのが出ていますが、 普通にECサイトの商品ページを見て、商品の画像URLを抜き出すなんて一般の人ができるのかなあ? と不思議に思ったりもしました。

ちなみにこの作業は、firefoxを使っていれば、画像の上で右クリックして「画像のURLをコピー」すれば画像URLをクリップボードに出力できます。

楽天アフィリエイトでは、商品名で楽天内を検索できて、検索結果に現れるボタンを押すと商品への画像入りリンクHTMLを生成してくれます。Yahoo!ショッピングアフィリエイトもせめてそのくらいした方がいいのでは…。と思いました。

また、Yahoo!ショッピングアフィリエイトでは、生成するアフィリエイトリンクHTML内に、1*1サイズの画像をトラッキングのために埋め込んでいます。このブログで利用しているCSSが、img画像には全て枠をつける処理をしているせいで、その画像が大きい四角になって表示されてしまうという問題がありました。そこで、トラッキング用imgタグにクラス指定し、このクラスでは枠をつけないCSSを追加して処理しました。

以下が追加したCSSです。


/* ----- Style for Yahoo! Shopping Affiriate ----- */
img.ysa_hidden {
margin:0;
padding:0;
border:none;
}
/* ---------- */

以下がアフィリエイトリンク内に埋め込まれているトラッキング用imgタグですが、太字にしたクラス(ysa_hidden)を追加して対応しました。

<img Src="http://atq.ad.valuecommerce.com/(省略)" height="1" width="1" border="0" class="ysa_hidden">

さらに、画像回り込みのために追加しているCSSは以下の通りです。wordpress用プラグイン「Ktai Entry」で紹介されているものと同じです。


/* ----- Style for Ktai Entry ----- */
.photo {
padding-right:6px;
float:left;
line-height:110%;
font-size:0.85em;
text-indent:0;
}
.photo img {
background:white;
margin:0 4px 4px 0;
padding:3px;
border:1px solid #999;
}
.photo-end {
clear:left;
}
/* ---------- */

携帯対応:Ktai Style(閲覧&管理)、Ktai Entry(携帯メールで記事投稿)

WordPressの携帯対応プラグインを2つ入れました。携帯からブログの閲覧と簡単な管理ができる「Ktai Style」と携帯メールでエントリーを投稿(いわゆるモブログ)ができる「Ktai Entry」です。

Ktai Style

まずKtai Styleをインストールして、このブログを閲覧。さらに管理画面にログインして簡単な管理はできることを確認しました。エントリの編集や新規投稿などはできるが、新規カテゴリの作成はできないようです。

ブログツールによって、携帯からの閲覧画面はいろいろありますね。例えば、tDiaryやはてなダイアリーはブログのトップページを携帯で見たときに最新の1日分の投稿が表示され、古いエントリを読みたい場合は1日分ずつさかのぼる必要があります。最新のエントリを見たい場合はいいのですが、過去ログを見たい場合は一覧性にやや欠けます。ライブドアブログやアメブロは新しいエントリから順にタイトル一覧になっています。確かエキサイトブログは両者の折衷型で、最新エントリが本文を含めて少し読めて、その下は古いエントリのタイトル一覧になっていたはずです。このKtai Styleは最後のタイプです。

また、このブログにはメールフォームがありますが、携帯からもメールフォームの送信ができました。しかし、届いたメールは文字化けして読めないので、メールフォームのページに携帯から送信しないように書いておくことにしました。もちろんPCから送信したメールはちゃんと読めます。たぶん、文字コードの問題などがあるのでしょうが、よく分かりません。

Ktai Entry

さて、Ktai Entryの方は、インストールは普通のプラグインよりは少し手間がかかります。

動かす方法は、

  • 外部メールボックスに随時アクセスの場合
  • メール着信時に投稿スクリプトを起動させる場合

の2つが紹介されていますが、後者はレンタルサーバではまず無理とのことなので、前者の方法を選びました。指示通りに作業を進め(丁寧に書いてあってありがたいです)、gmailに投稿用の新しいアカウント(推測されにくいもの)を作り、そのアドレスに以前携帯で撮った写真を投稿したのがこのエントリです。

投稿の反映は即時にはされず、10分ほどかかりました。設定で、POP3読み込み間隔が15分となっているからですね。もっと短くもできますが、このくらいにしておきます。ただしブログに誰もアクセスしないと、15分以上経っても読み込まないようです。このブログなら http://blog.yuco.net/wp-content/plugins/ktai_entry/retrieve.phpにアクセスすれば手動で読み込めるようですが、私の携帯(P905i)からアクセスしようとすると「無効なデータを受信しました」と出てアクセスできません。

このプラグインは非常に多機能で、メール本文にさまざまなコマンドを書くことによって、投稿日時、公開ステータス、カテゴリ、スラッグ(URL)などを決められるが、たくさんあって覚えきれないので、下書きにする場合だけ覚えておきます。メール本文のどこかに「DRAFT」と書けば、投稿されない下書き状態になります。DRAFT は行頭に書き、かつその行にのほかの文字列を書いてはいけない。これで、ブログネタにしたい写真を撮った時はとりあえずブログに送信して下書きに置いておき、あとで家に帰ってPCに向かったときに、ゆっくり編集できると思いました。

また、メールに添付した画像の右側にテキストを回り込ませるために、<div class=”photo”></div>で画像を囲み、CSSを追加しています。

アクセス解析:WordPress.com StatsとUltimate Google Analytics

このブログのアクセス解析をしてくれるプラグインを2種類入れてみました。

一つはWordPressの管理画面でアクセス解析を見ることができる「WordPress.com Stats」で、もう一つはjavascriptのコードを人力で埋め込まなくてもGoogle Analyticsが使えて細かく設定できる「Ultimate Google Analytics」です。

Ultimate Google Analytics

Ultimate Google Analyticsはいろいろ設定ができるのですが、よく分からないのでトラッキングIDだけ設定してあとはデフォルトのままにしています。設定のうち「Ignore logged on users」というのはログインしたユーザー(=管理者)は無視するという意味だと思いますが、便利な機能です。デフォルトではチェックが入っているので無視になっていますが、チェックを外して管理者も含めログを取ることもできます。

「Factory Settings」というボタンがあったので押したら、トラッキングIDがクリアされたので「工場出荷時の設定=初期設定に戻す」という意味だということが分かりました。WordPressは英語のドキュメントが多いので、英語の勉強をする動機になるのもなかなか良いと思っています。

WordPress.com Stats

WordPress.com Statsは、解説によると、このプラグインとGoogle Analyticsを一緒に入れたりしても特に衝突や不具合は生じないとのこと。ログの反映はWordPress.com Statsの方が早いそうですが、Google Analyticsの方が細かく解析できると思います。

WordPress.com StatsはAkismetと同じくインストール時にwordpress.comのAPI Keyが要求されます。

(以下、2008/10/3追記)インストールの際、stats.phpだけをプラグインディレクトリに入れることが必要です。statsというディレクトリごとアップロードしてはいけません。statsというディレクトリをアップロードしても、管理画面でプラグインを有効にできますし、アクセス解析のダッシュボードも表示されるようになるのですが、いつまで経ってもアクセス数がゼロのままです。

Google Analyticsでもアクセス履歴が表示されるようになった後も、WordPress.com Statsの解析結果がゼロのままなので、どうしてかなあと悩んでいて、この失敗に気づきました。

検索エンジン対策:Google XML SitemapsとAll-in-One SEO Pack

検索エンジン対策として、「Google XML Sitemaps」と「All-in-One SEO Pack」の2つのプラグインを入れました。

Google XML Sitemaps

インストール

Google XML Sitemapsの方は、インストールの解説に「sitemap.xmlとsitemap.xml.gzを作る」と書いてあって、どうやって作るのか書いていなかったのですが、単にこういう名前の空のファイルを作れば良いようです。その後、インストールマニュアルにある通りwp-config.phpがあるディレクトリにアップロードして、属性を666にします。その後指示に従って管理画面でよしなに設定することで先ほどの空のファイルに書き込まれ、ちゃんと動きました。

検索エンジンへの登録

サイトマップは作るだけではなく、検索エンジンに登録しないといけないようです(登録方法についてのGoogleの説明)。とりあえず、GoogleとYahoo!に登録しておきます。

Googleについては、ウェブマスターツールを使ってこのブログのURLを登録しました。これが自分のサイトだということを証明するために、googleから提示されたランダムな文字列を含むMETAタグをテーマエディタを使ってテンプレートのヘッダー(header.php)に書き込み、サイトマップを登録します。

Yahoo!の方は、Yahoo! JAPANとは異なるYahoo.comのIDが必要です。Yahoo! Site Exprorerの投稿フォームから、ウェブサイト自体のURL、フィードのURL、サイトマップのURLの3種類を投稿しておきました。

All-in-One SEO Pack

All-in-One SEO Packには日本語版もあるのですが、このブログで利用しているWordPress本体の最新版2.6には対応していません。またプラグイン自体のバージョンも若干古いです。そのため、最初は日本語版を入れましたが管理画面が日本語化されず、またプラグインのアップデートを促す注意が出るので、本家英語版の最新バージョンを入れ直しました。

WordPressのプラグインが「日本語版」と呼ばれるとき、管理画面のメニューが日本語化されることだけを指しているのか、日本語版を入れないと日本語でブログを運営するときにプラグイン自体がうまく動かないのかよく分からなかったのですが、今回の場合は前者の意味のようです。管理画面に書いてあることを英語で理解できるのなら日本語版にこだわることはないのかも。

WordPressのデフォルト状態では、タイトル行が「ブログ名 » Blog Archive » 記事タイトル」になりますが、記事タイトルを先に、ブログ名を後にしたほうがSEO的に望ましいとされています。このプラグインでタイトル行を好きなように変更できますが、プラグインのデフォルト状態が「記事タイトル|ブログ名」となっていたので、こうしておきました。

そのほか、ブログの説明やキーワードなど、検索エンジンで上位に来てほしい単語を記入できるところがあります。現在WordPressのセットアップ中で、本来書きたいことはまだ書けていないので、ここはとりあえず空けておいて、ある程度内容を蓄積してから書くことにします。

Akismet導入とメールフォーム「Contact Form 7」設置

スパムフィルタのAkismetは設定画面のプラグインで「使用する」を選び、指示通りwordpress.comへ行きAPI Keyを取得してすんなり導入。

このAkismetフィルタが適用されるメールフォームのプラグイン「Contact Form 7(日本語訳)」(英語:wordpress.org内)を設置しました。私の場合は、Contactというページを作ってその中に置いています。

私は、デフォルトで用意されているフォームにURLの記入欄を追加しました。Akismetフィルタを追加したURL記入欄は以下のようになります。


<p>URL<br />
[text your-url akismet:author_url] </p>

WordPressのプラグインでやっかいなのは、同じ機能のプラグインがいくつもあり、「WordPress メールフォーム」などで検索しても、それぞれのインストール・日本語化レポートが数多く存在し、その中でどれを入れるのがいいのか分かりづらいことです。私も最初は別のメールフォームプラグインをインストールしていましたが、それはContact Form 7よりも機能が少なく、コードを改造しないと日本語の件名などが文字化けするものでした。

少なくとも現時点では、WordPressのメールフォームとしては、Contact Form 7はかなり良いものだと言えそうです。各国語に対応していますが作者は日本人なので日本語対応で問題が出ることはなさそうですし、Changelogを見るとまめにバージョンアップしているようですから。

いくつかテスト投稿してみましたが、名前、URL、メッセージなどに「viagra」という単語を入れると投稿できないのを確認しました。

お世話になりましたtDiary/WordPressに移行する理由

私は2002年からtDiaryというブログツールを利用してブログを書いてきました(diary.yuco.net)が、このたびWordPressに移行することにしました。

私がtDiaryを使い始めた当時は、ブログという言葉よりも日本では「Web日記」という言葉が定着していたとおり、日付単位で日記を書くのが一般的でした。tDiaryではpermalinkのURLは年月日をあらわす8桁の数字です。1日の中に複数のトピックで日記を書くことはできますが、1ページの中に複数の日記を書く形になります。コメントやトラックバックは、トピック単位ではなく日単位でつきます。

ちなみに、tDiaryを参考にして作られたはてなダイアリーも、当初は日付単位でしかコメントをつけられませんでしたが、その後、記事単位でのコメントも可能になり、現在は日付単位と記事単位でのpermalink、コメントが可能となっており、混乱した状態になっています。permalinkが分散するとブックマークも分散してしまうので、はてブでホッテントリに上がりにくいというデメリットがあります。

tDiaryには大きな特徴が二つありました。一つは日記本文の直下にコメント(ツッコミ)がつくことです。現在のブログツールでは当然の機能ですが、当時は先進的でした。当時はHTML手打ちで日記を書いたり、日記ツールを使うとしても、読者とのコミュニケーションの場としては日記とは別に掲示板を設けるのが一般的でしたから。もう一つは、言及されてリンクが貼られたときに一目で分かるリファラ表示機能でした。しかしその後、スパムリファラの増加(リファラそのものを偽造するタイプと、ブログを適当に拾ってきてリンクするスパムブログや、それに限りなく近い情報量の少ない「マッシュアップサイト」からのリファラとの両方)により事実上無効になりました。

tDiaryは、日付単位で「日記」を書きたいという人には便利だと思います。特定の日付に何を書いていたか調べたいという場合はURL直打ちで目的のページに到達できますし、たとえば毎年9月29日の日記に何を書いていたか一覧できる「長年日記」などの機能があります。また日記本文やコメントなどの保存データは全てテキストなので、インストールにデータベースを必要としない点もメリットのひとつです。

今まで何度かWordPressはインストールしてみたことがありますが、tDiaryから乗り換えるほどではないと考えていました。しかし、今後運営していきたいサイトの形態を考えたとき、日付にこだわらない日々の行動以外の文章を蓄積し、再利用可能な形にしたい。その為には記事が日付単位というのはどうしても具合が悪い、と考えるようになりました。さらに、カテゴリを親・子・孫カテゴリと3世代に分類できるのも、とにかく一つのブログに何でも文書を放り込み、適切に分類したいと考えていた私にとっては便利です。(もっとつまらない理由としては、ここ半年以上なぜかtDiaryのトラックバックを受ける機能が動かず、理由がわからないのでついに諦めたというのもあります)

また、WordPressはインストールも簡単で、検索ボックスがデフォルトでついており、投稿画面のHTMLエディタや下書き自動保存機能、管理画面で投稿した記事を一覧できることなどは書き手にとって非常に便利です。世界で最も使われているブログツールなので、デザインテンプレート(テーマ)が豊富なのも魅力です。

tDiaryを使うことは、プログラミングができない私にとってオープンソースプロジェクトの運営を覗かせてもらえるよい機会になりました。機能に関する提案に対して、それを受け入れるか却下するかという、開発者のたださんの考え方を読ませてもらうのは非常に参考になりました。初期からのユーザーだったので、開発者の方々との距離も近く、「こんな機能があったらいいな」「どうしてこういう風になっていないの?」「このプラグインを入れてみたが動かない」等の意見をブログに書くと、開発者の方が対応してくださったり、非常にお世話になりました。そんなわけで愛着のあるツールであり、移行は少し残念でもあります。tDiary開発者のみなさま、今までどうもありがとうございました。

Home > WordPress

Search
最近買ったもの
Banners

この日記のはてなブックマーク数
フィードメーター - blog.yuco.net

Return to page top