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