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: Chris Potter
画面のキャプチャ後に編集まで出来ちゃう拡張機能(アドオン)が便利らしいゾ♪

スポンサーリンク クロームやインターネットエクスプローラー、ファイアフォックス等 …

By: maaco
ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

スポンサーリンク ワードプレスの記事中で他のサイトをスクリーンショット画像とタイ …

By: mkhmarketing
[WordPress]Huemanのサイドバーの幅と色を変更する方法

スポンサーリンク [Wordpress]Huemanのサイドバーの幅を変更する方 …

2015-02-05_224359
アキネイター:アナタの考えは見透かされてますよ。

アキネイターってサイト、もしくはアプリ知ってます? なんとなくは知ってたんですけ …

108901r
KASABUTA-ENDLESS(かさぶたエンドレス)について

スポンサーリンク KASABUTA-ENDLESS運営者のプロフィール プロフィ …

By: Andrew Abogado
[Hueman使い方]サイドバーの背景色を変更する方法。その2

スポンサーリンク [Hueman使い方]サイドバーの色を変更する方法。その2 前 …

By: Linus Bohman
[WordPress]プロフィールをサイドバーに載せるプラグイン4つを試してみた

スポンサーリンク [WordPress]プロフィールをサイドバーに載せるプラグイ …

stinger5
STINGER5の文字サイズを変更する方法

つい先日、今頃になって気がついたのですけどね、 「なんか、うちのブログ、文字小さ …

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

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

By: jeffreyw
助けて!ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ\(^o^)/

スポンサーリンク 助けて!ワードプレスのビジュアルモードでの編集で画像をいれると …