解決済み

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

  • 困ってます
  • 質問No.9579647
  • 閲覧数85
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 56% (175/310)

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

ベストアンサー率 58% (340/578)

おそらく、最後の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 );

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

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


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

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

define('WP_DEBUG', true);

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

お礼率 56% (175/310)

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

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 50% (1230/2423)

コンピューター カテゴリマスター
>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行しか変化していないコミットになりますからね!
お礼コメント
nkmyr

お礼率 56% (175/310)

ありがとうございます。
2つともテストしてみましたが、スマホでは変わりませんでした。
シンプルなコードにできるってことは勉強になりました。
投稿日時 - 2019-01-20 19:54:59
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


OKWAVE若者応援スペシャル企画

ピックアップ

ページ先頭へ