【SANGOカスタマイズ】カテゴリー別人気記事をテーマに実装してみた

以前書いた記事で、WordPressで現在のページと同じカテゴリーの人気記事を表示するカスタマイズを紹介しました。

[kanren id=”438″]

このカスタマイズの為にプラグインが二つ必要でインストールしたのですが、一つが完全にコレ専用になってしまっていたのでプラグインに頼らず実装させました。

今回はその手順を備忘録も兼ねて紹介しますよ！

[box class=”box33″ title=”このブログで行ったカスタマイズをまとめてあります！”][kanren id=”793″][/box]

テーマ側に実装するべき人

カスタマイズの内容的に、ウィジェットにphpコードが書けるようになるプラグイン「PHP Code Widget」が必須でした。

WordPressは、このようにプラグインをインストールすればお手軽に様々な拡張機能を利用できる点が最大の強みでもあると思います。しかし、あまりにもプラグインを入れすぎているとページを表示するのに時間がかかってしまったり、思わぬ誤作動を引き起こす原因になるなどデメリットも存在します。

このプラグインを他にもたくさん便利に使ってますよ！とか、ウィジェットでお手軽管理したいよ！って方はそのままでもいいと思いますが、このカスタマイズをしたいが為にプラグインを使っているのであれば勿体ないですよね。

こんな人は、今回紹介する手順で「PHP Code Widget」なしでも同じことができるようになりますので、是非実践してみて下さい！

実装の手順

親テーマに手を加えてしまうと万一の不具合に対応できなかったり、テーマをアップデートした時にせっかくのカスタマイズが上書きされてしまう可能性がありますので、作業は必ず子テーマで行うようにしてください！

必要なもの

[list class=”li-yubi li-mainbdr main-c-before”]

• FTPソフト等
• メモ帳などのエディタ

[/list]

子テーマにファイルを追加

カスタマイズを加えた場所がわからなくなってしまったり、コードがごちゃごちゃして見難くなってしまうことを防ぐため、パートファイルでコードを管理しておきます。

テキストエディタを開き、phpファイルを作成しましょう。名前ですぐ判別できるようにwpp-category.phpという名前で作りました。

ファイルの中には次のコードを記述します。

[codebox title=”wpp-category.php”]

if ( is_single() ) {//投稿ページでの挙動
 $cat = get_the_category();//現在のページのカテゴリー情報を取得
 $cat_name = isset( $cat[0] ) ? $cat[0]->cat_name : '';//取得したカテゴリー情報からカテゴリー名を抽出
 $cat_id = isset( $cat[0] ) ? $cat[0]->term_id : '';//取得したカテゴリー情報からIDを抽出
 } else if ( is_category() ) {//カテゴリーページでの挙動
 $cat_name = single_cat_title('',false);//現在のカテゴリー名を取得
 $cat_id = get_cat_ID($cat_name);//カテゴリー名からIDを取得
 $cats = get_term_children($cat_id, 'category');//現カテゴリーに含まれる子カテゴリのIDを配列として取得
 if ( !empty( $cats ) ) {//配列が空でなければ(子カテゴリーが存在していれば)
 foreach ($cats as $key => $value) {//配列をforeachループでカンマ区切りして変数へ追加
 $cat_id .= ',' . $value;
 }
 }
 }
?>
<?php if ( is_single() || is_category() ) ://投稿ページとカテゴリーページのみ表示 ?>
 <div class="widget my_popular_posts">
 <h4 class="widgettitle dfont"> 「<?php echo $cat_name; ?>」</br>同じカテゴリの人気記事</h4>
 <?php if ( function_exists( 'wpp_get_mostpopular' ) ) : ?>
 <?php $args = array( 
 'limit' => 5,//表示数
 'range' => 'all',//集計する期間（weekly,monthly,all）
 'order_by' => 'views',//閲覧数で集計、comments（コメント数で集計）、avg（1日の平均で集計））
 'thumbnail_width' => 81,
 'thumbnail_height' => 81,
 'cat' => $cat_id,
 'wpp_start' => '<ul class="my-widget show_num">',
 'wpp_end' => '</ul>',
 'stats_views' => 0,//閲覧数表示（1 or 0）
 'stats_comments' => 0,//コメント数表示（1 or 0）
 'post_html' => '<li><a href="{url}"> <figure class="my-widget__img">{thumb_img}</figure><div class="my-widget__text">{text_title} <span class="dfont views"> {stats}</span></div></a></li>' );
 ?>
 <?php wpp_get_mostpopular( $args ); ?>
 <?php endif; ?>
 </div>
<?php endif; ?>

[/codebox]

これをコピペして保存し、サーバーの子テーマ内にアップロードしましょう。おすすめはsango-theme-child/partsですよ！

これで人気記事を出力するプログラムは完成ですが、このままではブログ上のどこにも表示されませんので、このファイルを読み込んであげる必要があります。

[memo title=”MEMO”]

2018/1/13 追記：

人気記事をWordPress Popular Postsを使わずに実装したい場合は、コチラの記事をご覧下さい！

[kanren id=”1136″]

その場合、先ほど作ったwpp-category.phpの中から次の記述をすべて削除して

[codebox title=”wpp-category.php”]

<?php if ( function_exists( 'wpp_get_mostpopular' ) ) : ?>
 <?php $args = array( 
 'limit' => 5,//表示数
 'range' => 'all',//集計する期間（weekly,monthly,all）
 'order_by' => 'views',//閲覧数で集計、comments（コメント数で集計）、avg（1日の平均で集計））
 'thumbnail_width' => 81,
 'thumbnail_height' => 81,
 'cat' => $cat_id,
 'wpp_start' => '<ul class="my-widget show_num">',
 'wpp_end' => '</ul>',
 'stats_views' => 0,//閲覧数表示（1 or 0）
 'stats_comments' => 0,//コメント数表示（1 or 0）
 'post_html' => '<li><a href="{url}"> <figure class="my-widget__img">{thumb_img}</figure><div class="my-widget__text">{text_title} <span class="dfont views"> {stats}</span></div></a></li>' );
 ?>
 <?php wpp_get_mostpopular( $args ); ?>
 <?php endif; ?>

[/codebox]

代わりにこう書き加えて下さい。

[codebox title=”wpp-category.php”]

<?php if ( function_exists ( 'sga_ranking_get_date' ) ) ://sgarが有効化されていれば ?>
<?php my_rank_sgar_sb( 30, 5, ＄cat_id );//サイドバー用。パラメータは順に期間,件数,カテゴリID ?>
<?php endif;//END sgarが有効化されていれば ?>

[/codebox]

[/memo]

テンプレートパーツにインクルード

WordPressに実装されている機能を使い、先ほどアップロードしたファイルを読み込ませてあげましょう。

表示させたい箇所はサイドバーです。WordPressではサイドバーの出力はsidebar.phpを優先的に利用しにいきます。SANGOでもsidebar.phpがしっかりと用意されていますので、親テーマ内からダウンロードして、子テーマの同じ階層にアップロードします。

アップロードした子テーマ側のsidebar.phpを開き、次のコードを探しましょう。

[codebox title=”sidebar.php”]

<?php dynamic_sidebar( 'sidebar1' ); ?>

[/codebox]

この部分がサイドバーを出力する記述ですので、この前後のお好みの部分に読み込ませるコードを付け足します。

[codebox title=”sidebar.php”]

<?php get_template_part( 'parts/wpp-category' ); ?>

[/codebox]

[memo title=”MEMO”]追尾サイドバーに表示させたい場合はこちらのコードを探しましょう。[codebox title=”sidebar.php”]

<?php dynamic_sidebar( 'fixed_sidebar' ); ?>

[/codebox][/memo]

このブログの場合はサイドバー上に設置したので、次のような形になりました。

[codebox title=”sidebar.php”]

<div id="notfix">
 <?php get_template_part( 'parts/wpp-category' ); ?>
 <?php dynamic_sidebar( 'sidebar1' ); ?>
</div>

[/codebox]

ここまでできたら上書き保存し、子テーマ内のファイルを上書きしましょう。

ブログを確認し、反映されていれば無事作業完了です。おつかれさまでした！

まとめ

テーマ側を編集することでプラグインを減らせる可能性があります。その分編集の利便性は劣ってしまいますが、少なからず恩恵はあると思います。

[list class=”ol-circle li-accentbdr acc-bc-before”]

1. 人気記事を出力させるプログラムファイルを作る
2. 作ったファイルを子テーマにアップロード
3. サイドバーを編集して、作ったファイルを読み込ませる

[/list]

ウィジェットエリアがごちゃごちゃするのが嫌いな方も、これを実践することで少しだけスッキリするかもしれませんね！