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

1. @uemera2013.5.6 WordBench神戸上村崇 WordPressの常識をくつがえす超簡単テーマ doshirouto を作ったのでこれでテーマを理解しよう!

2. 最近のオレ PHPフレームワーク (FuelPHP) ExcelVBA サーバーインフラ (Webサーバ構築など) WordPress JavaScript、jQuery 勉強会準備 (WordBench等) ネットショップ支援 (CS-Cart、SoyCMS) @uemera uemuraフリーランスのシステムエンジニアです。

3. テーマを理解すればどういうメリットがあるの? ・WordPressの仕様を理解すると、自分でやれることが広がります。・WordPressへの苦手意識が無くなります。・WordPressを自分の好きなデザインにすることができます。このプレゼンでは WordPressのテーマのしくみを初心者にも分かるように解説します。

4. 次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん

5. 次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん TwentyThirteenの特徴: ・レスポンシブデザインを採用しています。(パソコン、スマホ両対応) ・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。・下にスクロールするとヘッダ領域がコンパクト化され記事領域が大きくなります。・サイドブロックがフッタ部分に移動しました。・WordPress3.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. WordPressはイノベーションのジレンマに陥ってるのかも知れません。高機能化が入門者の間口を狭めている可能性があります。このままでは初心者の手に負えないツールになってしまう！

8. そこで WordPressの常識をくつがえす超簡単テーマ doshiroutoを作りました。「WordPressの常識をくつがえす」とは?

9. 日本語しか理解できないオレたち doshiroutoの特徴(1) ➔ 多言語化対応無し WordPressユーザーにIE使ってる人なんていないよね。 ➔ 古いバージョンのIE対応なし(IE9以降はOK) Google先生なんて最初からおらんかったんや！ ➔ SEO無視。ブログは口コミで広めよう。新しい機能なんて使いこなせない、マジ無理。 ➔ カスタムヘッダー機能なんて使ってないし削除 ➔ せっかくの新機能Webフォントを封印 ➔ 汎用性なし、拡張性なし過去は置いてきた。これから新しくサイトを始めるんだ。 ➔ 古いバージョンでは使えず、互換性の考慮なし (Version3.6以降推奨)

10. doshiroutoの特徴(2) WordPressって言ったらCMSだろ！ ➔ いいえブログです。原点に戻ってください。デフォルトのテーマってなんであんなにファイルが多いの！? ➔ doshiroutoではファイルを減らしてホネと皮だけにしてあげました。テーマファイルの中身って、なんであんなに記号ばっかりなの? 見ると吐き気がするんだけど。 ➔ 日本語のコメントをできるだけたくさん入れて安心感を演出。 phpやWordPress用語(テンプレートタグ)についての解説を、テーマファイル内にコメントとして書き込みました。

11. 研ぎ澄まされたdoshiroutoの世界観 TwentyThirteen ファイル数 59 doshirouto ファイル数 6

12. デフォルトテーマTwentyThirteenは、・ユーザのあらゆるニーズに対応できる利点があります。・WordPressが持つ機能をくまなくサポートしているので、 WordPressのポテンシャルを最大限に引き出せます。その反面、・一般のユーザにとってはほとんど使わない機能が多くあります。・機能が部品化・断片化された結果、ファイルの数が多くなっています。・WordPressは海外製のソフトウェアのため、日本語圏の人が使うためには多言語化が必要になります。なぜこんなにファイルを減らせるのか? TwentyThirteenの現状

13. ・投稿フォーマットは1種類だけにしました。 TwentyThirteenでは、通常の投稿のほかにAudioやVideo、引用などが使えますが、doshiroutoでは通常の投稿のみとしました。・テンプレートは一種類(index.php)だけにしました。カテゴリー一覧や月別アーカイブの一覧もすべて同じ見た目になります。・画像ファイルを使わないようにしました。・Webフォントを使わないようにしました。・Javascriptによる視覚効果を行わないようにしました。 doshiroutoは日本語のみ対応とし、初心者は使わない(使えない)機能を削ぎ落としました。そしていよいよ、これがdoshiroutoの外観だ！➔

14. doshiroutoの外観で、さっき言ってた投稿フォーマットって何？➔ TwentyThirteenをベースに作っています。cssはほとんどイジってません。

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. 投稿フォーマット画像 content-‐image.php 画像ファイルを掲載するときに使います。

17. 複数の画像ファイルを掲載するときに使います。投稿フォーマットギャラリー content-‐gallery.php

18. 記事投稿時にリンクURL を入力できます。記事のタイトルをクリックすると登録したURLにジャンプします。 (通常の投稿は記事そのものにリンクしますが、リンク投稿の場合は登録したリンク先にジャンプします。) 投稿フォーマットリンク content-‐link.php

19. YouTube等から動画ファイルを埋め込むことができます。 YouTubeのURLを投稿するだけで埋め込み記事になります。投稿フォーマット Video content-‐video.php

20. 音声ファイルを埋め込むことができます。投稿フォーマット Audio content-‐audio.php

21. たろう: こんにちはというような記事を書けば、チャット形式に自動的に整形してくれます。投稿フォーマットチャット content-‐chat.php

22. Twitterのツイートのようなもの。投稿フォーマットステータス content-‐status.php

23. 引用記事と引用元URLを投稿すると自動的に引用記事になります。投稿フォーマット引用 content-‐quote.php

24. 記事投稿ほどではないけど、メモのような感覚で残せるもの。タイトルは表示されません。投稿フォーマットアサイド content-‐aside.php

25. doshiroutoではこれらのテンプレートを1つにまとめました。 content-***.php を1つに集約して index.php内に記載することでファイル数を削減しました。

26. その秘密は「テンプレート階層」のしくみにあります。➔ さらなるファイル削減： doshiroutoのテンプレートはindex.phpの一種類だけ！これってどういうこと?

27. 特定カテゴリの一覧表示 (例:「カテゴリA」の一覧) 記事を表示する方法はいろいろあります特定タグの一覧表示 (例:「グルメ」タグの一覧) 特定年月に投稿された記事の一覧表示 (例: 2013年4月の投稿一覧) 最新の投稿順表示 (TwentyThirteenの例)

28. TwentyThirteenでは、ページ種類ごとに専用のテンプレートファイルがあります。カテゴリ毎ページ category.php 最新投稿順ページアーカイブ毎ページタグ毎ページ 1記事だけのページ archive.php index.php tag.php single.php

29. それぞれのページごとに違うデザインを見せることが出来る反面、テンプレートファイルの数は多くなってしまいます。 archive.php category.php index.php single.php tag.php

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. なぜ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. 次に、ページのパーツ構成を理解しましょう

33. 1つのページを作るのに複数のパーツが組み合わされています。 header.php index.php sidebar-‐main.php footer.php TwentyThirteenの場合。

34. header.php index.php sidebar-‐main.php footer.php doshiroutoの場合。この構成はTwentyThirteenと同じです。

35. http://toyao.net/doshirouto.zip doshiroutoのダウンロードはこちらから doshiroutoの特徴についてはお分かりいただけたかと思います。では実際にダウンロードして使ってみましょう。

36. doshiroutoテーマは wordpress > wp-‐content > themes に置きましょう。ダウンロードしたファイルはどこに置いたらいいの?

37. doshirouto のファイル構成 footer.php フッタテンプレート functions.php php関数の集まり(触らなくていい) header.php ヘッダテンプレート index.php メインテンプレート sidebar-‐main.php サイドバーテンプレート style.css cssファイル

38. 管理画面でテーマを変更します。 doshiroutoを有効化

39. doshiroutoが有効になりました！

40. doshiroutoテーマのコードを見てみましょう

41. 日本語がいっぱいの超親切設計！中を簡単に解説します➔

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. <!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. </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. まとめ・WordPressのテーマに触れたことが無い初心者の方は、まずdoshiroutoで WordPressのテーマ構造を理解し、慣れてきたらTwentyThirteenなどデフォルトテーマの中を解読してみるのがいいと思います。・doshiroutoに追加したい機能がある場合は、自力でデフォルトテーマから必要なコードをコピーしてきましょう。・doshiroutoはWordPress公式のテーマではありませんし、素人まるだしなので、こんなテーマは早く卒業しましょう。

46. ありがとうございました。 @uemera uemura

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

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

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(19)

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

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

More from Takashi Uemura

More from Takashi Uemura(20)

Recently uploaded

Recently uploaded(9)

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