delab » plugin http://de-lab.com xhtml CSS SEO CMS PHP など Webデザイン WEBサイト構築の話題 Wed, 05 Oct 2011 23:41:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 wordpressで簡易的なLPO対策を実現するプラグイン http://de-lab.com/article/wordpress-plugin-searchkeyword/ http://de-lab.com/article/wordpress-plugin-searchkeyword/#comments Mon, 02 Feb 2009 08:18:52 +0000 sato http://de-lab.com/?p=505

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

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

wp-searchkeyword

20090130-163959

LPOとは何か

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

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

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

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

実際の動作を確認

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

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

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

Download

wp-searchkeyword (6971) ver.0.90

wordpressでLPO対策プラグイン

インストール

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タグの数値)
photo
WordPressサイト構築スタイルブック―デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック
おすすめ平均 star
starサイト構築の
starWordPressのカスタマイズにはお勧め
starCMS初心者には難しい
star今でも手放せません！
star分かりやすいです。非常に助かりました。

by G-Tools , 2009/02/04

photo
WordPressレッスンブック―ステップ・バイ・ステップ形式でマスターできる
おすすめ平均 star
starカスタマイズを前提とする書籍では今のところベストな入門書
starゼロから構築し学びたい方にお勧め

by G-Tools , 2009/02/04

]]> http://de-lab.com/article/wordpress-plugin-searchkeyword/feed/ 11 MT4で簡易的なLPO対策を実現するモジュール http://de-lab.com/article/mt-searchkeyword-lpo/ http://de-lab.com/article/mt-searchkeyword-lpo/#comments Tue, 19 Aug 2008 00:00:24 +0000 sato http://de-lab.com/?p=247

簡易的なLPO対策として使えるモジュールです。

このサイト(WordPress)で実装しているものを参考にしてMT用に作りました。

8月19日のMovable Type Developer ConferenceのLightning Talksのネタとして作成しています。


Movable Type Developer Conference終了

とーっても気軽な感じでLightning Talksに応募したんですが、MT関連の錚々たる方々ばかりで場違い感だしてました(笑)。

あまり大勢の前で話す機会がないので、マイクの前に立ったら頭真っ白→話の中身飛ばす→5分の話が4分で終わった（；^ω^）という結果になりました。

また機会があればリベンジしたいです！

MTの勉強になるお話をたくさん聞かせて頂き、ちょうどMTの案件もかかえていますので、これから色々作っていこうと思っています。

話の内容は下よりまとめてありますので御覧下さい。

今回「MT4で簡単なLPO対策のためのプラグイン」というタイトルで発表させて頂くつもりでしたが、

  • MTは業務でちょっとだけ
  • perlは初めてだ
  • 何日か勉強したけど1週間でMTでperlとPHPでプラグイン作るのは無理かも
  • でも簡単に実装できるものにしたい

なのでプラグイン化は今回断念して、テンプレートモジュールを作りました。

今までMTは業務でカスタムフィールドを使った案件があった位で、あまり深いところまで付き合ったことがなかったので、今回の制作で色々調べてみて勉強になりました。

特にMT4になってからはカスタマイズも簡単になってきていると感じました。今回間に合わなかったのですが、PHPでMTタグを使う方法も簡単だったので、そのうち何か作ろうと思います。

LPOとは

ランディングページ最適化=LPOといいます。

検索エンジンなどを経由してきたユーザが最初に見るウェブページをランディングページと呼びます。

ユーザが目的のページを探す場合、メニューやサイト内検索機能などが充実していない場合、ユーザは目的のページを探し出すことを諦めて他のサイトへと遷移してしまう行動が多く見られる。 そのため、他のサイトへと遷移させないように、ランディングページから目的のページへと簡単に遷移出来るように最適化することを言う。

ランディングページ最適化 – Wikipedia

LPO – どんないいことがあるのか

LPO対策をするとユーザーが欲しい情報を見つけやすくなるため、サイトの滞在時間が長くなり、直帰率が下がります。対費用対効果を改善する働きがあります。

このサイトでもやってますが、直帰率が70％から60％前後になりました。

LPO – 具体的にどんなことをするの？

それぞれの訪問者の違いに合わせてランディングページを動的に変更します。

ちゃんとやるとそれなりに費用がかかります。今回は、検索キーワードを利用した簡易的なものを作成しました。

このサイトで実装しているLPOモジュール

Googleで2ch firefox3を検索してこのサイトの記事をクリックすると、下のランディングページが出ます。

個別エントリのみで検索エンジン以外のユーザーには普通のページが出ます。

これはWordpressですが、MTでも同じような画面が出るようにします。

LPOモジュール [ SearchKeyword ]

検索エンジンからのアクセス(リファラ)が無いと本サーバーでテスト出来ない為、ローカル環境のみでテストしているので、とりあえずアルファ版とします。間違い・お気付きの点があればフィードバックお願いします。

関連記事を表示するプラグイン

DownloadableFiles: TagSupplementals-0.10.zip – Ogawa::Code – Trac

関連記事表示部分は既存のプラグインを利用させて頂きました。

あらかじめこちらのプラグインをインストールしておく。

テンプレートモジュール : SearchKeyword

名前はSearchKeywordで保存。

<?php
define("CHARACTERSET","UTF-8");

    function keyword($linkurl) {

	if (strpos($linkurl,".google.")) {
	    $str = eregi_replace(".+q=([^&]+).*","\\1",$linkurl);
	    $str = urldecode($str);
	    $str = mb_convert_encoding($str,CHARACTERSET,"UTF-8");
	} elseif (strpos($linkurl,".goo.")) {
	    $str = eregi_replace(".+MT=([^&]+).*","\\1",$linkurl);
	    $str = urldecode($str);
	    $str = mb_convert_encoding($str,CHARACTERSET,"EUC-JP");
	} elseif (strpos($linkurl,".yahoo.")) {
	    $str = eregi_replace(".+p=([^&]+).*","\\1",$linkurl);
	    $str = urldecode($str);
	    $str = mb_convert_encoding($str,CHARACTERSET,"UTF-8");
	} elseif (strpos($linkurl,".msn.")) {
	    $str = eregi_replace(".+q=([^&]+).*","\\1",$linkurl);
	    $str = urldecode($str);
	    $str = mb_convert_encoding($str,CHARACTERSET,"UTF-8");
	}

	$key = mb_convert_kana($str,"s");
	return $key ;
}

$key = keyword($_SERVER['HTTP_REFERER']);

if($key != ""){
	echo '<h3>', $key, '関連の記事が見つかりました</h3>';
?>
<ul>
<MTRelatedEntries lastn="5" offset="0">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTRelatedEntries>
</ul>
<?php }?>

表示部分を若干修正しました


Yahooの文字コードが違っていたようなのでeuc-jpからutf-8へ修正しました。

アーカイブページ > ブログ記事

表示させたい場所に下記を記述

<$mt:Include module="SearchKeyword"$>

Movable Type Developer Conference関連リンク

photo
基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books）
大藤 幹
毎日コミュニケーションズ 2008-09-20
おすすめ平均 star
starテンプレートの構造がよくわかります。
starMovable Type 4.2を使ったオリジナルスタイル開発者必見

by G-Tools , 2009/02/04

photo
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。
おすすめ平均 star
star内容量と値段のバランス
starこういう本を、本当に待っていた！！
star制作サイドに立った内容だ。
star制作意欲をかきたてられる
starプロとしてMovableTypeを使いこなすために

by G-Tools , 2009/02/04

]]> http://de-lab.com/article/mt-searchkeyword-lpo/feed/ 12 Eclipseからshellを実行するプラグイン Wicked Shellが便利 http://de-lab.com/article/eclipse-plugin-wickedshell/ http://de-lab.com/article/eclipse-plugin-wickedshell/#comments Thu, 22 May 2008 08:17:52 +0000 sato http://de-lab.com/?p=121

CakephpやsymfonyなどのFrameworkを使うと、コマンドプロントの作業が必要な場合が多々あります。

wicked shellを使うと、eclipse内でシェル操作できるので便利です。

eclipseからコマンド操作するプラグイン

最近勉強しているsymfonyやcakephpなどのFrameworkは、shellでページの自動生成したりする為、コマンドプロントを開いてxamppまでcdするのがとーっても面倒だったので、何か便利な物が無いか探したら、Eclipseのプラグインでshell操作できるものを見つけ、早速入れました。

インストール

  1. eclipse本体の ヘルプ > ソフトウエア更新 >
  2. インストールする新規フィーチャーを検索 > 次へ
  3. 新規リモートサイトに名前とURLを入れ、ステップに従ってインストールする
名前:
wicked shell
URL:
http://www.wickedshell.net/updatesite

設定

初期パスはワークスペースになっています。

設定 > wicked shellからC:\xampp\phpをカスタムディレクトリにして下さい。

]]> http://de-lab.com/article/eclipse-plugin-wickedshell/feed/ 0 リニューアル覚書 – 2.2から2.5へアップグレードとプラグイン関連 http://de-lab.com/article/blog-renewal/ http://de-lab.com/article/blog-renewal/#comments Thu, 15 May 2008 16:12:06 +0000 sato http://de-lab.com/?p=116

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

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

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

リニューアルの趣旨

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

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

内容

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

tagのインポート

英語ですが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_)

]]> http://de-lab.com/article/blog-renewal/feed/ 0 NP_MapBlogの設定 地図をまとめて表示する方法 http://de-lab.com/article/np_mapblog/ http://de-lab.com/article/np_mapblog/#comments Wed, 11 Jul 2007 17:20:58 +0000 sato http://de-lab.com/blog/nucleus/np_mapblog/

前回 NP_GoogleMapsの設定 で指定したGoogleMapsのポインターをGoogleMap上にまとめて表示するプラグインです。

NP_MapBlogの概要

item内で指定したNP_GoogleMapsのポインタを、GoogleMap上にまとめて表示するプラグイン。

表示するポインタは、アイテムまたはポイント数で指定する方法が選択できます。

ポイント数が多い場合は、ページ送りが表示されます。また、ブログによる絞込み、カテゴリによる絞込みが可能です。（NP_MultipleCategoriesの複数カテゴリ，サブカテゴリや、NP_TagEXによるタグにも対応）

NP_GoogleMapsをインストールする必要があります。

NP_MapBlogの設置

  1. ZIPファイルをダウンロードして、出来たフォルダをnucleus/pluginsにアップロードします。
  2. 管理パネル > プラグインの管理 から、Mapblogをインストールします。

skin/header.inc

......
<%GoogleMaps(HEAD)%>
<%parsedinclude(navigation.inc)%>

※default skin以外は、</head>内に記述。

skin/footer.inc　</html>の直前

......
<%GoogleMaps(SCRIPT)%>
</html>

※前回のやり方で、既に記述済みのはず

default/mapテンプレートを新しく作り、アイテムの本体に下記のコードを書く。 ( テンプレートの記述解説 )

default/map アイテムの本体内

<%MapBlog(START)%>
<a href="<%itemlink%>"><%title%></a>
<%MultipleCategories%>
<%MapBlog(INFO)%>
<%MapBlog(THUMBNAIL,100)%>
<%MapBlog(END)%>

Mapblogのスキンへの記述方法

表示したい部分に下記の記述 ( スキンへの記述解説 )

表示したい位置

<%MapBlog(mmap,10/i,,m(400|300|map|b/s/s|auto))%>

znItemFieldEXと連携した地図の表示

前回、znItemFieldEXと連携した方法をご紹介しましたが、Mapblogでも設定します。

管理画面TOPからBlogの設定に進む

NP_Mapblogの設定2

下の方にあるMapblogのオプション画面で、Points from templateに下記を記述

NP_NP_Mapblogの設定3

オプション > Points from template

jp[<:znItemFieldEX(add:>)]|yes|<:title:>
関連サイト
plugins:mapblog [Nucleus CMS Japan Wiki]
plugins:znitemfieldex [Nucleus CMS Japan Wiki]
]]> http://de-lab.com/article/np_mapblog/feed/ 0 NP_GoogleMapsの設定 http://de-lab.com/article/np_googlemaps/ http://de-lab.com/article/np_googlemaps/#comments Tue, 10 Jul 2007 09:51:21 +0000 sato http://de-lab.com/blog/nucleus/np_googlemaps/

NucleusでGoogleMapを利用した地図を表示するプラグイン、NP_GoogleMapsとNP_MapBlogの設置方法をご紹介します。

Nucleus Japanでも使用方法についての説明があります(plugins:googlemaps [Nucleus CMS Japan Wiki])が、情報を出しているサイトが少なかったため、正常に動作するまで少し時間がかかったので、Nucleus初心者向けに図入りで解説します

※default skinを例とし、個別ページにGooglemapを表示させます。

NP_GoogleMapsの設置

  1. まず最初にGoogleのアカウントとGoogle Maps API keyが必要です。Google Maps APIのページから取得してください。
  2. ZIPファイルをダウンロードして、NP_GoogleMaps.phpとgooglemapsフォルダをnucleus/pluginsにアップロードします。pearフォルダをnucleus/libsの下にアップロードします。
  3. 管理パネル > プラグインの管理 から、GoogleMapsをインストールします。プラグインの管理内のGoogleMaps – 編集でGoogle MapsのAPIキーと、Flickrの写真を使う場合はAPIキーを入れます。Google MapsのAPIキーはブログごとにも設定可能です。

skin/header.inc

<%GoogleMaps(HEAD)%>
<%parsedinclude(navigation.inc)%>

※default skin以外は、</head>内に記述。

skin/footer.inc </html>の直前に記述

<%GoogleMaps(SCRIPT)%>

記事の投稿時に地図を表示させる

記事の投稿で、地図を表示させたい部分に下記の記述。

<%gmap(inline,p(jp[東京都港区芝公園4-2-8]|yes|東京タワー),m(400|300|map|xs/none/none|3))%>

(インライン表示｜住所｜マーカー有),(地図幅｜地図高さ｜地図タイプ｜MAPコントロール｜ズームレベル)

※記述の参考 : アイテムへの記述 – googlemaps [Nucleus CMS Japan Wiki]

znItemFieldEXと連携した地図の表示

※znItemFieldEXでaddフィールドに住所が入っている場合

管理パネル > テンプレートの編集 > default/item – 編集 > アイテムの本体の表示させたい部分

<%GoogleMaps(inline,p(jp[<:znItemFieldEX(add):>]|yes|< :title:>),m(400|400|map|b/s/s|2))%>

記事の投稿時に、拡張フィールド内に住所情報を入れる

NP_GoogleMapsの設定-znItemFieldEX

これで個別エントリーに地図が表示させるようになります。

長くなりましたので、NP_MapBlogの設定は次のエントリで

]]> http://de-lab.com/article/np_googlemaps/feed/ 2 WordPressとNucleusの記事本文から文字数で概要を抜粋する方法 http://de-lab.com/article/wordpress_excerpt/ http://de-lab.com/article/wordpress_excerpt/#comments Thu, 05 Jul 2007 08:17:35 +0000 sato http://de-lab.com/web/wordpress_excerpt/

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;// コメント抜粋文字数

こちらで変更できます。

]]> http://de-lab.com/article/wordpress_excerpt/feed/ 1