ショートコード＋ウィジェットでサイドバーに人気記事を表示させる方法

2015/09/25 2017/03/12

サイドバーに人気記事を表示させる方法

ショートコードで人気記事を編集するソースコード

　
ウィジェットに表示する「人気記事」をショートコードで自由な記事を指定して編集出来る関数を作成しました。
　
ソースコードは、以下の通りです。
　

function getRecommendList ( $arg ) {
  extract ( shortcode_atts ( array (
    'postid' => '2874',
  ), $arg ) ); 

  $postid_array = explode ( ",", $postid );

  $html  = "";
  $html .= '<!-- 最近の読み物 --><div id="kanren">';

  foreach ( $postid_array as $val ) {
    $post_array = get_post ( $val );

    $html .= '<dl class="clearfix">';
    $html .= '<dt><a href="' . $post_array->guid . '">';
    $html .= get_the_post_thumbnail ( $val, 'thumb150' );
    $html .= '</a>';
    $html .= '<div align="center">' . date ( 'Y.m.d', strtotime ( $post_array->post_date ) ) . '</div> </dt>';
    $html .= '<dd><h5><a href="' . $post_array->guid . '">';
    $html .= $post_array->post_title . '</a></h5>';
    $html .= '<div class="smanone">';
    $html .= '<p>' . $post_array->post_excerpt . '</p>';
    $html .= '</div></dd></dl>';

  }
  $html .= '</div><!-- /最近の読み物 -->';

  return $html;
}
add_shortcode('getRecommendList', 'getRecommendList');
add_filter('widget_text', 'do_shortcode' );

function getRecommendList ( $arg ) {

extract ( shortcode_atts ( array (

'postid' => '2874',

), $arg ) );

$postid_array = explode ( ",", $postid );

$html = "";

$html .= '<div id="kanren">';

foreach ( $postid_array as $val ) {

$post_array = get_post ( $val );

$html .= '<dl class="clearfix">';

$html .= '<dt><a href="' . $post_array->guid . '">';

$html .= get_the_post_thumbnail ( $val, 'thumb150' );

$html .= '</a>';

$html .= '<div align="center">' . date ( 'Y.m.d', strtotime ( $post_array->post_date ) ) . '</div> </dt>';

$html .= '<dd><h5><a href="' . $post_array->guid . '">';

$html .= $post_array->post_title . '</a></h5>';

$html .= '<div class="smanone">';

$html .= '<p>' . $post_array->post_excerpt . '</p>';

$html .= '</div></dd></dl>';

}

$html .= '</div>';

return $html;

}

add_shortcode('getRecommendList', 'getRecommendList');

add_filter('widget_text', 'do_shortcode' );

　
このソースコードは、functions.phpに記載します。
ファイルの場所は以下の場所です。
/wp-contents/theme/{テーマのフォルダ}/functions.php
　
functions.phpについては、下記に詳しい記事を書いていますので合わせて参考にしてください。
　「WordPressの functions.phpがある場所」
　
　

ウィジェットに編集するショートコード

　
ウィジェットの「内容」のところに編集するショートコードは以下のような感じです。
投稿は、POST IDで指定をします。複数指定する場合は、「,（カンマ）」で区切ります。数の制限はありません。

[getRecommendList postid=1,2,3]

1	[getRecommendList postid=1,2,3]

イラスト図解式この一冊で全部わかるWeb技術の基本

ウィジェットの見え方

　
編集すると、下記の様に表示されます。
まさに、右側のサイドナビゲーションに表示されている「最近の読み物」です（笑）。
　

　
　

「人気記事」の編集の際の注意点

　
基本的な処理はこのままで問題ありませんが、HTMLを出力する部分は、あなたのサイトのテーマに合わせて改変してください。
このブログは、Stinger5を利用させていただいていますので、同じテーマであればそのままでも大丈夫な場合もあるでしょう。
　
　
また、23行目の「$post_array->post_excerpt」は「抜粋」を出力する設定になっています。ここも違うものにしたい場合が多いのではないかと思いますので、必要に応じて変更してください。
　
組み込む際の項目をどう指定すればいいかについては、「get_post()」関数についての下記オフィシャルサイトが参照になるでしょう。
　https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_post
　
　
また、このエス技研ブログではサムネイルは必ずありますので、サムネイルがない場合を想定していませんが、サムネイルの画像がない場合を想定するならば、16行目を下記の処理に変更するといいでしょう。
　

if ( has_post_thumbnail() ) { // サムネイルを持っているときの処理 ?>
  $html .= get_the_post_thumbnail ( $val, 'thumb150' );
} else { // サムネイルを持っていないときの処理 ?>
  $html .= '<img src="' . get_template_directory_uri() . '/images/no-img.png" alt="no image" title="no image" width="100" height="100" />';
}

if ( has_post_thumbnail() ) { // サムネイルを持っているときの処理 ?>

$html .= get_the_post_thumbnail ( $val, 'thumb150' );

} else { // サムネイルを持っていないときの処理 ?>

$html .= '<img src="' . get_template_directory_uri() . '/images/no-img.png" alt="no image" title="no image" width="100" height="100" />';

}

　
　
また、一番最後の行の「add_filter(‘widget_text’, ‘do_shortcode’ );」は、ウィジェットにショートコードを編集する際のコマンドですので、テンプレートに組み込む場合などは不要です。
　
ショートコードについては下記に記事を書いていますので参考にしてみてください。
　「WordPress投稿にPHPを記述するショートコードの使い方add_shortcode」
　「WordPressのウィジェットでショートコードを使う方法add_filter」
　
　

「人気記事」のショートコードのプログラムを作った経緯

　
このブログの右ナビゲーションにある「最近の読み物」は、アナログ的に手作業で更新していました。
Google Search Console（旧 Google WebMaster Tool）や Googleアナリティクスを参考に、人気があるコンテンツを中心に掲載をしていました。
　
実際にアクセスが多い記事もあれば、「いいね！」が多い記事もあり、コメントが多い記事、読んで欲しい記事など複合的に判断して掲載していました。
単なるアクセスランキングにはしたくなかったので。
　
　
でも、これ、単純に HTMLのソースを手書きしてウィジェットに貼り付けるという、かなりアナログな方法を採っていましたので更新がかなーり面倒だったのです。
　
そんなわけで、定期的な更新というわけにはいきませんでした。
　
でも、「最近の読み物」というコーナーが最近のものを更新されていないのでは役に立たないので、簡単に更新できる方法を考えたワケです。
　
分かっている方にとっては非常に簡単な内容で、純粋な処理の部分は 10行にも満たないわけですので、「もっと早くに作っておけばよかった」という感じはするのですが、知らないことは作れないわけで、ということですね。
　
カスタムフィールドを管理するプラグインの「Advanced Custom Fields」の使い方を調べているうちに投稿情報を取り出す方法をいろいろ知りまして、「なんだ簡単じゃないか」と思ったわけです。
そんな「Advanced Custom Fields」の使い方については、下記に記事を書いています。
　「カスタムフィールド決定版！Advanced Custom Fields全項目完全解説・管理画面編」
　「Advanced Custom Fieldsの全項目解説・公開側表示編集編」
　
　
ソース自体は大したものではないですが、せっかく作りましたので同じようなことを望まれている方は参考にしてみてください！

- WordPress

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: WordPress　プラグインのアップデート失敗でデータが消える事態が！

プラグインのアップデート失敗でデータが消失。不具合が起こる原因はあちこちにありますので常に慎重にバックアップをしましょう。

: BizVektor環境の引越しでメニュー、バナーが消える不具合の対応方法解説

BizVektor環境の引越し方法と不具合が発生しやすい箇所の解説です。引っ越し作業をする際にURLやファイルのパスを置換する際の手順解説と対応方法についての解説です。

: シンタックスハイライトの5システム比較のまとめ・WordPressでも使える

シンタックスハイライト5種の比較検討のまとめ記事。WordPressで使う目的だがプラグインの比較検討ではないのでどのサイトでも導入可能。

: wp_mail()関数でWordPressのスパム対策済のメールフォーム作成

WordPressでメール送信フォームを作成するための関数「wp_mail()」の使い方の解説。CC、BCC、添付ファイルも HTMLメールも設定可能。

: WordPressの functions.phpがある場所

WordPressのカスタマイズには大切な functions.phpですが、最初はその場所がどこなのか分かりませんのでその説明をしています。

: WordPress　画面が真っ白になる対応の一つ　デバッグモード

WordPressで画面が真っ白になる不具合があった場合などのために用意されているデバッグモードの解説です。

: WordPress記事のまとめ一覧・インストール、プラグイン、カスタマイズの記事

WordPress記事のまとめ。WordPressの記事が多くなってきたので記事の説明を追加した一覧記事を作成しました。各設定から機能のカスタマイズ、運用ノウハウまで参考に！

: WordPressプログラム全体で定数や変数を利用する場合の設定方法

WordPressで関数を追加するときなど、全体で同じ変数を使いたいと思う場面の対処方法です。変数を記述する関数はfunctions.php、wp-config.phpのいずれか。

: WordPressの送信メールが協定世界時（UTC・グリニッジ標準時）の問題対応

WordPressから送信されてくるメールが9時間ずれている。その不具合の解消方法と根本原因の解説です。date_default_timezone_set();の設定を変更で対応できます。

: ob_start、ob_get_contentsを利用しショートコード内でinclude・WordPressプラグイン開発

WordPressのプラグインやショートコードの関数作成でテンプレートをincludeする際に利用するob_start関数、ob_get_contents関数を紹介。