Q&A
前提・実現したいこと
Wordpressでサイトを作成しています。
WordPress でサイトを作成しているのですが、パソコンサイトの表示を親テーマ、スマートフォンサイトの表示を子テーマとしてテーマを一から進めています。スマートフォンサイトの表示について行き詰まったので質問致します。
下の図のような見た目の配置にしたいと考えています。最新の投稿のみ縦長の画像 (3件目の投稿なら3.jpg) を表示し、以前の投稿はアイキャッチ画像に登録した画像を表示するというものです。
以下のようなコードを書きました。しかし、実際にはループで思うように表示できておらず、最新の投稿の画像とタイトルは表示できるのですが、過去の投稿が取れてきません。
発生している問題・エラーメッセージ
Notice: Uninitialized string offset: 1 in /var/www/html/wordpress/wp-includes/class-wp-query.php on line 3071
該当のソースコード
php
1<!-- index.php --> 2<?php get_header(); ?> 3 <main id="main"> 4 5<?php if (have_posts()): ?> 6 <?php $counter=0; while(have_posts()) : the_post(); $counter ++; ?> 7 <?php if ($counter === 1): ?> 8 9 <div class="container"> 10 <div class="top"> 11 <a href="<?php the_permalink(); ?>"> 12 <div class="top-img-container"> 13 <?php $count_posts=wp_count_posts(); $posts = $count_posts->publish; ?> 14 <?php for ($i=1; $i <= $posts; $i++) : ?> 15 <img src="<?= get_stylesheet_uri(); ?>/../img/<?= $posts; ?>.jpg" class="top-img-sp"> 16 <?php endfor; ?> 17 </div><!-- /top-img-container --> 18 </a> 19 <div class="top-title"> 20 <a href="<?php the_permalink(); ?>"> 21 <h1><?php the_title(); ?></h1> 22 </a> 23 </div><!-- /top-title --> 24 </div><!-- /top --> 25 </div><!-- /container --> 26 27 <?php elseif($counter===2): ?> 28 29 <div class="container"> 30 <div class="article-wrapper"> 31 <div class="article"> 32 <a href="<?php the_permalink(); ?>"> 33 <div class="img-container"> 34 <img src="<?= the_post_thumbnail_url(); ?>" class="article-img"> 35 </div><!-- /img-container --> 36 <div class="article-content"> 37 <h2 class="article-title"><?php the_title(); ?></h2> 38 </div><!-- /article-content --> 39 </a> 40 </div><!-- /article article-large article-left --> 41 <?php get_sidebar(); ?> 42 43 <?php else: ?> 44 45 <div class="article"> 46 <a href="<?php the_permalink(); ?>"> 47 <div class="img-container"> 48 <img src="<?= the_post_thumbnail_url(); ?>" class="article-img"> 49 </div><!-- /img-container --> 50 <div class="article-content"> 51 <h2 class="article-title"><?php the_title(); ?></h2> 52 </div><!-- /article-content --> 53 </a> 54 </div><!-- /article --> 55 <?php endif; ?> 56 57 <div class="clear"></div> 58 59 <?php endwhile; ?> 60<?php endif; ?> 61 62 </div><!-- article-wrapper --> 63 </div><!-- /container --> 64 </main> 65 <script type="text/javascript" src="<?= get_stylesheet_uri(); ?>/../script.js"></script> 66<?php get_footer(); ?>
試したこと
エラー文は、next_postメソッドを宣言している部分でしたので、次の投稿を取得するための関数のエラーかな？ということがわかったのですが、どのようにすれば思っているような見た目を実現できるのか見当が付かなくなってしましました。
変数の定義の場所をループの外に書いたりもしてみましたが、解決には至りませんでした。ループ内のfor文をなくすと過去の投稿は表示できるのですが、最新の投稿が表示できなくなります。
どの部分を変えれば良いかわかる方おられましたら、どうかご教授ください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
下の図のような見た目の配置にしたいと考えています。最新の投稿のみ縦長の画像 (3件目の投稿なら3.jpg) を表示し、以前の投稿はアイキャッチ画像に登録した画像を表示するというものです。
「3件目の投稿なら3.jpg」と表示するのであれば、以下のfor文ループは不要ではないでしょうか。
PHP
1<?php $count_posts=wp_count_posts(); $posts = $count_posts->publish; ?> 2<?php for ($i=1; $i <= $posts; $i++) : ?> 3 <img src="<?= get_stylesheet_uri(); ?>/../img/<?= $posts; ?>.jpg" class="top-img-sp"> 4<?php endfor; ?>
↓
PHP
1<?php $count_posts=wp_count_posts(); $posts = $count_posts->publish; ?> 2<img src="<?= get_stylesheet_uri(); ?>/../img/<?= $posts; ?>.jpg" class="top-img-sp">
** 追記1 **
ループに使用している変数$postsをループ内で書き換えてしまっているためです。
試しに以下の箇所にデバッグ用コードを入れてみてください。
$postsが使用されていることがわかります。
PHP
1<div class="top-img-container"> 2<?php var_dump($posts); // デバッグ用コード?> 3<?php $count_posts=wp_count_posts(); $posts = $count_posts->publish; ?> 4 <img src="<?= get_stylesheet_uri(); ?>/../img/<?= $posts; ?>.jpg" class="top-img-sp"> 5</div><!-- /top-img-container -->
修正方法としては変数名$postsを$posts_numなどに変更すればOKです。
** 追記2 **
ちなみに、WordPressでコードを書く際に避けるべき名前（予約語）は、たとえば以下に記載されているものです。
投稿2018/10/03 08:24
編集2018/10/03 10:20
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/03 09:41
退会済みユーザー
2018/10/03 10:15
2018/10/04 03:17