デザイナーが本当に欲しかったオリジナルなテーマつくっちゃいました!解説とテーマお持ち帰り

2,542 views

Published on

WordCamp Osaka 2012

  • Be the first to comment

デザイナーが本当に欲しかったオリジナルなテーマつくっちゃいました!解説とテーマお持ち帰り

  1. 1. デザイナーが本当に欲しかった オリジナルなテーマつくっちゃいました! 解説とテーマお持ち帰り ながとみ ちはる 制作協力者:石田 美穂 ・森光加奈子2012年11月6日火曜日
  2. 2. ながとみちはる 元アパレルデザイナー。 10年前にWEB制作会社にデザイナーとして就職。 そして現在はplus design campanyで 制作でもなんでもするディレクターして従事。 uwasora.com(写真ブログ)2012年11月4日日曜日
  3. 3. このセッションでのお持ち帰りの テーマについての お知らせとお願いがあります。2012年11月4日日曜日
  4. 4. ここ!2012年11月4日日曜日
  5. 5. *目次 ・なぜこのテーマを作ろうと思ったのか? ・ワイヤーフレームをつくろう! ・テーマを作成してみよう ・管理画面での設定 ・プラグインについて2012年11月4日日曜日
  6. 6. なぜこのテーマを作ろうと思ったのか?2012年11月4日日曜日
  7. 7. 初めてテーマを作ろうと思った時に・・・ Twenty elevenは多機能すぎて使いこなせない。 toolboxも上手にカスタマイズできなった。 (ながとみ・石田・森光 談)2012年11月6日火曜日
  8. 8. それなら自分たちで作ってしまおう!! もっと簡単に理解できるようなテンプ レートの見本が欲しいと思った2012年11月6日火曜日
  9. 9. まずはWordPressの構造を知ろう2012年11月4日日曜日
  10. 10. WordPressのフォルダ構成2012年11月4日日曜日
  11. 11. index.php twentyeleven WordPress wp-content themes twentyten WordCamp Osaka theme wcosaka20122012年11月4日日曜日
  12. 12. 管理画面からテーマのインストール テーマのインストールは ここからもできます2012年11月4日日曜日
  13. 13. *サイトの構成を考える トップページ 事業案内 事業案内(詳細) お知らせ お知らせ(一覧)     (詳細) お問い合わせ サイトマップ2012年11月4日日曜日
  14. 14. ワイヤーフレームをつくろう!2012年11月4日日曜日
  15. 15. ¨ 一 一 一 ¨ オ 一 ¨ 一 一 ¨ 一 一 一 ¨ ヽ 一 一 一 い ヤ 一 ¨ 一 一 ¨ 一 ヽ ¨ 一 一 ¨ 二 一 ¨ 一 一 一 ¨ 一 一 一 ヤ ¨ 一 一 ヽ 一 一 ¨ 一 A ″ 7 一 一 一 ¨ 一 十 二 一 一 一 〓 一 一 ¨ 一 , r 十 一 一 十 一 ¨ 一 ¨ 十 一 ¨ 一 一 一 一 一 一 十 一 一 一 一 一 一 ¨ 一 一2012年11月4日日曜日
  16. 16. 2012年11月4日日曜日
  17. 17. 2012年11月4日日曜日
  18. 18. 2012年11月4日日曜日
  19. 19. じゃぁ、次はコーディング!2012年11月4日日曜日
  20. 20. の前に、ちょっと脱線して 子テーマのおはなし・・・2012年11月4日日曜日
  21. 21. 実はテーマを作る方法って2種類あるんです。2012年11月4日日曜日
  22. 22. 1, オリジナルで1から作る。 2,今あるテーマをカスタマイズして作る。 こっち!これがもう一つの テーマ作成の方法2012年11月4日日曜日
  23. 23. 日本語Codex/子テーマより引用・・・ http://wpdocs.sourceforge.jp/子テーマ WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能 にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの 知識は必要ありません。 また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルや レイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子 テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変で も可能になります。2012年11月4日日曜日
  24. 24. 日本語Codex/子テーマより引用・・・ http://wpdocs.sourceforge.jp/子テーマ WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能 つまりどういうことかというと にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな CSSを適用させて見た目だけ自分のオリジナル り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの テーマっぽくすることができるテーマ作りを 知識は必要ありません。 また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルや 子テーマを作るというのです。 レイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子 テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変で も可能になります。2012年11月4日日曜日
  25. 25. Twenty Eleven子テーマとして、 twentyeleven_child を作ります。 子テーマ用のstyle.css作り、親テーマのTwenty Elevenに子テーマの CSSを適用すると機能はそのままで見た目だけが違うテーマがつくれて しまうのです。 twentyeleven twentyeleven_child style.css 見た目が別の サイトのように!2012年11月4日日曜日
  26. 26. 本題に戻って、 コーディングをしよう!2012年11月4日日曜日
  27. 27. 今回は『HTML5+CSS3』でコーディング。2012年11月4日日曜日
  28. 28. ここを下層ページで 使いまわします2012年11月4日日曜日
  29. 29. テーマを作成してみよう2012年11月4日日曜日
  30. 30. まずはローカル側にフォルダを用意 オリジナルのテーマを作るために、 まずはパソコン上でフォルダを作成していきます。 生成するページに 関する設定を記述 index.php wcosaka2012 style.css2012年11月4日日曜日
  31. 31. style.cssにテーマとする 必要な情報を記述 この情報がテーマの 管理画面で表示 @charset "UTF-8"; /* Theme Name:テーマの名前 Theme URI:テーマを配布する際はここにURL Description:テーマの説明です Author:作成者名。 Author URI:作成者のサイトURL Version:テーマのバージョンを書きます。 */2012年11月4日日曜日
  32. 32. CSSのコメントアウトの内容 style.cssと同階層に がここに表示されるのです screenshot.pngを設置2012年11月4日日曜日
  33. 33. wcosaka2012 index.php style.css 用意したサムネイル画像 (300 225ピクセル) screenshot.png2012年11月4日日曜日
  34. 34. ひとまずアップロード デフォルトで入っているテーマ「twentyeleven」と 同階層に、先ほど作った「wcosaka2012」のフォルダをUP ここにアップします。2012年11月4日日曜日
  35. 35. それではindex.phpにテーマとするのに 必要な情報を記述したものを見て行きましょう その前に・・・・2012年11月4日日曜日
  36. 36. 今回作成するPHPの種類  ・index.php(トップページ)    - header.php(ヘッダー) 共通利用    - footer.php(フッター)    - sidebar.php(サイドバー) 投稿ページ  ・single.php(単一記事ページ)    ・archive.php(アーカイブページ)  ・page.php(個別ページ) 固定ページ  ・style.css(スタイルシート) スタイルシート2012年11月4日日曜日
  37. 37. header.php sidebar.php footer.php2012年11月4日日曜日
  38. 38. 切り分けちゃったらどうなるの? 切り分けたテンプレートを 呼び出して表示させます! これを「インクルード」する って言います!2012年11月4日日曜日
  39. 39. 「index.php」に各パーツ部分のテンプレートを インクルード させるようにして記述していきます header.phpを header.php インクルード これらを呼び出すために記述 sidebar.phpを インクルード sidebar.php footer.phpを footer.php インクルード2012年11月4日日曜日
  40. 40. <ul> <?php query_posts (posts_per_page=3&category_name=news); ?> <?php while (have_posts()) : the_post(); ?> <li><span class="postDate"><?php the_time(Y年n月j日); ? ></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile;wp_reset_query(); ?> こことか </ul> åß こことか2012年11月4日日曜日
  41. 41. ヘッダーテンプレートを呼び出す(インクルードする)ための命令文 <?php get_header(); ?> フッターーテンプレートを呼び出す(インクルードする)ための命令文 <?php get_footer(); ?> テンプレートをサイドバー呼び出す(インクルードする)ための命令文 <?php get_sidebar(); ?> インクルードタグ http://wpdocs.sourceforge.jp/インクルードタグ2012年11月4日日曜日
  42. 42. index.php wcosaka20 header.php footer.php ここまで作った ファイルは全部で こんな感じ sidebar.php style.css screenshot.png2012年11月4日日曜日
  43. 43. 管理画面での設定内容2012年11月4日日曜日
  44. 44. おしらせカテゴリーのスラッグを登録2012年11月4日日曜日
  45. 45. 「お知らせ」カテゴリスラッグに「news」と入れる。2012年11月4日日曜日
  46. 46. スラッグの「news」がURLになります2012年11月4日日曜日
  47. 47. スラッグの「news」がURLになります さっき管理画面で 入力したスラッグ名2012年11月4日日曜日
  48. 48. TOPページのテンプレートとひもづいて お知らせ記事の最新3件が表示されるようになる。 news); ?> <?php query_posts(posts_per_page=3&category_name=2012年11月4日日曜日
  49. 49. カスタムメニューの登録2012年11月4日日曜日
  50. 50. 外観→メニュー、からメニューを2つ登録する。2012年11月4日日曜日
  51. 51. メニューの名前は, テンプレートの指定に合わせて globalNav、footerMenu  にします。2012年11月4日日曜日
  52. 52. トップページの作成2012年11月4日日曜日
  53. 53. 固定ページを1件作成し、テンプレートを 「トップページ」にします。2012年11月4日日曜日
  54. 54. 設定→表示設定、フロントページを 「トップページ」にします。 先ほどの固定ページに入れ た内容がサイトトップに表 示されるようになります。2012年11月4日日曜日
  55. 55. そして、もう一つ・・・functions.php2012年11月4日日曜日
  56. 56. functions.phpの記述 →カスタムメニュー add_theme_support( menus ); ここ!2012年11月4日日曜日
  57. 57. functions.phpの記述した内容 →ウィジェット <?php dynamic_sidebar(side1); ?> 今回はウィジェットエリアを2個用意しようと思うので、 まずfunctions.phpに下記のとおり書いて2個のウィジェットを登録します。 それぞれ、side1、side2というIDが振られています。 ここ!2012年11月4日日曜日
  58. 58. functions.phpの記述した内容 →アイキャッチ テンプレートでアイキャッチ画像を使えるようにする。 add_theme_support( post-thumbnails ); ここ!2012年11月4日日曜日
  59. 59. プラグインの解説 使用するプラグイン一覧 ・パンくず  →Breadcrumb NavXT ・お問い合わせフォーム  →contact Form 7 ・カルーセル  →Easing Slider(トップページのスライドショーエリア) ・サイトマップ  →PS Auto Sitemap(サイトマップページを生成) ・表示管理  →My Page Order( ページの表示順を変える)2012年11月4日日曜日
  60. 60. パンくず→Breadcrumb NavXT <div class="breadcrumbs"> <?php if(function_exists(bcn_display)) { bcn_display(); }?> </div>2012年11月4日日曜日
  61. 61. お問い合わせフォーム→contact Form 7 ここ!2012年11月4日日曜日
  62. 62. お問い合わせフォーム→contact Form 72012年11月4日日曜日
  63. 63. お問い合わせフォーム→contact Form 7 このコードをお問い合 わせの投稿ページに貼 り付ける2012年11月4日日曜日
  64. 64. お問い合わせフォーム→contact Form 72012年11月4日日曜日
  65. 65. カルーセル→Easing Slider(トップページのスライドショーエリア)2012年11月4日日曜日
  66. 66. カルーセル→Easing Slider(トップページのスライドショーエリア) <div id="mainVisual"><?php if (function_exists(easing_slider)) { easing_slider(); }; ?></div>2012年11月4日日曜日
  67. 67. カルーセル→Easing Slider(トップページのスライドショーエリア) ここから!2012年11月4日日曜日
  68. 68. サイトマップ→PS Auto Sitemap(サイトマップページを生成) ここ!2012年11月4日日曜日
  69. 69. サイトマップ→PS Auto Sitemap(サイトマップページを生成) ここ!2012年11月4日日曜日
  70. 70. サイトマップ→PS Auto Sitemap(サイトマップページを生成)2012年11月4日日曜日
  71. 71. 表示管理→My Page Order( ページの表示順を変える)2012年11月4日日曜日
  72. 72. セッション・テーマ作成協力者 森光加奈子・石田美穂2012年11月6日火曜日
  73. 73. ありがとうございました。2012年11月4日日曜日

×