やったこと

webサービスを作るときに考えたことを垂れ流します

Simplicityのテーマでインフィード広告を挿入する（記事３列表示の場合）

web開発

前回の記事で、Simplicityのブログ記事にインフィード広告を挿入する方法を紹介しました。「最初の記事」と「最後の記事」の位置に、他の記事リストとそっくりなフォーマットで、広告を挿入するというものです。

この方法ですが、「３列表示」の記事レイアウトのときに表示が変になる、とのご指摘を受けました。

たしかに３列表示のときは、html中の「<div id="list"></div>」の中に広告を書き込まないと、表示が変になってしまいます。前回の方法では、ワードプレスのウィジェット（「インデックストップ」と「インデックスボトム」）を利用してパーツを表示してますが、これでは「<div id="list"></div>」の中には広告を挿入できないのです・・。

ということで、今回はワードプレスのウィジェットは使わずに、「<div id="list"></div>」の中に直接広告を書き込むように、前回記事のコードを変更しました。

前回記事の「その１」「その２」の修正はそのままですが、それ以降の「その３」から修正方法が違います。

その１「recommend.phpを作成する」

前回記事と同じです。「functions.php」が置いてあるディレクトリに、新たに「recommend.php」を作成します。

その２「recommend.phpの修正」

前回記事と同じです。「recommend.php」の内容を、以下のような感じで記述します。

<?php
//おすすめ記事クラス
class MyRecommended_article{
  public $title;
  public $text;
  public $link;
  public $img;
  public $target = "_blank";
}

//おすすめ記事グローバル変数
global $my_recommended_article_list;
$my_recommended_article_list = array();

//おすすめ記事の定義
$article1 = new MyRecommended_article();
$article1->title = "【記事紹介】激カワなブルマ女子の姿を盗撮！"; //記事タイトル
$article1->text = "今どきブルマ女子なんているんですね。なんだか懐かしい気分になりますね。"; //記事テキスト
$article1->link = "http://hogege/"; //記事遷移先URL
$article1->img = "http://fugaga.jpg"; //アイキャッチ画像URL
$article1->target = "_blank"; //遷移条件 _blankとか_selfとか
$my_recommended_article_list[] = $article1; //記事をリストに追加

$article2 = new MyRecommended_article();
$article2->title = "";
$article2->text = "";
$article2->link = "";
$article2->img = "";
$article2->target = "_blank";
$my_recommended_article_list[] = $article2;

//記事シャッフル
shuffle ($my_recommended_article_list);
?>
その３「functions.phpの修正」

ここが前回とちょっと違います。「functions.php」に以下のコードを追記します。

//記事リストを読み込み
require("recommend.php");

//インフィード広告挿入処理
function insert_article($position){
  global $wp_query;
  global $my_recommended_article_list;

  if ($position == "top" && $wp_query->current_post == 0){
    //初めの投稿である場合
    $article = $my_recommended_article_list[0];
  }else if ($position == "bottom" && $wp_query->current_post + 1 == $wp_query->post_count){
    //最後の投稿である場合
    $article = $my_recommended_article_list[1];
  }else{
    return;
  }

  $title = $article->title;
  $text = $article->text;
  $link =  $article->link;
  $img =  $article->img;
  $date = date('Y/n/j');

  if (wp_is_mobile()){
    //モバイルのときの表示
$str = <<< EOM
<div id="post-article" class="entry post type-post status-publish format-standard has-post-thumbnail">
  <div class="entry-thumb">
    <a href="{$link}" class="entry-image entry-image-link" title="{$title}" target="_blank" rel="nofollow">
      <img width="150" height="150" src="{$img}" class="entry-thumnail wp-post-image" alt="{$title}" />
    </a>
  </div><!-- /.entry-thumb -->
  <div class="entry-card-content">
    <h2><a href="{$link}" class="entry-title entry-title-link" title="{$title}" target="_blank" rel="nofollow">{$title}</a></h2>
    <p class="post-meta">
      <span class="post-date">
        <span class="fa fa-clock-o fa-fw"></span>
        <span class="published">{$date}</span>
      </span>
      <span class="category">
        <span class="fa fa-folder fa-fw"></span>
      </span>
    </p><!-- /.post-meta -->
    <p class="entry-snippet">{$text}</p>
    <p class="entry-read"><a href="{$link}" class="entry-read-link" target="_blank" rel="nofollow">記事を読みに行く</a></p>
  </div><!-- /.entry-card-content -->
</div>
EOM;
  }else{
    //PCのときの表示
$str = <<< EOM
<div id="post-article" class="entry post type-post status-publish format-standard has-post-thumbnail">
  <div class="entry-thumb">
    <a href="{$link}" class="entry-image entry-image-link" title="{$title}" target="_blank" rel="nofollow">
      <img width="150" height="150" src="{$img}" class="entry-thumnail wp-post-image" alt="{$title}" />
    </a>
  </div><!-- /.entry-thumb -->
  <div class="entry-card-content">
    <h2><a href="{$link}" class="entry-title entry-title-link" title="{$title}" target="_blank" rel="nofollow">{$title}</a></h2>
    <p class="post-meta">
      <span class="post-date">
        <span class="fa fa-clock-o fa-fw"></span>
        <span class="published">{$date}</span>
      </span>
      <span class="category">
        <span class="fa fa-folder fa-fw"></span>
      </span>
    </p><!-- /.post-meta -->
    <p class="entry-snippet">{$text}</p>
    <p class="entry-read"><a href="{$link}" class="entry-read-link" target="_blank" rel="nofollow">記事を読みに行く</a></p>
  </div><!-- /.entry-card-content -->
</div>
EOM;
  }
  echo $str;
}

上記の「$str = <<< EOM」と「EOM;」の間にあるhtmlコードが、「トップ記事位置」と「ボトム記事位置」にそのままプリント出力されます。

私のブログの記事は上記のようなhtmlフォーマットをしていますが、個々人のブログの設定によってフォーマットがそれぞれ違うと思いますので、自分のブログのhtml文を観察して、上記のコードを修正してみてください（例えば、記事の「サムネイルの形」「サムイネイルの大きさ」等の設定によって、記事フォーマットは変わるかもしれません）

その４「list.phpの修正」

「list.php」の中の二つの箇所に、以下のような修正を加えます。

・「90行目あたりの修正」

 if (have_posts()) : // WordPress ループ
   $count = 0;
   while (have_posts()) : the_post(); // 繰り返し処理開始
     $count += 1;

     //トップ記事にインフィード広告を表示 ★ここを追加！
     insert_article("top"); //★ここを追加

 ( is_list_style_bodies() ) {//一覧表示スタイルが本文表示

・「110行目あたりの修正」

   //3つ目のアイテムの下にインデックスリストミドルウィジェットを表示するか
   if ( $count == 3 && is_list_style_thumb_cards() && is_active_sidebar( 'widget-index-middle' ) ) {
     echo '<div id="widget-index-middle" class="widgets">';
     dynamic_sidebar( 'widget-index-middle' );
     echo '</div>';

   }
   //ボトム記事にインフィード広告を表示 ★ここを追加！
   insert_article("bottom"); //★ここを追加！

 endwhile; // 繰り返し処理終了 ?>


以上の修正で「トップ記事」と「ボトム記事」に、ランダムシャッフルされたインフィード広告が挿入されるはずです。