WordPressのスマホテーマを制作しました。PC版とは違ったテーマファイルの効率的な作成方法について共有します。今後はモバイル・ファーストが重視されると思いますので参考にしてみてください。
ゆめぴょんです。こんちはっ(^^)/
このブログのスマホテーマは「軽量化」「高速化」「シンプル」「SEO対策」を目指して制作しました。特に目立った機能は付けてないけど、記事の読みやすさと表示速度の速さにはこだわりました。前回の高速化の記事も参考にしてください。
効率的なWordPressのスマホテーマ制作方法
スマートフォンの専用テーマを制作する上で最も気をつけたのは、次の5点です。
- 無駄なコードを極力なくす
- メンテナンスしやすくする
- 読者が迷わないデザインにする
- 高速化・軽量化に配慮する
- SEOに配慮する
これらの点を考慮しながら、テーマファイルを制作しました。具体的な内容を6つ紹介していきます。
functions.phpは必要最小限に
「functions.php」はPC版のものと共通化しているテーマも多く見かけます。ほとんどがサーバー側の処理なので、PCもスマホも関係ないと言えばそれまでですが、せっかくテーマを分けるのでスマホで使わない部分はカットしましょう。
特に私はモブログ（スマホでブログ記事を書くこと）は今のところしないので、記事作成に関するPHPコードはスマホ版の「functions.php」からは全て削除しました。
例えば今まで記事でも紹介したカスタマイズ「投稿画面のタイトル文字数カウンタ」「管理ツールバーの項目追加」などがあります。
ちょっと古い記事では、Autopaging（自動で次ページを読み込む機能）をブログで動作しないようにするカスタマイズもあります。
index.phpでホーム、カテゴリ、タグ、アーカイブを共通運用
通常のテーマでは、ホーム（トップページ）は「home.php」、カテゴリ一覧ページは「category.php」、タグ一覧ページは「tag.php」、年月日のアーカイブページは「archive.php」を利用します。
私が今回作成したスマホテーマでは、これらは全て「記事一覧」を表示することにしました。そしてデザインや構造も統一して「index.php」という1つのファイルで共通管理することにしました。
WordPressは該当するテーマファイル（例えば「tag.php」など）が見つからなければ、最後には「index.php」を探して適用します。ファイルの優先順位は下の記事も参考にしてくだい。
⇒WordPressのテンプレートファイルの種類と使い方を覚える – MdN Design Interactive
このように1つのテーマファイルを共通化して使うことにより、制作時だけでなくメンテナンス時や、今後のカスタマイズの時もかなり楽になります。「カテゴリ一覧だけ変更を忘れてた！」という問題も発生しません。
ちなみに今回のテーマでは、新着記事一覧だけでなく、人気記事一覧も表示することにしました。その理由は下の記事に書きました。参考にしてみてください。
スマホテーマにサイドバーは設置しない
スマートフォン用デザインで、サイドバーはほとんど見かけません。画面が狭いので読みやすさを考えると当然ですね。だから思い切ってサイドバー「sidebar.php」は制作しませんでした。
ところで私がレスポンシブ・デザインを採用しなかった理由は、サイドバーの存在です。レスポンシブではサイドバーは通常、記事の下に配置するか「display:none」などで非表示にします。
記事下に配置した場合はグリッド型などなら、うまくハマりますが、そうでなければデザイン的には見苦しいです。内部リンクやSNSリンクなどが記事内のものと重複する場合もあります。
非表示にしたらすっきりするのですが、非表示部分も裏では読み込まれています。通信速度の遅いモバイル環境では、このような無駄な読み込み時間や通信量は離脱への致命傷になりかねません。
Googleカスタム検索でなくWordPressを利用
PC用テーマでは、ブログ内の検索にはGoogleカスタム検索を利用しています。その方が検索結果の精度は高いです。マッチング精度の高い順に表示されるのも便利です。
しかしスマートフォンのテーマではカスタム検索を使わず、WordPress標準の機能を使いました。そして検索結果表示も「search.php」というテーマファイルを利用しています。
カスタム検索を使わないことにした理由はただ1つです。検索結果の画面を自由にデザイン・カスタマイズできないからです。
WordPressのテーマファイルならカスタマイズは自由です。デザインは「index.php」の記事一覧とほぼ同じです。検索結果の画面にカテゴリーリンク、人気記事、SNSボタンなどを表示できるのも魅力です。
404ページもカスタマイズ
記事が削除されてたり、リンク先が間違ったりしてると、404と呼ばれるエラーページが表示されます。私が他のブログを閲覧する時も、たまに表示されます。
この404ページは、テーマファイルの「404.php」で編集できます。標準のは味気ないエラー表示だけなので、「index.php」を元にしてカスタマイズしました。
具体的には、表示されなかった記事を探せるようにブログ検索を設置しました。そしてついでに今の人気記事をおすすめしています。
404、検索結果、アーカイブページにはnoindex
404ページ「404.php」、検索結果ページ「search.php」、年月日アーカイブページ「index.php」の場合のみ、Googleにインデックスされないよう次の1行を記述しています。
<meta name=”robots” content=”noindex”>
最近のGoogleは重複コンテンツのペナルティなども厳しくなってきているので、無用だったり低品質なコンテンツは「noindex」にするのが望ましいと言われています。その方がSEO対策にもなりそうです。
同じようなことは、WordPressプラグイン「All in One SEO Pack」を用いても実現できます。
まとめ：今日のゆめぴょんの知恵
404ページのカスタマイズだけはPCデザインでも同じように考えられます。他の内容はスマホデザイン独特の考え方だと思っています。ぜひ参考にしてください。
今回のスマートフォン用テーマ制作の工程や、利用した便利ツール類などは、下の記事に書いていますのでそちらも参考にしてみてください。
ゆめぴょんでした。ちゃおっ！
