WordPressで携帯専用サイトを作るときに悩んだこと

安価で急いで携帯用CMSを作らなければいけなくなって、WordPress + Ktai Style でサイトを作りました。

その際に、PC向けの表示のやり方とSEOについて無駄に悩んでしまったのですが、とても簡単な解決方法を見つけたので書いておきたいと思います。

（さくらぎは、WordPress初心者ですので、間違いがあったら、コメント等でご指摘をお願いいたします）

1 どんなサイトをつくったか
- 1.1 今回のポイント
2 まずはFAQの方法を試してみる
- 2.1 検索エンジン対策
3 もっとわかりやすい方法を思いついた
4 Mobile Link Discoveryについて

どんなサイトをつくったか

携帯電話向けに、不動産情報を発信するサイト。
コメントやトラックバックは無し。
PC向けサイトは不要。
PCからのアクセスには、QRコードを表示して携帯電話でアクセスするように案内する。

今回のポイント

携帯サイトの作成は、Ktai Style で行います。
独自テーマを作成しましたが、特に変わったことは行っていません。

問題は、PC用のテーマです。
通常は、PC用のサイトがあって、携帯用のサイトを作るという流れになると思います。
しかし今回は、PCからアクセスされた際に投稿を表示せず、案内ページを表示するという仕様です。

そして、案内ページを表示するということは、「PC用と携帯用のURLが同じで表示内容が異なる」ことになるので、検索エンジンのクローラーへの対応が問題になります。

まずはFAQの方法を試してみる

Ktai Style のFAQには、携帯専用ブログにする際の手順が書いてあります。
Ktai Style Reject PCプラグインを作成して有効化するやり方です。
ただ、書いてある通りにしただけだと、PCからアクセスした際には、画面が真っ白になります。

案内ページを表示するには、下記のように修正します。

案内ページを別にHTMLで作ってFTPでアップしておく
Ktai Style Reject PCプラグインで、exit(); の前に、案内ページへのリダイレクトさせるようにする

<?php
/*
Plugin Name: Ktai Style Reject PC
Version: 1.0.0
*/
function ks_reject_pc() {
    $url = parse_url(get_bloginfo('wpurl') . '/');
    if (! preg_match('!^' . preg_quote($url['path'], '!')
    . 'wp-(admin/|login|includes/)!', $_SERVER['REQUEST_URI'])) {
        header("HTTP/1.1 301 Moved Permanently");
        header("Location: http://（案内ページのURL）");
        exit();
    }
}
add_action('ktai_init_pc', 'ks_reject_pc');
・・・（後略）
?>

これで、問題なく動作します。

検索エンジン対策

Ktai Style は、PC用サイトと携帯用サイトを同じURLで表示します。
これを聞いて、『PCでアクセスした際に、すべて案内ページに飛ばされてしまったら、全ページの検索結果が案内ページの内容になってしまうのではないか？』と心配される方がいらっしゃるかもしれません。

しかし、最近の検索ロボットは賢くて、携帯での検索ではちゃんと携帯用ページの内容を表示してくれるのです。

今回の例だと、PC検索では案内ページしか出てきませんが、携帯検索ではきちんと携帯用サイトの内容が出てきます。

つまり、下手に小細工しなくても、きちんとPC用と携帯用で別のコンテンツが表示されるのであれば、そのまま検索結果に反映されるのです。

TwitterでKtai Style作者の lilyfanjpさんに指摘していただいたのに、その場ではよくわかっていませんでした。すいませんでした。

もっとわかりやすい方法を思いついた

とりあえず、うまく行ったわけですが、制作途中で『こんな複雑なことしなくてもいいんじゃないの？』と思いつきました。（これのどこが複雑なんだと言われたら、それまでなんですけど）

それは、PC用に「案内ページを表示するだけ」のテーマを作成するという方法です。

（１）新規テーマを作成
wp-content/themesフォルダーに新しいフォルダーを作成し、適当な名前（例えば「guide4pc」とか）をつけます。

（２）テーマに必要最小限の、2つのファイルを新規作成

●style.css

内容は、テーマの説明のみでOKです。
例えば、次のようになります。

/*
Theme Name: PC案内用テーマ
Theme URI: https://www.cherrypieweb.com/wp/wp-content/themes/guide4pc/
Version: 1.0
Description: 本テーマは、携帯電話でのアクセスを促すメッセージを表示します。
Author: Sakuragi-Kei
Author URI: https://www.cherrypieweb.com/wp/
*/

●index.php

他のテンプレートが存在しない場合、すべてのページがこのテンプレートで処理されます。
今回は、PCからのアクセスはすべて案内ページになればいいわけですから、ここに案内ページのHTMLを書いてしまえばOKです。
携帯検索でPCページも表示されることを考慮して、meta description にサイトの説明などを設定しておいたほうが良いでしょう。
QRコードを表示させたい場合は、テーマフォルダーの中に「images」フォルダーを作って、QRコードの画像を入れておきましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="（PCサイトの概要を書いておきます）">
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<h1>サイトのタイトル</h1>
<p>本サイトは、携帯電話またはスマートフォンでのみ閲覧できます。</p>
<p>下記のQRコードをご利用ください。</p>
<p><img src="<?php bloginfo('template_directory'); ?>/images/qr.jpg" alt="トップページへ" /></p>
</body>
</html>

なお私は、</body>タグの前に、Google Analyticsのスクリプトを入れています。

（３）外観メニューで、このテーマを有効にする

これで、PCからのアクセスでは、常に案内ページが表示され、携帯からのアクセスでは、Ktai Styleのテーマが表示されるようになります。
もちろん、携帯検索では携帯用ページの内容が表示されます。

PCからのアクセスで表示されるものはPC用のテーマで管理され、携帯からのアクセスで表示されるものは Ktai Style のテーマで管理されるので、知識の少ない方にもわかりやすい構成になります。

Mobile Link Discoveryについて

「Mobile Link Discovery」という仕組みを用いると、PC用ページに携帯用のページのURLを明示することができます。

例えば、Google携帯検索では、検索結果にPC用ページと携帯用ページの両方が表示されます。
ここで、携帯電話で検索結果のPC用ページをクリックすると、通常はPC用ページがGoogleの携帯用表示変換機能で変換されて表示されます。
ところが、PC用ページに「Mobile Link Discovery」が設定してあると、PC用ページを表示せずに携帯用ページへ転送されるようになります。

これは、携帯用のページがPC用のページとは別のURLで存在する場合に、非常に有効な仕組みです。
また、PC用と携帯用が同じURLの場合は、PC用ページに携帯電話でアクセスしても携帯用ページとして同一URLに転送されることになるので、携帯用に変換される処理が入らずに表示されます。

では、これを index.php に組み込んでおきましょう。

・・・と思って頑張ってコードを書いていたんですが、実はKtai Styleを導入している場合は、wp_head(); に自動でMobile Link Discoveryが挿入されるようになっていました。
つまり、index.phpの</head>の前に、<?php wp_head(); ?>を入れておけばOKなのです。

恐るべし。Ktai Style。

今回、初めてWordPressを触ったわけですが、PHPの初歩的なことさえ知っていれば、とても簡単に導入できました。
今後は、サイトの規模に合わせて、WordPress と MovableType を使い分けようかなと考えています。

そして、Twitterでの私のボヤキに素早く反応していただいた、HissyNCさんと、lilyfanjpさん、ありがとうございました。

（2011.9.1修正）
PC案内用テーマの index.php で、QRコード用画像のURLを修正しました）

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数