の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【WordPress】テーマ「stinger3」をスマホで表示したときに画面上部に広告を表示する方法

      2015/11/13

WordPressのテーマ「stinger3」をスマホなどのモバイル端末で表示したときに、記事の前に広告を表示する方法を紹介します。

イメージ

ad_m

環境

  • WordPress3.9.1
  • stinger3ver20131217

手順

1.WordPressにログインし、「外観」から「テーマ編集」を選択します。

2.画面左の「単一記事の投稿(single.php)」を選択します。

3.single.phpのコードを次のように修正します。

修正前
  <div class="kizi">
    <h1 class="entry-title">
修正後
  <div class="kizi">
  <!-- ad add -->
  <?php if(is_mobile()) { ?>
  <div style="padding:0 0 20px0; margin:0 0 0 -20px; text-align:center;">
  ここに広告
  </div>
  <?php } else { ?>
  <?php } ?>
  <!-- ad add end -->
    <h1 class="entry-title">

解説

  • div class=”kizi”から記事が始まるので、そこに広告を入れます。
  • モバイルからのアクセスなら広告を表示する、というif文です。
  • 「ここに広告」の部分は各自で広告を入れてください。僕は320px×40pxの広告を入れています。
  • iPhoneでは320px幅の広告を表示するとマージンの影響で見きれてしまいます。divに左のネガティブマージン-20pxを入れることでピッタリ表示することができます。

4.「ファイルを更新」をクリックし、「ファイル更新に成功しました」と表示されれば作業完了です。

まとめ

ここではスマホなどモバイル端末からアクセスがあったときに、画面上部に広告を表示するカスタマイズを紹介しました。

 - WordPress , , ,

336-280

  関連記事

ベスト20
【WP】プラグイン「WordPress Popular Posts」で、カテゴリーの人気記事を表示する方法

WordPressの定番プラグイン「WordPress Popular Post …

WordPressのパーマリンク設定を変更してSEOに失敗した実例と対策

素人が思いつきでSEO対策をすると失敗するよ、というお話です。 はじめに 本ブロ …

【WordPress】テーマをStinger5にしました

右メニューの2カラム構成が好きなので、Stinger3を使ってきました。 その進 …

【WordPress】コピペでOK!「WordPress Popular Post 」でカテゴリー別ランキングを表示する方法

「WordPress Popular Post」はデフォルトでもランキングを作成 …

リンクの例
【WordPress】アイキャッチ付きサイト内記事へのリンクを作成する方法

アイキャッチ付きのサイト内記事リンクを作るプラグインを紹介します。 functi …