PC系ポータルサイトASCII.jp様でWeb制作・開発などのコンテンツを配信するWeb Tools＆Tipsにて、LPO対策の記事を3回の連載で書かせていただいています。

完結編 第3回目はWordPressとMTに取り入れるLPOの実装方法について。

WordPress＆MTにLPOを導入しよう！

最終回は、ここで公開しているwordpressとmovabletypeのLPO対策プラグインを実装して簡易的なLPO対策を行う方法です。

このサイトでもwordpressプラグインの方を実装しています。

SEOやマーケティングの依頼でないお客様でも、少し効果があればきちんとしたLPOやマーケティングのお仕事にも繋がるんじゃないかなと思って最近はMovabletypeのものを実装する場合があります。

若干数字的には上がるので喜ばれると思いますよ。

連載終了しました

今回ASCII.jp様より連載のお話をいただき、分不相応ながら3回に渡って書かせていただきましたが、説明力や構成力が未熟で、情報を記事として公開するということがどれだけ難しいか大変勉強になりました。

自分のサイト以外で文章を公開することは初めてだったので本当に貴重な体験でした。声をかけていただいたASCII.jp様にも大変感謝です。

ブログ・LPO対策まで SEO・SEM使いこなしテクニック

西村 文宏

日本実業出版社 2007-11-27

おすすめ平均

以外と分かりやすいかも。

by G-Tools , 2009/02/09

以前作ったMT4(movabletype)のLPO表示モジュール「SearchKeyword」のwordpress版を公開します。

簡易的なLPOを実現するために、検索キーワードに応じて関連記事を表示させます。

wp-searchkeyword

LPOとは何か

検索キーワードに応じた内容で関連記事を表示させます。

LPOとは何か、どんなメリットがあるのかはこちらで触れています。

MT4で簡易的なLPO対策を実現するモジュール – delab

簡単なLPO対策の方法としてご利用下さい。

実際の動作を確認

MT LPO – Google 検索：1番目に表示されているリンクをクリック

今回の関連記事の取得には、検索キーワードを記事から検索して表示させるのではなく「Simple Tags」プラグインを使用しています。

関連記事表示の形成(表示数など)は管理画面の設定からお願いします。

Download

インストール

Simple Tagsプラグインを入れて有効化

single.phpの表示させたい位置にコードを入力

<?php wpSearchKeyword(); ?>

出力されるコード

<div class="entry">
	<h3>「キーワード」をお探しですか?</h3>
	<p>サイト内に「<strong>キーワード</strong>」に関連する情報が見つかりました。</p>
	<ul class="st-related-posts">
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
		<li>リスト4</li>
		<li>リスト5</li>
        </ul>
</div>

カスタマイズ

<?php wpSearchKeyword("<div class='entry'>", 3 ,"</div>"); ?>

• <div class="entry"></div>の代わりに前後にタグを入れる。
• 3 title属性(Hタグの数値)

WordPressサイト構築スタイルブック―デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック

おすすめ平均

サイト構築の

WordPressのカスタマイズにはお勧め

CMS初心者には難しい

今でも手放せません！

分かりやすいです。非常に助かりました。

by G-Tools , 2009/02/04

WordPressレッスンブック―ステップ・バイ・ステップ形式でマスターできる

おすすめ平均

カスタマイズを前提とする書籍では今のところベストな入門書

ゼロから構築し学びたい方にお勧め

by G-Tools , 2009/02/04

wordpress2.7にアップグレードした際、プラグイン”simple tags”が使えなくなっていたので新しく入れ直しました。

wordpress2.7の日本語版がでたことですし、ようやく2.7にアップグレードしました。

というのも、春くらいから空いてる時間に会社サイトのリニューアル作業をしてたんですが、あまりにも時間が経ちすぎて、2.7が出たのにまだ2.3だったので、この際全部アップグレードしちゃおう！と思い立ったのでしたｗ

会社サイトは全く問題なくスムーズに終わりましたが、なぜかここはテンプレートでエラーが出てる･･･。

エラー箇所を見ると、tag出力部分でエラーが出ていて、管理画面をよく見てみると「simple　tagsの替わりにsimple tagingを使ってね」と書いてある。

でも違うプラグインにするのも面倒なんで、一応制作者のサイトで見たら、ちゃんと2.7用のバージョンが出ていたのでそっちを入れて無事終了しました。

Simple Tags – Plugins for WordPress 2.3 – Extend management of tags – Simple and Powerfull | Here With Me

新しい2.7は管理画面がとてもきれいになっていて、これならノーマルのままお客さんに出しても大丈夫なカンジです(ｗ

しばらく忙しくて更新できていませんでしたが、また心を入れ替えて頑張ります。

slicehostでUbuntuサーバーを設定するまとめを書いている途中でしたが、旧サーバーのロリポの契約期間が終了ギリギリになってしまい、大急ぎだったので、まとめより先にSlicehostへ移転してしまいました（；^ω^）

ちょっと5時間くらいサーバーダウンしましたが、とりあえず無事に移転作業は終了しました。

スムーズに移行出来るように準備していましたが、Slicehostへの移行が終了して、ネームサーバーも切り替わったところでSSHが急に繋がらなくなったり、MysqlとRailsのインスタンス同時起動したらCPU180%になって動かなくなったり･･･結局もう一度リビルドして入れ直しました。家に帰ってきてから今まで5時間かかりました。くそぅ。

つまづきポイント

Ubuntuのまとめ記事書いてる途中からも、サーバー設定につまづいて何度もリビルドしました。今なら最速でLAMP＋α導入出来ます(苦笑)

Railsインスタンス起動時のメモリ消費量

一番手強かったのはRuby on Railsの設定とredmineの導入です。redmineは仕事用に公開しようと思っていますが、さっきメモリの消費量がハンパじゃなかったんで、こわいのでまだRuby on Railsは動かしてません。Mysqlを最適化して、RailsをApache+MongrelからMod_railsに変更する予定。

RedmineでMercurial使いたいので、あえてSubversionは導入しませんでした。あんまりサービス入れるとメモリが･･･。Wordperssはwgetで新規インストールしました。プラグイン・テーマは使用しているものだけをアップロードしたので、かなりスッキリ！

SSHでリモートログイン出来ないエラー

SSHで急にリモートログイン出来なくなる現象が何度かあったのですが、手順をみながらどの部分で繋がらなくなるのか確認しながら作業しても結局原因が判明せず。エラー内容を見るとSSHキーが一致しないって･･･さっきまで繋がってたんですけど(´ε｀；)

これはOOM Killerによるものと判明しました。[Slicehost] OOM Killer(Out Of Memory Killer)の対策で対策済みです。

一回ハマったポイントはローカルユーザーでログインしてSSHキーを作る作業をすること。

.htaccessの設置でサーバーエラーが出る

移転してからわかったのですが、UbuntuはApacheをインストールしてもMod_Rewriteが有効になってないのです。.htaccessを置くとサーバーエラーが出まくりで焦りました。

なんやかんやで、ようやく今のところ正常動作してるようです。

ただ、まだMysqlしか入れてない状態でCPUは90％超えなので、ちょっと不安。一番安いプランでメモリが256Mしかないのが辛いですね。

今回の内容も含めてまた次からUbuntuのまとめをバーチャルホストの設定から書いていきたいと思います。

WordPress投稿画面のクイックタグにあるinsdelを使うと、世界標準時間でタグが生成されますので、日本時間に修正しました。どこにも情報がなかった (※あったけど内容が消えてる) のであげてみます。

それと、insdelが必ずPタグで括られる問題を修正しました。

せっかく直したので活用するために、ins,delのデータタイム要素をCSSで表示させます。

ins delのdatetimeを日本時間に修正

とっても気になっていたのですが、Wordpressの投稿クイックタグを使ってinsdelを生成すると、投稿時間にずれが生じています。

生成される形式

<ins datetime="2008-06-01T10:10:39+00:00"></ins>

生成された形式を見るとわかりますが、日時表記は国際標準のISO 8601準拠しています。

datetime=”2008-06-01T10:10:39+00:00″一番最後の+00:00は、世界標準時間を表しています。投稿された時間は世界表時間に合わせているようです。

日本はGMT+09:00ですので、これに合わせて修正します。

修正箇所

wp-includes/js/quicktags.js 27行目

var now = new Date();
var datetime = now.getUTCFullYear() + '-' +
zeroise(now.getUTCMonth() + 1, 2) + '-' +
zeroise(now.getUTCDate(), 2) + 'T' +
zeroise(now.getUTCHours(), 2) + ':' +
zeroise(now.getUTCMinutes(), 2) + ':' +
zeroise(now.getUTCSeconds() ,2) +
'+00:00';

修正後

var now = new Date();
var datetime = now.getFullYear() + '-' +
zeroise(now.getMonth() + 1, 2) + '-' +
zeroise(now.getDate(), 2) + 'T' +
zeroise(now.getHours(), 2) + ':' +
zeroise(now.getMinutes(), 2) + ':' +
zeroise(now.getSeconds() ,2) +
'+09:00';

ins del タグがXHTML準拠するように内部を修正

insタグを使うと不正なXHTML形式になる問題も修正しました。

insは、その場所によってブロック要素としてもインライン要素としても使えるタグですが、Wordpressで記事として投稿すると、自動修正機能でインライン要素として判断されて、pタグで括られてしまいます。

例えば、こういう場合

<ins>
  <p>追記の内容</p>
</ins>

WordPressに投稿されると、自動修正されます。

<p>
   <ins>
     <p>追記の内容</p>
   </ins>
</p>

ブロック要素のinsをPタグが囲む形に修正されてしまいました。これは、設定の「不正な XHTML 構文を自動的に修正する」のチェックを外しても同じですので、内部のコードを修正しました。

修正箇所

wp-include\formatting.php 66行目

	$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr)';
 // 該当部分を書き換え
	$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|ins|del)';

	$pee = preg_replace('|<ins([^>]*)>|i', "<ins$1>", $pee);
	$pee = str_replace('</ins>', '</ins>', $pee);
	$pee = preg_replace('|<del([^>]*)>|i', "<del$1>", $pee);
	$pee = str_replace('</del>', '</del>', $pee);
 // if ($br) {　の前に上の4行を入れる
	if ($br) {

ins,delタグの要素をCSSで表示させる

せっかくinsに正しく要素がくっついてくるようになったので、それをサイトに反映させるために、CSSで要素を表示させます。

これは追記です。

insの要素となっているdatetimeをCSSのcontentプロパティを使って表示させています。

CSSはこんな感じで書いてます。

ins{
	display: block;
	margin: 10px 0;
	background: #EFEFEF;
	border: #999 1px dotted;
	padding: 10px 20px;
	text-decoration:none;
	}
ins:before {
 	display: block;
	content: "\8ffd\8a18  - (" attr(datetime) ")";
	text-align: left;
	font-size: 85%;
}

擬似要素を使っているのでIE6では「追記…」部分が表示されません。

対策として、本文との区別がつくようにボーダーで囲んでボックスで表示しています。

リニューアルにあたって、カテゴリとタグの役割を明確にするために、カテゴリ名の付け直し作業をしました。

たくさんの記事を、簡単にカテゴリ変更します。

カテゴリの付け直し

以前こちらの記事を読んで、いつかカテゴリを見直そうと思っていましたが、そのときが来ましたよ。

カテゴリとタグを上手に使い分ける : could

カテゴリをエントリタイプ・タグをキーワードに分類して、カテゴリとタグの役割を明確にするという考え方です。

新しいカテゴリ

Article

メインコンテンツです。本ブログのテーマであるWebデザインやWeb制作関連の記事が中心です。

Clip

リンクや情報系のBookmark的な記事です。

Review

紹介記事です。実際に使ってみたり買った物などについてエントリします。hreviewでタグ付け。

Work

制作した物や仕事についてエントリします。

Diary

日記・雑文です。

カテゴリの付け直し作業

さて、カテゴリが決まったところで、実際の作業に入ります。

記事が増えてくるとカテゴリを1記事ずつ付け直すのはめんどくさいので、カテゴリごとにやっちゃいます。

※作業の前に、今までのカテゴリのスラッグを控えておいてください。

1. 新規カテゴリを作成する
2. 投稿設定でデフォルトカテゴリをArticleに変更
3. Articleに変更したいカテゴリのチェックボックスを全て選択して「削除」

※次のカテゴリで繰り返す

簡単に出来ました。

次は変更された記事のURLを以前のURLに関連付けします。

リニューアルしました。デザイン以外の根本的なところから変更しています。

リニューアル関連の記事は順次更新していきます。

今回は、バージョンアップとプラグインについて

リニューアルの趣旨

今年に入ってから仕事がとーっても忙しくなってきて、こっちはずいぶん放置状態になってました。

Mootoolsの動作があやしくなってたのもどうにかしなければいけなかったし、いつの間にかWordpressのバージョンは2.5になってるし、また心機一転がんばろーということで、1週間程前からリニューアルの計画を立てていました。

内容

• wordpress2.2から2.5へのバージョンアップ
• プラグインの見直し
• Subversionを利用したバージョン管理の導入
• カテゴリの付け直し
• mootoolsからjqueryに変更
• 固定幅デザインを可変幅に

2.2から2.5へsubversionを使ってバージョンアップ

今回のバージョンアップからsubversionを使用することにしました。

こちらの記事を見てUpdating WordPress with Subversion(wordpressのsubversionプラグイン)入れたかったけどサーバーで対応していない様子だったので、eclipseのsubversionプラグインEclipse Subversiveをxampp環境で利用しています。

プロジェクト管理もできて便利…と言いたいとこですが正直まだ活用出来ていない感。

Eclipse Subversiveの導入とwordpressを管理する方法を後で記事にします。

作業内容

wordpressをバージョンアップする方法はいろんなサイトで書いているので細かいとこは省略します。

1. データバックアップ後にwp-contentフォルダとwp-config.php以外を削除
2. wordpress2.5の内容をアップロード
3. wp-admin/upgrade.phpにブラウザからアクセスして手順通り進むと終了

エラーも不具合も出なかったし、超簡単に終わりました。

プラグインの見直し

使えないプラグインを他の物に変更・削除、テンプレートで出来るところはプラグインを使わないことにしました。

Ultimate Tag WarriorからSimple tagsへ

tag付けが一番難航するかなと思ったのですが、意外に簡単に済みました。

Ultimate Tag Warriorの代わりにに使えそうなTagプラグインは色々ありましたが、シンプルな物より高機能な物が欲しかったのでSimple tagsにしてみました。

tagのインポート

編集 > インポート > Ultimate Tag Warrior

英語ですがstep1から進んでいくとtagがインポートされます。

タグの名前とスラッグを一緒にするよう推奨。日本語タグ使ってる場合、多少不具合が出てるみたいです。

Popularity Contestの導入

Popularity Contest | alexking.org

エントリの人気度をいろんな要素から点数付けしてリスト化してくれるプラグインです。

2.5に導入しようとすると重大なエラーが出てプラグインを有効化出来ませんでしたが、有効化する前にMysqlに直接テーブルを作成することで回避出来ます。

こちらのサイトを参考にしました。

WordPress 2.5: Popularity Contest が「重大なエラー」になる / 日本語表示できない

SQL

CREATE TABLE IF NOT EXISTS `PREFIX_ak_popularity` (
`post_id` int(11) NOT NULL,
`total` int(11) NOT NULL,
`feed_views` int(11) NOT NULL,
`home_views` int(11) NOT NULL,
`archive_views` int(11) NOT NULL,
`category_views` int(11) NOT NULL,
`single_views` int(11) NOT NULL,
`comments` int(11) NOT NULL,
`pingbacks` int(11) NOT NULL,
`trackbacks` int(11) NOT NULL,
`last_modified` datetime,
KEY `post_id` (`post_id`)
) ENGINE=MyISAM;
CREATE TABLE IF NOT EXISTS `PREFIX_ak_popularity_options` (
`option_name` varchar(50) NOT NULL,
`option_value` varchar(50) NOT NULL
) ENGINE=MyISAM;

※PREFIXは自分の環境に合わせて下さい。(例：wp_)

NucleusやMovableTypeでは簡単にできる概要表示が、Wordpressで手こずったので、メモしておきます。

プラグインを入れて、RSSとコメントと記事の概要を一定の文字数で抜き出せるようにしました。

Worpdressの概要の文字数を日本語でカウントする方法

記事に概要をその都度記述しているなら必要ないのですが、記述していない場合、本文から一定の文字数で概要を抜き出してくれる機能を使っていると思います。

Nucleusだと<%syndicate_description(文字数)%>で抜粋を表示することができます。

WordPressも、the_excerpt()では、概要が空欄だった場合は、55ワードで省略されます。

ただ、Wordpressの場合、ノーマルの状態で、うまく概要が表示されない不具合があります。

WordPressはもともと英語圏で作られたツールなので、日本語では利用できない処理方法を用いているためなのですが、抜粋処理の方法が、単語間のスペースを利用するワードカウントで処理されており、単語間の区切りがない日本語(マルチバイト文字)ではうまく抜粋できないということです。

調べたら、マルチバイトの問題を解消するためのパッチやプラグインがいろいろと出ていました。

コアファイルに手を加えると、バージョンアップの時に面倒なので、一番手軽そうなプラグインを入れてみました。

the_excerpt()で漢字も対応させるplugin | Tech de Go

このプラグインは、wordpressのthe_excerpt(), the_excerpt_rss(), comment_excerpt()の３つの関数をフィルターして、マルチバイト文字100文字（デフォルト）で省略の「．．．」を表示する。

mb_excerpt_pluginのインストール

ダウンロードしたら、拡張子を.txtから.phpに変更して、プラグインフォルダに入れて有効化するだけです。

抜粋文字数は、12行目位から設定します。

mb_excerpt.php

$mb_excerpt_word = 100; // 抜粋文字数
$mb_rss_word = 100;// RSS抜粋文字数
$mb_comment_word = 80;// コメント抜粋文字数

こちらで変更できます。

Mysql4.1以降は、PHPとの接続時に文字コードの自動変換機能の為文字化けする場合があります。

WordPressとNucleusで文字化けが発生した際にコアファイルを修正します。

Mysql4.1以上の文字コードの設定

最近仕事でもCMSツールを使ってサイト構築することがあります。

会社で使っているサーバーがMysql4.1なのですが、Mysql4.1以上だと、普通にインストールするとデーターベース側が文字化けするという問題が出てきます。

なぜなら、Mysql4.1以降は、PHPとの接続時に文字コードの自動変換機能が働くので、サーバー側の文字コードを勝手に変換してしまうんです。

サーバー側に文字コードが指定されていない場合、「laten1」などで出力されてしまうので、コアファイルを書き換えてエンコーディングを発行します。

Nucleusの設定 (nucleus3.3)

nucleus/lib/globalfunctions.php – 488行目に次の1行を挿入

$rtn = mysql_query("SET NAMES utf8" , $MYSQL_CONN);

nucleus/lib/globalfunctions.php

function sql_connect() {
	global $MYSQL_HOST, $MYSQL_USER, $MYSQL_PASSWORD, $MYSQL_DATABASE, $MYSQL_CONN;
	$MYSQL_CONN = @mysql_connect($MYSQL_HOST, $MYSQL_USER, $MYSQL_PASSWORD) or startUpError('Could not connect to MySQL database.', 'Connect Error');
	mysql_select_db($MYSQL_DATABASE) or startUpError('Could not select database: ' . mysql_error() . '', 'Connect Error');
       $rtn = mysql_query("SET NAMES utf8" , $MYSQL_CONN);
 	return $MYSQL_CONN;
}

07/09/14 訂正 – 正常動作確認しました。

WordPressの設定 (WordPress ME2.2.3)

wp-includes/wp-db.php – 78行目に次の1行を挿入

mysql_query("SET NAMES utf8", $this->dbh);

wp-includes/wp-db.php

function wpdb($dbuser, $dbpassword, $dbname, $dbhost) {
	return $this->__construct($dbuser, $dbpassword, $dbname, $dbhost);
}
function __construct($dbuser, $dbpassword, $dbname, $dbhost) {
	register_shutdown_function(array(&$this, "__destruct"));
	/* .........略     */
	mysql_query("SET NAMES utf8",$this->dbh);
	$this->select($dbname);
	}

これで文字化けが解消されました。

文字コードがUTF-8以外の場合は、ujis,eucに書き換えて下さい。