Successfully reported this slideshow.

WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!

27

Share

Upcoming SlideShare
Word press34
Word press34
Loading in …3
×
1 of 46
1 of 46

WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!

27

Share

Download to read offline

WordPressを自分の好きなようにデザインしたい! と思ったけどどうやったらいいか分からない! デフォルトのデザインテンプレートが難しすぎる! という方のために、次期バージョンに同梱されるtwentythirteenテーマを改造して超簡単なテンプレートを作ったので配布します。これを使ってWordPressのテンプレートを理解しましょう。

WordPressを自分の好きなようにデザインしたい! と思ったけどどうやったらいいか分からない! デフォルトのデザインテンプレートが難しすぎる! という方のために、次期バージョンに同梱されるtwentythirteenテーマを改造して超簡単なテンプレートを作ったので配布します。これを使ってWordPressのテンプレートを理解しましょう。

More Related Content

More from Takashi Uemura

Related Books

Free with a 14 day trial from Scribd

See all

WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!

  1. 1. @uemera2013.5.6 WordBench神戸 上村崇 WordPressの常識をくつがえす超簡単テーマ doshirouto を作ったのでこれでテーマを理解しよう!
  2. 2. 最近のオレ PHPフレームワーク (FuelPHP) ExcelVBA サーバーインフラ (Webサーバ構築など) WordPress JavaScript、jQuery 勉強会準備 (WordBench等) ネットショップ支援 (CS-Cart、SoyCMS) @uemera uemuraフリーランスのシステムエンジニアです。
  3. 3. テーマを理解すればどういうメリットがあるの? ・WordPressの仕様を理解すると、自分でやれることが広がります。 ・WordPressへの苦手意識が無くなります。 ・WordPressを自分の好きなデザインにすることができます。 このプレゼンでは WordPressのテーマのしくみを 初心者にも分かるように解説します。
  4. 4. 次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん
  5. 5. 次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん TwentyThirteenの特徴: ・レスポンシブデザインを採用しています。(パソコン、スマホ両対応) ・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。 ・下にスクロールするとヘッダ領域がコンパクト化され記事領域が大きくなります。 ・サイドブロックがフッタ部分に移動しました。 ・WordPress3.6の新投稿フォーマットに対応しています。
  6. 6. しかし、バージョンアップにともなって、 WordPressはどんどん難しくなってきています。 例: スタイルシートファイルへのリンクがどこに書いてあるか分からない <head> <link  rel="stylesheet"  type="text/css"  href="http://.../style.css"> </head> テーマのヘッダ部分にあたるheader.phpには当然下のようなcssファイル へのリンクがあるものと思ったけど... wp_enqueue_style(  'twentythirteen-­‐style',  get_stylesheet_uri()  ); header.php functions.php header.phpではなく、php処理ばかりが書かれているfunctions.phpと いうファイルに、関数呼び出しの形で書かれています。 header.phpには見つかりません。 これでは初心者はcssファイルを探したり、編集することもままならない!
  7. 7. WordPressはイノベーションのジレンマに陥ってるのかも知れません。 高機能化が入門者の間口を狭めている可能性があります。 このままでは初心者の手に負えないツールになってしまう!
  8. 8. そこで WordPressの常識をくつがえす超簡単テーマ doshiroutoを作りました。 「WordPressの常識をくつがえす」とは?
  9. 9. 日本語しか理解できないオレたち doshiroutoの特徴(1) ➔ 多言語化対応無し WordPressユーザーにIE使ってる人なんていないよね。 ➔ 古いバージョンのIE対応なし(IE9以降はOK) Google先生なんて最初からおらんかったんや! ➔ SEO無視。ブログは口コミで広めよう。 新しい機能なんて使いこなせない、マジ無理。 ➔ カスタムヘッダー機能なんて使ってないし削除 ➔ せっかくの新機能Webフォントを封印 ➔ 汎用性なし、拡張性なし 過去は置いてきた。これから新しくサイトを始めるんだ。 ➔ 古いバージョンでは使えず、互換性の考慮なし (Version3.6以降推奨)
  10. 10. doshiroutoの特徴(2) WordPressって言ったらCMSだろ! ➔ いいえブログです。原点に戻ってください。 デフォルトのテーマってなんであんなにファイルが多いの!? ➔ doshiroutoではファイルを減らしてホネと皮だけにしてあげました。 テーマファイルの中身って、なんであんなに記号ばっかりなの? 見ると吐き気がするんだけど。 ➔ 日本語のコメントをできるだけたくさん入れて安心感を演出。  phpやWordPress用語(テンプレートタグ)についての解説を、 テーマファイル内にコメントとして書き込みました。
  11. 11. 研ぎ澄まされたdoshiroutoの世界観 TwentyThirteen ファイル数 59 doshirouto ファイル数 6
  12. 12. デフォルトテーマTwentyThirteenは、 ・ユーザのあらゆるニーズに対応できる利点があります。 ・WordPressが持つ機能をくまなくサポートしているので、  WordPressのポテンシャルを最大限に引き出せます。 その反面、 ・一般のユーザにとってはほとんど使わない機能が多くあります。 ・機能が部品化・断片化された結果、ファイルの数が多くなっています。 ・WordPressは海外製のソフトウェアのため、日本語圏の人が使うためには  多言語化が必要になります。 なぜこんなにファイルを減らせるのか? TwentyThirteenの現状
  13. 13. ・投稿フォーマットは1種類だけにしました。  TwentyThirteenでは、通常の投稿のほかにAudioやVideo、引用などが使え  ますが、doshiroutoでは通常の投稿のみとしました。 ・テンプレートは一種類(index.php)だけにしました。  カテゴリー一覧や月別アーカイブの一覧もすべて同じ見た目になります。 ・画像ファイルを使わないようにしました。 ・Webフォントを使わないようにしました。 ・Javascriptによる視覚効果を行わないようにしました。 doshiroutoは日本語のみ対応とし、 初心者は使わない(使えない)機能を削ぎ落としました。 そしていよいよ、これがdoshiroutoの外観だ!➔
  14. 14. doshiroutoの外観 で、さっき言ってた投稿フォーマットって何?➔ TwentyThirteenをベースに作っています。cssはほとんどイジってません。
  15. 15. 通常の投稿以外に、いろいろなメディアを投稿したときに使われるフォーマット です。TwentyThirteenの投稿フォーマットは以下のテンプレートファイルが使 われています。 投稿フォーマットとは 画像 content-­‐image.php 標準の投稿 content.php リンク ギャラリー Audio Video ステータス チャット アサイド 引用 content-­‐link.php content-­‐gallery.php content-­‐audio.php content-­‐video.php content-­‐status.php content-­‐chat.php content-­‐aside.php content-­‐quote.php どんなデザインなのかを順番に見ていきます➔
  16. 16. 投稿フォーマット 画像 content-­‐image.php 画像ファイルを掲載する ときに使います。
  17. 17. 複数の画像ファイルを掲載する ときに使います。 投稿フォーマット ギャラリー content-­‐gallery.php
  18. 18. 記事投稿時にリンクURL を入力できます。 記事のタイトルをクリックすると登録 したURLにジャンプします。 (通常の投稿は記事そのものに リンクしますが、リンク投稿の 場合は登録したリンク先にジャンプし ます。) 投稿フォーマット リンク content-­‐link.php
  19. 19. YouTube等から動画ファイルを埋 め込むことができます。 YouTubeのURLを投稿するだけ で埋め込み記事になります。 投稿フォーマット Video content-­‐video.php
  20. 20. 音声ファイルを埋め込むことが できます。 投稿フォーマット Audio content-­‐audio.php
  21. 21. たろう: こんにちは というような記事を書けば、 チャット形式に自動的に整形 してくれます。 投稿フォーマット チャット content-­‐chat.php
  22. 22. Twitterのツイートのようなもの。 投稿フォーマット ステータス content-­‐status.php
  23. 23. 引用記事と引用元URLを投稿 すると自動的に引用記事に なります。 投稿フォーマット 引用 content-­‐quote.php
  24. 24. 記事投稿ほどではないけど、 メモのような感覚で残せるもの。 タイトルは表示されません。 投稿フォーマット アサイド content-­‐aside.php
  25. 25. doshiroutoではこれらのテンプレー トを1つにまとめました。 content-***.php を1つに集約して index.php内に記載することでファイル数 を削減しました。
  26. 26. その秘密は「テンプレート階層」のしくみにあります。➔ さらなるファイル削減: doshiroutoのテンプレートはindex.phpの一種類だけ! これってどういうこと?
  27. 27. 特定カテゴリの一覧表示 (例:「カテゴリA」の一覧) 記事を表示する方法はいろいろあります 特定タグの一覧表示 (例:「グルメ」タグの一覧) 特定年月に投稿された記事の 一覧表示 (例: 2013年4月の投稿一覧) 最新の投稿順表示 (TwentyThirteenの例)
  28. 28. TwentyThirteenでは、ページ種類ごとに 専用のテンプレートファイルがあります。 カテゴリ毎ページ category.php 最新投稿順ページ アーカイブ毎ページ タグ毎ページ 1記事だけのページ archive.php index.php tag.php single.php
  29. 29. それぞれのページごとに違うデザインを見せることが 出来る反面、 テンプレートファイルの数は多くなってしまいます。 archive.php category.php index.php single.php tag.php
  30. 30. doshiroutoの記事表示テンプレートはindex.phpだけ TwentyThirteen 404.php 404(not  found)ページ author.php category.php image.php page.php index.php search.php single.php tag.php index.php ユーザ一ページ カテゴリーページ 添付画像ページ 固定ページ 検索結果ページ 個別投稿ページ タグページ ブログ投稿一覧ページ doshirouto archive.php アーカイブページ index.phpだけですべてのページ を表示させる!
  31. 31. なぜindex.phpだけでも動くのか? category.php index.php WordPressの仕様では、以下のように動作します。 年月毎(アーカイブ)ページの表示のとき、archive.phpがなければindex.phpを使います。 カテゴリ毎ページの表示のとき、category.phpが無ければindex.phpを使います。 タグ毎ページ表示のとき、tag.phpが無ければindex.phpを使います。 カテゴリ毎ページ archive.php tag.php アーカイブページ タグ毎ページ 専用のテンプレートファイルがなければ、index.phpを使用する仕様になっ ています。この優先順位を持った階層をテンプレート階層と言います。
  32. 32. 次に、 ページのパーツ構成を理解しましょう
  33. 33. 1つのページを作るのに複数のパーツが組み合わされています。 header.php index.php sidebar-­‐main.php footer.php TwentyThirteenの場合。
  34. 34. header.php index.php sidebar-­‐main.php footer.php doshiroutoの場合。 この構成はTwentyThirteenと同じです。
  35. 35. http://toyao.net/doshirouto.zip doshiroutoのダウンロードは こちらから doshiroutoの特徴についてはお分かりいただけたか と思います。では実際にダウンロードして使ってみま しょう。
  36. 36. doshiroutoテーマは wordpress      >  wp-­‐content          >  themes に置きましょう。 ダウンロードしたファイルはどこに置いたらいいの?
  37. 37. doshirouto のファイル構成 footer.php フッタテンプレート functions.php php関数の集まり(触らなくていい) header.php ヘッダテンプレート index.php メインテンプレート sidebar-­‐main.php サイドバーテンプレート style.css cssファイル
  38. 38. 管理画面でテーマを変更します。 doshiroutoを有効化
  39. 39. doshiroutoが有効になりました!
  40. 40. doshiroutoテーマのコードを見てみましょう
  41. 41. 日本語がいっぱいの超親切設計! 中を簡単に解説します➔
  42. 42. <?php  get_header();  ?>   <div  id="primary"  class="content-­‐area">     <div  id="content"  class="site-­‐content"  role="main">     <?php  if  (  have_posts()  )  :  ?>       <?php  while  (  have_posts()  )  :  the_post();  ?>         <article  id="post-­‐<?php  the_ID();  ?>"  <?php  post_class();  ?>>           <header  class="entry-­‐header">             <h1  class="entry-­‐title"><?php  the_title();  ?></h1>             <div  class="entry-­‐meta">               <?php  twentythirteen_entry_meta();  ?>               <?php  edit_post_link(  '編集'  );  ?>             </div>           </header>           <div  class="entry-­‐content">             <?php  the_content(  '続きを読む...'  );  ?>             <?php  wp_link_pages();  ?>           </div>           <footer  class="entry-­‐meta">             <div  class="comments-­‐link">               <?php  comments_popup_link();  ?>             </div>           </footer>         </article>       <?php  endwhile;  ?>       <?php  twentythirteen_paging_nav();  ?>     <?php  endif;  ?>     </div>   </div> <?php  get_footer();  ?> doshirouto/index.php header.phpを読み込む footer.phpを読み込む while文によるループ処理 記事のタイトル 記事本文 コメントへのリンク
  43. 43. <!DOCTYPE  html> <html  lang="ja"> <head>   <meta  charset="UTF-­‐8"  />   <meta  name="viewport"  content="width=device-­‐width"  />   <link  rel="stylesheet"  type="text/css"  href="<?php  bloginfo('stylesheet_url');?>"/>   <title>WordPressのタイトル</title>   <?php  wp_head();  ?> </head> <body  <?php  body_class();  ?>>   <div  id="page"  class="hfeed  site">     <header  id="masthead"  class="site-­‐header"  role="banner">       <a  href="<?php  echo  home_url()  ?>">         <hgroup>           <h1  class="site-­‐title">WordBench神戸0506</h1>           <h2  class="site-­‐description">WordPressの常識をくつがえすdoshirouto</h2>         </hgroup>       </a>       <div  id="navbar"  class="navbar">         <nav  id="site-­‐navigation"  class="navigation  main-­‐navigation"  role="navigation">           <?php  wp_nav_menu()  );  ?>           <?php  get_search_form();  ?>         </nav>       </div>     </header>     <div  id="main"  class="site-­‐main"> doshirouto/header.php style.cssを読み込む ナビゲーションメニュー 検索ボックス サイトタイトル
  44. 44.     </div><!-­‐-­‐  #main  -­‐-­‐>     <footer  id="colophon"  class="site-­‐footer"  role="contentinfo">       <?php  get_sidebar(  'main'  );  ?>       <div  class="site-­‐info">         doshirouto       </div>     </footer>   </div><!-­‐-­‐  #page  -­‐-­‐>   <?php  wp_footer();  ?> </body> </html> doshirouto/footer.php sidebar-main.php読み込み WordPressのフッタ処理
  45. 45. まとめ ・WordPressのテーマに触れたことが無い初心者の方は、まずdoshiroutoで WordPressのテーマ構造を理解し、慣れてきたらTwentyThirteenなどデフォルト テーマの中を解読してみるのがいいと思います。 ・doshiroutoに追加したい機能がある場合は、自力でデフォルトテーマから必要な コードをコピーしてきましょう。 ・doshiroutoはWordPress公式のテーマではありませんし、素人まるだしなので、 こんなテーマは早く卒業しましょう。
  46. 46. ありがとうございました。 @uemera uemura

×