• HOME
  • >
  • タグ: wordpress,プラグイン
  • プラグインを使わないで、関連する投稿記事を表示する

    WordPressには、標準装備以外の機能を追加してくれるプラグインが数多く配布されています。
    とても便利なのでついつい、あれもこれもとインストールしてしまいがちですが、メリットがあれば当然デメリットもあるわけで。
    プラグインを入れ過ぎるとアップデート作業も増えますし、めったにないことですがアップデートの際に重大な不具合を起こすリスクもあります。

    WordPress Related Postsのアップデートでエラー

    この前、WordPress Related Postsのアップデートで、そのめったにない不具合を経験しました。
    WordPress をバージョン 4.8 に更新して、そのあとWordPress Related Postsをバージョン 3.6.4 にアップデートしようと更新ボタンを押した途端、画面が真っ白!何も表示されない状態になってしまいました。
    管理画面も真っ白で入ることができず、私の頭の中も真っ白に!
    本来ならこんなトラブルの時こそ、エラーの原因を追究してスキルを上げるチャンスなのですが、真っ白な画面が恐ろしくて気持ちの余裕をなくし、すぐにFFFTPを立ち上げてサーバーからWordPress Related Postsを削除しました。
    それで一応問題なくサイトは復旧しました。

    あとから検索するとこのエラーに対して、解決法がネットにありました。
    原因は「PHPのバージョンが5.3以下だと作動しない」ことだそうです。

    参照サイト:

    【WordPress】関連記事プラグインRelated Postsエラーの解決方法

    プラグイン無しで関連投稿記事を表示させる方法

    WordPress Related Postsはバックアップを取ってあったので、旧バージョンをサーバーにアップし、そのまま使い続けていました。こんな感じで関連記事を表示させています。

    しかし、このプラグインのアップデートは当分できないので、この際、プラグインを使わず関連投稿記事を表示させてみることにします。

    以下のサイトを参照させていただきました。ありがとうございます!

    WordPressのサムネイルつき関連記事を表示する

    プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]

    『WordPressのサムネイルつき関連記事を表示する』のコードでは、サムネイルの下にタイトルといった形で横並びに5個表示されます。
    プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]』のコードでは、サムネイルの横にタイトルと記事の抜粋を表示し、それを10個縦に並べたスタイルになります。
    どちらも関連した記事を、ページを読み込むごとにランダムに表示させます。

    新規にテンプレートを作成する
    related-entries.php

    テーマ内にrelated-entries.phpというファイルを新規に作成します。
    コードは下記のようにしました。

    <?php
    //カテゴリ情報から関連記事を5個ランダムに呼び出す
    $categories = get_the_category($post->ID);
    $category_ID = array();
    foreach($categories as $category):
      array_push( $category_ID, $category -> cat_ID);
    endforeach ;
    $args = array(
      'post__not_in' => array($post->ID,'booklist'),
      'posts_per_page'=> 5,//表示させる個数
      'category__in' => $category_ID,
      'orderby' => 'rand',//ランダムに表示させる
    );
    $query = new WP_Query($args); ?>
      <?php if( $query -> have_posts() ): ?>
      <?php while ($query -> have_posts()) : $query -> the_post(); ?>
    
         <ul class="related-entry">
          <li class="related-entry-thumb">
      <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
            <?php if ( has_post_thumbnail() ): ?>
            <?php the_post_thumbnail(array(100,100)); //サムネイルのサイズ?>
            <?php endif; ?>
            </a>
          </li>
                 <li class="related-entry-title"> <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
              </a></li>
        </ul>
    
      <?php endwhile;?>
      <?php else:?>
      <p>記事はありませんでした</p>
      <?php
    endif;
    wp_reset_postdata();
    ?>
    <br style="clear:both;">
    

    下記のコードをテーマのテンプレートの表示させたい所に挿入します。
    一般的にはsingle.phpに表示させるようです。

    
     <!-- 関連する投稿ここから -->             
    
                <div id="related-entries">
      <h3>関連する投稿</h3>
      <?php include( TEMPLATEPATH . '/related-entries.php' ); ?>
    </div><!-- #related-entries -->
         <!-- 関連する投稿ここまで -->
    

    (※)今までWordPress Related Postsを導入していた場合は、テンプレートに記述してある以下のコードを必ず削除しましょう。

    <?php wp_related_posts()?>

    style.CSSのコードも書いておきます。あまり参考にならないかもしれませんが・・・
    (※ただ今cssを修正中です。)
    仕上がりはこんな感じです。5個の関連記事を横並びにしてみました。

    一つプラグインを減らすことができて、ちょっとスッキリです。と言いたいところですが、こんな記事を見つけました。

    【WordPress】プラグイン選びのポイント~悪いプラグインって何?

    私もプラグインをあれこれ入れてみては削除し、を繰り返してきたのでデータベースには相当ゴミがたまっているはず。次回は、溜まったゴミを削除するプラグインClean Optionsを試してみたい。

    関連記事を表示する「WordPress Related Posts」を少しカスタマイズしてtopページにも表示してみました。

    WordPressの投稿に関連記事を表示するプラグインはいろいろありますが、私が最初に導入したのは「Yet Another Related Posts Plugin」でした。
    「Yet Another Related Posts Plugin」は日本語対応。投稿と関連性の高い記事を自動選択して、トップページとシングルページに表示してくれます。
    これまで関連する投稿のタイトルだけを表示していたのですが、急に画像表示もしてみたくなり設定を変えてサムネイル表示してみたところ、下図のような見た目になりました。

    Related01

    無理やり画像を縮小しているため、縦横比が合わなくてちょっと歪な画像になっています。
    「Yet Another Related Posts Plugin」の仕様なのか、プラグインのせいではないのか確認はしていないのですが、この際他のプラグインを試してみることに。

    関連記事プラグイン WordPress Related Posts の初期設定の方法と使い方」を参照させていただき「WordPress Related Posts」をインストールしてみました。

    下図が「WordPress Related Posts」の設定画面。機能が少ないので設定が簡単です。

    Related03

    8種類のレイアウトから表示タイプを選ぶことができます。
    どのタイプもビジュアルがきれいです。

    Momma

    Related04Modern
    Related05

    Vertical (Large)
    Related06

    Vertical (Medium)

    Related13

    Vertical (Small)
    Related08 Pinterest Inspired
    Related09

    Two Columns
    Related10 Plain (your own css)
    Related12

    今回は”Momma”を選択して関連投稿を10個表示してみました。
    無理やり正方形に縮小することなく画像を切り取るので、すっきりした表示になります。

    Related02

    ログインしている状態なら、投稿ページに「Edit Related Posts」ボタンが表示されます。
    ボタンをクリックすると、関連記事を入れ替えることができます。
    親切な機能と言っていいのか?面倒と言えば面倒のような。楽しいオマケ機能です。

    Related14

    Auto Insert Related Posts(or add<?php wp_related_posts()?>to your single post template) にチェックを入れると、シングルページ(投稿個別記事)のみに関連投稿が表示されます。

    Related07

    チェックを外してテンプレートに直接下記コードを追加すれば、任意の場所に表示させることができる、ということなのでトップページとシングルページの両方に表示できるようにちょっとだけカスタマイズしてみました。

    &lt;?php wp_related_posts()?&gt;

    WordPressのテーマで使用しているcontent.phpの任意の場所にコードを挿入しました。
    備忘録として下記にメモしておきます。

    <br>
    ~省略~<br>
    &lt;div class="entry-summary"&gt;<br>
    	&lt;?php the_excerpt(); ?&gt;<br>
    		&lt;/div&gt;<br>
    &lt;!-- .entry-summary --&gt;<br>
    		&lt;?php else : ?&gt;<br>
    &lt;div class="entry-content"&gt;<br>
    			&lt;?php the_content( __( 'Continue reading &lt;span class="meta-nav"&gt;&amp;rarr;&lt;/span&gt;', 'twentytwelve' ) ); ?&gt;<br>
    			&lt;?php wp_link_pages( array( 'before' =&gt; '</p>
    <p>&lt;div class="page-links"&gt;' . __( 'Pages:', 'twentytwelve' ), 'after' =&gt; '&lt;/div&gt;<br>
    ' ) ); ?&gt;<br>
    		&lt;/div&gt;<br>
    &lt;!-- .entry-content --&gt;<br>
    		&lt;?php endif; ?&gt;<br>
             &lt;!--関連する投稿ここから --&gt;<br>
            &lt;?php wp_related_posts()?&gt;<br>
            &lt;!--関連する投稿ここまで --&gt;<br>
    &lt;footer class="entry-meta"&gt;<br>
    			&lt;?php twentytwelve_entry_meta(); ?&gt;<br>
    ~省略~<br>
    

    追記:

    2017年に「WordPress Related Posts」の使用をやめて、プラグイン無しで関連記事を表示させるようにしました。
    「プラグインを使わないで、関連する投稿記事を表示する」

    WordPressからFacebookに自動投稿する「Social Networks Auto-Poster」

    rssGraffitiブログで書いた記事をFacebookに自動投稿してくれる無料アプリ、「RSS Graffiti」が4月30日、いきなり(!)サービスを終了してしまいました。

    私は非社交的な性格なので、SNSには向かないのですが、Facebookの機能を覚える必要性があってアカウントを持っています。
    それでこれまでWordPressで書いたブログを「RSS Graffiti」を利用してFacebookに自動投稿してきたのですが、昨日、「RSS Graffiti」がサービス終了したという記事を見つけ慌てました。

    Facebookページを開いてアプリの確認をしてみると、そこには、涙ポロリの丸顔キャラクターが「RSS Graffiti is no longer available.」というメッセージとともに表示されました。 英語翻訳サイト「weblio」で機械翻訳すると、「RSS Graffitiは、もはや利用できません」とのこと。

    無料アプリでは、いきなりのサービス終了もありがちなことらしいです。仕方ないので代替アプリを探してみました。

    検索してみるとWordPressの場合は、プラグインがいろいろあるようです。
    今回は「Social Networks Auto-Poster」を使ってみることにします。
    サイト「9ineBB」の記事『WordPressでFacebookのページへ自動投稿するのを 「NextScripts: Social Networks Auto-Poster」を使って行う方法』を参照しながら設定しました。

    プラグインのインストールは通常通り、WordPressのプラグイン画面から簡単にできますが、「Social Networks Auto-Poster」の設定に必要な

    • FacebookのApp ID
    • FacebookのApp secret

    を、取得するにはFacebook側でアプリの設定をしなければなりません。
    私はそこのところのやり方を知らなかったので、「9ineBB」のように丁寧な解説をしてくれるサイトがなければ、自力で設定するのは大変だったと思います。

    「Social Networks Auto-Poster」の導入を考えている方、『WordPressでFacebookのページへ自動投稿するのを 「NextScripts: Social Networks Auto-Poster」を使って行う方法』は、お勧めですよ。

    追記 2015年5月5日

    「Social Networks Auto-Poster」の設定を見直して修正しました。
    あれこれ設定を変えてテストしてみました。ブログを更新すると瞬時にFacebookの方に反映されます。
    でも連続投稿すると、「ちょっと待ったー」ってなるようです。
    Auto-Poste10
    「Post Type」を上図のように設定すると、Facebookでは下図のように表示されます。
    いろいろ詳細な設定ができて、高機能のプラグインですね。
    Auto-Poster08