WordPress

WordPress: 外部リンクをtarget=_blankに

CATEGORIES WordPressby.yasu.tanaka16 Comments2009.12.10

Webサイトのユーザビリティーについての注意点として 「無闇に新規ウィンドウでページを開かない」 ということがありますが、Yahooにカテゴリ登録してもらうためには 「外部ドメインへのリンク」 は 「新規ウィンドウで開く」 必要があります。このYahooの基準は、気づかないうちに異なるドメインのサイトに誘導されることでのセキュリティー上の懸念から設定されていると考えられるのですが、サイト内の大量のリンクにすべてtarget=_blankを設定するのは手間がかかります。

そこで、「JQueryで外部へのリンクにtarget=_blankを指定」を作成したのですが、このままではWordpressに組み込むのが大変です。そこで、Wordpressのプラグインとしてまとめました。古い記事に掲載しているソースコードも動作しますが、はてなブックマークなどで指摘していただいた改善点などを反映しておりますので、以下のソースコードをご利用ください。

通常のWebサイトに組み込み用のコード

<script src="http://www.google.com/jsapi></script>
<script>
if(typeof jQuery === "undefined")google.load("jquery", "1.3.2");
</script>
<script language="JavaScript>
jQuery (document).ready( function () {
jQuery ("a[href^=http]").not("[href*="+location.hostname+"]").attr("target","_blank");
})
</script>

※4行目まではJQueryのライブラリの読み込みなので、既にJQueryを使っている場合は5行目からお使いください。

WordPressのプラグインのコード(下記ダウンロード版のプラグインをご利用ください。)

<?php
/*
Plugin Name: external_link_rewriter
Plugin URI: http://blog.elearning.co.jp/
Description: Modify target attributes of A-tags that link to external addresses
Author: Yoichiro Nishimura
Version: 2
Author URI: http://elearning.co.jp/
*/

function external_link_rewriter() {
wp_enqueue_script(‘jquery’);
echo <<<EOT
<script language=”JavaScript”>
jQuery (document).ready( function () {
jQuery (‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>
EOT;
}
add_action(‘wp_head’, ‘external_link_rewriter’);
?>

WordPress組み込み用のプラグイン
external_link_rewriter.zip

WordPressで、関連する投稿を表示する方法

CATEGORIES WordPressby.t.kuramitsu2 Comments2009.12.04

Blogの詳細ページを見ると、一番下に このブログで関連すると思われる他の投稿 と表示され、関連されると思われるこのブログ内の物が出るようになりました。
今回使用した物を公開しますので設定の参考になれば幸いです。

今回必要な物

WordPress Plugin:WordPress Related Post for Japanese
ダウンロードは以下のURLより
http://wppluginsj.sourceforge.jp/wp-jrelated/

Yahoo! JAPANのアプリケーションID

取得は以下のURLより (Yahoo! JAPAN IDが必要です。)
http://developer.yahoo.co.jp/

1.プラグインをインストールする。
WordPress Related Post for Japanese をダウンロード後、通常通りプラグインディレクトリに設置し、有効にするだけです。

2.Yahoo!JAPANでアプリケーションIDを取得する。
http://developer.yahoo.co.jp/
上記URLにアクセスすると、下の画像のようなページが表示されるので、赤枠で囲った箇所をクリックします。

yahoo1

Yahoo!デベロッパーネットワークのTOPページ

クリックすると、以下の画像のようなページが表示されるので、内容を記載して下さい。
※一度登録すると変更がきかないようなので、誤字脱字等に注意しましょう。

yahoo2

アプリケーションID登録画面

問題なければ、画面下部の確認をクリックし、先に進んで下さい。
問題なく登録が出来れば、以下の画像の通りアプリケーションIDが発行されます。

yahoo3

アプリケーションID発行画面

このアプリケーションIDを使いますので、コピーしておいて下さい。

3.Pluginの設定をする
WordPress の設定から JRelated をクリックして下さい。
以下の画像のようなページが表示されますので、コピーしたアプリケーションIDを
Yahoo!JAPAN WebサービスアプリケーションID の欄に貼り、Save Changes をクリックしてください。

Plugin 設定画面

Plugin 設定画面

4.待つ
関連記事が表示されるまで時間がかかるようなので、しばらくしてから確認してください。

以上の作業で、関連記事が出るようになります。時間がある方は試してみて下さい。

JQueryで外部へのリンクにtarget=_blankを指定という記事を昨夜投稿したのですが、Wordpressのプラグインに加工して欲しいとのお問い合わせを多数いただきましたので、さっそく作成致しました。はてなブックマークで「location.hostnameを使ったほうが簡潔に記述できる」と、ご指摘いただいた点を反映しております。ご指摘いただきありがとうございました。HTML自体を書き換えずにDOM上での変更だけでYahooの申請が通るかどうかという疑問もありますが、一旦このプラグインを組み込みYahooのカテゴリ登録に通るか試してみようと思います。

プラグイン: external_link_rewriter.zip

テストリンク(ドメイン外): http://www.google.co.jp
テストリンク(ドメイン内): http://blog.elearning.co.jp

ソースコード

<?php
/*
Plugin Name: external_link_rewriter
Plugin URI: http://blog.elearning.co.jp/
Description: Modify target attributes of A-tags that link to external addresses
Author: Yoichiro Nishimura
Version: 1
Author URI: http://elearning.co.jp/
*/

function external_link_rewriter() {
echo <<<EOT
<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
$(‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>
EOT;
}
add_action(‘wp_head’, ‘external_link_rewriter’);
?>

WordPress以外に設置される場合は、以下のソースコードをとの間に挿入すると動作します。

<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
$(‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>

前後の投稿へのナビゲーション

CATEGORIES WordPressby.yasu.tanaka1 Comments2009.11.23
前後ページへのナビゲーション

前後投稿へのナビゲーション

単一投稿ページ(1ページに1つの投稿だけ表示されているページ)の、前後ページへのナビゲーションをわかりやすくしてみました。もともと、投稿の末尾に表示されていたんですが、スクロールしないと見えないうえ、場所も分かりにくかったので、記事のトップに移動しました。書き換えたテンプレートはsingle.phpです。

WordPressテンプレ編集時の注意点

CATEGORIES WordPressby.yasu.tanaka13 Comments2009.11.22

WordPressは、わかりやすいソースコードで記述されていて、プログラマでなくてもある程度のカスタマイズを実現できます。今回は、非プログラマが犯しがちな2つの落とし穴について解説します。

1. 文字コードはUTF-8を使うこと。

WordPressのソースコードはUTF-8です。Shift-JISでも、euc-jpでもありません。UTF-8です。エンコードを間違えると、文字化けするだけでなく、重大なエラーが発生し、最悪の場合はWordpressの管理画面が利用できなくなってしまう可能性さえあります。ソースコードは必ずUTF-8で保存してください。

utf-8以外で保存→文字化け

utf-8以外で保存すると文字化け発生!

2. HTMLコメントでコメントアウトしない。

テンプレートから要素を削りたいことってありますよね。たとえば、投稿日時や、投稿者情報、コメント欄など。でも、要素を削るために、HTMLのコメントアウトを使うのは危険です。

<!–<?php the_title();?>–>

上記のソースコード、タイトルを表示させないことを意図していますが、どこが危険なのか分かりますか?HTMLのソースコードを見られたらタイトルがばれるというのも問題かもしれませんが、本当の問題は、the_title()の中でHTMLのコメントアウトが出力され得るということです。HTMLコメントは、入れ子構造に対応していません。そのため、the_title()がHTMLコメントを出力すると、以下のようになり、表示が崩れてしまいます。

<!– <!– title –> タイトル –>

こうなってしまうことを防ぐためには、PHPのコメントアウト、もしくは、if文を使った実行制御で対応しましょう。

単行PHPであれば//で十分。

<?php // the_title(); ?>

複数行のコメントアウトはif文を使うと便利。

<?php if(0){?>
この部分はHTMLに出力されません。
<?php } ?>

もちろん、PHPの複数行コメントアウトである/* */も使えますが、/**/も入れ子構造に対応していません。なので、if(0){}で囲ってしまうのが一番確実です。

この記事は、Wordpressのテンプレート編集時の注意事項というタイトルで書きましたが、これらの注意点は、PHPなどのWebアプリケーションのソースコード(特にview部分)を書き換える場合には汎用的に使える知識です。

WordPressにパンくずリストをつけてみた。

CATEGORIES WordPressby.yasu.tanaka1 Comments2009.11.22

WordPressにパンくずリストを表示するプラグイン を使って、SmartBrainの製品サイトにパンくずリストをつけてみた。ページ階層が深くなると、パンくずリストは必須ですね。

最近、9名のスタッフで、月に250ページ以上のWeb、blogを作って公開しています。過去のものを移植するのも含め、年内には、2,000ページに到達します。少ないスタッフで多くのページを量産できているのは、WordPressという便利なツールを利用しているのもありますが、大きな目標、理由があっての活動です。

突然ですが、私は、勉強のコツと、仕事のコツは似ていると考えています。勉強法と仕事法は同一と言っても良いぐらいです。私の勉強方法は、勉強方法を決めたら、方法論は大きく変えず、可能な限り多くの時間を投入することに集中する方法です。一見、要領がわるいようですが、とにかく時間を多く投入することです。努力した時間は、絶対裏切らないという信念を持っています。

たとえば英語を勉強する方法を書いた書籍やBlogはたくさんあります。その中から自分にあった方法論を決めます。また、成功談をまとめた文章を読み、自分が将来、どのような姿になりたいかイメージを明瞭にして、学習のモチベーションを上げます。方法論が決まり、モチベーションが上がったら、ひたすら「量」の追求をします。方法を決めたら、後は振り返らず、ひたすら時間を増やすことに専念します。時間と量を増やすことが最も肝要です。学習方法をコロコロ変えるより、毎日3時間、1年間で1,000時間かならず時間を当てることが重要です。究極の効率化、方法論を追求することも重要ですが、毎日コツコツ、学習を積み重ねることが、何よりも、もっとも効率の良い方法ではないかと思います。

学習を始めた直後(新しい仕事を始めた直後)も、様々な障害があり、なかなか勉強が進まなかったり、時間がとれなくなったりします。とにかく設定した目標「量」、きめた「時間」を達成することに集中します。質の向上は、量の増加があって初めて可能だと考えています。最初に、ライバル各社やお手本になる製品を徹底的に調べますが、そこにいくら時間をかけても、自社の製品は良くなりません。勉強法をいくら調べて改善したとしても、学習そのものの量が増えないことには、意味がありません。

私たちは、新しいeラーニング製品を作ったり、サービスを提供して、最終的なゴールとしては、すべての人にeラーニングを提供したい。人々が学びに熱中し、争いごとを忘れるほど、熱中させたいと考えています。学びは人間の本能の1つです。最高の学びの機会があれば、人類は、学びに熱中し、戦争に明け暮れることが減少すると信じて活動をしています。この目標達成のために、方法論を決定し、今は時間を当てること、量を増やすことに集中しています。

Blogは3ヶ月で、約200件の投稿をスタッフで力を合わせて書きました。スタートは、50件/月を目標としましたが、先月から75件/月まで、目標量が増加しています。アウトプットの量を増やすことで、自然にインプットの量を増やす必要があります。また、eラーニングについて真剣に考える時間が増えます。1年後には、1000件の記事が達成します。最高の記事を書くことよりも、毎日、コツコツ続けて、量を積み重ねることを1つの目標にしています。

現在、内容もバラバラ、質も決して最終的な目標には到達できていません。私たちがゴールとする「すべての人にeラーニングを!」という思いを伝えたり、eラーニングのすばらしさ、学ぶことのおもしろさを、このblogで伝えていければとおもっています。

blogだけではなく、webも大量に作成しています。PPT2Flash ProfessionalQuizCreatorDemoCreatorWebVideoAuthorPPT2MobileLectureMAKERなどのマニュアルを、オンラインマニュアルとして、急ピッチで作業をしています。FAQを、オンラインで公開する予定でしますので、上記製品だけでも、ページ数が、900ページあります。2009年11月中に全てを完成させるために、鋭意作業をしています。

創業から、まだ3ヶ月、みななで力を合わせ、WordPressという至高のツールを利用し、完了しただけでも、800ページ程度のwebを公開してきました。質や社会への貢献度を考えると、まだまだ改善、改善が続きます。改善は続きますが、毎日たゆまず、歩みを続け、決めた方法で量をこなすことで見えてくるもの、習得できるものがあると思っています。量が質を生み出すを信じています。

Webページに至らぬ事、改善すべきことが多数ありますが、お気づきの点、ありましたら、遠慮無くご連絡をいただければと思います。皆様の声を、迅速に反映して、目標である「eラーニングをすべてのひとに!」を実現させていきたいと、心から思い、スタッフ一同活動する毎日です。

wordpressでログインを必須にする方法

CATEGORIES WordPress, その他by.yasu.tanaka1 Comments2009.11.12

社内用だったり、会員制などの用途でWordPressを利用する場合、登録済みのユーザのみにコンテンツを表示させたい。なんてことはないでしょうか?
実際、調べてみても標準の管理画面でそんな機能はないし、プラグインも見あたりません。(調べ方が悪いのかも。。。)

と、いうことで力業ですが、WP2.8系のプログラムソースをちょっといじって実現する方法をまとめます。

利用するのは、WP標準関数群のis_user_logged_in()auth_redirect()
簡単に言うと、アクセスされたときにログインしているかどうかを判定して、ログインしていない場合は、管理画面のユーザ認証画面にリダイレクトするというもの。

では、実際にどこを書き換えればよいのか見てみましょう。
WordPressのプログラムを見てみるとルートディレクトリに”wp-blog-header.php“があります。中を覗いてみると次のようになっています。

if ( !isset($wp_did_header) ) {
$wp_did_header = true;
require_once( dirname(__FILE__) . ‘/wp-load.php’ );

wp();
require_once( ABSPATH . WPINC . ‘/template-loader.php’ );
}

そこで、ここに赤字で書いてある部分を追記します。

if ( !isset($wp_did_header) ) {
$wp_did_header = true;
require_once( dirname(__FILE__) . ‘/wp-load.php’ );

if (is_user_logged_in()){
}
else {
auth_redirect();
};

wp();
require_once( ABSPATH . WPINC . ‘/template-loader.php’ );
}

あとは、保存して、ファイルを差し替えるだけ!!

※今回の内容はプログラムを書き換える必要がありますので自己責任でバックアップをしてください。

WordPressをチューニング SQL表示プラグイン

CATEGORIES WordPressby.yasu.tanaka11 Comments2009.11.11

唐突ですが、Wordpressって重いですよね。機能はしっかりしてるし、拡張性もあるんだけど、性能だけはあまり評判がよくありません。こういうWebアプリで、性能が悪くなる原因はたいていDBアクセスにあります。ということで、どんなクエリを実行したか一目で確認できるプラグインを作ってみました。このプラグインを組み込めば、WordPressの実行に対する理解が進み、性能改善のヒントになると思います。

ダウンロード: db_logger

このプラグインを組み込んだあと、GETで db_logger=true を渡すと、WordPressの末尾にDBの実行履歴が表示されます。その後は、db_logger=falseを渡すまでデバックモードを継続します。このブログであれば http://blog.elearning.co.jp/?db_logger=true にアクセスすると、ログの表示が始まり、 http://blog.elearning.co.jp/?db_logger=false にアクセスするとログの表示がとまります。

※SQLの実行履歴を公開すると、セキュリティーホールを発見しやすくなってしまうので、”db_logger”の部分は変更できるようにしてあります。($logkey = ‘db_logger’; の部分を書き換える)。公開サーバに組み込む場合は必ずこの値を変更するようにしてください。

<?
/*
Plugin Name: DB Logger
Plugin URI: http://php7.jp
Description:
Version: -1
Author: よういちろう
Author URI: http://php7.jp
*/
$logkey = ‘db_logger’;
function db_logger($query){
$GLOBALS[‘query’][] = $query;
return $query;
}
function show_db_log(){
echo ‘<table border=1 bgcolor=white>’;
foreach($GLOBALS[‘query’] as $query)echo ‘<tr><td align=left>’.$query.'</td></tr>’;
echo ‘</table>’;
}
if(isset($_GET[$logkey])){
if($_GET[$logkey] == ‘true’){
$_SESSION[$logkey] = true;
}else{
unset($_SESSION[$logkey]);
}
}
if(isset($_SESSION[$logkey])){
add_filter (‘query’, ‘db_logger’);
add_action (‘shutdown’, ‘show_db_log’);
}

WordPressのアーカイブページでSEO

CATEGORIES WordPressby.yasu.tanaka8 Comments2009.11.10

このブログは、WordPressのinovというテンプレートを使って作成していますが、タグに対するアーカイブと、カテゴリに対するアーカイブが、単なる記事の羅列になっていて寂しかったので、少し改良してみました。下記設定例のヘッダー部分をご覧ください。WordPressでは、カテゴリやタグに対して説明(Description)をつけることができるので、その内容をタグアーカーブ、カテゴリアーカイブの先頭に表示しています。カテゴリやタグのページは特定キーワードに対する属性が強いため、これらのページからの固定リンクは、SEOに有効だと思います。

設定例
カテゴリ: PPT2Flash http://blog.elearning.co.jp/?cat=54
タグ: TOEFL http://blog.elearning.co.jp/?tag=toefl

ソースコード(archive.php)

if (is_category()) {
//printf( __(‘Archive for the &#8216;%1$s&#8217; Category’, ‘inove’), single_cat_title(”, false) );
$cat = get_category($_GET[‘cat’]);
echo $cat->description;
} elseif (is_tag()) {
//printf( __(‘Posts Tagged &#8216;%1$s&#8217;’, ‘inove’), single_tag_title(”, false) );
$tag = get_tag($_GET[‘tag’]);
$tag = get_term_by( ‘name’, $_GET[‘tag’],  ‘post_tag’ );
echo $tag->description;

この変更は、archiveページがあれば、ほとんどのwordpressテンプレートに適用可能だと思います。