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