WordPressのテーマ「affinger4（アフィンガー）」でピンチインとピンチアウトをできるようにするためのカスタマイズ方法

最近、スマホユーザーからのアクセスが多くなっています。
もう、アクセスしてくれる人の80％以上がスマホ。

僕がこのブログで使用しているWordPressのテーマである「affinger4（アフィンガー）」は、スマホ閲覧時にピンチインして画像なんかを拡大することができないので、ちょっとカスタマイズしました。

スマホ閲覧時にピンチインさせる方法

header.phpの13行目にかかれているタグを以下の通り修正しました。

修正前のタグ

修正後のタグ

これでめでたくピンチインとピンチアウトができるようになりました。

カスタマイズするべきheader.php

ちなみに、header.phpファイルをカスタマイズするときは子テーマにします。
親テーマに収納されているファイルを触ると、アップデートされたときにもとに戻ってしまうからです。

FTPでサーバーにアクセスし、wp-content＞themes＞affinger4とフォルダを開き、デスクトップに「header.php」をダウンロード。念のためバックアップをとっておくべきなので、ダウンロードしたファイルを複製しておきます。

header.phpを先述したとおりカスタマイズしたら、wp-content＞themes＞affinger4-child　に上書きしましょう。

子テーマって何？という方は、以下のサイトを参考にしてください。
参考子テーマを作ってWordPressの既存テーマをカスタマイズする方法

まとめ

視認性が悪いと離脱につながるのでカスタマイズしてよかったです。

ちなみに、WPtouchというプラグインでも対応可能だというので試してみましたが、affinger4（アフィンガー）との相性が良くないので、プラグイン側の設定次第でレイアウトが崩れます。またズームもすることが私はできませんでした。参考まで。