KASABUTA-ENDLESS

*

[WordPress] 「トップへ戻る」「PageTop」をスマホだけ表示しないようにする方法[STINGER5]

   

スポンサーリンク

[WordPress] 「トップへ戻る」「PageTop」をスマホだけ表示しないようにする方法

先日、サイトの右側に現れる「トップへ戻る」「PageTop」の画像を変更しました。

[STINGER5]トップへ戻るのボタンを好きな画像に変更する方法「PageTop」 | KASABUTA-ENDLESS


試行錯誤の結果、無事に成功したのですが本日新たな問題に遭遇しました。

スマホから、この当サイトをチェックしてみたところ、

Screenshot_2014-10-21-14-14-13

ものスッゴい邪魔なトップへ戻るの画像(笑)

こんなのが出てきたら、速攻で閉じますよね。

これは由々しき事態だ、と対策を講じてみました。

そもそもスマホのページには「TOPへ戻る」は必要ないんじゃないかな、と思ったので非表示にしてみたいと思います。

重要なphpをイジリますのでバックアップは取っておいてくださいね。

では、早速ヤってみましょう。

なお、当サイトではワードプレステーマ「STINGER5」を使用しています。

使用するテーマによってはコードの記述の違いなどがあるかもしれませんがご了承くださいませ。

is_mobileという条件分岐タグ

今回は、「TOPへ戻る」の画像をPCでは表示し、スマホでは表示しないように設定します。

これには「is_mobile」という「条件分岐タグ」を使用します。

「スマホだったら~します。スマホ以外なら~します。」

という指令を出せる便利な機能です。

今回の場合は、

「スマホだったら『トップへ戻る』の画像を表示しません。スマホ以外だったら表示するようにします。」

という指令を出すわけです。

なお、この「is_mobile」を使用するにはfunction.phpに以下のようなコードを記載する必要があります。

//スマホ表示分岐
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser

    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

functions.phpに記載がない場合は、コピペしてください。

このコードはSTINGER5のfunctions.phpに載っているものです。

他のテーマでは使用できなかったりしたらゴメンナサイ。

このコードがないと「is_mobile」は使用できませんので、忘れずに記載してくださいね。

またphpはサイトを形作る重要なファイルですので書き込む前にはバックアップをとっておきましょう。

is_mobileでトップへ戻るの画像を非表示にする

is_mobileは以下のコードで使用できます。

<?php if(is_mobile()) { ?>
スマホだったら~します。
<?php } else { ?>
スマホ以外なら~します。
<?php } ?>

真ん中のelseは「その他の」って意味ですね。

スマホだったら~します。の部分に何も記載しないで、スマホ以外なら~します。の部分にだけ命令を記載することで、「スマホでは~しません。」と同じ意味になります。

つまり、これを利用して「トップへ戻る」の画像をスマホで表示しないようにするには、

スマホだったら~します。の部分を空欄。

スマホ以外なら~します。の部分にトップへ戻るの画像を設置するコードを記載。

実際に、「footer.php」の「ページトップへ戻る」の部分を書き換えると、

<!-- ページトップへ戻る -->
<?php if(is_mobile()) { ?>
<?php } else { ?>
<div id="page-top"><a href="#wrapper"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png"  /></a></div>
<?php } ?>
<!-- ページトップへ戻る 終わり -->

こんな感じになります。

<div id="page-top"><a href="#wrapper"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png"  /></a></div>

このコードが「トップへ戻る」を表示するためのコードです。

「ページトップへ戻る」の画像の変更等については、この記事を参照してくださいな。

[STINGER5]トップへ戻るのボタンを好きな画像に変更する方法「PageTop」 | KASABUTA-ENDLESS


スマホ以外なら「トップへ戻る」を表示する、という命令を出すことで、逆に、スマホでは「トップへ戻る」を表示しないようになりました。

まぁ、実際にスマホで確認してみるとm

Screenshot_2014-10-21-16-42-50

うん。消えてますね。

以上で、完了であります。

お疲れ様でした。

[WordPress] 「トップへ戻る」「PageTop」をスマホだけ表示しないようにする方法のまとめ

私の場合はスマホのサイトには「ページトップへ戻る」の機能が必要ないと思って非表示にしました。

もしスマホにも要るよ!って場合はelseの前、「スマホだったら~します」の部分に小さめのサイズの画像を表示するようにコードを入れたらいいのではないでしょうか。

さて、ここまでお付き合いいただき誠にありがとうございました。

またお見えできる機会を楽しみにしています。

 - WordPress, 使い方

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

By: Piotr Drabik
ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …

By: JD Hancock
人気ブログになるためのプロフィールの書き方

スポンサーリンク 人気ブログになるためにアルファブロガーのブログのプロフィール欄 …

By: Michelle Tribe
便利スギィ!!投稿編集画面でペイント・お絵かき出来るワードプレスプラグイン「deviantART muro」

ワードプレスの記事投稿で画像を使用したい時に、 「ペイント等で画像を作成・保存→ …

By: bluesbby
ワードプレスの記事中にソースコードを表示させる簡単な方法

スポンサーリンク ワードプレスの記事中にソースコードを表示させる簡単な方法 前回 …

cropped-stinger5.png
STINGER5のヘッダーをカスタマイズしますよ。

ヘッダーは超重要だと思いませんか? 人に例えると「顔」にあたると個人的に思ってい …

By: eyeliam
パーマリンクのカスタムURLは日本語の記事タイトル名じゃあかんのや!!

スポンサーリンク ワードプレスの記事をツイートボタンからツイートしてもらったとき …

By: Maria Keays
[WordPress]投稿日付と時間の表示を変更する。あと投稿者名を削除する方法(Hueman)

スポンサーリンク [WordPress]投稿日付と時間の表示を変更する。 あと投 …

By: khrawlings
[WordPress]phpをいじってヘッダー右側に相互RSSを設置する方法

スポンサーリンク [WordPress]phpをいじってヘッダー右側に相互RSS …

By: Shannon Kringen
[WordPress]子テーマ作成の一番手軽で簡単な方法!プラグイン『Duplicate Theme』

ブログの文字サイズを大きくしようかと思い、子テーマのCSSをいじろうかとしたら、 …

By: Brantley Davidson
[WordPress]オシャレなSNSボタンをサイドバーウィジェットに追加するプラグイン「Lightweight Social Icons」

スポンサーリンク [WordPress]オシャレなSNSボタンをサイドバーウィジ …