【WP】Stingerカスタマイズ、スマホ表示でサイドバーを消しちゃおう

slooProImg_20140130074632.jpg
どうも、こんにちわ。
Wordpressのテーマ「Stinger」を利用しているわけですがスマホ表示の時にサイドバーが下の方に長く出るのはちょっと嫌だなと思いPC表示ではサイドバーを表示してスマホ表示ではサイドバーを非表示にできるようカスタマイズしてみました。
(多分みんなやってる‥)

編集するのはフッター

IndexでもメインでもSingleでもヘッダーでもなくてフッターです。
WordPressの管理画面からでも良いですしその他編集ソフトやメモ帳で修正してFTPで転送するのでも構いませんがフッター(footer.php)を編集します。
修正箇所は3行目くらいにある下記コードがサイドバーを呼び出すコードです。
ここにモバイル(スマホ)からのアクセスなのかPCからのアクセスなのかを判定させる処理を追加します。
[sourcecode]
<php get_sidebar(); ?>
[/sourcecode]
いろいろな場所で使われているソースなのでコピペすれば良いのですが意味合いとしては、
if文で判定し、モバイルならなんの処理もしない、elseでもし違えばサイドバーを呼び出すというロジックになっています。
PHPじゃなくてもIF文はプログラムには欠かせない判定文となりますので覚えておきましょう。
[sourcecode]
<?php if ( function_exists(‘wp_is_mobile’) &&wp_is_mobile() ) :?>
<?php else: ?>
<?php get_sidebar(); ?>
<?php endif; ?>
[/sourcecode]
これでモバイル(スマホ)ならサイドバーを非表示にすることが出来ました。
サイドバーを表示させなくても新着記事や関連記事はもともと記事の下部に表示されているので問題無いと思います。追尾型の広告や検索窓は消えてしまいます。
私はよく自分のブログ内を検索したりするのですが検索窓がなくなると意外と不便です。
(アプリ使ってhttp://1118.me/?s=XXXXこんなので検索することもできますがサイト内検索したい人きっと1万人に1人位はいると思うんですよ)

検索窓をどこかに追加する

どこからも検索できないのは不便なので検索窓を設置してあげましょう。
僕はメニューのアコーディオンメニューの中に入れてしまいました。
検索窓を設置するコードはこれだけです。
[sourcecode]
<?php get_search_form(); ?>
[/sourcecode]
IF文を使った処理やモバイル判定処理は、レイアウトを変えたりまたまた広告を変更したりいろいろな用途に利用できる便利な関数となります。これは覚えておきましょう。
こんなの覚えられないという人はこのページをブックマークしちゃいましょ :-)


こんな記事のリクエストからディズニーランドに一緒に遊びに行きませんか?というお誘い、写真を一緒に撮りに行きましょうというお誘い、誤字・脱字をはじめ全てのお問い合わせは、こちらへお願いします。
定期的な購読はRSSにご登録お願いします。
掲載している写真の個人的利用、保存はOKですが、複製、再利用、営利目的の利用は禁止です。


TOP