Попытка переместить заголовок WordPress только на мобильный - PullRequest
0 голосов
/ 30 января 2020

В настоящее время пытаюсь завершить sh сборку Wordpress, но у меня возникла небольшая проблема.

Я использую следующий Jquery код:

jQuery( document ).ready( function ($) {
    var mobile = $(window).width();
    if ( mobile <= 680 ){
        $( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
    }
} );

Итак когда экран меньше 680 пикселей, класс «product_title.entry-title» будет вставлен перед классом «woocommerce-product-gallery». Это в основном перемещает заголовок НАД галлереей продуктов на моей странице продукта.

НО это меня беспокоит, потому что этот код срабатывает только каждый раз, когда страница обновляется. Поэтому, если я загружу страницу и изменим размер браузера, ничего не произойдет, пока я не обновлю sh. Есть ли альтернативный метод, который я могу использовать, чтобы избежать этого?

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Вы можете использовать встроенную в WordPress функцию «обнаружения мобильных устройств» wp_is_mobile , чтобы создать простой шорткод, который может скрывать определенные части вашего контента от посетителей мобильных устройств и / или посетителей рабочего стола. Функция wp_is_mobile возвращает true, когда ваш сайт просматривается в мобильном браузере. С помощью этой функции вы можете создавать адаптивные / адаптивные темы WordPress на основе устройства посетителя.

For example,

<?php  if( wp_is_mobile()){  ?>
 // mobile stuff goes here
   <div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
   // desktop stuff goes here
   <div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php  } ?>
0 голосов
/ 30 января 2020

Исходя из комментария @Partha Roy, вы можете использовать медиазапрос, например, так:

.product_title.entry-title.mobile-only {
  display: block;
}
.product_title.entry-title.desktop-only {
  display: none;
}

@media (min-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: none;
  }
  .product_title.entry-title.desktop-only {
    display: block;
  }
}

Или в не-мобильной адаптивной первой стратегии:

.product_title.entry-title.mobile-only {
  display: none;
}
.product_title.entry-title.desktop-only {
  display: block;
}

@media (max-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: block;
  }
  .product_title.entry-title.desktop-only {
    display: none;
  }
}

И, конечно, вы Вам понадобятся два набора HTML в тех местах, где вы их хотите.

<div class="product_title entry-title desktop-only">...</div>
<div class="product_title entry-title mobile-only">...</div>

Вы можете обратиться к этому похожему вопросу: Как показать текст только на мобильном телефоне с CSS?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...