PHPで画面幅によってHTML出力を変えたいんですが、うまくできません。。

wordpressでサイトを作っていて、
画面幅の大きい時はタイトルを指定の文字数で抜粋表示して、
880px以下では抜粋せずに普通に表示したくてネットで色々検索したら
それっぽいのがあり試してみたのですが表示されませんでした。

javascript
1$(document).ready(function(){
2  var setWindowSize = function () {
3    $.ajax({
4      type: "POST",
5      url: "/wp-content/themes/○○/sidebar-list.php", // 画面サイズを渡すPHPのURL
6      data: "windowSize=" + $(window).width()
7    });
8  };setWindowSize();
9
10  // リサイズした時にsessionを更新する為
11  var timer;
12  $(window).resize(function() {
13    if (timer) clearTimeout(timer);
14    timer = setTimeout(setWindowSize, 1000);
15  });
16});

php
1<?php
2      session_start();
3
4      if(isset($_POST['windowSize'])){
5        $_SESSION['windowSize'] = $_POST['windowSize'];
6
7        if($_SESSION['windowSize'] >= 880):
8    ?>
9      <p class="title"><?php echo mb_strimwidth(get_the_title(), 0, 36, "…", "UTF-8"); ?></p>
10    <?php
11        else:
12    ?>
13      <p class="title"><?php echo get_the_title(); ?></p>
14    <?php
15        endif;
16      };
17    ?>

このように実装したのですが、うまくいきませんでした。。

お分かりの方いましたら是非教えていただきたいです。
宜しくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

JavaScriptだけで十分かと。

JavaScript
1$( '.title' ).each( function() {
2	var $_t = $( this );
3	$_t.data( 'ownText', $_t.text() )
4} );
5var w = false;
6function setTitleSize() {
7	var over = ( window.matchMedia( '(min-width:880px)' ).matches );
8	if ( w === over ) { return; }
9	$( '.title' ).each( function() {
10		var $_t = $( this );
11		var text = $_t.data( 'ownText' )
12		if ( over && text.length > 36 ) {
13			text = text.substr( 0, 36 ) + '…';
14		}
15		$_t.text( text )
16	} );
17	w = over;
18}
19setTitleSize();
20var timer;
21$( window ).resize( function() {
22	if ( timer ) clearTimeout( timer );
23	timer = setTimeout( setTitleSize, 1000 );
24} );
25// 未テスト

投稿2017/05/26 05:55

kei344

総合スコア69574

ajaxに渡すdataは配列でないと渡せないはず。
jQuery：Ajaxを使用してPOST送信でデータ取得

だのでこう↓ですね

Javascript
1data: "windowSize=" + $(window).width()
2↓
3data: {"windowSize":$(window).width()}
4

ただ、AjaxはJavaScriptを介してPHPなどサーバーサイドのプログラムを実行し、結果を受け取るために使うものなので（データベースへのアクセスとか）そもそもの利用方法に間違いがあるように思います。
ということで、画面幅を監視してどうこうするのだけであれば画面幅関係のところにPHP不要では？と思います。

※イメージだけ持ってもらえればと思います

HTML
1<script>
2$(function(){
3  $( window ).resize(function() {
4    var winsize = $(window).width();
5    //880以上は切り取る
6    if(winsize > 880){
7       //文字列切り出す処理～～～
8    }
9    //デフォルトは全て表示にしておくため880以下は何もしない
10  });
11});
12</script>
13
14 <p class="title"><?php echo get_the_title(); ?></p>

文字列切り出す処理は下記を参考にしてください。
http://black-flag.net/jquery/20121010-4227.html

投稿2017/05/26 05:08

編集2017/05/26 07:03

m.ts10806

総合スコア80875

rok6

2017/05/26 05:37

matsu1006 さんに賛成です。画面サイズ更新処理ごとにサーバーにPOSTしたのでは、サーバー側の負担が無駄にかかるように思います。 PHPでは一旦、文字列すべてを取得し、 JSで画面サイズを調べて、880px以下であれば文字を削るといった処理の方が良いと思います。ちなみにJSでの画面サイズの判定には if (window.matchMedia('(max-width:880px)').matches) { // 画面サイズ880px以下の時の処理 } といった方法もあります。

m.ts10806

2017/05/26 05:47

確かにmatchMedia()の方が直感的でレスポンシブやってる感が出そうですね（勉強不足でこの関数知りませんでした。ありがとうございます）

ShunYoshizawa

2017/05/26 06:47

コメントありがとうございます！いただいたソースとリンクであと一歩のところまできました。。 880px以上でなぜかリロードすると省略されていなくて、ちょっとでも画面幅を変えると省略されます。これはresizeを使っているからでしょうか？

m.ts10806

2017/05/26 07:04

あああああ・・・ごめんなさい。サンプルコード修正しました。 $(function(){ }); で囲ってください。 $(function()は「DOM(HTML)が全て読み込まれたら実行」となり、画面表示時にも動作し、画面幅変更時にも動作するようになります。

行動規範の内容に同意します

なぜajaxが必要なのでしょうか？
880以上と以下でresize時に自分自身にpostするとかだめですか？

javascript
1</script>
2<script>
3$(function(){
4  var flg1=$(window).width()<=880?"under880":"";
5  $(window).on('resize',function () {
6    var flg2=$(window).width()<=880?"under880":"";
7    if(flg1!==flg2){
8      flg1=flg2;
9      $('<form>').attr({'method':'post','id':'form1'}).append($('<input>').attr({'type':'hidden','name':'flg','value':flg1})).appendTo('body').trigger('submit');
10    }
11  });
12});
13</script>
14<body>
15
16</body>
17<?PHP
18print_r($_POST);