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

14,277 views
14,243 views

Published on

WordPressのデフォルトテーマTwenty Fourteenをカスタマイズした超簡単テーマdoshirouto2014を作りました。

Published in: Technology
4 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total views
14,277
On SlideShare
0
From Embeds
0
Number of Embeds
4,818
Actions
Shares
0
Downloads
32
Comments
4
Likes
28
Embeds 0
No embeds

No notes for slide

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

  1. 1. WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう! 2014.3.8 WordBench神戸 上村崇 @uemera Photo by SalFalko
  2. 2. 最近のオレ @uemera uemura 兵庫県西宮市在住。 フリーランスのシステムエンジニアです。 WordBench神戸でよく喋ってます。 勉強会など WordPress phpでの開発 ・FuelPHP ・Linuxサーバー系もやります
  3. 3. このプレゼンでは WordPressのテーマのしくみを 初心者にも分かるように解説します。 テーマを理解すればどういうメリットがあるの? ・自分のオリジナルテーマを作ることができます。 ・WordPressへの苦手意識が無くなります。 ・phpが少し分かるようになります。 !
  4. 4. 2013年5月、Twenty Thirteenをベースにしたテーマ "doshirouto"を公開しました。
  5. 5. Twenty Ten 2010 デフォルトテーマの変遷 Twenty Eleven 2011 Twenty Twelve 2012 Twenty Thirteenをベースに doshiroutoを作成 Twenty Thirteen 2013 Twenty Fourteen 2014 Twenty Fourteenをベース にdoshirouto2014を作成
  6. 6. 最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ Twenty Fourteen とぅえんてぃふぉーてぃーん
  7. 7. 最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ Twenty Fourteen とぅえんてぃふぉーてぃーん Twenty Fourteenの特徴: ・レスポンシブデザインを採用しています。 ・Automattic社 入江隆さんによるマガジンスタイルなデザイン ・アイコンフォントGenericonsを採用して見た目が分かりやすくなりました。 ・Twenty Fourteen短冊ウィジェットで、投稿の一覧が表示できます。 ・フロントページにタイル状の画像やスライダーを設置できる「おすすめコンテンツ」 ・3カラムにできます。 ・Lato 欧文タイプフェイスの採用
  8. 8. マガジンスタイルとは 雑誌を読んでいる感覚を、Webサイトに応用したもの。 画像入りの記事がタイル上に並びます。
  9. 9. LATOフォント
  10. 10. しかし、バージョンアップにともなって、WordPressの
 デフォルトテーマはどんどん難しくなってきています。 例: スタイルシートファイルへのリンクがどこに書いてあるか分からない header.php テーマのヘッダ部分にあたるheader.phpには当然下のようなcssファイル へのリンクがあるものと思ったけど… header.phpには見つかりません。 <head>
 <link  rel="stylesheet"  type="text/css"  href="http://.../style.css">
 </head>   しかし実際は... functions.php header.phpではなく、php処理ばかりが書かれているfunctions.phpと いうファイルに、関数呼び出しの形で書かれています。 wp_enqueue_style(  'twentyfourteen-­‐style',  get_stylesheet_uri(),  array(  'genericons'  )  ); これでは初心者はcssファイルを探せないし、編集することもままならない!
  11. 11. 例:ページナビ部分の<h1>を削除したくても、 どのファイルを編集していいか分からない! この<h1>タグを削除したい!
  12. 12. Twenty Fourteenのindex.phpを見ても <h1>タグなんて見当たらない!
  13. 13. 実際は twentyfourteen/inc/template-­‐tags.php の twentyfourteen_paging_nav()関数内という、 php満載の処理内にhtmlが書いてあります。
  14. 14. WordPressはイノベーションのジレンマに陥ってるのかも知れません。 
 高機能化・複雑化が入門者の間口を狭めている可能性があります。 230000 ステップ数 197500 165000 132500 このままでは初心者の手に負えないツールになってしまう! 100000 3.0 3.1 3.2 3.3 3.4 3.5 バージョン 3.6 WordPressの各バージョンにおける 全ソースのphpステップ数(行数) (themeファイルを除く) 3.7 3.8
  15. 15. そこで WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作りました。 「WordPressの常識をくつがえす」とは?
  16. 16. doshirouto2014の特徴(1) 日本語しか理解できないオレたち。
 ➔ 英語のサイトを開設する予定などさらさらないので、多言語化対応無し。 WordPressユーザーにIE使ってる人なんていないよね。
 ➔ 古いバージョンのIE対応なし(IE9以降はOK)。 Google先生に頼るばかりの人生でいいんですか? ➔ 競争社会とは無縁。SEOは無視。ブログは口コミで広めよう。 新しい機能なんて使いこなせない、マジ無理。
 ➔ カスタムヘッダー機能なんて使ってないし削除。
 ➔ 読めればいいので、おしゃれなWebフォントなんて必要ない必要ない。
 ➔ オレだけ(私だけ)が使えればいいので汎用性なし、拡張性なし。 過去はふりかえらない主義 ➔ 古いバージョンのWordPressは対応せず。互換性の考慮なし。
 (Version3.8以降)。
  17. 17. doshirouto2014の特徴(2) WordPressって言ったらCMSだろ!
 ➔ いいえブログです。原点に戻ってください。 デフォルトのテーマってなんであんなにファイルが多いの!? ➔ 必要最低限のファイルだけに絞りこみました。 テーマファイルの中身って、なんであんなに記号ばっかりなの?
 見ると目まいがするんだけど。 ➔ 日本語のコメントをできるだけたくさん入れてコードを読みやすくしました。
  WordPress用語(テンプレートタグ)についての解説を入れました。
 では実際にdoshirouto2014を見ていただきましょう。→
  18. 18. doshirouto2014の外観 Twenty Fourteenをベースに作っています。cssはほとんどイジってません。
 ファイル構成はどうなっている?➔
  19. 19. 洗練されすぎたdoshirouto2014の世界 TwentyFourteen   ファイル数 62 doshirouto2014   ファイル数 6
  20. 20. なぜこんなにファイルを減らせるのか? Twenty Fourteenの現状 デフォルトテーマTwenty Fourteenは、
 ・ユーザのあらゆるニーズに対応できる利点があります。
 ・WordPressが持つ機能をくまなくサポートしているので、
  WordPressのポテンシャルを最大限に引き出せます。
 
 その反面、
 ・一般のユーザーにとってはほとんど使わない機能が多くあります。
 ・複雑なコードを分かりやすく階層化したり部品化した結果、ファイルの数が
  多くなってしまっています。
 ・WordPressは海外製のソフトウェアのため、日本語圏の人が使うためには
  多言語化対応が必要になります。
  21. 21. doshirouto2014は日本語のみ対応とし、 初心者は使わない(使えない)機能を削ぎ落としました。 1. 多言語化対応なし
 言語関連ファイルを削除しました。また、コードを分かりやすくするために
 テンプレートファイルに日本語を直接埋め込んでいます。 comments_popup_link(  __(  'Leave  a  comment',  'twentyfourteen'  ),                                            __(  '1  Comment',  'twentyfourteen'  ),                                            __(  '%  Comments',  'twentyfourteen'  )  ); 日本語しか使わないので日本語を直接埋め込みました。 comments_popup_link(  'コメントをどうぞ',  '1件のコメント',  '%件のコメント'  );
  22. 22. 2. 古いバージョンのIE対応無し
 ie.css、html5.js といった互換性維持用のファイルを削除しました。 削除 削除
  23. 23. 3. SEO対策無し
 コードを簡単にするため、<head>内のタイトルなどを簡略化。
 情報を削ったり、サイトタイトルを静的な固定表示のまま出すようにしました。 <head>     <title><?php  wp_title(  '|',  true,  'right'  );  ?></title>   </head> wp_title()でページのタイトル名を動的に表示していたところを、
 doshirouto2014ではタイトルを固定。どんなページもこの文字列になります。 <head>     <title>ヘッダのタイトル  doshirouto2014</title>   </head>
  24. 24. 4. カスタムヘッダー削除、カスタマイズ機能削除、おすすめコンテンツ機能削除
 これらはTwenty Fourteenが持つ拡張機能ですが、
 そんな機能はド素人には無縁なので、関連phpファイルを削除しました。
 削除 削除 削除
  25. 25. 5. Webフォント削除、Genericons削除
 ttfとかsvgとかのファイルを削除しました。 ガッツリ削除 style.cssも編集し、フォントの呼び出しや
 アイコンフォントの呼び出しをしないように
 しました。
  26. 26. その結果、アイコンフォントが使えなくなります。 Twenty Fourteen doshirouto2014
  27. 27. 6. Javascriptによるアニメーション効果を省きました。
 ていうかjsファイルは全部削除しました。 doshirouto2014では
 優雅なアニメーションは不要!
  28. 28. そしたら検索ボックスが出なくなった!/(^o^)\ Twenty Fourteen ムシメガネをクリックすると
 検索窓出現 doshirouto2014 クリックしても出ない でも検索窓はもうひとつあるから大丈夫!
  29. 29. 7. 投稿フォーマットは1種類だけにしました。
 Twenty Fourteenでは、標準の投稿のほかに
 「音声」や「動画」、「引用」
 などが使えますが、doshirouto2014では標準の投稿のみとしました。 Twenty Fourteenで は、記事を書くときに 投稿フォーマットを選 べる。 投稿フォーマットを詳しく→
  30. 30. 投稿フォーマットとは テキストがメインの投稿(標準の投稿)以外に、例えば画像や動画などのメディアを投稿 するときは別のデザインにすることができます。投稿の種類によって見せ方(=フォーマッ ト)を替えられます。つまり投稿フォーマットごとにデザインを変えることができます。 Twenty Fourteenでは以下の投稿フォーマット用のファイルが用意されています。 標準の投稿 アサイド 画像 動画 音声 引用 リンク ギャラリー チャット ステータス おすすめコンテンツ 「廃止」「New」はTwenty  Thirteenからの比較 content.php content-­‐aside.php content-­‐image.php content-­‐video.php content-­‐audio.php content-­‐quote.php content-­‐link.php content-­‐gallery.php content-­‐chat.php content-­‐status.php content-­‐featured-­‐post.php 廃止 廃止 New もう少し細かく見ていきます➔
  31. 31. Twenty Thirteenは、投稿フォーマットによっていろいろな 外観が楽しめました。 標準 ギャラリー ビデオ 引用 ステータス チャット では、Twenty Fourteenはどうなっているでしょうか?→
  32. 32. Twenty Fourteen 「標準」の投稿フォーマット content.php デフォルトの投稿フォーマットです。 テキストメインの記事を掲載する ときに使います。
  33. 33. Twenty Fourteen 「アサイド」の投稿フォーマット content-­‐aside.php 記事投稿ほどではないけど、
 メモのような感覚で残せるもの。 タイトルは表示されず、本文だけの 表示になります。
  34. 34. Twenty Fourteen 「画像」の投稿フォーマット content-­‐image.php 画像記事を掲載するときに使いま す。
  35. 35. Twenty Fourteen 「動画」の投稿フォーマット content-­‐video.php YouTube等から動画ファイルを埋 め込むことができます。 YouTubeのURLを投稿するだけ
 で埋め込み記事になります。 パソコンからアップロードした動 画を掲載することもできます。 !
  36. 36. Twenty Fourteen 「音声」の投稿フォーマット content-­‐audio.php 音声ファイルを埋め込むことがで きます。
  37. 37. Twenty Fourteen 「引用」の投稿フォーマット content-­‐quote.php 外部サイトの記事を引用して掲載 したいときに使います。 アサイドと同様、タイトルは表示 されません。
  38. 38. Twenty Fourteen 「リンク」の投稿フォーマット content-­‐link.php リンクURLを貼ると自動的にリン クタグもついて掲載される…
 と思いましたが、自動的にはリン クされないようです。
 リンクされないURL文字列が掲載 されます。
 タイトルは表示されません。
  39. 39. Twenty Fourteen 「ギャラリー」の投稿フォーマット content-­‐gallery.php 複数の画像ファイルを掲載する
 ときに使います。
  40. 40. Twenty Fourteenは、どの投稿フォーマットにしてもほとん ど同じデザイン! 標準 アサイド 画像 動画 音声 ギャラリー
  41. 41. Twenty Thirteenはこんなにカラフルだったのに! 標準 ビデオ 引用 ギャラリー ステータス チャット
  42. 42. 同じデザインなら1つの投稿フォーマット、 1つのテンプレートファイルでいいじゃん? 引用 アサイド 標準 音声 リンク 画像 ギャラリー 動画 投稿フォーマットは「標準」の 1つのみにする
  43. 43. 投稿フォーマットではないが 「おすすめコンテンツ」 これ content-­‐featured-­‐post.php ピックアップ画像としてページ上部 に固定表示できます。
 タイル表示の他に、スライダーとし ての表示も可能です。 doshirouto2014ではこんなオ シャレな機能は必要無いのでカッ トしました。
  44. 44. doshirouto2014では
 これらのテンプレートを1つにまとめました。 content-***.php を1つに集約して
 index.php内に記載することで
 ファイル数を削減しました。
  45. 45. さらなるファイル削減: doshirouto2014は、メインのテンプレートは index.phpの一種類だけ!
 これってどういうこと? その秘密は「テンプレート階層」のしくみにあります。➔
  46. 46. 記事の並べ方はいろいろあります (Twenty Fourteenの例) 最新の投稿順表示 カテゴリ毎表示 新着順に並びます。 カテゴリAの記事 だけを表示します。 アーカイブ表示
 タグ毎表示 2014年3月の記事 だけ表示します。 タグZの記事だけを 表示します。
  47. 47. Twenty Fourteenでは、記事を並べる方法ごとに
 専用のテンプレートファイルがあります。 最新投稿順ページ index.php カテゴリ毎ページ category.php アーカイブ毎ページ タグ毎ページ 1記事だけのページ archive.php tag.php single.php
  48. 48. archive.php category.php それぞれのページごとに違うデザイ ンを見せることが出来る反面、
 テンプレートファイルの数は多くなっ てしまいます。 index.php single.php tag.php
  49. 49. doshirouto2014の記事表示テンプレートは index.phpだけ Twenty  Fourteen 404.php archive.php author.php category.php 404(not  found)ページ アーカイブページ ユーザ一ページ カテゴリーページ image.php 添付画像ページ page.php 固定ページ search.php 検索結果ページ single.php 個別投稿ページ tag.php index.php doshirouto2014 タグページ ブログ投稿一覧ページ index.php index.phpだけですべてのページ   を表示させる!
  50. 50. なぜindex.phpだけでも動くのか? WordPressの仕様では、以下のように動作します。 カテゴリ毎ページの表示のとき、category.phpが無ければindex.phpを使います。 年月毎(アーカイブ)ページの表示のとき、archive.phpがなければindex.phpを使います。 タグ毎ページ表示のとき、tag.phpが無ければindex.phpを使います。 カテゴリ毎ページ category.php アーカイブページ archive.php タグ毎ページ index.php tag.php 専用のテンプレートファイルがなければ、index.phpを使用する仕様になっています。
 この優先順位を持った階層をテンプレート階層と言います。
  51. 51. では実際に、 doshirouto2014をインストールし
 構成を見てみましょう。 doshirouto2014のダウンロードは   こちらから http://toyao.net/doshirouto2014.zip
  52. 52. ダウンロードしたファイルはどこに置いたらいいの? doshirouto2014テーマは wordpress
      >  wp-­‐content
          >  themes   の下に置きましょう。
  53. 53. 管理画面でテーマを変更します。 doshirouto2014を 有効化
  54. 54. doshirouto2014が有効になりました!
  55. 55. doshirouto2014のファイル構成 footer.php フッタテンプレート functions.php php関数の集まり(触らなくていい) header.php ヘッダテンプレート index.php メインテンプレート sidebar.php サイドバーテンプレート style.css cssファイル
  56. 56. doshirouto2014では、1つのページを作るのに
 複数のパーツが組み合わされています。 header.php sidebar.php footer.php index.php
  57. 57. この構成はTwenty Fourteenでも同じです。 Twenty Fourteenの場合 header.php index.php sidebar.php footer.php
  58. 58. doshirouto2014のコードを 見てみましょう
  59. 59. その前に、phpの基礎知識 WordPressはphpというプログラム言語で作られています。 テーマを理解するにはこの言語の使い方を少し知っておく必要が あります。 条件分岐 (if文) ! <?php  if(  $a  ==  1  ):  ?>   !        <h1>変数$aが1のときは、この部分を表示します</h1>   ! <?php  else:  ?>   !        <h1>$aが1以外のときは、この部分を表示します</h1>   ! <?php  endif;  ?>  
  60. 60. 繰り返し (while文) ! <?php  while(  $a  ==  1  ):  ?>   !        この部分が繰り返されます。   ! <?php  endwhile;  ?>   繰り返し文は、新着の記事一覧のページなど、何件もの複数記事 を1ページに表示させるときに使います。 以上をふまえて、doshirouto2014のソースコードを見てみます。→
  61. 61. 日本語コメントがいっぱいの超親切設計! 中を簡単に解説します➔
  62. 62. <?php  get_header();  ?>   header.phpを読み込む doshirouto2014/index.php        <?php  if  (  have_posts()  )  :  ?>          <?  while(  have_posts()  )  :  the_post();  ?>   メインテンプレート                  <article  id="post-­‐<?php  the_ID();  ?>"  <?php  post_class();  ?>>   while文によるループ処理                    <header  class="entry-­‐header">                          <?php                              if  (  is_single()  )  :                          the_title(  '<h1>',  '</h1>'  );                              else  :                          the_title('<h1><a  href="'.esc_url(get_permalink()).'">',  '</a></h1>');                              endif;                          ?>   記事のタイトル                        <div  class="entry-­‐meta">                              <?php  if  (  'post'  ==  get_post_type()  )                                      twentyfourteen_posted_on();  ?>                          </div>                      </header><!-­‐-­‐  .entry-­‐header  -­‐-­‐>                      <div  class="entry-­‐content">                    <?php  the_content(  '続きを読む→'  );  ?>                      </div><!-­‐-­‐  .entry-­‐content  -­‐-­‐>   記事本文を表示する                </article><!-­‐-­‐  #post-­‐##  -­‐-­‐>                  <?php                      if  (  is_single()  ||  is_page()  )  :                          if  (  comments_open()  ||  get_comments_number()  )  :                        comments_template();                          }                      endif;                  ?>          <?php  endwhile;  ?>            <?php  twentyfourteen_paging_nav();  ?>      <?php  endif;  ?>   <?php   sidebar.phpを読み込む get_sidebar();   get_footer();   footer.phpを読み込む コメント欄を表示する 記事数分のループ
  63. 63. <html  lang="ja">   <head>      <meta  charset="UTF-­‐8">      <meta  name="viewport"  content="width=device-­‐width">   doshirouto/header.php   ヘッダテンプレート        <link  rel="stylesheet"  type="text/css"  href="<?php  echo  get_stylesheet_uri();?>"/>        <title>ヘッダのタイトル  doshirouto2014</title>          <?php  wp_head();  ?>   </head>   ヘッダのタイトル <body  <?php  body_class();  ?>>   <div  id="page"  class="hfeed  site">      <header  id="masthead"  class="site-­‐header"  role="banner">          <div  class="header-­‐main">              <h1  class="site-­‐title">   style.cssを読み込む              <a  href="<?php  echo  home_url(  '/'  );  ?>">タイトル  -­‐  doshirouto2014</a>              </h1>              <div  class="search-­‐toggle">   サイトタイトル                <a  href="#search-­‐container"  class="screen-­‐reader-­‐text">検索</a>              </div>              <nav  id="primary-­‐navigation"  class="site-­‐navigation  primary-­‐navigation">              <?php  wp_nav_menu(  array(  'menu_class'  =>  'nav-­‐menu'  )  );  ?>              </nav>          </div>   ナビゲーションメニュー        <div  id="search-­‐container"  class="search-­‐box-­‐wrapper  hide">              <div  class="search-­‐box">              <?php  get_search_form();  ?>              </div>          </div>      </header><!-­‐-­‐  #masthead  -­‐-­‐>   !    <div  id="main"  class="site-­‐main">   ! 検索ボックス
  64. 64. doshirouto2014/sidebar.php   サイドバーテンプレート   <div  id="secondary">          <?php   ブログの説明              $description  =  get_bloginfo(  'description',  'display'  );                  if  (  !  empty  (  $description  )  )  :          ?>          <h2  class="site-­‐description"><?php  echo  esc_html(  $description  );  ?></h2>          <?php  endif;  ?>   !        <?php  if  (  has_nav_menu(  'secondary'  )  )  :  ?>          <nav  role="navigation"  class="navigation  site-­‐navigation  secondary-­‐navigation">                  <?php  wp_nav_menu(  array(  'theme_location'  =>  'secondary'  )  );  ?>          </nav>          <?php  endif;  ?>   !        <?php  if  (  is_active_sidebar(  'sidebar-­‐1'  )  )  :  ?>          <div  id="primary-­‐sidebar"  class="primary-­‐sidebar  widget-­‐area">                  <?php  dynamic_sidebar(  'sidebar-­‐1'  );  ?>          </div><!-­‐-­‐  #primary-­‐sidebar  -­‐-­‐>          <?php  endif;  ?>   </div><!-­‐-­‐  #secondary  -­‐-­‐>  
  65. 65. doshirouto2014/footer.php   フッタテンプレート   !        </div><!-­‐-­‐  #main  -­‐-­‐>                <footer  id="colophon"  class="site-­‐footer"  role="contentinfo">                    <div  class="site-­‐info">                          doshirouto2014                    </div><!-­‐-­‐  .site-­‐info  -­‐-­‐>                </footer><!-­‐-­‐  #colophon  -­‐-­‐>          </div><!-­‐-­‐  #page  -­‐-­‐>   !        <?php  wp_footer();  ?>   WordPressのフッタ処理 </body>   </html>
  66. 66. まとめ ・WordPressのテーマに触れたことが無い初心者の方は、まずdoshirouto2014で
  WordPressのテーマ構造を理解し、慣れてきたらTwenty Fourteenなどデフォル
  トテーマの中を解読してみるのがいいと思います。
 ・doshirouto2014に追加したい機能がある場合は、デフォルトテーマから自力で
  必要なコードをコピーしてきましょう。 ! ・doshirouto2014はWordPress公式のテーマではありませんし、素人まるだし
  なので、こんなテーマは早く卒業しましょう。
  67. 67. ありがとうございました。 @uemera uemura

×