ページ送りナビの並びを左右逆にしモバイルボタンを拡張する方法

以下のコードをfunctions.phpに追加します。

/**
 * モバイルナビボタンHTMLを生成
 *
 * @param string $direction prevまたはnext
 * @return string 生成されたHTML
 */
if (!function_exists('get_custom_mobile_nav_button_html')) :
function get_custom_mobile_nav_button_html($direction) {
  $target_url = '';
  $title_attr = '';
  $is_prev    = ($direction === 'prev');

  if (is_single()) {
    // 投稿ページ
    $in_same_term = is_post_navi_same_category_enable();
    $get_previous = $is_prev ? false : true;

    $post_obj = get_adjacent_post($in_same_term, '', $get_previous);
    if ($post_obj) {
      $target_url = get_permalink($post_obj->ID);
      $title_attr = wp_strip_all_tags(get_the_title($post_obj->ID));
    }
  } else {
    // 一覧・アーカイブページ
    global $wp_query;
    $paged    = get_query_var('paged') ? get_query_var('paged') : 1;
    $max_page = !empty($wp_query->max_num_pages) ? $wp_query->max_num_pages : 1;

    if ($is_prev) {
      if ($paged > 1) {
        $target_url = get_pagenum_link($paged - 1);
      }
    } else {
      if ($paged < $max_page) {
        $target_url = get_pagenum_link($paged + 1);
      }
    }
  }

  // 遷移先URLを確認
  if (!$target_url) {
    return '';
  }

  global $_MENU_CAPTION, $_MENU_ICON;
  $default_icon    = $is_prev ? 'fa fa-arrow-left' : 'fa fa-arrow-right';
  $default_caption = $is_prev ? __('前へ', THEME_NAME) : __('次へ', THEME_NAME);

  $icon_class   = $_MENU_ICON ? $_MENU_ICON : $default_icon;
  $caption_text = $_MENU_CAPTION ? $_MENU_CAPTION : $default_caption;
  $button_class = $is_prev ? 'prev' : 'next';

  ob_start();
  ?>
  <li class="<?= esc_attr($button_class) ?>-menu-button menu-button menu-button-<?= esc_attr($button_class) ?>">
    <a href="<?= esc_url($target_url) ?>"<?= $title_attr ? ' title="' . esc_attr($title_attr) . '"' : '' ?> class="menu-button-in">
      <span class="<?= esc_attr($button_class) ?>-menu-icon menu-icon">
        <span class="<?= esc_attr($icon_class) ?>" aria-hidden="true"></span>
      </span>
      <span class="<?= esc_attr($button_class) ?>-menu-caption menu-caption"><?= esc_html($caption_text) ?></span>
    </a>
  </li>
  <?php
  return ob_get_clean();
}
endif;


// テンプレート（モバイルメニュー前へボタン）を変更
add_filter('cocoon_part__tmp/mobile-prev-button', function ($content, $name, $args) {
  return get_custom_mobile_nav_button_html('prev');
}, 10, 3);


// テンプレート（モバイルメニュー次へボタン）を変更
add_filter('cocoon_part__tmp/mobile-next-button', function ($content, $name, $args) {
  return get_custom_mobile_nav_button_html('next');
}, 10, 3);


// テンプレート（ページ送りナビ）を変更
add_filter('cocoon_part__tmp/pager-post-navi', function ($content, $name, $args) {
  // 表示設定を確認
  if (!is_post_navi_visible()) {
    return '';
  }

  // カテゴリー設定・タクソノミー情報を取得
  $in_same_term   = is_post_navi_same_category_enable();
  $excluded_terms = sanitize_array(get_post_navi_exclude_category_ids());
  $taxonomy       = 'category';
  $post_type      = get_post_type();

  if ($post_type) {
    $taxonomies = get_object_taxonomies($post_type);
    if ($taxonomies && isset($taxonomies[0])) {
      $taxonomy = $taxonomies[0];
    }
  }

  // 前後の記事を取得
  $left_post  = get_adjacent_post($in_same_term, $excluded_terms, false, apply_filters('post_navi_taxonomy', $taxonomy));
  $right_post = get_adjacent_post($in_same_term, $excluded_terms, true, apply_filters('post_navi_taxonomy', $taxonomy));

  // アイキャッチ画像サイズを設定
  $width  = THUMB120WIDTH;
  $height = THUMB120HEIGHT;

  switch (get_post_navi_type()) {
    case 'square':
      $width  = THUMB150WIDTH;
      $height = THUMB150HEIGHT;
      break;
  }

  // 前後の記事を確認
  if (!$left_post && !$right_post) {
    return '';
  }

  ob_start();
  ?>
  <div id="pager-post-navi" class="pager-post-navi<?= get_additional_post_navi_classes() ?> cf">
    <?php if ($left_post): ?>
      <a href="<?= esc_url(get_permalink($left_post->ID)) ?>" title="<?= esc_attr(wp_strip_all_tags(get_the_title($left_post->ID))) ?>" class="prev-post a-wrap border-element cf">
        <div class="fa fa-chevron-left iconfont" aria-hidden="true"></div>
        <figure class="prev-post-thumb card-thumb">
          <?= get_post_navi_thumbnail_tag($left_post->ID, $width, $height) ?>
        </figure>
        <div class="prev-post-title"><?= get_the_title($left_post->ID) ?></div>
      </a>
    <?php elseif (is_post_navi_type_spuare()): ?>
      <a href="<?= esc_url(home_url('/')) ?>" id="prev-next-home" class="prev-next-home a-wrap">
        <span class="fa fa-home" aria-hidden="true"></span>
      </a>
    <?php endif; ?>

    <?php if ($right_post): ?>
      <a href="<?= esc_url(get_permalink($right_post->ID)) ?>" title="<?= esc_attr(wp_strip_all_tags(get_the_title($right_post->ID))) ?>" class="next-post a-wrap cf">
        <div class="fa fa-chevron-right iconfont" aria-hidden="true"></div>
        <figure class="next-post-thumb card-thumb">
          <?= get_post_navi_thumbnail_tag($right_post->ID, $width, $height) ?>
        </figure>
        <div class="next-post-title"><?= get_the_title($right_post->ID) ?></div>
      </a>
    <?php elseif (is_post_navi_type_spuare()): ?>
      <a href="<?= esc_url(home_url('/')) ?>" id="prev-next-home" class="prev-next-home a-wrap">
        <span class="fa fa-home" aria-hidden="true"></span>
      </a>
    <?php endif; ?>
  </div>
  <?php
  return ob_get_clean();
}, 10, 3);

以下のコードをstyle.cssに追加します。

.body:has(.front-page-type-tab-index #index-tab-1:not(:checked)) :is(.menu-button-prev, .menu-button-next),
.body:has([class*="front-page-type-category"]) :is(.menu-button-prev, .menu-button-next) {
  display: none !important;
}