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

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

ただいまの
回答率

88.91%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 2
  • VIEW 8,361

ShunYoshizawa

score 59

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

$(document).ready(function(){
  var setWindowSize = function () {
    $.ajax({
      type: "POST",
      url: "/wp-content/themes/○○/sidebar-list.php", // 画面サイズを渡すPHPのURL
      data: "windowSize=" + $(window).width()
    });
  };setWindowSize();

  // リサイズした時にsessionを更新する為
  var timer;
  $(window).resize(function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(setWindowSize, 1000);
  });
});
<?php
      session_start();

      if(isset($_POST['windowSize'])){
        $_SESSION['windowSize'] = $_POST['windowSize'];

        if($_SESSION['windowSize'] >= 880):
    ?>
      <p class="title"><?php echo mb_strimwidth(get_the_title(), 0, 36, "…", "UTF-8"); ?></p>
    <?php
        else:
    ?>
      <p class="title"><?php echo get_the_title(); ?></p>
    <?php
        endif;
      };
    ?>

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

JavaScriptだけで十分かと。

$( '.title' ).each( function() {
    var $_t = $( this );
    $_t.data( 'ownText', $_t.text() )
} );
var w = false;
function setTitleSize() {
    var over = ( window.matchMedia( '(min-width:880px)' ).matches );
    if ( w === over ) { return; }
    $( '.title' ).each( function() {
        var $_t = $( this );
        var text = $_t.data( 'ownText' )
        if ( over && text.length > 36 ) {
            text = text.substr( 0, 36 ) + '…';
        }
        $_t.text( text )
    } );
    w = over;
}
setTitleSize();
var timer;
$( window ).resize( function() {
    if ( timer ) clearTimeout( timer );
    timer = setTimeout( setTitleSize, 1000 );
} );
// 未テスト

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

だのでこう↓ですね

data: "windowSize=" + $(window).width()
↓
data: {"windowSize":$(window).width()}

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

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

<script>
$(function(){
  $( window ).resize(function() {
    var winsize = $(window).width();
    //880以上は切り取る
    if(winsize > 880){
       //文字列切り出す処理~~~
    }
    //デフォルトは全て表示にしておくため880以下は何もしない
  });
});
</script>

 <p class="title"><?php echo get_the_title(); ?></p>

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/26 14:37

    matsu1006 さんに賛成です。画面サイズ更新処理ごとにサーバーにPOSTしたのでは、
    サーバー側の負担が無駄にかかるように思います。

    PHPでは一旦、文字列すべてを取得し、
    JSで画面サイズを調べて、880px以下であれば文字を削るといった処理の方が良いと思います。

    ちなみにJSでの画面サイズの判定には
    if (window.matchMedia('(max-width:880px)').matches) {
    // 画面サイズ880px以下の時の処理
    }
    といった方法もあります。

    キャンセル

  • 2017/05/26 14:47

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

    キャンセル

  • 2017/05/26 15:47

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

    キャンセル

  • 2017/05/26 16:04

    あああああ・・・ごめんなさい。
    サンプルコード修正しました。
    $(function(){

    });
    で囲ってください。

    $(function()は「DOM(HTML)が全て読み込まれたら実行」となり、画面表示時にも動作し、画面幅変更時にも動作するようになります。

    キャンセル

0

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

</script>
<script>
$(function(){
  var flg1=$(window).width()<=880?"under880":"";
  $(window).on('resize',function () {
    var flg2=$(window).width()<=880?"under880":"";
    if(flg1!==flg2){
      flg1=flg2;
      $('<form>').attr({'method':'post','id':'form1'}).append($('<input>').attr({'type':'hidden','name':'flg','value':flg1})).appendTo('body').trigger('submit');
    }
  });
});
</script>
<body>

</body>
<?PHP
print_r($_POST);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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