やったこと

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

「Simplicity」のテーマで「人気記事」と同じレイアウトで自分の好きな記事を表示させたい

web開発

WordPress「Simplicity」のテーマで、「人気記事」を表示させるウィジェットがありますが、あれと同じレイアウトで自分の「おすすめ記事」を表示させる方法です。

①「PHP Text Widget」をインストールする

ワードプレスに「PHP Text Widget」というプラグインをインストールします。これをインストールすると「テキスト」ウィジェットの中でPHPが実行できるようになります。別にこのプラグインじゃなくても、似たような機能を持つプラグインならなんでもかまわないと思います。

②style.cssを編集する

「style.css」に新しくcssを追加します。これは既存の「#popular-entries」というスタイルを「#recommended-entries」という名前でコピペしなおしたものです。下記の「.recommended-entry-thumb」というクラスは、画像を丸四角で切り抜きたいときに追加するものです。丸四角の切り抜きを使用しないときは、これ書かなくてよいです。

/* style.cssに以下を追記 */
div .recommended-entry-thumb img{
  border-radius:10px;
}
#recommended-entries ul {
  padding-left:0;
  list-style:none;
}
#recommended-entries ul li {
  clear: left;
  float: none;
  margin-bottom:10px;
  overflow: auto;
  zoom: 1;
}
#recommended-entries ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  width: 75px;
  height: 75px;
}
③functions.phpを編集する

「functions.php」の中に「おすすめ記事」を表示させる処理を追加します。「print_recommended_article()」という関数です。ちょっとコードが長いので記事を2つだけ出力するケースを書いています。もっと記事を追加したい場合はコードを追記してください。「遷移先のURL」の箇所は、別の自分のサイトのURLじゃなくてもＯＫです。つまり、あたかも自分のサイトの記事を紹介するように見せかけて、別のサイトに飛ばしたりもできるというわけです。

//functions.phpに以下を追記
function print_recommended_article(){
  $title1 = "【巨乳】美人ＯＬの豊満なおっぱいがローションでヌルヌルに！"; //記事のタイトル
  $link1 = "http://xxxx";  //遷移先のURL
  $img1 = "http://xxxx";   //記事に使う画像URL
  $target1 = "_self";      //遷移条件(_selfとか_blankとか)

  $title2 = "【美少女】黒髪おさげ少女の貧乳ちっぱいが可愛すぎる件！";
  $link2 = "http://xxxx";
  $img2 = "http://xxxx";
  $target2 = "_self";

$str = <<< EOM
<div id="recommended-entries">
  <ul class="recommended-entrys">
    <!-- entry1 -->
    <li class="recommended-entry">
      <div class="recommended-entry-thumb">
        <a href="{$link1}" class="recommended-entry-link" title="{$title1}" target="{$target1}"><img width="100" height="100" src="{$img1}" alt="{$title1}" /></a>
      </div><!-- /.recommended-entry-thumb -->
      <div class="recommended-entry-content">
        <a href="{$link1}" class="recommended-entry-title" title="{$title1}" target="{$target1}">{$title1}</a>
      </div><!-- /.recommended-entry-content -->
    </li>
    <!-- entry2 -->
    <li class="recommended-entry">
      <div class="recommended-entry-thumb">
        <a href="{$link2}" class="recommended-entry-link" title="{$title2}" target="{$target2}"><img width="100" height="100" src="{$img2}" alt="{$title2}" /></a>
      </div><!-- /.recommended-entry-thumb -->
      <div class="recommended-entry-content">
        <a href="{$link2}" class="recommended-entry-title" title="{$title2}" target="{$target2}">{$title2}</a>
      </div><!-- /.recommended-entry-content -->
    </li>
  </ul>
</div>
EOM;

  echo $str;
}
④「テキスト」ウィジェットを追加する

おすすめ記事を表示したいカラムに「テキスト」ウィジェットを追加します。設定は以下のようにします。

タイトル→「おすすめ記事」
テキスト→

<?php
print_recommended_article();
?>


以上で「テキスト」ウィジェットの領域に、自分で用意した「おすすめ記事」が表示されると思います。

本当は新しくウィジェットを自作したらいいと思うんですが、ワードプレス初心者の私にはなんだか難しそうなので、取り合えず応急措置として、といった感じです・・。