静的ページとWPtouchのクッキー連携

JavaScript PHP WordPress

あるHTML/CSS/JSで作った（静的ページな）Webサイトには、PC向け画面（横幅が広い）とスマホ向け画面（横幅が狭い）と２つのモードがあった。スマホ向け画面では、「PC」ボタンと「スマホ」ボタンでモードを切り替えられるようにしていた。モードはクッキーを使って状態保持していた。

PCスマホ

そこにWordPress入れてブログをはじめた。さらにブログをWPtouchでスマホ対応することにした。WPtouchには、PC向け画面とスマホ向け画面を切り替えられる「デスクトップ」「モバイル」ボタンが搭載されていた。これもまたクッキーでモードを保持していた。

モバイルデスクトップ

ふと気づいた。２つのおなじ機能「PC向け」「スマホ向け」モード切り替え機能があるのに、連動していない。WordPressはWordPressの中だけしかモードが有効でない。おなじWebサイトの中なのに。彼は思った。これはダサい。

そして彼は思いついた。

クッキーを同じにしちゃえばいいじゃん？

その記録。

WPtouch（Version: 3.7.8）ではスマホで「デスクトップ」ボタンを押した時、次のSet-Cookie:が来るもよう。

Set-Cookie: wptouch-pro-view=desktop; expires=Fri, DD-MM-YYYY SS:MM:HH GMT

そして次のCookie:が送信される。

Cookie:wptouch-device-type=smartphone; wptouch-device-orientation=portrait; wptouch-pro-view=desktop

つまりWordPressの外でも、次のクッキーを作ってしまえば、WPtouchは勝手にモード「デスクトップ」に切り替わってくれる。

Cookie: wptouch-pro-view=desktop

JavaScriptでクッキー作るならこんな感じ。

document.cookie = 'wptouch-pro-view=desktop;';

また「モバイル」モードに戻すには、クッキーを消すか、以下のクッキーに変更する。

Cookie: wptouch-pro-view=mobile

しかしこれだけではダメである。WPtouchが発行するクッキーとは別のクッキーになってしまい、連動しないのだ。おなじクッキーにしなければならない。そのために、クッキーを作る時の path= 指定をおなじものにする。

① WPtouch の発行する Set-Cookie: に path= 指定を入れる改造を行う。
ファイル wp-content/plugins/wptouch/core/class-wptouch-pro.php の793行目。

setcookie( WPTOUCH_COOKIE, $this->get['wptouch_switch'], $expires_time, '/' );

これで Set-Cookie: に以下のように path=/; が入る。

Set-Cookie: wptouch-pro-view=desktop; path=/; ...

② WordPressの外で作るクッキーにもおなじ path= 指定を入れる。
JavaScriptならこんな感じ。

document.cookie = 'wptouch-pro-view=desktop; path=/;';

これで静的ページの「PC」「スマホ」切り替えボタンと、WPtouchの「デスクトップ」「モバイル」ボタンが連動するようになった。しめしめ。

ただし、WPtouchの改造は、WPtouchをバージョンアップしたら消えてしまうのだろう。無念・・・