ショートコードWordpress/CSS最近では、サイトやブログに訪れるユーザーのデバイスのほとんどはスマートフォンです。いえ、まだまだパソコンからのユーザーも多くいます。私の場合、複数のサイトを見ながら調べものをするときは、圧倒的にパソコンの方が作業効率が上なので、何か作業をするときにはパソコンからサイトやブログを閲覧します。スマホとパソコンでは、画面の大きさも異なるので、それぞれのデバイスで最適なレイアウトや情報を表示できれば、どちらのユーザーにとっても有益なコンテンツを提供できます。使用するテーマによっては初めから用意されているWordpressを使用してブログを作成する場合に、テーマというブログのテンプレートのようなものがあります。言って、スマホとパソコンでアクセスしたときにそれぞれにとって見やすいレイアウトで表示するようになっています。全体的なレイアウトは、各デバイスに対応していたとしても、コンテンツをスマホとパソコンで別の内容を表示したいときもあります。他にも、有料テーマの「AFFINGER4(アフィンガー4)」でも同様の機能があります。実現する方法が異なるテーマによって、スマホとパソコンで別の内容を表示する機能はありますが、それを実現させるための方法が違います。BLOG(ライオンブログ)」では、ユーザーの画面解像度によって、CSSで表示/非表示となるようなClassが設定されています。(display:noneで処理)ユーザーは、スマホとパソコンで違う内容を表示させたいときは、要素をこのClassで囲むことで可能になっています。対して「AFFINGER4(アフィンガー4)」では、アクセスのあったデバイスの種類そのものを判断して、表示/非表示となるようなショートコードが用意されています。BLOG(ライオンブログ)」のようにCSSで対応する方法は、CSSを少し勉強すれば初心者の方にもできる方法なのでお手軽に使用しているテーマで使用することができます。デメリットとして、CSSで「display:none」を設定した場合、ブラウザ上で非表示になっていても、実際には読み込まれているので、無駄な内容を読み込んでいる分、表示速度という観点からは良くありません。ここでは、AFFINGER4と同じようにデバイスを判断して表示/非表示を分けることができるショートコードを作成していきます。ここでは説明しません。functions.phpに以下のコードを貼りつけます。‘mobi_only’);[/code]作成したショートコードを呼び出す作成したショートコードを呼び出してみます。方法は、他のショートコードを呼び出すときと同じです。WordPressのテキストエディタに以下のように記入します。ブログのサイドバーの最上段に広告を表示していて、更に記事下にも広告を表示している場合、スマホからアクセスしたとき、広告が続けて表示されることになります。そんなときは、サイドバー上部の広告はパソコンからのアクセスのみに限定して表示するなどという使い方ができます。その他、スマホ独特のサービスを紹介する広告を表示するのに、パソコンからのユーザーに表示しても効果が薄かったり、広告主の方でスマホからのアクセスでないと、公式ページへ行けないということもあります。画像を使って使用方法を説明する記事を書く場合にも有効です。アクセスしたデバイス向けの画面を表示したり、逆に違うデバイスの画面を表示したりできるので、不要な画面をロードして表示する必要がないので、別々に記事を書く必要もありません。デバイスによる画像の回り込みこれは、CSSで用意した方が、効率が良いですが、例えばパソコンで表示する場合は文字を画像の横に回りこませるけれど、モバイルで表示する場合は、回り込みを解除して表示するなどという使い方も可能です。今回のコードを応用して、iOSとAndroidなどOS別に表示を切り替えることもできます。アプリのダウンロードをすすめる広告では、iOSとAndroidが別に提供されています。そのようなときにOS別に表示を変えることができると便利ですね。コメントをキャンセルメールアドレスが公開されることはありません。BLOG.ホームメニューTOPへ。