Stinger Plusでウィジェット表示をPC・モバイル（スマートフォン）で切り替えるカスタマイズ

今回の記事はインドネシアの話ではなく、ブログカスタマイズの話です。

当ブログでは無料ブログテンプレートStinger シリーズの「Stinger Plus」を利用させていただいております。

現在はStinger 8が配布されているのであまり使っている方がいないせいかもしれませんが、このStinger Plusに関してはカスタマイズ情報が他シリーズほど豊富ではありません。

このブログの趣旨とは異なりますが、同じ悩みを持たれる人がいるかもしれないので記事にしておきます。同じStinger Plusユーザーさんが悩まれた際に参考となれば嬉しいです。

（筆者は週末丸2日悩みまくったという苦しい経緯があります）

今回やろうとしたこと

今回やりたかったのは「モバイルとPCで表示されるウィジェットを切り替える」ということ。

広告やブログ内の誘導バナーなどを設置する際に「PCで表示したいもの」と「モバイルで表示したいもの」に分けたい時があります。

筆者のような素人がレイアウトを考える際は「ウィジェット」を使うことになります。そのため、「このウィジェットはモバイルだけで表示してね」、「このウィジェットはPCの時だけ表示してね」ということをやる必要がありました。

テンプレートに元々「モバイル用のウィジェットスペース」が設置されている場合もありますが、それだけだと足りないこともあるでしょう。当ブログ愛用の「Stinger Plus」にモバイル用のスペースがいくつかありますが、それだけでは足りませんでした。

素人がウィジェットの切り替えを行う方法

プログラミングの知識がある方であれば、自らPHPをいじって「モバイル用」「PC用」の「ウィジェットスペース」を任意の場所に作ってしまうのでしょうが、筆者のような素人にはとても厳しい。日本に帰って入門本から読まねばなりません。

で、情報を探しまくったのですが筆者が考えるに素人が「モバイルとPCで表示されるウィジェットを切り替える」ための方法論は下記3つです。

1. プラグイン（Widget Logic）でPHP指定する
2. PC用、スマフォ用のテキストウィジェットを作る
3. 条件設定したショートコードを作り、表示を切り替える

ちなみに、Stinger Plusとの相性及び筆者のスキルの問題があり1と2は頓挫。結局3のショートコードを使って表示を切り替えることになりました（しかもめっちゃ簡単だった）。

ただ、他の方の場合はうまくできるかもしれないので、参考にしたURL含めて全部記載しておきます。

プラグイン（Widget Logic）でPHP指定する

もっともポピュラーな方法がこれです。

Widget Logic（ウィジェットロジック）というプラグインを使うと、ウィジェット単位で「条件分岐」をphpで超簡単に指定することができます。

プラグインを有効化するとウィジェットに「Widget Logic」というボックスが追加され、例えばそこに、

などの分岐条件を入れると当該ウィジェットがその通りに動作するというもの。

詳しくは今回参照させていただいたブログをご覧ください。

▶【WordPress】Widget Logic（ウィジェット ロジック）使い方

ただ、非常に便利で多数の人が使っているプラグインらしいのですが、なぜか当ブログで有効化すると「ブログ画面が真っ白」に。幸いにも管理画面は生きていたので有効化を切るとまた元通り。

Stinger Plusとの相性が悪いのか、はたまた既存のプラグインと何かかち合っているのか？

何とかしようとWeb上を探っていたところ、どうやら他にもStinger Plusで同じ現象になっていた方がいた様子。

筆者なんかよりも知識豊富な方で「おそらく相性の問題」と判断されていたので当ブログでも導入は諦めました。

PC用、スマフォ用のテキストウィジェットを作る

ワードプレスのテンプレートによっては「モバイル用のウィジェット」と「PC用のウィジェット」が用意されているものもあります（スペースではなく、ウィジェットが用意されている）。

なんとか作れないだろうか？と情報を探していたところ、ありました。

▶「パソコンのみ表示するテキストウィジェット」をコピペ一発で作るWordPressカスタマイズ方法

筆者が別で運営するサイトで使っている「Simplisity」というテンプレートの生みの親、わいひらさんのブログ情報。上述の「モバイル用」「PC用」のウィジェットがあるのは、このわいひらさんが作ったSimplisityなのです。

これならば、と早速試してみましたが、この方法もうまく動作しませんでした。

ウィジェットはできあがるのですが、設置してもウィジェットの「テキスト部分」が筆者のStinger Plusで上手に表示できず。

ソースコードを読むとウィジェット自体は存在しているのですが、なぜか中身のコードが消えてしまう、という不具合が起きていました。

筆者がphp系のカスタマイズでできるのは「コピペ」まで。この方法も頓挫です。

分岐条件設定したショートコードを作り、表示を切り替える

最後に辿り着いたのが「PC表示用、スマフォ表示用のショートコード」を作ってしまい、ショートコードで表示をコントロールする方法。

参考にさせていただいた記事はこちらです。

▶記事内でpcとスマホ（タブレット）の表示内容を切り替えるwordpressのショートコード

この方法だとウィジェット内のテキスト要素をショートコードで囲うだけで、表示のコントロールが可能です。

最後の最後で、これが見事に成功！

Simple is Bestです。

まとめ

結局、最もシンプルに「ショートコードで表示コントロールする」ことになりました。

Stinger Plusユーザーで同じく悩まれている方の参考となれば幸いです。