広告に問題があります - 広告をウィジェットに配置しましたが、今ではサイトのモバイル バージョンが最悪です - 広告が携帯電話には大きすぎて、テーマが台無しになっています。私が今思いついたのはこれです:
.mobile #widget{
display: none;
}
しかし、問題は、それが機能しないことであり、その#widget
ようなウィジェットを取り除くことが可能かどうかはわかりません. 私が間違っている場合は、私を修正してください。
広告に問題があります - 広告をウィジェットに配置しましたが、今ではサイトのモバイル バージョンが最悪です - 広告が携帯電話には大きすぎて、テーマが台無しになっています。私が今思いついたのはこれです:
.mobile #widget{
display: none;
}
しかし、問題は、それが機能しないことであり、その#widget
ようなウィジェットを取り除くことが可能かどうかはわかりません. 私が間違っている場合は、私を修正してください。
コードや 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');
?>
このシナリオが存在するかのように CSS を記述しているため、記述した内容はあまり意味がありません。
<div class="mobile">
<div id="widget">your ad</div>
</div>
これは明らかに存在しません。
ここでは、サイトにある CSS ファイルからの @media クエリを使用して、テーマがどのようにモバイル デバイスをターゲットにするかを確認できます。
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. */
}
基本的に平易な英語で言うと、「デバイスのビューポートが 480 ピクセル以下の場合は、この CSS を含めてください」です。これは、モバイル デバイスをターゲットにする最も現代的で一般的な方法の 1 つになりつつあります。多くの人は、Javascript や PHP でユーザー エージェントを使用して、iPhone や Android フォンなどを具体的にターゲットにしようとするのは、一種の後ろ向きな考え方だと考えています。代わりに、CSS @media クエリを使用して、さまざまなデバイス幅をターゲットにしています。
さて、コンテンツの下部にある広告領域を非表示にします。Firebug や Google Chrome の Web 開発者ツールなどのツールで調べると、「main-bottom」というクラスにラップされていることがすぐにわかります --
CSS では、クラスを参照するときにプレフィックスとしてピリオドを付けることを知っているので、displayプロパティを使用して要素を非表示にできるので、これを @media クエリに入れます。
@media(max-width:480px){
.main-bottom {
display:none;
}
}
最も簡単な方法はWidget Options Plugin
、モバイルやその他のデバイスでウィジェットを非表示にできるものを使用することです。リポジトリで無料です: https://wordpress.org/plugins/widget-options/。以下のスクリーンショットを確認できます。ありがとう!