WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

コピペでOK! 「Mobile Detect」を使ったワードプレスのウィジェット用の条件分岐表示に便利な関数

Mobile Detect 使用例
Mobile Detect 使用例

サードパーティ製のクラス「Mobile Detect」を紹介したので、実際にテーマで使用している例を紹介しようと思いました。

関連記事: 「Mobile Detect」でデバイス毎の条件分岐が簡単に!

テーマ「ShapeShifter」では主にウィジェットでの分岐に使用していますので、そのコードをそのまま紹介しようと思います。「trait」を使用していますので、不要な方は外してしまいましょう。

ウィジェットの作成方法が分からない場合は、「ウィジェットアイテムの作成・追加方法」で紹介していますので、先にご参照ください。

コピペでOKな関数の紹介

テーマ「ShapeShifter」で使用している関数を丸ごと載せますので、「Mobile Detect」によるデバイス毎の条件分岐の他、投稿タイプや表示されるページによる条件分岐も行えるようなコードになっています。

不要な箇所は削除したり、フォームで表示されるテキストが多いと感じる場合は、JavaScriptでポップアップするようにカスタマイズしてください。

まずはインクルード

「functions.php」から読まれる箇所に以下のコードをコピペしてください。

インクルードした後、「IS_MOBILE」「IS_TABLET」など必要な固定値を定義してしまい、インスタンスは不要なので削除します。

「iOS」「AndroidOS」はオプションで書いていますが、後の関数内でも使用していませんので、必要なら次の関数のコードでに追記してください。

関数の作成

「trait」を使用していますが、不要な場合はラッパーを外して一般的な関数にしても大丈夫です。

ウィジェットクラス内でコール

コピペしたら、ウィジェットのクラスのメソッド「widget」「update」「form」でそれぞれ呼び出します。

「trait」ラッパーを外した場合は、「use widgetFunctions;」や各メソッドに書かれているメソッドコールの頭の「$this->メソッド名」の「this->」を削除してください。

さいごに

最初はアクションフックかフィルターフックで、ベースのクラス「WP_Widget」をカスタマイズしようと思ったのですが、見つからなかったのでこんな形になっています。知っている方がいらっしゃったら教えてください。

一応テーマ「ShapeShifter」で使用しているコードを丸ごと使用しており、サニタイズもできている筈ですが、万が一エラーがありましたらご報告いただけると有難いです。

1件のピン

コメントを残す

メニュ
ホーム
トップへ