サポート » WordPress への貢献と参加 » ページネーションの設置

  • 解決済 hachikuma

    (@hachikuma)


    yuutaというテーマを使っていますが、投稿した一覧ページにページネーションを設置したいのです。

    今は固定ページにShortcodes Ultimateというプラグインで投稿を読み込んでいます。

    よろしくお願いいたします。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • @hachikuma さん

    こんにちは。

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

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

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

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

    トピック投稿者 hachikuma

    (@hachikuma)

    ご回答ありがとうございます。
    ご返答に気づかなくて申し訳ありませんでした。

    実はまだ解決していなくて、ご教授いただければ幸いです。

    なぜ固定ページでショートコードを読み込んでいるかと言いますと、
    テーマ既存の投稿一覧ページだと、各投稿の画像がページそのものが一覧表示されてしまい、
    それだと画像が背景となってしまったり、リンク要素がタイトルだけだったので、
    これだとイメージと合わなかったのと、そもそも投稿が10件以上であっても、
    ページネーションが表示されないようなのです。

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

    何か方法があれば教えてください。
    どうぞよろしくお願いいたします。

    @hachikuma さん

    こんにちは。

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

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

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

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

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

    トピック投稿者 hachikuma

    (@hachikuma)

    ご返答ありがとうございます。

    >→特にカスタマイズしていなければいかのように表示されるはずですが、いかがでしょうか

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

    はい [su_posts] 確かにこれです。
    そういう使用なのですね。
    テーマを変えるのが一番だと思うのですが、大きな改変をしてる時間がどうしてもなくて。
    他の方法では例えばプラグインとかで投稿機能を入れるとかできますかね?
    (投稿テーマに投稿プラグイン入れるとか。意味不明かと思いますが・・・)

    どうぞよろしくお願いいたします。

    Aki Hamano

    (@wildworks)

    @hachikuma さん

    こんにちは。

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

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

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

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

    トピック投稿者 hachikuma

    (@hachikuma)

    Tetsuaki Hamano さん

    わーい!わーい!出てきました!!
    上手くいきました!!

    本当にありがとうございました!
    感謝申し上げます!!!

    shokun0803

    (@shokun0803)

    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

    (@hachikuma)

    shokun0803さん

    ご回答ありがとうございます。

    Tetsuaki Hamano さんの方法で、ページネーションは出たので、
    ショートコードはやめて標準の一覧ページを使おうと思っています。

    ですがこの標準の一覧ページは、各投稿ページをそのままが一覧に表示させる仕様なのです。
    その上さらにアイキャッチ画像がバックグラウンド画像になり、投稿タイトルだけにリンクが付きます。

    希望としてはアイキャッチ画像とタイトル、投稿日だけが一覧に出てきて、アイキャッチ画像とタイトルにリンクが付いているのが理想です。画像が出てるのにリンクが効かないのは最大の欠点かと思っていまして。

    そのような修正がindex.phpでできればいいのですが、いかがでしょうか?

    どうぞよろしくお願いいたします。

    shokun0803

    (@shokun0803)

    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 の設定を適切に行ってみてください。

    ご参考になれば。

    トピック投稿者 hachikuma

    (@hachikuma)

    shokun0803さん

    ご丁寧にありがとうございます。

    なんとかできそうなので、来週時間取れそうなのでやってみます。
    わかりやすいご説明に感謝申し上げます!

    またわからないことがあったら教えていただければ幸いです。

    どうぞよろしくお願いいたします。

    トピック投稿者 hachikuma

    (@hachikuma)

    shokun0803さん

    上手くいきました!

    これ以上ないってくらいのご説明で、
    迷うことなく改修できました。

    本当に、本当にありがとうございました!!

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「ページネーションの設置」には新たに返信することはできません。