WordPressの個別ページに投稿一覧を表示してページャーがうまく動かない場合

$paged = get_query_var('page') ? get_query_var('page') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 12,
'paged' => $paged,
);
$my_query = new WP_Query($args);
$max_num_pages = $my_query->max_num_pages;
if( $my_query -> have_posts() ) :
while($my_query -> have_posts()) : $my_query -> the_post();
endwhile;
endif;

if (function_exists('responsive_pagination')) {
responsive_pagination($additional_loop->max_num_pages);
}

wp_reset_postdata();

$paged = get_query_var(‘page’) ? get_query_var(‘page’) : 1;がポイント。
$paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1;ではない。

WordPressの検索結果にカスタムフィールドの値を追加する

function cf_search_join( $join ) {
	global $wpdb;
	if ( is_search() ) {
		$join .= ' LEFT JOIN ' . $wpdb->postmeta . ' ON ' . $wpdb->posts . '.ID = ' . $wpdb->postmeta . '.post_id ';
	}
	return $join;
}
add_filter( 'posts_join', 'cf_search_join' );

function cf_search_where( $where ) {
	global $wpdb;
	if ( is_search() ) {
		$where = preg_replace(
			"/\(\s*" . $wpdb->posts . ".post_title\s+LIKE\s*(\'[^\']+\')\s*\)/",
			"(" . $wpdb->posts . ".post_title LIKE $1) OR (" . $wpdb->postmeta . ".meta_value LIKE $1)", $where );

		// 特定のカスタムフィールドを検索対象から外す(※1)
//		$where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'number')";
//		$where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'zip')";
//		$where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'access')";
	}
	return $where;
}
add_filter( 'posts_where', 'cf_search_where' );

function cf_search_distinct( $where ) {
	global $wpdb;
	if ( is_search() ) {
		return "DISTINCT";
	}
	return $where;
}
add_filter( 'posts_distinct', 'cf_search_distinct' );

// 検索対象を『タイトルのみ』にする
function __search_by_title_only( $search, & $wp_query ) {
	global $wpdb;
	if ( empty( $search ) )
		return $search; // skip processing - no search term in query
	$q = $wp_query->query_vars;
	$n = !empty( $q[ 'exact' ] ) ? '' : '%';
	$search =
		$searchand = '';
	foreach ( ( array )$q[ 'search_terms' ] as $term ) {
		$term = esc_sql( like_escape( $term ) );
		$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
		$searchand = ' AND ';
	}
	if ( !empty( $search ) ) {
		$search = " AND ({$search}) ";
		if ( !is_user_logged_in() )
			$search .= " AND ($wpdb->posts.post_password = '') ";
	}
	return $search;
}
//add_filter( 'posts_search', '__search_by_title_only', 500, 2 );// (※2)

下記サイトを参考にしました。
WordPress内の検索対象にカスタムフィールドも適用する

現在のページにクラスを付与する

<nav>
    <ul>
        <li><a <?php if( is_page('concept') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>concept/">コンセプト</a></li>
        <li><a <?php if( is_page('news') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>news/">新着情報</a></li>
        <li><a <?php if( is_page('menu') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>menu/">メニュー_</a></li>
        <li><a <?php if( is_page('staff') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>staff/">スタッフ</a></li>
        <li><a <?php if( is_page('salon') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>salon/">サロン案内</a></li>
        <li><a <?php if( is_page('contact') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>contact/">お問い合わせ</a></li>
    </ul>
</nav>

画面幅によって読み込みファイルを変える〜レスポンシブウェブデザイン

<script>
  jQuery(document).ready(function($) {
    //PC環境の場合
    if (window.matchMedia('(min-width: 768px)').matches) { //切り替える画面サイズ
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/pc.js',
        dataType: 'script',
        cache: false
      });
      //スマホ環境の場合
    } else {
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/sp.js',
        dataType: 'script',
        cache: false
      });
    };
  });
</script>

【WordPress】ポストナビゲーション(次の記事・前の記事)をつけたい

  1. Font Awesome呼び出しタグを貼り付けます
  2. 表示箇所にコードを貼り付けます

1. Font Awesomeのリンクを内に貼り付けます

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. 表示箇所にコードを貼り付けます

前の記事

<?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?>

次の記事

<?php next_post_link('%link','%title <i class="fa fa-chevron-circle-right"></i>'); ?>

私はBootstrapを愛用しているので、こんな感じになります。

<div class="row">
	<div class="col-sm-6">
		<p><?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?></p>
	</div>
	<div class="col-sm-6">
		<p class="text-right"><?php next_post_link('%link','%title <i class="fa fa-chevron-circle-right"></i>'); ?></p>
	</div>
</div>

【WordPress】レスポンシブのページネーションを設置したい

下記ページを参考にします。

 

レスポンシブのページネーションを設置するには以下の手順がおすすめです。

  1. Font Awesome呼び出しタグを貼り付ける 
  2. functions.phpにコードを貼り付ける 
  3. ページネーション用のスタイルシートを貼り付ける 
  4. ページネーション表示箇所にコードを貼り付ける 

1. Font Awesomeのリンクを<head></head>内に貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. function.phpにコードを貼り付けます。

/* ===============================================
# レスポンシブ ページネーション
=============================================== */
function responsive_pagination($pages = '', $range = 4){
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

//ページ情報の取得
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
}

if(1 != $pages) {
echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
//先頭へ
echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
//1つ戻る
echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
//番号つきページ送りボタン
for ($i=1; $i <= $pages; $i++) {
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
}
}
//1つ進む
echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
//最後尾へ
echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
echo '</ul>';
}
}

3. スタイルシートを貼り付けます。オリジナルとは違ってリンク色を変更しています。

/* ===============================================
# レスポンシブ ページネーション
=============================================== */
.pagination{
list-style-type: none;
padding-left: 0;
margin: 30px 0;
}

.pagination,
.pagination li a {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.pagination a {
font-weight: 300;
padding-top: 1px;
text-decoration:none;
border: 1px solid #ddd;
border-left-width: 0;
min-width:36px;
min-height:36px;
color: #333;
}

.pagination li:not([class*="current"]) a:hover {
background-color: #eee;
}

.pagination li:first-of-type a {
border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
display: inline-block;
font-family: Fontawesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }

.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }

.pagination li.current a {
background-color: #ddd;
cursor: default;
pointer-events: none;
}

.pagination > li:first-child > a {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

.pagination>li>a, 
.pagination>li>span {
  color: rgba(0,0,0,1);
}
.pagination>li>a:focus, 
.pagination>li>a:hover, 
.pagination>li>span:focus, 
.pagination>li>span:hover {
  color: rgba(125,125,125,1);
}

@media only screen and ( max-width: 680px ) {
.pagination li.first,
.pagination li.last {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.previous a { border-left-width: 1px; }
}

@media only screen and ( max-width: 500px ) {
.pagination li {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.current,
.pagination li.first,
.pagination li.last,
.pagination li.previous,
.pagination li.next{
position: initial;
top: initial;
left: initial;
}

.pagination li.previous a { border-left-width: 0; }
}

@media only screen and ( max-width: 400px ) {
.pagination li.first,
.pagination li.last {
/* screen readers only */
position: absolute;
top: -9999px;
left: -9999px;
}

.pagination li.previous a { border-left-width: 1px; }
}

@media only screen and ( max-width: 240px ) { /* For watches? */
.pagination li { width: 50%;}

.pagination li.current {
order: 2;
width: 100%;
border-left-width: 1px;
}
}

4.ページネーション表示箇所にコードを貼り付けます。

<!--ページネーション-->
<?php if (function_exists('responsive_pagination')) {
responsive_pagination($additional_loop->max_num_pages);
} ?>

以上で完成です。