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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

ページネーションの2ページ目だけ、レイアウトが崩れてしまう。

sara0102
sara0102

総合スコア1

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

278閲覧

投稿2022/01/10 12:40

page

<?php /** * Template Name: blog */ get_header(); ?> <main> <!-- サブビジュアル --> <section class="sub__mv __blog__mv"> <div class="sub__mv__ttl"> ブログ </div> </section> <!-- パンくずリスト --> <section class="breadcrumb"> <div class="container"> <div class="breadcrumb__inner"> <?php get_template_part('template-parts/breadcrumb'); ?> </div> </div> </section> <!-- ブログ一覧 --> <section class="bloglists"> <div class="container"> <div class="headline __small"> 新着一覧 </div> <div class="bloglists__inner"> <?php $paged = get_query_var('paged') ?: 1; //ページネーションを使いたいなら指定 $wp_query = new WP_Query(); $my_posts = array( 'post_type' => 'post', 'posts_per_page' => '10', 'paged' => $paged, //ページネーションを使いたいなら指定 ); $wp_query->query($my_posts); if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?> <!-- ここにコンテンツ --> <div class="blog__items lower"> <div class="item__img lower"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('medium'); ?> <?php else : ?> <img src="<?php echo get_template_directory_uri(); ?>/img/240x240.png" > <?php endif; ?> <p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p> </div> <div class="blog__item"> <div class="blog__date lower"><?php the_time('Y-m-d'); ?></div> <div class="blog__item__ttl lower"> <a href="<?php the_permalink(); ?>"> <?php if(mb_strlen($post->post_title, 'UTF-8')>40){ $title= mb_substr($post->post_title, 0, 40, 'UTF-8'); echo $title.'…'; }else{ echo $post->post_title; } ?></a> </div> <div class="blog__item__desc"> <?php //brとspanを残す if(mb_strlen($post->post_content, 'UTF-8')>60){ $content= mb_substr(strip_tags($post->post_content, '<br><span>'), 0, 60, 'UTF-8'); echo $content.'…'; }else{ echo strip_tags($post->post_content, '<br><span>'); } ?> </div> </div> </div> <?php endwhile; endif; wp_reset_postdata(); ?> </div> <div class="pagenation"> <?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> </div> </div> </section> <section class="cta"> <div class="container"> <div class="cta__Induction">まずは無料で資料請求から</div> <div class="btn__center"><a class="btn __large" href="<?php the_permalink(2126); ?>">資料請求</a></div> <div class="contact__center"><a href="<?php the_permalink(2126); ?>">お問い合わせ</a></div> </div> </section> <section class="tel"> <div class="container"> <div class="tel__inner"> <div class="tel__text">お電話でのお問い合わせはこちら</div> <div class="tel__number">0123-456-7890</div> <div class="tel__time">平日08:00~20:00</div> </div> </div> </section> </main> <?php get_footer(); ?> ``` WordPress初心者です。 カンプコーディングしたhtmlを WordPress化しております。 固定ページにブログの記事一覧を表示させており、そこに「WP-PageNavi」のプラグインでページネーションの実装をしたいです。 ページネーションはきちんと表示されて、2ページ目以降も表示されるのですが、何故か2ページ目だけがレイアウトが崩れます。 3ページ目以降はきちんと表示されています。 レイアウトが崩れている原因を検証で見ようとしました。 ページネーションは<div class="bloglists__inner">の外に書いているのですが、何故か2ページ目だけ、<div class="blog__items lower">の中に入っており、display:flexが適用されてしまっています。 ダミー投稿(テーマユニットテストデーター)の先頭固定ページが原因かなと思いましたが、無効にしても変わりませんでした。 何か解決策はありますでしょうか。 宜しくお願いいたします。![イメージ説明](9791a1a25521c0438cf4cd533fa511f2.png)

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

tabuu

2022/01/11 02:45

post_titleやpost_contentを加工していますが、それによりhtmlが崩れていないでしょうか?

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。