WordPressには『条件分岐配信タグ』という便利な機能があり、これを使うことでスマホとPCで別の広告を配信することが可能です。
そこで今回は、設定が少し難しいと思われがちな記事タイトル上(ファーストビュー)の設定方法をご紹介いたします。
プラグインを利用すれば直接親テーマを触る必要もありませんし、初心者でもサクッと5分程度で設定することができますよ。
使用するのは条件分岐タグ
この設定をするにあたって使用する条件分岐タグは、『wp_is_mobile()』
このタグを使うことで、スマホ・PCどちらからのアクセスなのかを判別することが可能になります。
例えば、
- スマホの場合はレクタングルサイズの広告を表示させたい
- PCの場合はバナーサイズの広告を表示させたい
といった出し分けができるようになりますよ。
※スマホのみ、PCのみにそれぞれ広告を表示させるといった設定も可能です。
記事タイトル上にスマホとPC別で広告を分岐配信する方法
![記事タイトル上にスマホとPCで別の広告を分岐配信する](https://ym-life.com/wp-content/uploads/2020/03/記事タイトル上にスマホとPCで別の広告を分岐配信する.jpg)
スマホとPCで別の広告を配信するやり方は2つあります。
- テーマを直接編集する方法
- プラグインを使用してウィジェットにタグを追加する方法
一つずつその特徴を見ていきましょう。
テーマを直接編集する方法
こちらの方法では、テーマエディター『single.php』を編集し、テーマに直接コードを入力していきます。
single.phpにコードを入力することで、個別投稿記事全てに一気に反映することが可能です。
一方で、
- テーマの更新(アップデート)時に設定したコードが消える
- テーマ変更を行うとコードが消える
といったデメリットもあります。
これを防ぐためには、子テーマを作っておかれるといいでしょう。
![](https://ym-life.com/wp-content/uploads/2023/07/3ac75508d36a031444c3f395c4f7f2a0.jpg)
プラグインを使用してウィジェットコードを追加する方法
もう一つが、プラグインを利用してウィジェットにコードを追加する方法です。
こちらでは、新しくプラグインをダウンロードする手間がかかるものの、テーマの更新時や変更時にコードが消えるといった問題はありません。
また、WordPressに標準搭載されているウィジェット機能を利用するため、コードの位置調整の必要もなく、初心者でも簡単に設定することができます。
そのため、今回はより初心者向きで、安全に運用できるこちらの方法をご紹介いたします。
標準では、ウィジェットで条件分岐タグを使うことはできないので、ウィジェットでも PHP が利用可能になるプラグインが必要になります。
記事タイトル上に条件分岐タグを設定する手順
プラグインをインストールする
まずは、PHP Code Widgetというプラグインをインストールしていきましょう。
ダッシュボード画面『プラグイン』→『新規追加』
![記事タイトル上にスマホとPC別の広告を分岐配信する方法](https://ym-life.com/wp-content/uploads/2020/03/%E8%A8%98%E4%BA%8B%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E4%B8%8A%E3%81%AB%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A8PC%E5%88%A5%E3%81%AE%E5%BA%83%E5%91%8A%E3%82%92%E5%88%86%E5%B2%90%E9%85%8D%E4%BF%A1%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95.jpg)
『PHP Code Widget』で検索し、『今すぐインストール』をクリック
![記事タイトル上にスマホとPC別の広告を分岐配信する方法2](https://ym-life.com/wp-content/uploads/2020/03/%E8%A8%98%E4%BA%8B%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E4%B8%8A%E3%81%AB%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A8PC%E5%88%A5%E3%81%AE%E5%BA%83%E5%91%8A%E3%82%92%E5%88%86%E5%B2%90%E9%85%8D%E4%BF%A1%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952.jpg)
→『有効化』を忘れず行っておきましょう!
※インストール後の設定は特に必要ありません。
テキスト検索しても見つからない場合は、こちらからダウンロードしていきましょう!
⇒PHP Code Widgetをダウンロードする
![](https://ym-life.com/wp-content/uploads/2020/12/ZIP形式のプラグインをインストールする方法.jpg)
条件分岐タグ&広告コードを設定する
プラグインのインストールが完了したら、『外観』→『ウィジェット』をクリック。
PHP Code Widgetが正しく動作していたら、利用できるウィジェットの中に『PHPコード』というものができているはずです。
これを、『記事タイトル上』にドラッグ&ドロップします。(※テーマによっては、『記事上部』など表記が異なることがあります)
![記事タイトル上にスマホとPC別の広告を分岐配信する方法3](https://ym-life.com/wp-content/uploads/2020/03/%E8%A8%98%E4%BA%8B%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E4%B8%8A%E3%81%AB%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A8PC%E5%88%A5%E3%81%AE%E5%BA%83%E5%91%8A%E3%82%92%E5%88%86%E5%B2%90%E9%85%8D%E4%BF%A1%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%953-1.jpg)
そして、以下のコードをコピー&ペーストしていきましょう。
<?php if ( wp_is_mobile() ) : ?> // スマホで表示させたい内容 <?php else: ?> // PCで表示させたい内容 <?php endif; ?>
![記事タイトル上にスマホとPC別の広告を分岐配信する方法4](https://ym-life.com/wp-content/uploads/2020/03/記事タイトル上にスマホとPC別の広告を分岐配信する方法4-1.jpg)
そして、赤枠で囲った箇所を削除し、スマホ・PCそれぞれで表示したい広告コードを貼り付け『保存』をクリック。
これで、分岐配信の設定は完了です!
スマホのみ、PCのみにそれぞれ表示させたい場合は、それぞれ以下のコードを使用されるといいでしょう。
スマホのみに広告を表示させる
<?php if ( wp_is_mobile() ) : ?> // スマホで表示させたい内容 <?php endif; ?>
PCのみに広告を表示させる
<?php if ( !wp_is_mobile() ) : ?> // PC で表示させたい内容 <?php endif; ?>
あとがき
スマホとPCの分岐表示は難しく思われがちですが、意外と簡単でしたね!
プラグインを使用すればテーマを直接編集することなく設定が可能ですし、テーマ更新時や変更時でも影響ありませんよ。
ぜひ便利にご活用くださいね。
コメント