Запустить короткий код с определенным разрешением

Я проделал обходной путь, чтобы попытаться задать вопрос об этом здесь: Загрузка короткого кода с помощью ajax, но полагала, что, возможно, стоит задать основной вопрос о том, что я пытаюсь сделать, не добавляя мое смутное, наивное решение проблем в микс ,

Я хочу запустить это:

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

Но только если размер окна больше, чем, например, 800 пикселей.

Любые идеи были бы высоко оценены!

Solutions Collecting From Web of "Запустить короткий код с определенным разрешением"

Хорошо, давайте проясним концепцию. Вы не хотите загружать контент для мобильного устройства, и вы хотите полагаться на разрешение экрана. Вы знаете, что php (wordpress) работает на сервере, разрешение экрана – это полностью клиентский вопрос.

Таким образом, поток будет:

  1. пользователь отправляет запрос на ваш сайт
  2. загрузка вашего сайта на клиента
  3. некоторые js запускаются на клиенте, распознают разрешение и в каком-то состоянии запускают ajax для отправки запроса на сервер и загрузки короткого кода

Что здесь не так? Просто: разрешение экрана недостаточно, чтобы знать клиентское устройство. Например, в этот момент я пишу с настольного ПК с монитором 26 ", но окно браузера не в полном размере и, вероятно, не превышает 800 пикселей. Для меня поток ниже не загрузит короткий код. Хочешь? Я так не думаю.

Возможно, вы можете положиться на событие window.resize js, поэтому, когда я изменяю размер окна на более чем 800 пикселей, вы загружаете короткий код, иначе вы удаляете короткий код. В этом случае запрос 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(); }); 

Это то, что вы хотите? Может быть, но есть другое решение (лучшее решение, на мой взгляд).

WordPress как функция wp_is_mobile который распознает мобильное устройство, но он возвращает true, даже если устройство представляет собой 10- wp_is_mobile планшет с экраном привет-Res.Это не идеально, но есть сценарий, который может вам помочь. Это Mobile Detect .

Как его использовать: загрузите его и вставьте в папку. Для semplicity я предполагаю, что это в вашей теме. На вашей странице, где должен появиться короткий код, введите следующее:

 @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, и телефон никогда не загружает ваш короткий код , ПК и планшеты загружают его всегда .

Если вы хотите избежать загрузки слайдера планшета, удалите второе условие внутри оператора if .

Чтобы улучшить решение, вы также можете скрыть слайдер с низким разрешением с помощью запросов css media, поэтому настольные компьютеры и планшеты с измененным размером окна (например, шахта) теперь не видят слайдер.

Не идеально, конечно, но в это время я думаю, что в этом нет идеального решения, и эта последняя кажется мне лучшей среди возможностей.

Для измерения размера экрана пользователя вам понадобится 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, не будет выполняться.

Альтернативный метод

Автор 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 поскольку автор никогда не предполагал, что он имеет Metaslider называемый через AJAX . Вы получите что-то, чтобы отобразить, но нет функциональности. Возможно, можно включить файлы JS и выполнить соответствующую команду для запуска ползунка, но альтернативный метод выше будет намного проще. Однако этот метод будет по-прежнему работать для некоторых других / подобных потребностей.

Я чувствую вашу боль @ dontwakemeup. Я хочу сделать то же самое. Мне нравится использовать metaslider и я часто использую CSS @media для определения ширины экрана, а не для определения фактического устройства, потому что меня не интересует конкретное устройство, меня интересует ширина экрана и макет моего контента. Я хочу скрыть ползунок под определенной шириной, независимо от устройства, потому что он соответствует потоку макета дизайна.

Описание приведено ниже; когда все сказано и сделано, процедура будет выглядеть примерно так:

  1. загрузить страницу без слайдера
  2. AJAX проверяет, загружен ли ползунок (через и добавлено имя класса или ваш собственный предпочтительный метод) и проверьте ширину экрана, чтобы увидеть, нужен ли ползунок. ( Функция load_shortcode() функции @ gmazzap может быть тем, что вы ищете здесь)
  3. При необходимости: загрузить слайдер.
  4. Любые будущие вызовы AJAX будут быстро выполнены с проверкой, чтобы убедиться, что контент уже загружен (через шаг 2) и внезапно завершен.
  5. Сохраните запрос CSS @media чтобы потенциально скрыть уже загруженный слайдер, если ширина экрана изменится. Не использовать, пытаясь «выгрузить» что-либо, чтобы, возможно, снова «перезагрузить» его позже.

Вот какой-то код, который я нашел, который позволяет вам вызвать функцию один раз за выбранный период времени. Это полезно вместе с вызовом AJAX чтобы ограничить, сколько раз функция вызывается во время изменения размера пользователя. Таким образом, функция идеально будет вызываться только один раз для каждого размера. Вместо того, чтобы быть вызванным для каждого кадра, который происходит, когда пользователь меняет окно, чтобы соответствовать их желаниям. (Это может быть много раз, и вам нужно только один … после того, как пользователь будет готов)

 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); }; })(); 

Я нашел этот код в «Переполнение стека», ЗДЕСЬ , и немного изменил его по моим собственным желаниям.

Отсюда вам нужно добавить loaded имя класса в контейнер или какой-либо другой способ обнаружить, что слайдер слайдера был загружен через AJAX . Это не будет пытаться загружать вещи более одного раза. (Опять же, я считаю, что функция gmazzap может сделать это для вас.)

Вы все равно захотите использовать запрос CSS @media чтобы скрыть ползунок в зависимости от ширины экрана, чтобы сохранить макет для пользователей, которые меняют ширину экрана на рабочем столе (как упоминалось ранее). По-моему, я думаю, что функция @ gmazzap немного завышена здесь, используя jQuery чтобы скрыть ползунок, когда запрос @media будет работать нормально.

ПРИМЕЧАНИЕ. Функция @ gmazzap выглядит отлично, однако он не показывает сторону WordPress вызова AJAX . Вам нужно будет построить это в соответствии с вашими потребностями.

Сторона WordPress из вашего вызова AJAX может быть чем-то простым: (Просто пример, я не проверял его. Ваш пробег будет отличаться.)

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

Надеюсь, это поможет вам или кому-либо еще, кто найдет эту страницу. Я знаю, что сам буду использовать его по мере необходимости.