この記事は、Wordpressブログの「THE THOR」テーマを使っていて、プラグインなし、サムネイルなし、親テーマを触らずに関連記事のリンクを表示したい人向けの情報です。
THE THOR以外のテーマを使ってる人でも大丈夫です。
ウィジェットでショートコードを実行する準備
子テーマのfunction.phpに以下のコードを保存します。
add_filter('widget_text','do_shortcode');
THE THORテーマを使ってる人は「下記ユーザーカスタマイズエリア」と書かれているところの次にコピペしてください。それ以外の人も、function.php内にコピペしてください。
これで準備完了です。ウィジェットからショートコートを実行できるようになります。
※すでにこの記述がしてあった場合は何も追加しなくてOKです
関連記事を表示する関数を貼り付ける
今度は、さっきのadd_filterの下の行に次のコードを貼り付けてください。
function KarmaRelatedArticle(){
$num = 3; //関連記事の表示件数をここに入力する
global $post;
$oldpost = $post;
$q_obj = get_queried_object();
$np_id = $q_obj->ID;
$now_cat = get_the_category($np_id);
$c_id = $now_cat[0]->cat_ID;
$c_name = $now_cat[0]->cat_name;
$args = array(
//表示件数
'numberposts'=>$num,
//カテゴリID
'category'=>$c_id,
//日付で並び替え>post_date
//ランダム並び替え>rand
'orderby'=>'post_date',
//古い順に表示>ASC
//新しい順に表示>DESC
'order'=>'DESC',
//除外する投稿ID
'exclude'=>$np_id,
//記事だけを対象とする(固定ページを含まない)
'post_type'=>'post'
);
$n_post = get_posts($args);
$ans.='<ul class="karma_relat_list">';
foreach($n_post as $post):
setup_postdata($post);
$ttl = the_title("","",false);
$link = get_permalink();
$ans.='<li><a href="'.$link.'">'.$ttl.'</a></li>';
endforeach;
$ans.='</ul>';
$post = $oldpost;
wp_reset_postdata();
return $ans;
}
add_shortcode("karma_relat", "KarmaRelatedArticle");
このコードは、表示している記事のカテゴリを取得して、記事リンクを出力するプログラムです。リンクはulタグのリストになります。
2行目にある「関連記事の表示件数をここに入力する」の数字を書き換えることで、表示する件数を調整できます。
関数の解説とカスタマイズ
以下の処理で、ulタグとliタグを作っています。
$ans.='<ul class="karma_relat_list">';
//↑ansという箱にul開始タグを入れる
foreach($n_post as $post):
//↓記事の数だけ繰り返される
setup_postdata($post);
$ttl = the_title("","",false);
$link = get_permalink();
$ans.='<li><a href="'.$link.'">'.$ttl.'</a></li>';
//↑ansという箱にliタグに囲まれたaタグを入れる
//ここを繰り返すのでansの中身は、
//li aタグ /li
//li aタグ /li
//みたいな感じになる
endforeach;
//↓繰り返しが終わったあとul終了タグを入れる
$ans.='</ul>';
やってることはansの中にタグを入れていくだけなので、リストタグ以外に改変することもできます。
以下のように書き換えればテーブルタグで出力できます。
$ans.='<table>';
foreach($n_post as $post):
setup_postdata($post);
$ttl = the_title("","",false);
$link = get_permalink();
$ans.='<tr><td><a href="'.$link.'">'.$ttl.'</a></td></tr>';
endforeach;
$ans.='</table>';
ウィジェットから関数を呼び出す
最後は、ウィジェットからショートコードを呼び出して完成です。
ウィジェットのカスタムHTMLに以下をコピペして保存します。
☆karma_relat☆
投稿記事の下部にウィジェットを置けば、記事の最後に関連記事のリンクが表示されます。
※☆を半角のカッコ [ ] に書き換えてください。
スタイル設定
スタイルシートに以下をコピペすると、出力されたリストを装飾できます。
.karma_relat_list{
background-color:#fff; /*リスト全体の背景色*/
border-radius:5px;
box-shadow :0px 0px 3px #999;
padding:0.5em;
}
/*リストの間隔*/
.karma_relat_list li{
line-height:1.5; /*折り返されたときの行間*/
padding:0.5em; /*リンクごとの間隔*/
}
/*記号の表示*/
.karma_relat_list li::before{
content:'◆';
color:#999;
text-shadow:3px 3px 2px #ccc;
padding-right:0.8em;
}
/*リンクの色設定*/
.karma_relat_list li a{
color:#4040FF;
text-decoration:underline;
}
参考にしたサイト
ウィジェット内での投稿ID取得処理で参考にしたサイトです。
https://blog.kuromusubi.com/develop/platform/wordpress/20181112-post-3597