Contenu connexe
Similaire à はじめてのオリジナルテーマ制作 (20)
Plus de Seiichiro Mishiba (11)
はじめてのオリジナルテーマ制作
- 2. 自己紹介
• 名前 三柴 誠一郎(フリーランス)
• 職業 Webのディレクションとかフロントエンドとか
• 経歴 IT業界17年 ⇒ ニート9ヶ月 ⇒ フリーランスもうすぐ1年
• 最近の気になる事 ベスト3
猫がついてくる
鞄からおでん(ちくわ)が出てきた
- 5. スターターテーマ(_s)?
テンプレートファイルがあらかじめ用意されている!
スタイルシート
オリジナルテーマを作るために必要な
style.css【必須】テーマのスタイルシート
rtl.css 右から左に記述する言語用のスタイルシート
テーマ関数ファイルfunction.php【必須】WordPressの(管理画面・サイト)を制御します
テンプレートファイル
index.php【必須】メインテンプレート
single.php 投稿ページの個別表示用テンプレート
page.php 固定ページの個別表示用テンプレート
他にも 404.php, archive.php, search.php, image.php などあります
モジュールテンプレート
header.php get_headre()で読み込まれる
footer.php get_footer()で読み込まれる
content.php get_template_part( ‘content’ ) で読み込まれる
他にも comments.php, content-single.php などなどあります
- 13. CSSフレームワーク?
HTMLを記述する時にフレームワークにそった
記述(クラスを指定)するだけでいい感じにしてくれる!
STRUCTURE
Bootstrap, Foundationなどが有名!
Grid レイアウトを均等に分割し、コンテンツをマス目上に配置する
Visibility 画面サイズや向きによって表示・非表示を制限する
他にも Block Grid などなどあります
NAVIGATION
Off-canvas 左や右からスライドするメニューを作成
他にも Top Bar, Sub Nav, Breadcrumb, Pagination などなどあります
他にも FORMやBUTTON, TYPOGRAPHY
などなど、様々な用途に対応したクラスが用意されている!
- 20. 使い方〜grid〜
レイアウトを均等に分割し、
コンテンツをマス目上に配置することができる
初期値:
横幅1000px
分割数12
row 分割するコンテンツを挟む
columns 分割するコンテンツ
large-? おもにPC用の分割数
medium-? おもにタブレット用の分割数
small-? おもにスマホ用の分割数
HTML
初期値:
small - 横幅40emまで
medium - 横幅64emまで
large - 横幅90emまで