menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/03/04
  • WordPress

WordPressでスマートフォンとPCで表示内容を変更したい

サイトを構築している時に、どのようにレスポンシブさせるか悩むことはよくあります。今回は表示する内容そのものを「スマートフォン」と「タブレット端末&PC」に分けて表示する場合の、WordPressでの設定方法をご紹介します。
wordpress

使用方法

「スマホ」と「タブレット&PC」で表示内容を変更

例えば「タブレットとPC」だけスライダーを表示し、スマートフォンには一枚画像を表示する。のようにページ内容を変更して表示する方法です。
まず「functions.php」へ

を追加します。
そして「header.php」「home.php」など表示内容を変更したいテンプレートへ

を追加します。
あとはCSSでメディアクエリなどを使用。

分岐するコードが多いとテーンプレートがゴチャゴチャになるので注意しましょう。ヘッダーメニューやワンポイントで設定すると管理もしやすいです。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11