web-dev-qa-db-ja.com

特定の解像度でショートコードを実行する

私はここでこれについて質問しようとするラウンドアバウト方法を行ってきました： Ajaxでショートコードをロードする しかし、それは私の混乱した、素朴な問題を追加せずにやろうとしていることの基本的な質問を尋ねる価値があるかもしれないミックスに解決する。

これを実行したいのですが。

<?php echo do_shortcode('[metaslider id="8302"]'); ?>

ただし、ウィンドウサイズがたとえば800pxより大きい場合に限ります。

任意のアイデアは大歓迎です！

phpshortcodejavascriptresponsive
1
Don't Wake Me Up

さて、コンセプトを明確にしましょう。モバイルデバイス用のコンテンツをダウンロードする必要はなく、画面の解像度に依存する必要があります。 php（wordpress）がサーバー上で実行されることを知っています。画面の解像度は完全にクライアント側の問題です。

したがって、フローは次のようになります。

  1. ユーザーがサイトにリクエストを送信します
  2. サイトページがクライアントに読み込まれる
  3. 一部のjsはクライアントで実行され、解決策を認識し、ある条件でajaxを実行してサーバーにリクエストを送信し、ショートコードをロードします

ここで何が問題なのですか？シンプル：画面解像度は、クライアントデバイスを知るのに十分ではありません。例えば。この瞬間、私は26インチのモニターを備えたデスクトップPCから書いていますが、ブラウザウィンドウはフルサイズではなく、おそらく800ピクセル未満です。私にとっては、以下のフローはショートコードをロードしません。 ？そうは思いません。

おそらくwindow.resize jsイベントに依存できるので、ウィンドウサイズを800ピクセル以上に変更すると、ショートコードが読み込まれます。そうしないと、ショートコードが削除されます。この場合、クライアントがbreakout解像度を超えるようにウィンドウのサイズを変更すると、ajaxリクエストがサーバーに送信されます。

jQuery().ready( function($) {

function load_shortcode() {
   if ( $(window).innerWidth() > 800 ) {
      if ( $('#slider .slider-content').length && ! $('#slider').is(':visible') ) {
        // slider was loaded but is hidden, show it
        $('#slider').show();
      } else {
        // slider never loaded, load it
        $.ajax({
          url: myscriptvars.ajaxurl,
          data: { action: 'load_slider_shortcode' }
        }).done(function(output){
          if (output) $('#slider').html(output);
        });
      }
    } else {
       // slider is there but window was resized in less than 800px: hide it
       if ( $('#slider .slider-content').length) $('#slider').hide();
    }
}

$(window).resize(function() {
   load_shortcode();
});

load_shortcode();

});

これは、あなたの望むことですか？たぶん、しかし、別の解決策があります（私の意見ではより良い解決策）。

モバイルデバイスを認識する関数wp_is_mobileとしてのWordpress。ただし、デバイスが高解像度の画面を備えた10インチタブレットであってもtrueを返します。これは理想的ではありませんが、役立つスクリプトがあります。 モバイル検出 。

使い方：ダウンロードしてフォルダに入れます。わかりやすくするために、テーマのルートにあると仮定します。ショートコードを表示する必要があるページで、次のように設定します。

@include_once( trailingslashit(TEMPLATEPATH) . 'Mobile_Detect.php' );
$detect = new Mobile_Detect;
$ismobile = ( $detect->isMobile() && ! $detect->isTablet() ); // true only for phones
if ( $mobile ) echo do_shortcode('[metaslider id="8302"]');

それで全部です。 Ajaxは必要ありません。window.resizeに依存する必要はありません。電話はショートコードをダウンロードしません。PCとタブレットは常にダウンロードします。

タブレットのダウンロードスライダーを避けたい場合は、ifステートメント内の2番目の条件を削除してください。

ソリューションを改善するために、CSSメディアクエリを使用して低解像度のスライダーを非表示にすることもできます。これにより、ウィンドウのサイズが変更されたデスクトップやタブレット（現在は私のもの）はスライダーを表示しません。

完全ではありませんが、現時点では、その問題に対する完全な解決策はないと思います。この最後の解決策は、可能性の中で最高のようです。

1
gmazzap

ユーザーの画面サイズを測定するには、フロントエンドにJavaScriptが必要です。その後、リクエストごとにその情報を送信するcookieを設定できます。

擬似コード：ページロード時に、ウィンドウサイズを取得してその値をcookieに格納します。

その情報をPHPコードで使用して、特定のコードを実行するかどうかを決定できます。

if( $_COOKIE['screen-size'] > 800 ) {
  //Whatever!
}

CSSトリックはこの作品のようなテクニックを作る方法をレイアウトする素晴らしい記事として - > http://css-tricks.com/make-client-side-data-available-server-side/ /

WP Super CacheやW3 Total Cacheのようなものでキャッシュしている場合、これは機能しません。これらのプラグインはテンプレートの出力をキャッシュするので、サーバーはすべてのリクエストに対して少ない処理をします。リクエスト内で何らかの動的条件が変化した場合、PHPを介して実行する必要があるロジックは実行されません。

0
kingkool68

代替方法

Metasliderの作者は WP Mobile Detect の使用を提案しています。これは私があなたが探していると思うものと同様の結果を達成するために使用したコードのサンプルです。 WP Mobile Detectプラグインが必要です。

<?php if(shortcode_exists('metaslider') && function_exists(wpmd_is_notphone) && wpmd_is_notphone()):
            echo(do_shortcode('[metaslider id=8302]'));
endif; ?>

私はまだスクリーン幅に応じてスライダーを隠すために@mediaクエリを使います、そして私はこれが100％互換性がないことを知っています。ただし、スライダーがロードされない場合は、単一の画像を含めることをお勧めします。このようにして、デザインの流れの中で必要な場所に常にコンテンツが存在します。

初期メソッド

Metasliderを介してshortcodeを呼び出すことを意図していないため、このメソッドはAJAXプラグインに対しては特に機能しません。表示するものはありますが、機能はありません。 JSファイルをインクルードして適切なコマンドを実行してスライダーを開始することは可能かもしれませんが、上記の代替方法がはるかに簡単になります。ただし、この方法は他の類似のニーズに対しても機能します。

私はあなたの痛み@dontwakemeupを感じます。私も同じことをしたいのです。私はmetasliderを使うのが好きで、実際のデバイス検出よりもスクリーン幅検出のためにCSS @mediaを使うことがよくあります。特定のデバイスを気にしない、スクリーン幅と私のコンテンツのレイアウトを気にするからです。デザインレイアウトの流れに合うので、デバイスに関係なく、特定の幅より下のスライダを非表示にします。

説明は以下のとおりです。それがすべて言われて終わったら、手続きは次のようになります。

  1. スライダーなしでページを読み込む
  2. AJAXスライダーがロードされているかどうか（クラス名または自分の好みのメソッドで追加されているか）をチェックし、画面の幅をチェックしてスライダーが必要かどうかを確認します。 （ @ gmazzapのload_shortcode()関数はここで探しているものかもしれません）
  3. 必要ならば：スライダーをロードしてください。
  4. 将来のAJAX呼び出しは、内容が既にロードされていることを確認するためにすぐに確認され（ステップ2で）、突然終了します。
  5. 画面幅が変更された場合に既にロードされているスライダーを非表示にするには、CSS @mediaクエリを保持します。後で再度ロードし直す必要がある場合にのみ、何かを「アンロード」しようとしても無駄です。

これは私があなたが選ばれた期間ごとに一度関数を呼ぶことを可能にするいくつかのコードです。これはAJAX呼び出しと一緒に使用して、ユーザーのサイズ変更中に関数が呼び出される回数を制限します。このようにして、関数はサイズ変更ごとに一度だけ呼び出されるのが理想的です。ユーザーが希望に合わせてウィンドウを変更している間に発生するすべてのフレームに対して呼び出されるのではなく。 （これは多くの場合時間がかかりますが、ユーザーが終了した後に必要なのは1回だけです）。

var event_call_function_once = (function ()
{
var timers = {};
return function (callback, ms, uniqueId)
{
    if (!ms)
    {
        ms = 2000;
    }
    if (!uniqueId)
    {
        uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId])
    {
        clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
};
})();

私はこのコードをStack Overflowで見つけました、 _ here _ 、そして私自身の望みに従ってそれをわずかに修正しました。

ここから、コンテナにloadedクラス名を追加するか、またはスライダーshortcodeがAJAXを介してロードされたことを検出するその他の方法が必要になります。これにより、複数回ロードしようとしなくなります。 （繰り返しになりますが、 @ gmazzapの 関数がこれを可能にします。）

デスクトップで画面の幅を変更するユーザーのために、レイアウトを維持するためにCSS @mediaクエリを使用して画面の幅に応じてスライダーを非表示にすることをお勧めします。私の意見では、 @ gmazzapの 関数は、@mediaクエリがうまく機能するときにスライダーを隠すためにjQueryを使用することで、ここでは少々手間がかかります。

注： @ gmazzapの 関数は問題ないように見えますが、AJAX呼び出しのWordPress側は表示されません。あなたはあなたのニーズに合うようにそれを構築する必要があるでしょう。

あなたのWordPress側でAJAXを呼び出すのと同じくらい簡単なものにすることができます（単なる例です、私はそれをテストしていません。あなたの走行距離は異なります。）

//WP AJAX action function
function load_slider_shortcode() 
{               
    echo(do_shortcode('[metaslider id=8302]')); 
    die();
}

これがあなた、またはこのページを見つけた人に役立つことを願っています。必要に応じて自分で使用することを知っています。

0
KnightHawk