Скрыть виджеты Wordpress на мобильном устройстве

Question

У меня возникли проблемы с рекламой - я разместил их в виджетах, и теперь mobile version сайта отстой - реклама слишком велика для телефона и разрушает тему. То, что я придумал сейчас это:

.mobile #widget{ display: none; }

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

Answer 1

То, что вы написали на самом деле не имеет особого смысла, потому что вы» re write your CSS, как если бы этот сценарий существовал:

<div class="mobile"> 
    <div id="widget">your ad</div> 
</div> 

Это, очевидно, не существует.

Здесь можно увидеть, как тематические целевые мобильные устройства с @media запросами из файла CSS, расположенный на сайте:

http://nix-pix.co.uk/wp-content/themes/alyeska/assets/css/responsive.css

Итак, на самом деле это довольно просто - Любые пользовательские стили, которые требуются целевой мобильной просто быть помещены в запрос @media, как это:

@media(max-width:480px){ 
    /* All styles for mobile devices go here. */ 
} 

То, что это в основном говорит на простом английском языке: «Если видовой экран устройства является 480px или меньше, включают в себя этот CSS» - быстро становится один из самых современных и популярных способов таргетинга на мобильные устройства, потому что сейчас их так много. Многие считают, что это похоже на обратное мышление, чтобы попытаться использовать javascript или пользовательские агенты с PHP специально для iPhone или телефона Android и т. Д. Эти методы определенно имеют свою цель, но на самом деле это не так, на мой взгляд. Вместо этого мы используем запросы CSS @media для таргетинга на разные ширины устройства.

Итак, теперь вы хотите скрыть, где у вас есть область объявлений в нижней части содержимого. После проверки его с помощью инструмента, как Firebug или инструментов веб-разработчика Google Chrome, мы можем быстро увидеть это завернутые в классе под названием «основного Дно» -

Так как мы знаем, в CSS, когда вы ссылаясь на класс, мы префикс его с периодом, и чтобы скрыть элемент, мы можем использовать свойство display, мы просто сейчас помещаем это в наш запрос @media.

@media(max-width:480px){ 
    .main-bottom { 
     display:none; 
    } 
} 

Answer 2

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

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

В functions.php добавить:

function mobile_detected($agents) 
{ 
    $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']); 
    foreach($agents as $agent) 
    { 
     if(strpos($userAgent,strtolower($agent)) !== false) 
      return true; 
    } 
    return false; 
} 

И в вашей теме, где вы вызываете боковую панель:

<?php 
$devices = array(
"iphone", "ipod", "ipad", 
"android", "windows ce", "windows phone os", 
"blackberry", "palm", "symbian", "series60" 
); 
if(!mobile_detected($devices)) 
    dynamic_sidebar('Your Sidebar'); 
?> 

Answer 3

Самый простой способ использования Widget Options Plugin который можно скрыть виджеты на мобильных и других устройств.Это бесплатно в репозитории: https://wordpress.org/plugins/widget-options/. Вы можете посмотреть снимок экрана ниже. Благодаря!