【WordPress(ワードプレス)】PCとスマホで記事内広告やウィジェットを切り替える方法

こんなブログでもそれなりにアクセスの多い記事があるんですよね。。

medi8(メディエイト)を取り扱った記事や、最近では大したこと書いてないのに何故かiQOS関係の記事。

流行ってるからかな?

そういった人気(?)の記事内に広告を配置したら収益がどう変るのか試してみたくなったので、暫くの間設置してみる事にしました。

ページが重くなるようだったら撤去致しますので・・・w

広告の切り替えが必要に

貼り付ける広告の種類は、ウチのブログでも一番収益をあげている、
300×250のサイズで2つ横に並べているダブルレクタングル広告。

これを以前に書いた記事

【HTML・CSS】バナーを横に並べて中央に寄せるには<table>タグを使うと良いみたい。ついでに枠線の消し方

↑これの応用で<table>タグを使って横に並べて設置する事にします。

PCで表示するぶんにはこれで終わりなのですが、
スマートフォンでページを表示したらダブルレクタングル広告の位置が崩れてしまうので、スマホ表示時に広告を切り替えなきゃいけない。

さて、どうしたものか・・・w

条件分岐で切り替え

ウィジェットだったら、僕が使っているWordPressのテーマ「 Simplicity 」にはPCとスマホで切り替えられる便利なウィジェットがあるから簡単だけど、今回やりたいのは投稿記事内ですからね。

Simplicityにも投稿本文中ってウィジェットがあるけど最初の見出し2限定だし。。

もっと自由に配置できるようにしたいのですよ。

プラグインは使いたくないし、これは手強いかなーっと思ったんですがググったら簡単に見つかりました。

こちらのサイト様↓

LINK WordPress 記事内でpcとスマホの表示内容を切り替えたい|Qiita

functions.phpを編集

ネットには偉大な先達がおられます。感謝。

さて、それでは先輩が示す通りにWordPressテーマのfunctions.phpを弄って、ショートコードを作る事にしましょう。

昨日も書きましたがfunctions.phpちゃんはとっても敏感なので優しく取り扱って下さいねぇ。。

関連記事:WordPress(ワードプレス)が真っ白になって慌てないように「 functions.php 」のバックアップは取っておこうね!

functions.phpに以下のコードを挿入します。

引用 WordPress 記事内でpcとスマホの表示内容を切り替えたい|Qiita

これだけ。

これで後はPCだけ表示させたい場合は

[pc][/pc]

スマホだけ表示させたい場合は

[sp][/sp]

で囲むだけ!簡単!
あ、↑上のショートコードは括弧の部分が全角なんでそのままコピペして使わないで下さいねー。括弧は半角にして!

さてこれを実際に広告で表示してみると、

↓PCでのみ表示↓

これでPCで見た場合300×250の二つ横並びになっているダブルレクタングル広告が、
スマホで見た場合は320×50の広告が表示されるはず・・・!

ウィジェットも条件分岐で切り替え

最近は気分転換に他のWordPressのテーマに変えて、
設定をいじって遊んだりするんですが、SimplicityのようにPCのみ、スマホのみ、でだけ表示できるウィジェットがないテーマがあって困ってました。

ですがこの条件分岐で表示するウィジェットも、ありがたい事にSimplicityの製作者様のサイトに作り方の解説がしてありました!

パソコンのみ表示するウィジェットは↓

引用「パソコンのみ表示するテキストウィジェット」をコピペ一発で作るWordPressカスタマイズ方法|寝ログ

モバイルのみ表示するウィジェットは↓

引用「モバイルのみ表示するテキストウィジェット」をコピペ一発で作るWordpressカスタマイズ方法|寝ログ

これだけ!簡単ですね。

以上!!

ブログランキングに参加しています♪
応援クリックしてもらえるととても励みになります・・・(〃∇〃)

にほんブログ村 小遣いブログへ