Gushで画面サイズに応じて一部のウィジェットを非表示にする方法

MIMIYAKO85_cafedeworks20140725_TP_V

どうも、チコ(@gamerchiko)です。当ブログはサイドバーに追尾型広告を設置していたのですが、この追尾型広告は画面サイズ(ウィンドウサイズ)が小さい時に表示するとものっそい邪魔でした。

だから、私は「なんとかして画面サイズに応じて一部のウィジェットの表示・非表示を切り替える事が出来ないか」とずっと思っていたのですが、今回ついに解決したので方法を紹介しようと思います。

今回の方法は「display:none」や「!important」を使うのでかなり強引な方法です。もっとスマートな方法があればド素人の私に教えてくださると嬉しいです。私は「Gush」というテーマを使っているので今回は「Gush」でのやり方ですが、違うテーマでも多分出来ると思うので参考にしてみてください。

テーマのための関数(functions.php)へ記入

//非表示
register_sidebar( array(
     'name' => __( '非表示' ),
     'id' => 'side-hihyouji',
     'before_widget' => '<li>',
     'after_widget' => '</li>',
     'before_title' => '<h4>',
     'after_title' => '</h4>',
) );

「functions.php」は重要なファイルなのでバックアップをとってから弄ってください。下手するとブログが真っ白になり管理画面にすら入れなくなります。私も何度か真っ白になり焦りました (笑)

上記のコードを「functions.php」に追加してください。「Gush」に元々記入されていたコードを少し変えた奴を追加しただけです。これでウィジェットを入れる為のウィジェットエリアが追加されます。

サイドバー(sidebar.php)へ記入

<!--sub-->
<div id="sub">
<div class="side_ad">
<aside>
<?php dynamic_sidebar( 'side-ad' ); ?>
</aside>
</div>

<div class="side_contents">
<ul>
<?php dynamic_sidebar( 'side-widget' ); ?>
</ul>
</div><!--//side_contents-->

「Gush」では元々こんな風に記入されていますが、この部分を以下のようにしてください。

<!--sub-->
<div id="sub">
<div class="side_ad">
<aside>
<?php dynamic_sidebar( 'side-ad' ); ?>
</aside>
</div>

<div class="side_contents">
<ul>
<?php dynamic_sidebar( 'side-widget' ); ?>
<div class="hihyouji-box"><?php dynamic_sidebar( 'side-hihyouji' ); ?></div>
</ul>
</div><!--//side_contents-->

スタイルシート(style.css)へ記入

今回は画面の幅が1024px以上の時はウィジェットを表示し、1024px未満の時は非表示にします。

.hihyouji-box {
	display: none !important;
}

以上のコードを「スタイルシート(style.css)」の好きな所に記入してください。「Gush」を使っている方は「@media screen and (min-width : 1024px){」より上の部分に記入してください。

.hihyouji-box {
	display: block !important;
}

次に以上のコードを「スタイルシート(style.css)」の好きな所に記入してください。「Gush」を使っている方は「@media screen and (min-width : 1024px){」より下の部分に記入してください。

「ウィジェット」の設定

最後に画面の幅が1024px以上の時は表示し、1024px未満の時は非表示にするウィジェットをウィジェットエリアに追加していきます。管理画面で「外観」→「ウィジェット」とアクセスしてください。

無題1

「非表示」と書かれたウィジェットエリアにいつも通りにウィジェットを追加すれば完了です。

無題2

参考にしたサイト

WordPressのウィジットエリアを追加する方法 | Web’Notes

最後に

ずっと悩んでいた事だったので自己解決出来て良かったです。ちなみに冒頭で言っていたサイドバーの追尾型広告(125×125)の枠は現在「500円/30日」で販売しています。無料お試しも出来るので気になった方はこちらのサイトを見に来てくださると嬉しいです。めっちゃ空いてます (泣)

スポンサーリンク

クトゥルフモンスターズ

スポンサーリンク

オススメ記事

スポンサーリンク

この記事を友達に教える

ブログ内検索

コメント

  • クトゥルフモンスターズ
  • クトゥルフモンスターズ
TOP