レスポンシブデザインって嫌いなんですよ。

wordpressを最近触るようになったのですが、wordpressはレスポンシブデザインとかいうものでできているようで、スマートフォンでのアクセスでも、パソコンからのアクセスでもURLが同じになっています。

アクセスする端末のサイズで、CSSの適用を変えていて、それによって表示されるデザインが変更されます。

が…このレスポンシブデザインというものが非常に作りづらく、私には向いていないので、スマートフォンからのアクセスと、パソコンからのアクセスをそれぞれ別階層で作って、分岐させてみたので、その流れをメモしておきたいと思います。

ゴールとしては、パソコン版についてはhttp://○○/ で、スマートフォンのサイトについては、http://○○/sp/となるようにします。

wordpress の関数を使えるように準備を行う

前提として、どのファイルもwordpressでの関数を使うので、ファイルの最初には、以下の内容を記載しておきます。これにより、wordpressの関数が使えるようになります。

require("wp-load.php");

ひとまず、挙動のテストを見ながら作りますので、すべて拡張子に.phpをつけておきます。例として、archivesについては、archives.phpとして作成して、最後に取り除いて.htaccessファイルを調整します。

archives.phpファイルを作成する

archivesについては、カテゴリとタグ、記事ページと３パターンの表示を行うものになりますので、引数（archives/○○　の○○の部分）ごとに、分岐させて処理を実装します。

archivesファイルの上部に、以下の内容を入れておきます。

if (!empty($_SERVER['PATH_INFO'])) {
    $pairs = explode('/',$_SERVER['PATH_INFO']);
}

上記は、URLのファイル名の後を、/区切りで取得するものです。

以下サンプルを記載します。

// サンプルurl
// http://sample.com/archives.php/category/neko/page/4

echo $pairs[1];
//categoryが出力される

echo $pairs[2];
//neko　が出力される

echo $pairs[3];
//page が出力される。カテゴリ登録ページにおいて、２ページ目などがある場合、３番目はpageになる

echo $pairs[4]
//4が表示される。カテゴリページなどのページャにおいて、４ページ目であることを認識する場合
//この部分を判断として使う

archivesで表示されるのは、カテゴリの登録記事一覧と、タグの登録記事一覧と、記事ページで使いますので、
以下のように分岐してソースを作成していきます。

if($pairs[1]=="category"){
//categoryページのソースを記載

}else if($pairs[1]=="tag"){
//tagページのソースを記載

}else{
//記事ページのソースを記載


}

個人的には、各分岐においてソースを変数として格納し、最後にhtml の中で出力する方法が一番いい気がします。

同様の行為を、パソコン版のソースコードの階層にディレクトリを作り、そのディレクトリの中にファイルを作成します。

最後に.htaccessでブラウザ判定を実施して、パソコンの場合とスマートフォンの場合と、
URLの振り分けをして完成です。

wordpressのアップデートにおける注意点

注意したいのは、wordpressのアップデートを行った場合、作成したファイルが上書き削除されてしまうところです。

よって、wordpressのインストール場所と、実際にウェブとして表示するディレクトリは必ずわけた状態で作成するのが望ましいです。

indexファイルを作成する

トップページに該当する部分ですが、トップページの表示以外に、検索結果での表示にも使われるページになります。検索結果の表示も実装するために、archivesファイルと同様に、分岐が必要になります。

wordpressでは検索結果のページはGET でsを使っていますので、同様の仕様で実装しますが、別にsではなく、qで実装しても問題ありません。文字列のindex.php内で、取得文字列をqに変更してしまえば問題ありません。

以下分岐のサンプルを記載します。

if(isset($_GET["s"])){
//検索結果のソースを記載
}else{

if(is_user_logged_in() &&isset($_GET["preview"])&&$_GET["preview"]=="true"&&isset($_GET["p"])&&intval($_GET["p"])>0){
///記事作成の際のプレビューページのソースを記載
}else{
///トップページのソースを記載

}

}

index.phpは、wordpressの記事作成の際、下書きプレビューの際のページとしても使われますので、検索ページと、通常表示と、プレビュー表示の３カ所で分岐が必要になります。

検索結果の取得やトップページの取得については、また別の機会に記載するとして、大枠としては上記の分岐で作成ができます。

.htaccessファイルを設定する

上記２つのファイルをそれぞれパソコン版とスマートフォン版に設置したら、各ディレクトリに.htaccessファイルを設置し、アクセス端末でのリダイレクトと、作成したファイルの.phpを取り除いても、phpとして認識するよう、設定します。

パソコン側のディレクトリ側に設置する設定はおおまかに以下のとおりです。


#ドメインへアクセスした際、どのファイルを読み込むかの記載。優先度の高い順に記載
DirectoryIndex index index.php index.html

#マッチしたファイル名がどのように処理するかを記載。
#indexファイルは、phpファイルをして強制的に処理するように記載。
<FilesMatch "^index$">
ForceType application/x-httpd-php

<FilesMatch "^archives$">
ForceType application/x-httpd-php


#スマホなどからのアクセスした場合、スマートフォン版のページへ自動で移動するように設置。
#これはスマートフォン版が、http://sample.com/sp/にある場合の例
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} Android [OR]
RewriteCond %{HTTP_USER_AGENT} dream [OR]
RewriteCond %{HTTP_USER_AGENT} CUPCAKE [OR]
RewriteCond %{HTTP_USER_AGENT} blackberry [OR]
RewriteCond %{HTTP_USER_AGENT} webOS [OR]
RewriteCond %{HTTP_USER_AGENT} incognito [OR]
RewriteCond %{HTTP_USER_AGENT} webmate
RewriteCond %{REQUEST_URI} !/sp/
RewriteRule ^(.*)$ /sp/$1 [R,L]

phpファイルは拡張子を外した場合、テキストファイルとして読み込まれますので、
中身がすべて見えてしまいます。それを防ぐために、強制的にphpファイルとして処理する設定は必須です。

おおまかな流れは上記となりますが、各ページの作成についてはある程度phpに関する知識が必要なので、wordpressの設定画面でしか作成したことがない人には難しいかと思います。

また、１からページを作成する場合、プラグインのインストールなどに大きな問題を抱えることになり、プラグインのインストールが完了してもうまく動かないなど色々発生しますので、ある程度知識を持って望むとよいかと思います。

コメント