• Save
はじめてのオリジナルテーマ制作
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

はじめてのオリジナルテーマ制作

  • 116 views
Uploaded on

松戸WordPress部スライド

松戸WordPress部スライド

More in: Internet
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post
    Be the first to comment
No Downloads

Views

Total Views
116
On Slideshare
116
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. はじめての オリジナルテーマ制作 松戸WordPress部 2014年11月26日
  • 2. 自己紹介 • 名前　三柴 誠一郎（フリーランス） • 職業　Webのディレクションとかフロントエンドとか • 経歴　IT業界１７年 ⇒ ニート9ヶ月 ⇒ フリーランスもうすぐ1年 • 最近の気になる事 ベスト３ 猫がついてくる 鞄からおでん（ちくわ）が出てきた
  • 3. 本日のテーマ ①スターターテーマ（_s）を導入する ②CSSフレームワーク（Foundation）を導入する ③アイコンフォント（Genericons）を導入する ④オリジナルテーマ制作（Let’s ハンズオン！）
  • 4. 本日のテーマ ①スターターテーマ（_s）を導入する ②CSSフレームワーク（Foundation）を導入する ③アイコンフォント（Genericons）を導入する ④オリジナルテーマ制作（Let’s ハンズオン！）
  • 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 などなどあります
  • 6. お得！
  • 7. 入手方法 以下にアクセス！ http://underscores.me/ ①テーマ名を入力して ②クリック！ Sass対応版は ココをチェック！
  • 8. こんな感じ
  • 9. こんな感じ Sass対応版の場合
  • 10. 使い方 ①ダウンロードしたファイルを解凍！ ②テーマディレクトリ配下にコピー（移動）! ※テーマディレクトリはココ　/wp-content/themes/ ③ダッシュボードの[外観]-[テーマ]でテーマを変更
  • 11. 画面イメージ
  • 12. 本日のテーマ ①スターターテーマ（_s）を導入する ②CSSフレームワーク（Foundation）を導入する ③アイコンフォント（Genericons）を導入する ④オリジナルテーマ制作（Let’s ハンズオン！）
  • 13. CSSフレームワーク？ HTMLを記述する時にフレームワークにそった 記述（クラスを指定)するだけでいい感じにしてくれる！ STRUCTURE Bootstrap, Foundationなどが有名! Grid レイアウトを均等に分割し、コンテンツをマス目上に配置する Visibility 画面サイズや向きによって表示・非表示を制限する 他にも Block Grid などなどあります NAVIGATION Off-canvas 左や右からスライドするメニューを作成 他にも Top Bar, Sub Nav, Breadcrumb, Pagination などなどあります 他にも FORMやBUTTON, TYPOGRAPHY などなど、様々な用途に対応したクラスが用意されている！
  • 14. お得！
  • 15. 入手方法〜Foundation編〜 以下にアクセス！ http://foundation.zurb.com/ ①クリック！
  • 16. 入手方法〜Foundation編〜 or or Sass対応は ②クリック！ この先を参照
  • 17. こんな感じEssential版の場合
  • 18. こんな感じComplete版の場合 cssも全部 （サイズが大きい） jsが全部
  • 19. こんな感じSass対応版の場合 この画面では見えないけど・・・ Gitのリポジトリも作られる
  • 20. 使い方〜grid〜 レイアウトを均等に分割し、 コンテンツをマス目上に配置することができる 初期値： 　横幅1000px 　分割数12 row 分割するコンテンツを挟む columns 分割するコンテンツ large-? おもにPC用の分割数 medium-? おもにタブレット用の分割数 small-? おもにスマホ用の分割数 HTML 初期値： 　small - 横幅40emまで 　medium - 横幅64emまで 　large - 横幅９０emまで
  • 21. 見え方PC タブレット largeが縦に mediumとsmallは 指定した分割数で配置 スマホ largeとmediumが縦に smallは指定した分割数で配置
  • 22. gridの初期値を変更 _settings.sass　の以下を変更 Sassの場合 横幅 分割数 マージン（rowの外側）
  • 23. 本日のテーマ ①スターターテーマ（_s）を導入する ②CSSフレームワーク（Foundation）を導入する ③アイコンフォント（Genericons）を導入する ④オリジナルテーマ制作（Let’s ハンズオン！）
  • 24. アイコンフォント？ 画像っぽいフォント！ フォントなのでfont-sizeで大きさが変更できる！ フォントなのでcolorで色が変更できる！ Genericons - Automatticのアイコンフォント Foundation - ZURBのアイコンフォント 他にも いろいろあるよ
  • 25. という事は？
  • 26. ＆＄＃｀＊＠＋＞＜
  • 27. 入手方法〜Genericons編〜 以下にアクセス！ http://genericons.com/ ①クリック！
  • 28. こんな感じ 利用（指定）するファイル 読み込まれるファイル
  • 29. HTMLファイルに記述 HTML Copy HTML をクリックして 表示されたコードを貼付ける
  • 30. スタイルシートに記述 Copy CSS をクリックして表 示されたコードを貼付けるHTML CSS
  • 31. メニュー毎にアイコン変更 タイトルの属性を使う - リンクタグ[a]のtitle属性 HTML CSS classを使う - liのclass属性 CSS
  • 32. 本日のテーマ ①スターターテーマ（_s）を導入する ②CSSフレームワーク（Foundation）を導入する ③アイコンフォント（Genericons）を導入する ④オリジナルテーマ制作（Let’s ハンズオン！）
  • 33. サンプルサイト サンプルサイトを参考に作ってみよう!
  • 34. 課題① Google Fontsを利用 Genericonsを利用 ヘッダー画像を表示
  • 35. 課題② gridで横3列に配置 特定の固定ページの アイキャッチ、タイトル、抜粋を表示 スマホでは縦に配置
  • 36. 課題③ gridで配置（最新記事を右に） 古い記事はリストで表示 最新の投稿ページの タイトル、アイキャッチ、抜粋を表示 gridで配置 （最新記事を上に）
  • 37. おわり！