WPワークス

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

条件分岐できる便利なカスタムテキストウィジェットの作り方

カスタム テキストウィジェット
カスタム テキストウィジェット

WordPressが標準で用意しているテキストウィジェットは非常に便利ですが、表示ページを自在に設定できた方が良いと思いますので、簡単に作成できるオリジナルテキストウィジェットの追加コードを紹介します。

デバイスごとの条件分岐には、Wordpress関数「wp_is_mobile」でも可能ですが、タブレットなどの条件も入れることを検討し、外部ソースの「Mobile Detect」を使って作成しますので、面倒な作業は一切無しで紹介します。

まずは「Mobile Detect」の下準備

自分で条件分岐の関数を既に用意している場合は、不要ですので飛ばしてください。

まずはリンク先で「Mobile Detect」をダウンロードして、任意のディレクトリにアップロードします。これはどこでも構いません。

あとは次のコードを貼り付けておきます。

これで準備完了です。

使う予定はありませんが、このようにしておけば「iOSユーザー」や「Androidユーザー」といった条件も設けることが出来ます。

では、次はウィジェットの作成です。

ウィジェットの作成

表示条件として、「端末(全て・PCのみ・モバイル・タブレットのみ・スマホのみ)の選択」「ページの選択」「非表示にする投稿タイプ」を設けていますが、自由にカスタマイズすることが出来る筈ですから、そこは自分で編集してください。

実は条件分岐のための「Mobile Detect」を導入して、コードを「functions.php」から読み込むファイルにコピペするだけで使えるようになる筈です。

完成したウィジェット

設定項目が増えるとちょっと縦長になってしまいますが、まぁ仕方ありません。

ウィジェット「Optimizer テキスト」 設定項目 1
ウィジェット「Optimizer テキスト」 設定項目 1
ウィジェット「Optimizer テキスト」 設定項目 2
ウィジェット「Optimizer テキスト」 設定項目 2

出力するものはWordpressに標準で備わっているテキストウィジェットと変わりませんので、好きなものをHTMLタグで出力してください。

コメントを残す

メニュ
ホーム
トップへ