質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

ループ処理の最初と最後で違う出力をしながらページネーションを作成する方法がわかりません。

2232
2232

総合スコア233

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1回答

-3評価

0クリップ

289閲覧

投稿2022/03/30 10:54

編集2022/04/24 10:54

ワードプレスでホームページを作成しています。
*初心者で、少し前にPHPに触れたばかりです。

早く答えが必要で、
(ダブルポストです。https://qiita.com/keikkkk/questions/7915609d5acb9d3438fc
https://ja.stackoverflow.com/questions/88102/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7-%e8%a8%98%e4%ba%8b%e3%81%ae%e3%83%ab%e3%83%bc%e3%83%97%e5%87%a6%e7%90%86%e3%82%92%e6%9c%80%e5%88%9d%e3%81%a8%e6%9c%80%e5%be%8c%e3%81%a7%e9%81%95%e3%81%86%e5%87%ba%e5%8a%9b%e3%81%a7%e8%a1%8c%e3%81%86%e6%96%b9%e6%b3%95%e3%81%8c%e3%82%8f%e3%81%8b%e3%82%8a%e3%81%be%e3%81%9b%e3%82%93)

今現在、アーカイブページで、投稿の一覧のページを作成していて、
プラグインWP-PageNaviを使用し、サイトの最後に
ページネーションを作成しています。

ループ処理の最初と最後で違う出力をすることは出来ていて、
https://on-ze.com/archives/7464
これで行いました。

最初のループと後のループでは、
画像の大きさを変える必要があり、
最初の記事の画像は縦幅が小さく、2番目は大きめです。

プラグインの使用に、
https://senoweb.jp/note/wp-pagenavi-howto/
この内容に取り組みました。

この最初と最後の2つのループ処理とページネーションを同時に使用することが出来ません。

<?php get_header(); ?> <section class="blog-archive-wrapper"> <div class="blog-archive-wrapper-second"> <div class="blog-archive-outer"> <h2 class="blog-archive-outer-title">新着一覧</h2> <div> <?php $paged = get_query_var('paged')? get_query_var('paged') : 1; $information= new WP_Query( array( 'post_type' => 'post', 'paged' => $paged, 'post_status' => 'publish', 'posts_per_page' => 10, )); if ( $information ->have_posts() ) : ?> <ul> <!-- ループ --> <?php while ( $information -> have_posts() ) : $information -> the_post(); ?> <li> <?php if ($wp_query->current_post == 0) { ?> <?php $args = array( 'posts_per_page' => 1, ); $the_query = new WP_Query( $args ); ?> <a href="<?php the_permalink(); ?>" class="blog-item"></a> <div class="blog-item-thumbnail-content"> <div class="blog-list-wrapper-second"> <?php // アイキャッチを表示させる start ?> <div class="blog-item-thumbnail-second"> <?php if(has_post_thumbnail()): ?> <div class="thumbnail-image-second"><?php the_post_thumbnail(array(240, 148)); ?></div> <?php endif; ?> </div> <?php // アイキャッチを表示させる end ?> </div> <div class="blog-list-category"> <?php $cat = get_the_category(); ?> <?php $cat = $cat[0]; ?> <p class="blog-list-category-title"><?php echo get_cat_name($cat->term_id); ?></p> </div> <div class="blog-item-content"> <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p> <?php // タイトルを表示させる start ?> <h3 class="blog-item-title"> <?php echo mb_substr($post->post_title, 0, 30).'……'; ?> </h3> <?php // タイトルを表示させる end ?> <?php // 抜粋を表示させる start ?> <?php the_excerpt(); ?> <?php // 抜粋を表示させる end ?> </div> </div> <?php } ?> <?php $args = array( 'posts_per_page' => 9, 'offset' => 1, ); $the_query = new WP_Query( $args ); ?> <div class="blog-list-category"> <?php $cat = get_the_category(); ?> <?php $cat = $cat[0]; ?> <p class="blog-list-category-title"><?php echo get_cat_name($cat->term_id); ?></p> </div> <div class="blog-list-list-item"> <a href="<?php the_permalink(); ?>" class="blog-item"></a> <div class="blog-item-thumbnail-content-second"> <div class="blog-list-wrapper"> <?php // アイキャッチを表示させる start ?> <div class="blog-item-thumbnail-second"> <?php if(has_post_thumbnail()): ?> <div class="thumbnail-image"><?php the_post_thumbnail(array(240, 179)); ?></div> <?php endif; ?> </div> <?php // アイキャッチを表示させる end ?> </div> <div class="blog-item-content"> <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p> <?php // タイトルを表示させる start ?> <h3 class="blog-item-title"> <?php echo mb_substr($post->post_title, 0, 30).'……'; ?> </h3> <?php // タイトルを表示させる end ?> <?php // 抜粋を表示させる start ?> <p class="blog-item-read"> <?php the_excerpt(); ?> </p> <?php // 抜粋を表示させる end ?> </div> </div> </div> <?php endwhile; ?> </div> </li> </ul> <?php // サブクエリをリセット wp_reset_postdata(); ?> <?php if( function_exists('wp_pagenavi') ) { wp_pagenavi(array('query' => $information)); } ?> <?php endif;?> </div> </div> </section> <?php get_footer(); ?>

CSS

.blog-list-wrapper { display: flex; } .blog-item-thumbnail-content { display: flex; } .blog-archive-wrapper { width: 70.31953125vw; margin: 0 auto; } .blog-item-thumbnail .blog-item-thumbnail-image img.attachment-150x110.size-150x110.wp-post-image { height: 179px; width: 240px; object-fit: cover; } .blog-archive-outer-title { font-weight: bold; font-size: 3.2rem; text-align: center; padding-top: 4.677vw; padding-bottom: 4.6875vw; } .img-price-third { position: relative; height: 221px; } img.main-img-third { height: 221px; width: 100%; } .blog-item-content { padding-left: 3.90625vw; } .blog-item-content .blog-item-day { font-size: 1.6rem; color: #1b224c; padding-bottom: 1.40625vw; } .blog-item-content .blog-item-title { font-size: 2.6rem; padding-bottom: 1.5625vw; } .blog-item-content p { font-size: 1.25vw; } .blog-item-content p { font-size: 1.25vw; } .blog-item-thumbnail-content { display: flex; padding-bottom: 7.265625vw; } .blog-item-day-second { padding-bottom: 1.5625vw; } img.attachment-240x148.size-240x148.wp-post-image { height: 148px; width: 240px; object-fit: fill; position: relative; } img.attachment-240x179.size-240x179.wp-post-image { height: 179px; width: 240px; object-fit: fill; } .blog-list-category { width: 80px; height: 28px; background-color: #1b224c; position: absolute; left: 14.84375vw; color: #fff; line-height: 28px; text-align: center; } .blog-item-thumbnail-content { display: flex; padding-bottom: 7.265625vw; height: 148px; } .blog-item-thumbnail-content-second { display: flex; padding-bottom: 4.765625vw; } .blog-item-thumbnail-content-second:last-child { padding-bottom: 8.515625vw; }

見本

見本

自分のサイト
1つ目の記事と2つ目の記事の大きさが同じ

お答えいただけると幸いです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。