Wordpress

WordPress第4回 オリジナルのテーマを作る(レスポンシブデザイン編)

038

前回のテーマを自作してみましょうが既存テーマのカスタムだったので、今回は完全に自作します。

とりあえず、自作のHTMLにコーディングします。
それができたら、PHPのインクルードの要領でコードをブロックごとにバラバラにします。
基本となるファイルはもちろんindex.phpなので、これにインクルードタグを書いて各パーツを読み込みます。

■一般的なインクルードタグ
<?php get_header() ?>
ヘッダー(header.php)をインクルードする。

<?php get_footer() ?>
フッター(footer.php)

<?php get_sidebar() ?>
サイドバー(sidebar.php)

<?php get_search_form() ?>
検索フォーム(searchform.php)

<?php comments_template() ?>
コメント(comments.php)

■上記以外の独自PHPファイル
<?php get_template_part(‘ファイル名’); ?>

こんな感じになります。
index.phpはインクルードタグだけを記述するようにするとすっきりします。
ブラウザで表示すると、インクルード先のHTMLが読み込まれてサイトが出来上がります。

ところで、もともとあるテーマを使っている時は気にならないのですが、オリジナルのテーマを作るとプレビューした時に上部にツールバーの隙間ができてしまうので、これがあれば「ユーザー」→「あなたのプロフィール」でも消す事ができます。

レスポンシブデザインにする

次にコードをレスポンシブ対応しますが、WordPressのcssはindexと同じ階層にあると決まっているので、メディアクエリでファイルを分けさせるよりも一つのcssファイル内でレスポンシブさせる事にします。

仮に、768pxで切り替える事にします。

/*—————————————- */
/* ▼PC用▼*/
/*—————————————- */

@media screen and (min-width: 769px){
PC用のCSS
}

/*—————————————- */
/* ▼スマートフォン用▼*/
/*—————————————- */
@media screen and (max-width: 768px){
スマートフォン用のCSS
}

こんなふうにcss内で対応するサイズを分けていきます。
例として、
「max-width: 768px(最大768pxまでのウィンドウサイズはスマートフォン)」
「min-width: 769px(最小769px以上のウィンドウサイズはPC用で表示)」とします。
背景色など、共通の指定はメディアクエリ外に置きます。
広告など、スマートフォンではいらない表示はスマートフォン用CSSでdisplay:none;にして非表示、
逆の場合はPC用のCSSで非表示にしていきます。

後はPC用の指定は上、スマートフォン用は下のメディアクエリ内に記述します。
もしタブレットなど、もっと多数のデバイスに対応する場合、それぞれのウィンドウサイズに合わせてメディアクエリを増やしていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です