WordPress PCとスマホで表示を切り替える

質問

PCでは記事一覧5件、スマホでは3件表示するようにしたいです。
条件分岐タグを使って、PCとスマートフォンで記事の一覧表示を切り替える方法がうまくいきませんでした。
https://handywebdesign.net/2017/11/wp-is-mobile/

改造前のコード（問題なく表示できました）
<ul>
<?php
$latest_posts = get_posts( array(
'posts_per_page' => 5, // 表示する記事の数
'category_name' => '投稿ID',// 投稿IDを取得
'fields' => 'ids',
) );
foreach( $latest_posts as $post ):
setup_postdata( $post );

if( has_post_thumbnail() ) {
$post_thumb = get_the_post_thumbnail( '', 'post_thumbnail' ); // アイキャッチがあるときはアイキャッチを表示
} else {
$post_thumb = '<img src="' . get_template_directory_uri() . '/img/noimage.gif" width="100" height="100" alt="デフォルト画像" />'; // アイキャッチがないときは《noimage.gif》を表示
}
$post_categories = get_the_category(); // カテゴリーを取得
$post_content = wp_trim_words( get_the_content(), 30, '…' ); // 30字分を抜粋
?>
<li <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<div class="blogListimg">
<?php echo wp_kses_post( $post_thumb ); ?>
</div>
<!-- アイキャッチここまで -->
<p class="post-time blogDt"><?php the_time('Y.m.d'); ?></p>
<p class="post-categories blogCt"><?php echo esc_html( $post_categories[0]->name ); ?></p>
<h3 class="post-title"><?php the_title(); ?></h3>
<p class="post-content blogBf"><?php echo esc_html( $post_content ); ?></p>
</a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>

PCとスマートフォンで記事の一覧表示を切り替えるコード
参考サイトを参考にfunctions.phpにfunction is_mobile() コードを追加。
トップページのphpに以下を改造。

<?php if ( is_mobile() ) : ?>
<?php
$latest_posts = get_posts( array(
'posts_per_page' => 5, // 表示する記事の数
'category_name' => '投稿ID',// 投稿IDを取得
'fields' => 'ids',
) );
foreach( $latest_posts as $post ):
setup_postdata( $post );
　・
　・
　・
<?php else: ?>

<?php
$latest_posts = get_posts( array(
'posts_per_page' => 3, // 表示する記事の数
'category_name' => '投稿ID',// 投稿IDを取得
'fields' => 'ids',
) );
foreach( $latest_posts as $post ):
setup_postdata( $post );
　・
　・
　・
<?php
endforeach;
wp_reset_postdata();
?>
</ul>

結果は真っ白になってしまいました。
HTMLソースも真っ白です。
空白はSublime Textのテキストエディターを使っていますので、確認しております。
どこが違うか、教えてくださいますか？
よろしくおねがいします。

回答No.2

Katsu_Kaiz · ベストアンサー

おそらく、最後のendif;がないせいじゃないかなと思います。

<?php if( is_mobile() ): ?>
　スマホ用のPHP
<?php else: ?>
　パソコン用のPHP
<?php endif; ?>

ifで始まったら、最後はendif;でifを終わらせないとエラーになります。

ただ、単に記事の件数を変えるだけなら、もう少しシンプルなソースにできるかと思います。

<ul>
<?php
if( is_mobile() ) {
$posts_per_page = 3; // スマホの件数
} else {
$posts_per_page = 5; // パソコンの件数
}

$latest_posts = get_posts( array(
'posts_per_page' => $posts_per_page, // 表示する記事の数
'category_name' => '投稿ID', // 投稿IDを取得
'fields' => 'ids',
) );

foreach( $latest_posts as $post ):
setup_postdata( $post );

// 以下略（改造前のコードとおなじです）
?>

こんなふうにすれば、一番上に５行追加するだけで分岐できます。foreach():も一回書くだけでいいので、すごくシンプルです。

なお、PHPを編集されるのであれば、WordPressのデバッグモードを有効にすることをおすすめします。

FTPソフトでWordPressがインストールされたディレクトリ（フォルダ）にアクセスすると、《wp-config.php》というファイルが見つかります。このファイルを開くと、76行目あたりに《define('WP_DEBUG', false);》という記述があります。ここの《false》を《true》にして、上書き保存してください。スペルミスなどがあると真っ白になるので、ちゃんと確認してから保存します。

define('WP_DEBUG', true);

ここをtrueにすると、何かあったときに画面が真っ白になるのではなく、どこの何行目で書き方を失敗したのか、しっかりとエラーメッセージを表示してくれるようになります。エラーの場所を一目で把握できるようになるため、PHPを編集するうえで非常に役立ちます。

参考URL：

https://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86

お礼

ありがとうございます。
<?php endif; ?>の漏れでしたか。原因はわかりました。
ご指示のコードでやってみましたところうまく表示できました。
こっちの作成したコードはムダなコードでした。
シンプルなコードで感服しました。

回答No.1

AsarKingChang

>PCでは記事一覧5件、スマホでは3件表示するようにしたいです。
それだけなら、こんなにだらだら長く書くより
教科書書きなら
<?php if ( is_mobile() ) : ?>
<?php $posts_per_page=5; ?>
<?php else: ?>
<?php $posts_per_page=3; ?>
<?php endif; ?>
～以後ソースは同じ～
ただ、IFの処理がどちらも同じ変数にアクセスしているのに、
ELSEとENDIFを使うのは効率が悪いので、効率を求めるなら、
<?php $posts_per_page=is_mobile()? 5:3; ?>
のみでもOKです。

後は、今まで通り

```
$latest_posts = get_posts( array(
'posts_per_page' => 5, // 表示する記事の数
```
ここを
```
'posts_per_page' => $posts_per_page, // 表示する記事の数
```
にするだけ。

ソースが1本化され、余計なバグや問題が出なくて楽ですよ。
要するに、違いが出る部分の「違い」だけを変数に入れて
コールするって概念の方が、楽ですよ！
大本のソースから、2行しか変化していないコミットになりますからね！

お礼

ありがとうございます。
2つともテストしてみましたが、スマホでは変わりませんでした。
シンプルなコードにできるってことは勉強になりました。