RSSの登録者増加に一役買うかも！？WordPressで記事の最後に次回予告を自動挿入する方法

パクリじゃないです。レペゼンです。オマージュです。

どうしてもシンタロヲフレッシュさん（@shintarowfresh）がやっている次回予告（下書きを表示する）をこのブログでもやりたくていろいろ調べてやっと導入することが出来たのでご紹介したいと思います。

最終イメージはこんな感じです。

ちなみにWordPressのカスタマイズはCSS知識ゼロのド素人でも徹夜で取り組めばどうにかなるでも書いたようにこういうの全くの初心者やからな！

ちなみに今回行う主な手順は以下となります。

元となるコードを用意
ランダムに1記事取得するように修正する
任意の文字を追加し、divやspanで囲う
cssを指定する
Feedlyボタンを追加する

じゃぁ早速やってみましょう！！

メニュー

元となるコード
完成！！下書きをランダムに取得するコード
任意の文字を追加しよう！divやspanを使ってclassを指定しよう！
cssで装飾しよう！Feedlyボタンを追加しよう！
コードを挿入する場所を見つけるのが1番大変でした

元となるコード

まずは下書きの取得から。

元のコードはこちらです。

<aside>
<h3 class="widget-title">【現在、執筆中です！】</h3>
<ul>
<?php
$sql = "SELECT * FROM $wpdb->posts
           WHERE post_type = 'post' AND post_status = 'draft'
           ORDER BY post_date DESC LIMIT 3";
$rows = $wpdb->get_results($sql);
foreach ($rows as $row) {
    echo "<li>$row->post_title</li>";
}
?>
</ul>
</aside>

参考：WordPressで$wpdb->postsにアクセスして下書き中の投稿タイトルを一覧表示する | 西沢直木のIT講座

それぞれのコードについては元ページに詳しく解説が載っておりますのでそちらを確認してください。

このコードはサイドバーに挿入すること前提になっており、そのまま使うことが出来ませんので修正していきましょう。

完成！！下書きをランダムに取得するコード

まずは上のコードから要らない部分を省きました。

<?php
$sql = "SELECT * FROM $wpdb->posts
           WHERE post_type = 'post' AND post_status = 'draft'
           ORDER BY post_date DESC LIMIT 3";
$rows = $wpdb->get_results($sql);
foreach ($rows as $row) {echo "<li>$row->post_title</li>";}?>

元コードのままだと下書きから新しい順に3記事取得することになっていますのでそれを下書きからランダムに1記事取得するように変更してやります。

シンタロウフレッシュさん（@shintarowfresh）の記事を参考にし修正したのがこちら

<?php
$sql = "SELECT * FROM $wpdb->posts
        WHERE post_type = 'post' AND post_status = 'draft'
        ORDER BY RAND() LIMIT 1";
$rows = $wpdb->get_results($sql);
foreach ($rows as $row) {echo "$row->post_title" ;} ?>

参考：[WordPress] 下書きのタイトルを取得して、次回予告につっこむ * prasm

変更箇所だけ

変更前

ORDER BY post_date DESC LIMIT 3";

変更後

ORDER BY RAND() LIMIT 1";

コードの意味とかまったく分かりませんから聞かれてもすいません。

ちなみにこのまま実装するとこんな感じです。

このままだと完成形には程遠いのでいろいろ付け加えていきます。

任意の文字を追加しよう！divやspanを使ってclassを指定しよう！

下書きのタイトルだけ表示されてもなんのこっちゃわからないので文字を追加していきましょう。
例えばこのブログではこういう風に表示するようにしてます。

次回の記事はおそらく文章を書くならアウトラインをしっかり決めようになるでしょう。
更新を逃さない！便利なRSS登録はこちらから

またあとでcssで装飾することも考えてdivやspanで囲っていきます。
改行したくなかったのでspanを使いました。
divやspanのidやclassは任意の文字列を付けてください。

<div id="nextshow">
<span class="nextarticle">次回の記事はおそらく
<span class="nextshow">
<?php
$sql = "SELECT * FROM $wpdb->posts
        WHERE post_type = 'post' AND post_status = 'draft'
        ORDER BY RAND() LIMIT 1";
$rows = $wpdb->get_results($sql);
foreach ($rows as $row) {echo "$row->post_title" ;} ?>
</span>
になるでしょう。</span>
</div>

divやspanで囲うってなんぞや？？って方もいると思うのでイメージを作ってみました。こちらを見てもらえればなんとなくイメージつかめるかも。

ようは背景色を付けたかったのでdiv要素で全体を囲みました。
spanで分けたのは次回予告は文字サイズを変えたかったのでcssをそれぞれ指定したかったのと改行したくなかったからです。divだと改行してしまうので。

このコードだとこんな感じに表示されます。

あとはcssでいろいろしてFeedlyボタンを追加すれば完成ですね。

それぞれの要素の違いはこちらを見ていただければ理解しやすいと思います。

参考：p要素、div要素、span要素のそれぞれの違い | TechMemo
参考：First step CSS – Section 4

cssで装飾しよう！Feedlyボタンを追加しよう！

次にcssを使って文字を装飾していきます。

私はこんな風にしています。
ちなみにidはシャープ「#」、classはドット「.」で指定します。

#nextshow{
  background-color:#FFFACD; }

.nextshow{
  font-size:20px; }

参考：スタイルシートの基礎知識とCSS一覧 | ウェブランサー
参考：カラーコード表

あとはFeedly登録ボタンと購読を~~うながす~~お願いする文字を追加してやります。
次回予告と区別するため「br」で改行してます。

<br>更新を逃さない！便利なRSS登録はこちらから<?php if ( function_exists( 'fi_the_button' ) ) fi_the_button(); ?>

Feedlyのコードはこちらを参考にしてください。

参考：Feedly Insight、Feedly の購読者数をあれこれできる WordPress プラグイン専用公式ページ

これで完成しました！

最終的なコードはこちらです。

<div id="nextshow">
<span class="nextarticle">次回の記事はおそらく
<span class="nextshow">
<?php
$sql = "SELECT * FROM $wpdb->posts
        WHERE post_type = 'post' AND post_status = 'draft'
        ORDER BY RAND() LIMIT 1";
$rows = $wpdb->get_results($sql);
foreach ($rows as $row) {echo "$row->post_title" ;} ?>
</span>
になるでしょう。
<br>更新を逃さない！便利なRSS登録はこちらから<?php if ( function_exists( 'fi_the_button' ) ) fi_the_button(); ?></span>
</div>

あとは挿入する場所ですね。

コードを挿入する場所を見つけるのが1番大変でした

このブログは、CMSはWordpresでテーマはSimplicityを使っていますのでその環境での挿入場所となります。
他のテーマを使っている方で同じ場所がなければ個別におっしゃっていただければお調べします。

名前からして「単一記事の投稿（Single.php）」っぽいですか「entry-body.php」でした。
「entry-body.php」を「content」で検索してその直下に先ほどのコードを挿入してください。
必ず挿入したら記事をリロードして、実際の表示を確認してください。
※必ずバックアップを取ってから行ってください。もし万が一トラブルが発生した場合でも一切の責任は負いませんので取り扱いには十分ご注意下さい。