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

16,406 views
16,369 views

Published on

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

Published in: Technology
4 Comments
30 Likes
Statistics
Notes
No Downloads
Views
Total views
16,406
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
36
Comments
4
Likes
30
Embeds 0
No embeds

No notes for slide

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

  1. 1. @uemera2013.5.6WordBench神戸 上村崇WordPressの常識をくつがえす超簡単テーマdoshiroutoを作ったのでこれでテーマを理解しよう!
  2. 2. 最近のオレPHPフレームワーク(FuelPHP)ExcelVBAサーバーインフラ(Webサーバ構築など)WordPressJavaScript、jQuery勉強会準備(WordBench等)ネットショップ支援(CS-Cart、SoyCMS)@uemerauemuraフリーランスのシステムエンジニアです。
  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.phpfunctions.phpheader.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ファイル数 59doshiroutoファイル数 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リンクギャラリーAudioVideoステータスチャットアサイド引用content-­‐link.phpcontent-­‐gallery.phpcontent-­‐audio.phpcontent-­‐video.phpcontent-­‐status.phpcontent-­‐chat.phpcontent-­‐aside.phpcontent-­‐quote.phpどんなデザインなのかを順番に見ていきます➔
  16. 16. 投稿フォーマット 画像content-­‐image.php画像ファイルを掲載するときに使います。
  17. 17. 複数の画像ファイルを掲載するときに使います。投稿フォーマット ギャラリーcontent-­‐gallery.php
  18. 18. 記事投稿時にリンクURLを入力できます。記事のタイトルをクリックすると登録したURLにジャンプします。(通常の投稿は記事そのものにリンクしますが、リンク投稿の場合は登録したリンク先にジャンプします。)投稿フォーマット リンクcontent-­‐link.php
  19. 19. YouTube等から動画ファイルを埋め込むことができます。YouTubeのURLを投稿するだけで埋め込み記事になります。投稿フォーマット Videocontent-­‐video.php
  20. 20. 音声ファイルを埋め込むことができます。投稿フォーマット Audiocontent-­‐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.phpindex.phptag.phpsingle.php
  29. 29. それぞれのページごとに違うデザインを見せることが出来る反面、テンプレートファイルの数は多くなってしまいます。archive.phpcategory.phpindex.phpsingle.phptag.php
  30. 30. doshiroutoの記事表示テンプレートはindex.phpだけTwentyThirteen404.php 404(not  found)ページauthor.phpcategory.phpimage.phppage.phpindex.phpsearch.phpsingle.phptag.phpindex.phpユーザ一ページカテゴリーページ添付画像ページ固定ページ検索結果ページ個別投稿ページタグページブログ投稿一覧ページdoshiroutoarchive.php アーカイブページindex.phpだけですべてのページを表示させる!
  31. 31. なぜindex.phpだけでも動くのか?category.phpindex.phpWordPressの仕様では、以下のように動作します。年月毎(アーカイブ)ページの表示のとき、archive.phpがなければindex.phpを使います。カテゴリ毎ページの表示のとき、category.phpが無ければindex.phpを使います。タグ毎ページ表示のとき、tag.phpが無ければindex.phpを使います。カテゴリ毎ページarchive.phptag.phpアーカイブページタグ毎ページ専用のテンプレートファイルがなければ、index.phpを使用する仕様になっています。この優先順位を持った階層をテンプレート階層と言います。
  32. 32. 次に、ページのパーツ構成を理解しましょう
  33. 33. 1つのページを作るのに複数のパーツが組み合わされています。header.phpindex.phpsidebar-­‐main.phpfooter.phpTwentyThirteenの場合。
  34. 34. header.phpindex.phpsidebar-­‐main.phpfooter.phpdoshiroutoの場合。この構成はTwentyThirteenと同じです。
  35. 35. http://toyao.net/doshirouto.zipdoshiroutoのダウンロードはこちらから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.phpheader.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.phpstyle.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.phpsidebar-main.php読み込みWordPressのフッタ処理
  45. 45. まとめ・WordPressのテーマに触れたことが無い初心者の方は、まずdoshiroutoでWordPressのテーマ構造を理解し、慣れてきたらTwentyThirteenなどデフォルトテーマの中を解読してみるのがいいと思います。・doshiroutoに追加したい機能がある場合は、自力でデフォルトテーマから必要なコードをコピーしてきましょう。・doshiroutoはWordPress公式のテーマではありませんし、素人まるだしなので、こんなテーマは早く卒業しましょう。
  46. 46. ありがとうございました。@uemera uemura

×