前提・実現したいこと
プラグインのPageNaviを使用し、ページネーションを作成しました。ページネーションが表示されません
自分なりに調べてみたのですが、phpの知識があまりないため、解決できない状況です。
アドバイスいただければ嬉しいです
試みたこと
はじめはプラグインなしで入力していましたが、表示されなかっためプラグインを使用して試しましたが表示されませんでした。
固定ページでのページネーションは表示することができました。
ページネーションの前後に文字を入れると前後に表示されるのは、検証ツールで確認しています
次のページが読み込まれていないことが、問題だと思うのですが解決できませんでした。
ここに質問の内容を詳しく書いてください。
ページネーションに関しては、functions.phpは使用していません
wordpress
プラグイン PageNavi
発生している問題・エラーメッセージ
sibgle.phpにページネーションが表示されない
該当のソースコード
HTML
1 2<?php 3 4/** 5 * Template single posts 6 * @package WordPress 7 * @subpackage I'LL 8 * @since I'LL 1.0 9 */ 10 11get_header(); ?> 12<!--SinglePage--> 13<section class="single flex content inner"> 14 <article class="article content-page"> 15 <div class="flex"> 16 <?php the_tags('<ul class="tagcloud__ul"><li class="tagcloud">', '</li><li class="tagcloud">', '</li></ul>'); ?> 17 <p class="entry-date"><?php the_date('Y.m.d'); ?></p> 18 </div> 19 <?php while (have_posts()) : the_post(); ?> 20 <header> 21 <!--記事のタイトルを出力--> 22 <div class="article-header"> 23 <h1> 24 <?php the_title(); ?><?php ill_subtitle(); ?><?php edit_post_link(__('Edit', 'ill'), '<span class="edit-link"><i class="fa fa-pencil-square-o"></i>', '</span>'); ?> 25 </h1> 26 </div> 27 <!--サムネイルを設定したらサムネイルを出力--> 28 <?php if (has_post_thumbnail() && $page_thumbnail_layout != 'no_display' && !$none_display_thumbnail) : ?> 29 <div class="article-thumbnail"> 30 <?php the_post_thumbnail('large-thumbnail'); ?> 31 </div> 32 <?php endif; ?> 33 </header> 34 <!--コンテンツ--> 35 <section class="article__body"> 36 <?php the_content(); ?> 37 </section> 38 <?php if ($display_mobile_footer_page && is_mobile()) : ?> 39 <?php ill_mobile_footer_buttons_page(); ?> 40 <?php ill_mobile_footer_buttons_modal_window(); ?> 41 <?php endif; ?> 42 43<!-- ページネーション --> 44 45 <?php previous_post_link(); // 前の投稿へのリンク 46 ?> 47 <?php next_post_link(); // 次の投稿へのリンク 48 ?> 49 <?php endwhile; ?> 50 </article> 51 52 <aside class="single__side-bar"> 53 54 <?php get_sidebar(); ?> 55 56 </aside> 57</section> 58<!--End SinglePage--> 59<?php get_footer(); ?>
css
1@charset "UTF-8"; 2 3//____________________________ 4//読み込み 5//____________________________ 6@import "configuration"; 7 8//____________________________ 9//記事のスタイル 10//____________________________ 11.inner { 12 @include inner; 13} 14 15.entry-date { 16 margin-bottom: 2rem; 17} 18 19.entry-title { 20 font-size: 4rem; 21 font-weight: bold; 22 letter-spacing: .1rem; 23 24 @media#{$sp} { 25 font-size: 2rem; 26 } 27} 28 29.article { 30 width: 68%; 31 padding: 5rem 0; 32 33 &__header { 34 padding-bottom: 50px; 35 36 h1 { 37 font-size: 3.4rem; 38 padding-bottom: 20px; 39 } 40 41 img { 42 width: 100%; 43 height: auto; 44 } 45 } 46 47 &__body { 48 49 p { 50 font-size: 1.6rem; 51 margin-top: 0; 52 margin-bottom: 1.5em; 53 54 @media#{$sp} { 55 font-size: 1.4rem; 56 } 57 } 58 59 h1 { 60 font-size: 3.4rem; 61 62 @media#{$sp} { 63 font-size: 2.4rem; 64 } 65 } 66 67 h2 { 68 margin-top: 3rem; 69 margin-bottom: 2rem; 70 71 @media#{$sp} { 72 font-size: 1.6rem; 73 } 74 } 75 76 h3 { 77 font-size: 2rem; 78 padding: .5rem 1rem; 79 margin-top: 3rem; 80 margin-bottom: 2rem; 81 82 @media#{$sp} { 83 font-size: 1.6rem; 84 } 85 } 86 87 h4 { 88 color: $sub; 89 font-size: 2rem; 90 margin-top: 3rem; 91 margin-bottom: 2rem; 92 93 @media#{$sp} { 94 font-size: 1.6rem; 95 } 96 } 97 98 h5 { 99 font-size: 2rem; 100 color: $h5; 101 margin-top: 3rem; 102 margin-bottom: 2rem; 103 104 @media#{$sp} { 105 font-size: 1.6rem; 106 } 107 108 } 109 110 h6 { 111 font-size: 2rem; 112 margin-top: 3rem; 113 margin-bottom: 2rem; 114 115 @media#{$sp} { 116 font-size: 1.6rem; 117 } 118 119 } 120 121 &__ul { 122 padding: 0 0 0 1em; 123 } 124 125 &__ul &__li { 126 list-style-type: none; 127 padding: .1em .5em; 128 position: relative; 129 } 130 131 &__li:before { 132 background-color: #ff9dac; 133 /* 円の色 */ 134 135 content: ''; 136 position: absolute; 137 top: .6em; 138 /* 円の上側位置調整 */ 139 left: -.5em; 140 /* 円の左側位置調整 */ 141 width: 6px; 142 /* 円の幅 */ 143 height: 6px; 144 /* 円の高さ */ 145 } 146 147 table { 148 149 td { 150 font-size: 1.4rem; 151 border: solid 1px $sub; 152 153 @media#{$sp} { 154 font-size: 1.2rem; 155 } 156 157 } 158 } 159 } 160 161 162 hr { 163 height: 3px; 164 background-color: $sub; 165 } 166 167} 168 169.single { 170 &__side-bar { 171 width: 30%; 172 padding-top: 5rem; 173 } 174 175 .flex { 176 justify-content: flex-start; 177 align-items: center; 178 margin-bottom: 2rem; 179 180 .tagcloud { 181 margin-left: 1rem; 182 183 &__ul { 184 display: flex; 185 } 186 } 187 188 .entry-date { 189 margin-bottom: 0; 190 margin-left: 1rem; 191 } 192 193 } 194 195 .counter-hierarchy { 196 border: 1px $sub solid; 197 } 198 199 200 201} 202 203 204// Easy Table of Contents 設定 205 206div#ez-toc-container p.ez-toc-title { 207 font-size: 18px; 208 /* フォントサイズ */ 209 position: relative; 210 /* 目次タイトルを右側にズラす */ 211 text-align: center; 212} 213 214/* 目次の閉じるボタン調整 */ 215 216.ez-toc-title-toggle { 217 position: absolute; 218 bottom: 90%; 219 left: 55%; 220} 221 222/* 目次の閉じるボタンデザイン */ 223.ez-toc-btn { 224 border: none; 225 background: none; 226 box-shadow: none; 227 border-radius: 0; 228} 229 230.ez-toc-icon-toggle:before { 231 content: ""; 232 display: inline-block; 233 right: 3px; 234 height: 10px; 235 width: 10px; 236 border-right: 3px solid $primary; 237 border-bottom: 3px solid $primary; 238 transform: translateY(-50%) rotate(45deg); 239 transition: .3s; 240 241 @media #{$sp} { 242 top: 52%; 243 right: 6px; 244 } 245} 246 247#ez-toc-container p.ez-toc-title { 248 display: block; 249 /* 目次タイトルを固める */ 250 text-align: center; 251 /* 目次タイトルをセンターへ */ 252 padding: 5px; 253 /* 目次タイトルの内側余白 */ 254 background: $sub; 255 /* 目次タイトルの背景色 */ 256} 257 258#ez-toc-container, 259#ez-toc-container .ez-toc-title-container { 260 margin: 0; 261 /* 目次タイトルと枠線の余白をなくす */ 262 padding: 0; 263 /* 目次タイトルの背景色の位置調整 */ 264} 265 266.ez-toc-heading-1, 267.ez-toc-heading-5, 268.ez-toc-heading-7 { 269 font-weight: bold; 270} 271 272/* Easy Table Of Contentsによる目次に番号振りをする */ 273#ez-toc-container ul { 274 list-style-type: none; 275 276 277 278 .ez-toc-heading-level-2 { 279 list-style: none; 280 position: relative; 281 padding: .1em 1.5em; 282 283 &::before { 284 background-color: #ff9dac; 285 /* 円の色 */ 286 content: ''; 287 position: absolute; 288 top: .6em; 289 /* 円の上側位置調整 */ 290 left: .6em; 291 /* 円の左側位置調整 */ 292 width: 6px; 293 /* 円の幅 */ 294 height: 6px; 295 /* 円の高さ */ 296 } 297 298 .ez-toc-heading-level-3, 299 .ez-toc-heading-level-4, 300 .ez-toc-heading-level-5, 301 .ez-toc-heading-level-6 { 302 list-style: none; 303 position: relative; 304 padding: .1em 1.5em; 305 306 &::before { 307 background-color: #ff9dac; 308 /* 円の色 */ 309 content: ''; 310 position: absolute; 311 top: .8em; 312 /* 円の上側位置調整 */ 313 left: .4em; 314 /* 円の左側位置調整 */ 315 width: 10px; 316 /* 円の幅 */ 317 height: 2px; 318 /* 円の高さ */ 319 } 320 } 321 } 322} 323 324// 人気記事表示 325 326/* 上位3位の背景色変更 */ 327ul.wpp-list li:nth-child(1):before { 328 background: #D2250F !important; 329 content: counter(wpp-count); 330 display: block; 331 position: absolute; 332 top: 1rem; 333 left: 1rem; 334 font-size: 13px; 335 font-weight: bold; 336 color: #fff; 337 padding: 3px 10px; 338 border-radius: 0%; 339 z-index: 1; 340} 341 342ul.wpp-list li img { 343 width: 100px; 344 height: 100px; 345} 346
試したこと
はじめはプラグインなしで入力していましたが、表示されなかっためプラグインを使用して試しましたが表示されませんでした。
固定ページでのページネーションは表示することができました。
ページネーションの前後に文字を入れると前後に表示されるのは、検証ツールで確認しています
次のページが読み込まれていないことが、問題だと思うのですが解決できませんでした。
補足情報(FW/ツールのバージョンなど)
wrodpress, WP-PageNaviバージョン2.93.3 ,vscode
あなたの回答
tips
プレビュー