ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】スマホサイト作成!テーマファイルの効率化

新しいスマホテーマを確認する女性

WordPressのスマホテーマを制作しました。PC版とは違ったテーマファイルの効率的な作成方法について共有します。今後はモバイル・ファーストが重視されると思いますので参考にしてみてください。

ゆめぴょん(@yume_pyon)です。こんちはっ!

このブログのスマホテーマは「軽量化」「高速化」「シンプル」「SEO対策」を目指して制作しました。特に目立った機能は付けてないけど、記事の読みやすさと表示速度の速さにはこだわりました。前回の高速化の記事も参考にしてください。

【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法28 shares

スマホ用テーマデザインでサイト作成した時に実装した、表示の高速化に関するチップを…

効率的なWordPressのスマホテーマ制作方法

スマートフォンの専用テーマを制作する上で最も気をつけたのは、次の5点です。

  1. 無駄なコードを極力なくす
  2. メンテナンスしやすくする
  3. 読者が迷わないデザインにする
  4. 高速化・軽量化に配慮する
  5. SEOに配慮する

これらの点を考慮しながら、テーマファイルを制作しました。具体的な内容を6つ紹介していきます。

functions.phpは必要最小限に

「functions.php」はPC版のものと共通化しているテーマも多く見かけます。ほとんどがサーバー側の処理なので、PCもスマホも関係ないと言えばそれまでですが、せっかくテーマを分けるのでスマホで使わない部分はカットしましょう。

特に私はモブログ(スマホでブログ記事を書くこと)は今のところしないので、記事作成に関するPHPコードはスマホ版の「functions.php」からは全て削除しました。

例えば今まで記事でも紹介したカスタマイズ「投稿画面のタイトル文字数カウンタ」「管理ツールバーの項目追加」などがあります。

【WordPress】タイトル文字数を投稿画面で表示!jQueryで全角カウントする方法【WordPress】タイトル文字数を投稿画面で表示!jQueryで全角カウントする方法

ブログ記事で最後まで悩むのがタイトルです。今回はタイトルの文字数を自動カウントし…

【WordPress】管理ツールバーのカスタマイズ方法!項目追加や削除など【WordPress】管理ツールバーのカスタマイズ方法!項目追加や削除など

WordPressの管理画面の上部にでてくる管理ツールバーのカスタマイズ方法を共…

ちょっと古い記事では、Autopaging(自動で次ページを読み込む機能)をブログで動作しないようにするカスタマイズもあります。

【WordPress】個別投稿記事でオートページャーAutopagerizeを無効にする方法【WordPress】個別投稿記事でオートページャーAutopagerizeを無効にする方法

更新したWordPressの個別記事を確認している時、コメント欄が表示されないこ…

index.phpでホーム、カテゴリ、タグ、アーカイブを共通運用

通常のテーマでは、ホーム(トップページ)は「home.php」、カテゴリ一覧ページは「category.php」、タグ一覧ページは「tag.php」、年月日のアーカイブページは「archive.php」を利用します。

私が今回作成したスマホテーマでは、これらは全て「記事一覧」を表示することにしました。そしてデザインや構造も統一して「index.php」という1つのファイルで共通管理することにしました。

WordPressは該当するテーマファイル(例えば「tag.php」など)が見つからなければ、最後には「index.php」を探して適用します。ファイルの優先順位は下の記事も参考にしてくだい。

WordPressのテンプレートファイルの種類と使い方を覚える – MdN Design Interactive

このように1つのテーマファイルを共通化して使うことにより、制作時だけでなくメンテナンス時や、今後のカスタマイズの時もかなり楽になります。「カテゴリ一覧だけ変更を忘れてた!」という問題も発生しません。

スマートフォン・デザインで新着と人気記事一覧

ちなみに今回のテーマでは、新着記事一覧だけでなく、人気記事一覧も表示することにしました。その理由は下の記事に書きました。参考にしてみてください。

【WordPress】スマホサイトの記事一覧を人気順にした理由と方法!SEO対策にもなる【WordPress】スマホサイトの記事一覧を人気順にした理由と方法!SEO対策にもなる

新しいスマホ用デザインのテーマでは、ホームやカテゴリー・タグ・アーカイブなどの記…

スマホテーマにサイドバーは設置しない

スマートフォン用デザインで、サイドバーはほとんど見かけません。画面が狭いので読みやすさを考えると当然ですね。だから思い切ってサイドバー「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」を用いても実現できます。

【WordPress】All in One SEO Packプラグインの設定方法を見直してアクセスアップ【WordPress】All in One SEO Packプラグインの設定方法を見直してアクセスアップ

「All in One SEO Pack」はWordPressのSEO対策をさら…

まとめ:今日のゆめぴょんの知恵

404ページのカスタマイズだけはPCデザインでも同じように考えられます。他の内容はスマホデザイン独特の考え方だと思っています。ぜひ参考にしてください。

今回のスマートフォン用テーマ制作の工程や、利用した便利ツール類などは、下の記事に書いていますのでそちらも参考にしてみてください。

【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介

このブログはスマホ表示時には、便利なWordPressプラグイン「WPtouch…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法【WordPress】スマホサイトで生かす!カテゴリーの活用方法とSEO対策:次記事»
ページ
↑先頭
ホーム