Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

レスポンシブ対応 をサポートするプラグイン

様々なデバイスに対応できる条件分岐タグや class を追加してくれるプラグイン『mobble』をご紹介します。
WordPressもくもく勉強会@日本橋 #04(2017.04.15)で発表したスライドです

  • Login to see the comments

レスポンシブ対応 をサポートするプラグイン

  1. 1. レスポンシブ対応をサポートする プラグイン WordPressもくもく勉強会@日本橋 #04 2017.04.15 Trick-Studio 川路 正樹
  2. 2. 川路 正樹(かわじ まさき) ●株式会社トリックスタジオ ●デザイナー/アートディレクター <経歴> ・建築設計 3年 ・個人事務所や制作会社でDTP・印刷物 ・ジョブダイレクトなどでWEBデザイン ・現在に至る 自己紹介
  3. 3. 『mobble』のご紹介 https://ja.wordpress.org/plugins/mobble/
  4. 4. どんなプラグイン? ※ 劇的に何かを変化させたりするプラグインではありません。 • あると便利なデバイス毎の条件分岐タグを追加します。 • <body>にデバイス毎の class を追加します。
  5. 5. 1・条件分岐タグの追加
  6. 6. 追加される条件分岐タグの例 //スマホやタブレット is_handheld(); // スマホ (iPhone, Android, など) is_mobile(); // タブレット is_tablet(); // iPhone, iPad, iPod is_ios();
  7. 7. 追加される条件分岐タグの例 モバイルには不要なソースコードを出力させない、 PCとモバイルで読み込む画像を切り替える、など 詳細なテーマ設計が可能になります。 <?php if ( ! is_mobile() ) { get_sidebar(); } ?>
  8. 8. 条件分岐タグの使用例 <?php if ( ! is_mobile() ) { get_sidebar(); } ?> スマホではサイドバーを読み込まない
  9. 9. 2・class の追加
  10. 10. 設定画面 Class の有効化は、管理画面の設定から行えます。
  11. 11. <body> に追加されるclass例 //デスクトップの場合 <body class=“desktop chrome"> // iPhone6 の場合 <body class="handheld mobile ios iphone safari"> // iPad の場合 <body class="handheld ios tablet ipad safari"> // Nexus6P の場合 <body class="handheld mobile android chrome">
  12. 12. <body> に追加されるclass例 MedeiaQuery @media screen and (max-width: ○○px) だけではなく、より具体的な対象に向けて、 CSSを指定することができるようになります。
  13. 13. 最後に注意点 キャッシュプラグインとの併用ができません。 デバイス毎に出力されるHTMLが変わりますので 表示崩れなどが起こることに。
  14. 14. 以上! ご清聴ありがとうございました!

×