書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】モバイルとの分岐はis_mobile()じゃないよ。

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

本日の記事は、モバイルとの分岐で使うロジック。

is_mobile()

についてです。

このロジックはモバイルとの分岐によく使用されているのですが、AFFINGERでは別のロジックにて分岐させているようです。

今回は、そのモバイル分岐について書いていきます。

モバイル分岐に使用されるロジックとは

PC画面だと正常に表示するのに、モバイル端末で表示するとレイアウトが壊れてしまうことってないですか?

オリジナルのデザインにする上でサイドバーなどをいじると必ず出ています。

例えば…

  • PCでは300×600の広告を表示したいけど、モバイルでは300×300の広告を表示したい
  • モバイル画面ではヘッダー下に広告を表示したい
  • PC画面ではPCゲームの広告を貼って、モバイルではアプリ専用広告を貼りたい

など用途は様々ですね。

そんな時に使えるロジックが

is_mobile()

という分岐処理。

一般的にモバイルとの分岐に使用されるロジックで、以下のように使用します。

とりあえず、いつものようにコメントを挿入していきます。

こんな感じ。

使い方はとっても簡単ですね。

モバイル分岐のロジックは様々

そもそも、分岐の設定はどこでされているのか?

当然…

functions.php

ですね。

実際に確認してみると…

1507行目付近にありました。

これで、分岐設定をしていることが確認できます。

is_mobileはarrayの中に含まれた端末が分岐されるということです。

ただ、AFFINGERには276行目付近に

と同様の設定があります。

ここではst_is_mobile()と定義されていますね。

冒頭ではis_mobile()ではない。と述べておりますが、実際のところis_mobile()でもst_is_mobile()でも問題なく使えます。

この2つ以外にも

wordpress側で定義されている

wp_is_mobile()

もあります。

ただ、wp_is_mobile()では

と定義されているのでAFFINGERのst_is_mobile()やis_mobile()とは異なりますので注意が必要です。

ウィジェットをモバイル分岐させるプラグイン

ウィジェットをモバイル分岐させたい!

なんて考えたことありませんか?

というか、モバイル分岐をソース地下書きで使用するよりもウィジェットで使用したい!と考える人の方が多いと思います。

そんな時に便利なプラグインが「Widget Logic」というプラグイン。

このプラグインを導入すると、ウィジェットに「ウィジェットのロジック」というテキストエリアが増えます。

ここに、前述でご説明した「st_is_mobile()」や「is_mobile()」を記述するとモバイル分岐としてウィジェットが利用できるのです。

試しにやってみましょう。

Widget Logicを使ったモバイル分岐

まず、プラグインを導入します。

導入前のサイドバーはこんな感じ…

かきてぃー
広告の上に「お試し」というウィジェットを作成してみました。

Widget Logicを新規追加から検索すれば、すぐに見つかります。

有効化を行い、ウィジェットを確認すると…

上記のように「ウィジェットのロジック」というテキストエリアが追加されました。

そこへst_is_mobile()を追記して保存を押しましょう。

PC画面上では表示されなくなりました。

モバイル端末で確認すると…

見事にモバイル端末のみ表示させることが出来ました。

ちなみに、!st_is_mobile()とビックリマークを付与すると…

PC画面のみ。という設定になります。

かきてぃー
以下の記事でご説明したように!は否定形になるわけです

https://kakitare.info/web/affinger4-title/

!マークを付けた場合の表示

PC画面

モバイル画面

いかがでしたでしょうか。

かきてぃー
モバイル分岐を使えるようになると、デザインの幅が広がりますので会得しておきたい技術ですね!
かきてぃー
それではお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.