サイトさらにメンテナンス中
- PHP
- WEBSITE制作
- WEB関連
- Wordpress
- 雑記
さてこのサイト、写真を見る(見せる)のに最適なUIづくりをしたいなと、一歩一歩修正作業を進めてます。
本日は休日なので、仕事置いてこちらに注力。
やったのは、ページ送り(ページネーション)がついたページの左右に、
「前のページ」「次のページ」ボタンを付けること。
対象は、「PHOTO ALBUM」「BLOG」ページ。
ページの下の方にある、ページ送りのページ番号の左右に「<」「>」とついてるやつと同じものなんですが、画面の左右にあった方が感覚的にページを送れる気がしたんですよね。
//ページネーション部分のみ
global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
$paginate_format = '';
$paginate_base = add_query_arg('paged','%#%');
} else {
$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/').user_trailingslashit('page/%#%/','paged');
$paginate_base .= '%_%';
}
$pnData = paginate_links(array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $the_query->max_num_pages,
'mid_size' => 1,
'end_size' => 1,
'current' => ($paged ? $paged : 1),
'prev_text' => '<',
'next_text' => '>',
'type' => 'array',
//'type' => 'list'
));
WPでは
$the_query = new WP_Query( $args );
にてループを作成したのち、
上記の感じで、ページ送り用リンクを作成するんですが、ポイントは「$pnData」の中。
「’type’ => ‘array’」にすると、1行づつ配列で入るので、その中で帰ってくる前ページ、次ページ用のリンクを流用するのが効率的。
親切なサイトがあるのでリンクします。
参照:5分で実装!WordPressでページネーションを作成する方法(プラグインor自作)
もう一つ、上記のそれぞれの詳細ページに「前の記事」「次の記事」へのボタンを追加。
画面の下の方の左右に、「«ページタイトル」みたいに掲載。
やっぱり、左右にページをめくる感覚で見れるって大事だと思うんですよね。
ですが、ちょっと難しい問題も。
previous_post_link();
next_post_link();
参照:WordPress:「前の記事」「次の記事」7つのカスタマイズ方法
こんなPHPのメソッドを使うんですが、
「previous」がより古い記事で「next」がより新い記事な訳ですが、
通常は新い「next」が右向き、古い「previous」が左向きらしいんですが、僕の感覚だと、どうしても逆になっちゃうんですよね。なのでCSSで矢印を逆にして付けたんですが、これって僕だけですかね?
この右下のやつ「previous」↓