やったこと

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

Simplicityのテーマでトップ記事とボトム記事にランダムにインフィード広告を表示する

ワードプレスの「Simplicity」のテーマを色々改造してるんだけど、トップページの記事一覧のところで「インフィード広告」っぽいのを挿入する修正を施してみた。

インフィード広告っていうのは、あたかも記事のようなフォーマットで表示される広告のことで、ユーザーがコンテンツだと思ってついクリックしてしまう確率が高い、非常にえげつない広告のことです。

こいつをこっそり記事一覧の「始めの記事」と「お尻の記事」に忍び込ませておいて、ユーザーをアンテナサイトへ飛ばしてしまおうという寸法さ。

以下がその修正内容です。

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

「functions.php」が置いてあるディレクトリに、新たに「recommend.php」を作成する。

その2「recommend.phpの修正」

「recommend.php」の内容は以下のようにする。
ちょっとコードが長いので、広告記事数が全部で2つのケースについて書いています(この2個をランダムシャッフルして表示します)。もっと記事を追加したい場合はコード追加してください。

<?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);
?>
その3「functions.phpの修正」

「functions.php」に以下を追記する。

//おすすめ記事のロード処理
require("recommend.php");

//おすすめ記事プリント関数
function print_article($num){
  global $my_recommended_article_list;
  $article = $my_recommended_article_list[$num];

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

$str = <<< EOM
<div id="post-article" class="entry entry-card  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;
}
その4「WordPressプラグインのインストール」

「テキスト」ウィジェットの中でPHPコードが実行できるようになるプラグインワードプレスにインストールします。私は「PHP Text Widget」というプラグインをインストールしていますが、同じような機能を持つものなら何でもかまわないと思います。

その5「WordPressウィジェットの設定」

ワードプレスの「外観」→「ウィジェット」の設定で、「インデックストップ」の領域と「インデックスボトム」の領域に「テキスト」ウィジェットを追加する。

2つの「テキスト」ウィジェットの内容は、それぞれ以下のように設定する。

■テキストウィジェット(その1)
「タイトル」→「」(空っぽ)
「テキスト」→

<?php
print_article(0);
?>

■テキストウィジェット(その2)
「タイトル」→「」(空っぽ)
「テキスト」→

<?php
print_article(1);
?>


これで、トップ記事とボトム記事の領域に「recommend.php」に書き込んだ記事がランダムでシャッフルされて表示されるはずです。


あと注意点ですが、この修正が原因かどうかは分からないのですが、私の環境でブログのRSS機能が急に利用できなくなる不具合が発生しました。この不具合の直し方は「前回の記事」に書いてありますので、もしRSSが変になっていたら試してみてください。

※P.S.
この記事の方法だと、記事のレイアウトが3列表示のときに、表示が崩れてしまうとのご指摘がありました。3列表示のレイアウトのときは下記の方法で修正をしてみてください。
Simplicityのテーマでインフィード広告を挿入する(記事3列表示の場合) - やったこと