WordPress、Mac、その他日常で覚えておくべきことを備忘録としてメモしています。

saketorock

stinger WordPress

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

投稿日:

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

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

スポンサーリンク

GoogleAdSense

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

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

修正前のタグ

修正後のタグ

user-scalable=no"とあるコードを削除し、縮小時に小さくなりすぎないようminimum-scale=1を追記しただけです。

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

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

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

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

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

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

まとめ

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

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

GoogleAdSense

GoogleAdSense

-stinger, WordPress

Copyright© saketorock , 2018 All Rights Reserved.