私が運営する素材サイト「ちびそざい」に、カテゴリー、タグ、検索結果ページに並べ替え機能を実装したので備忘録を残します。
新しい順、古い順、ランダム、人気順、♥いいねが多い順にソートできます。
使用テーマはCocoonです。
以下のサイトを参考に作成しており、本記事ではやったことの手順のみ書いています。
コードは参考サイトにあるものを自分用にアレンジさせていただいたもので、原型はあくまで参考サイト・Ateitexe様のものなのでご承知おきください。（私はこんなすごいコード書けません）
- functions.phpにコードをコピペ
- sort.phpを作ってFTPにアップロード
- CSSでボタンの見た目を調整
- ウィジェットにショートコードを書く
やったことはこの4ステップ。
functions.phpにコードを追加（並べ替え機能をつける）
子テーマのfunctions.phpに以下のコードを追加
//ソート機能実装
function SortArchive( $query ) {
if ( is_admin() || ! $query->is_main_query() )
return;
if ( $query->is_category() || $query->is_tag() || $query->is_search() ) {
$sortset = (string)filter_input(INPUT_GET, 'sort');
if ( $sortset === 'older' ) { //古い順
$query->set( 'orderby', 'date' );
$query->set( 'order', 'ASC' );
} elseif ( $sortset === 'popular' ) { //人気順
$query->set( 'meta_key', 'post_views_count' );
$query->set( 'orderby', 'meta_value_num' );
} elseif ( $sortset === 'favorites' ) { //お気に入り登録が多い順
$query->set( 'meta_key', 'simplefavorites_count' );
$query->set( 'orderby', 'meta_value_num' );
} elseif ( $sortset === 'random' ) { //ランダム
$query->set( 'orderby', 'rand' );
} else { //それ以外（新しい順）
$query->set( 'orderby', 'date' );
}
return;
}
}
add_action( 'pre_get_posts', 'SortArchive' );
//ソートボタン呼び出し用ショートコード
function sort_original() {
ob_start();
get_template_part('sort');
return ob_get_clean();
}
add_shortcode('sort', 'sort_original');
並べ替えボタンを後でショートコードで呼び出したいので、ついでにショートコードの設定もしてあります。
古い順、人気順、それ以外（新しい順）については、参考サイトの通り。
人気順は、post_views_countでカウントした数字を元に並べ替えています。
お気に入り登録が多い順（いいねが多い順）は、Favoritesというプラグインを入れ、お気に入りボタンを押してくれた数が多い順です。
Favoritesプラグインを入れると、カスタムフィールドに「simplefavorites_count」という項目が追加され、お気に入りボタンを押してくれた総数を自動でカウントしてくれます。
人気順の並べ替えと同じ要領で設置しました。
ランダムの並べ替えは元々ワードプレスの機能としてあるので、そちらを利用しました。
ただ、ワードプレスにログインして管理者として閲覧しているときはランダムボタンを押すたびに並びが変わるのに、ログアウトしていると一度ランダム表示した後、何回ボタンを押しても並びが変わりません。謎。
原因不明なんですが、一応、1回はちゃんとランダムになるので保留。
sort.phpを作ってFTPにアップロード（並べ替えボタンを作る）
FTP（/自サイトのフォルダ/wp-content/themes/cocoon-child-master/）にアップロード
ファイル名・拡張子：sort.php
<?php
if ( is_archive() || is_search() ) {
global $wp_query;
$total_results = $wp_query->found_posts; //件数を取得しておく
}
?>
<?php if( is_category() || is_tag() || is_search() ): // カテゴリ,タグ,検索 ?>
<div class="sort-result">
<?php if( is_category() ): //カテゴリアーカイブのとき ?>
カテゴリ "<?php single_cat_title(); ?>"：<b><?php echo $total_results; ?>件</b><br />
<?php elseif( is_tag() ): //タグアーカイブのとき ?>
タグ "<?php single_tag_title(); ?>"：<b><?php echo $total_results; ?>件</b><br />
<?php elseif( is_search() ): //検索ページのとき ?>
"<?php the_search_query(); ?>" の検索結果：<b><?php echo $total_results; ?>件</b><br />
<?php endif; ?>
<?php
if( is_search() ){
$url_str = site_url('/');
$srch = "\t" . '<input type="hidden" name="s" value="' . get_search_query() . '" />' . "\n";
} else {
$url_str = get_pagenum_link(1);
}
$sortset = (string)filter_input(INPUT_GET, 'sort');
$crt = ' class="sort_current"';
?>
並べ替え：
<form method="get" action="<?php echo $url_str ?>">
<?php if( is_search() ){ echo $srch; } ?>
<input type="hidden" name="sort" value="newer" />
<input type="submit" <?php if( $sortset !== 'older' && $sortset !== 'popular' && $sortset !== 'unpopular' ){ echo $crt; } ?> value="新しい順" />
</form>
|
<form method="get" action="<?php echo $url_str ?>">
<?php if( is_search() ){ echo $srch; } ?>
<input type="hidden" name="sort" value="older" />
<input type="submit" <?php if( $sortset === 'older' ){ echo $crt; } ?> value="古い順" />
</form>
|
<form method="get" action="<?php echo $url_str ?>">
<?php if( is_search() ){ echo $srch; } ?>
<input type="hidden" name="sort" value="random" />
<input type="submit" <?php if( $sortset === 'random' ){ echo $crt; } ?> value="ランダム" />
</form>
|
<form method="get" action="<?php echo $url_str ?>">
<?php if( is_search() ){ echo $srch; } ?>
<input type="hidden" name="sort" value="popular" />
<input type="submit" <?php if( $sortset === 'popular' ){ echo $crt; } ?> value="人気順" />
</form>
|
<form method="get" action="<?php echo $url_str ?>">
<?php if( is_search() ){ echo $srch; } ?>
<input type="hidden" name="sort" value="favorites" />
<input type="submit" <?php if( $sortset === 'favorites' ){ echo $crt; } ?> value="♥いいねが多い順" />
</form>
</div>
<?php endif; ?>
追加CSSまたは子テーマのstyle.css（スタイルシート）でボタンの見た目をカスタマイズ
これは好みの問題になってしまいますが、私は以下のようにしています。
追加CSSまたは子テーマのstyle.css（スタイルシート）
/*-----ソートボタン装飾-----*/
.sort-result form{display: inline-block;}
.sort-result input[type="submit"]{
color: #f28180;
padding: 0;
margin: 0;
box-shadow: none;
background: none;
border: none;
font-size: 0.85em;
text-decoration: underline;
cursor: pointer;
}
/*-----カーソルを当てた時の色変更-----*/
.sort-result input[type="submit"]:hover{
color: #aa9a85;
}
/*-----現在地を太字-----*/
.sort_current{
font-weight: bold;
text-decoration: none;
}
一旦このようにしたのですが、現在地を太字にするCSSがうまく機能しない（ランダムといいね順を選んでいるときに何故か新しい順も太字になる）ので、ここは外しちゃいました。
ウィジェットにショートコード［sort］を書いてsort.phpを呼び出し（並べ替えボタンの設置）
Cocoonには「インデックスリストトップ」というウィジェットエリアがあるので、そこにテキストウィジェットで［sort］と書いてボタンを設置します。
※［］は半角カッコに書き換えます。
これで並べ替えボタンが設置できました。
ひとつ注意点としては、ある程度PVやいいねが増えないと人気順、いいねが多い順がほとんど意味のないボタンになってしまうことですかね。
最初のうちは人気順やいいね順は外しておいてもいいかもしれません。
