ページネーションの設置

@hachikuma さん

こんにちは。

お使いのテーマはこちらでお間違いないでしょうか。

「投稿した一覧ページにページネーションを設置したい」との事ですが、投稿一覧ページにアクセスした時に、テーマ側で用意されているページネーションが表示されるはずです。

なので、固定ページでショートコードを使って投稿一覧を表示している意図が分からないのですが、どのような状況なのかをもう少し詳しく教えていただけないでしょうか。

また同様の投稿があるようなので、もしそちらの方で解決済みであれば、この投稿はクローズとしていただければと思います。

@hachikuma さん

こんにちは。

これだとイメージと合わなかったのと、そもそも投稿が１０件以上であっても、
ページネーションが表示されないようなのです。

→特にカスタマイズしていなければいかのように表示されるはずですが、いかがでしょうか。
https://gyazo.com/46107ec150f861922bcf6ff71230ed62

ショートコードで固定ページに読み込ませると、
一覧の仕方が調整しやすかったのでとりあえず使用している状態です。
これだと投稿が１０件以上になると過去が消えてしまうのです。

→使われているプラグインはこちらで間違いないでしょうか。
また投稿一覧の表示には、[su_posts]というショートコードを使われていますか？
それであれば、公式ドキュメントにある通り、ページネーション自体対応していないと思います。

理想としては、テーマのレイアウトが希望のものでない場合は、子テーマを作り、テンプレート・CSSを調整するべきだと思います。

@hachikuma さん

こんにちは。

はい確かそれは表示されていました。display:noneで今は消していますが。
[1][2][3][4]・・・[10]
↑こういうのを設置したいのです。（デザインはともかく・・）

→以下の方法が一番簡単だと思います。

• 子テーマを作る
• archive.php を子テーマにコピーする
• the_posts_navigation() を the_posts_pagination() に変える
• 出力されるHTMLをスタイリングする

上記作業がご自身で出来ない場合は、専門業者に相談される事をお勧めします。

hachikumaさん、こんにちは。

ショートコードを利用して投稿を表示している限り、ページネーションを実現することは難しいです。
別のスレッドでもお答えしておりますが、通常の投稿にページネーションを付けることはTetsuaki Hamanoさんが上記で記載している通り、比較的簡単です。

別のスレッドの内容から考え得るに、すでに子テーマは作られていると思います。
yuutaテーマで、例えばサイトトップとブログの表示に設定していた場合、ブログの表示側には投稿内容が新しい順に表示されると思いますが、表示内容は投稿のタイトル、日付、投稿の本文となっているかと思います。
おそらくですが、この投稿本文を表示したくない、とか表示そのものを変更したくてショートコードを利用しているのだと思われますが、ご利用のプラグインでは実現できない、このテーマではカスタマイズできない箇所でもあるので、直接テーマファイルを改修する方法で実践されてみることをお勧めいたします。

このテーマでブログの一覧表示を実現しているファイルは index.php ですが、実際に表示を作っているファイルは yuuta/template-parts/content.php です。
まずはこのファイルを親テーマから子テーマにコピーしてきて編集してみましょう。同じ /template-parts ディレクトリを作成し、 content.php をコピーしてきます。
content.php ファイルの、例えば本文を表示している箇所は 34 行目の<?php the_content(''); ?>の部分です。この記述を<?php //the_content(''); ?>とコメントアウトすれば本文の表示がなくなります。

ショートコードの作成で構成した表示を実現するのは難しいかもしれませんが、html のコードはそれほど難しくはないので、挑戦されてみてください。
もし表示がおかしくなってどうしようもなくなったら、子テーマから content.php ファイルを削除すれば親テーマの該当ファイルが使用されるようになるので元に戻せます。改めてコピーしなおしてやり直してみましょう。

なお、注意事項があります。表示を担っている index.php ファイルはいろいろな場所で利用される中心のファイルです。このファイルの表示を編集すると他のページにも影響する可能性が高いです。その場合、index.php の該当箇所、29 行目のget_template_part( 'template-parts/content', get_post_format() );に条件分岐等を設定する必要などがでてきますので、必要に応じて質問してみてください。

ご参考になれば。

hachikumaさん、こんにちは。

はい、表示方法の改修は上記で指定した方法で実施可能です。
このスレッドの通りに実施されているとすれば、子テーマに archive.php をコピーしてページネーションを実装されていると思いますので、これを前提に説明します。

基本的には上で書いたことの延長線です。
archive.php の 32行目を例えば以下のように修正します。
get_template_part( 'template-parts/content', get_post_format() );
修正後
get_template_part( 'template-parts/content-list', get_post_format() );

次に親テーマの content.php をコピーして、子テーマの /yuuta/template-parts/ 内に貼り付けます。張り付けた content.php ファイルのファイル名を content-list.php に変更します。

content-list.php を編集していくのですが、このテーマは一貫してアイキャッチ画像を背景として設定するコードになっているので、まずはここを修正します。
11行目のコードを例えば以下のように修正します。
11 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> style="background-image: url('<?php echo esc_url($yuuka_article_image[0]); ?>'); background-size: cover;">
修正後
11 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
背景部分を削除しているだけです。

次にアイキャッチ画像を表示したいのですから、タイトルの前に以下のような記述を行います。
26 <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
修正後

 26             <?php if ( has_post_thumbnail() ) : ?>
 27                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
 28                 <?php the_post_thumbnail( 'thumbnail' ); ?>
 29                 </a>
 30             <?php endif; ?>
 31             <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>

最後に上記でも説明した<?php the_content(''); ?>をコメントアウトします。
実際の表示は html の組み換えや css の設定を適切に行ってみてください。

ご参考になれば。