技術Note

このWEB業界、勉強していると1日に300兆回くらい「技術の進歩が早い」と言われます。

これを聞いてるだけで一日が終わります。

とはいえ作りの古いサイトを急に「最新技術で置き換えよう！」と思ってもそうはいきません。
4,5年前に作ったサイトでも「ここを変えようと思うと全体の改修が必要に…」ということも少なくあありません。

単純にエンジニアの技術が上がって「この頃はこうしてたけど今ならこうしたほうがいいよね…」ということもよくあります。
私も勉強5年目・実務2年目なので、勉強することも多く、日々より良いサイトを作れるように組み方を改善しています。

そのような中でも今回は「WordpressでPCとスマホのテーマが違うサイトでのコンテンツの共通化」について書いていこうと思います。 あくまで個人的な意見であることと、私のやり方です。

まず前提として現在はPCとスマホで同じファイルから同じHTMLを出力しCSSのメディアクエリで画面の幅によってレイアウトを変更するレスポンシブが主流です。

ですが少し時代を遡るとPCとスマホ、それぞれ別のファイルから別のHTMLを出力していました。 スマホとPCでレイアウトが違うので当たり前といえば当たり前ですが管理するファイルが増えたり、修正がある場合それぞれに反映しなければいけません。

今回は後者のパターンを前者に近づけて更新を楽にしようという記事です。

実装手順

今回はプラグイン「Multi Device Switcher」での実装例を紹介します。

ファイルの構成は以下の通りで、PCとスマホで同じになっています。

コンテンツ部分はPC・スマホそれぞれ個別のファイルになっておりpage.php内でページに対応するファイルを指定し取得するという作りです。

今回はそれを「test.php」としてコンテンツ部分のファイルを共通化します。

テーマ直下
├ common(画像css等)
└ wp-content
　 └ themes
　 　 ├ pcテーマ
　 　 │ └ pages(ページのコンテンツ部分のファイルを保存するフォルダ)
　 　 │ 　 └ test.php(PCのコンテンツ部分のファイル)
　 　 └ spテーマ
　 　 　 └ pages
　 　 　 　 └ test.php(スマホのコンテンツ部分のファイル)

今回はPCファーストで作っているので、スマホでPCのコンテンツを読み込みます。

スマホのテーマのtest.phpに以下のように記述します。

<?php
include(get_theme_root() . "/pcテーマ/pages/test.php");

別のテーマからインクルードするのでget_template_part();ではなくinclude();を使います。get_theme_root()はWordpressのテーマフォルダを絶対パスで取得し、そこからのパスを記述します。

これでコンテンツ部分は共通のHTMLが読み込まれます。

コーディングする上でPC時のみdisplay:none;をかけるクラス、SP時のみdisplay:none;をかけるクラス、は用意しておいたほうが良いと思います。
特に改行と画像にはよく使います。

メリット・デメリット

メリット

• 二重に書かなくて良いので文字修正が片方で済む。
• サーバーへの反映も一つのファイルでよい

デメリット

• レイアウトが大きく違う場合はパーツを別に書くことになる
• HTMLの構造を変更する場合PCとスマホ、両方のCSSを変更する必要がある。
• 把握出来ていない場合、意図せずもう片方も変更されてしまう

項目の数はデメリットが多いですがそれ以上にメリットが大きいので、最近弊社ではPCとスマホのテーマが別の場合はこの方法を採用しています。

まとめ

最初にも言ったとおりWEB業界は凄まじいスピードで進歩しています。作りが古いサイトをすぐに「最新技術で置き換え！」とはいきませんが新しい知識を活かし少しでも効率よく組めるようにしていきましょう。

この記事が役に立つと幸いです。