Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordPressの常識をくつがえす超簡単テーマ 
doshirouto2014 
を作ったのでこれでテーマを理解しよう! 
2014.9.20 
WordBench奈良 上村崇 
@uemera 
Photo by SalFalko
最近のオレ@uemera 
uemura 兵庫県西宮市在住。 
フリーランスのシステムエンジニアです。 
現在のメインの仕事はphpによるWebサービス構築。 
WordBench神戸に参加しています。 
phpでの開発 
WordPressな...
このプレゼンでは 
WordPressのテーマのしくみを 
初心者にも分かるように解説します。 
テーマを理解すればどういうメリットがあるの? 
・自分のオリジナルテーマを作ることができます。 
・WordPressへの苦手意識が無くなります。...
2013年5月、Twenty Thirteenをベースにしたテーマ 
"doshirouto"を公開しました。
Twenty Ten 
デフォルトテーマの変遷 
2010 
Twenty Thirteenをベースに 
doshiroutoを公開 
Twenty Eleven 
Twenty Twelve 
Twenty Thirteen 
Twenty ...
doshirouto2014の啓蒙活動 
2014/3/8 
神戸 
2014/5/24 
福井 
2014/9/20 
奈良
最新バージョンWordPress4.0に同梱されているデフォルトテーマ 
Twenty Fourteen 
とぅえんてぃふぉーてぃーん
最新バージョンWordPress4.0に同梱されているデフォルトテーマ 
Twenty Fourteen 
とぅえんてぃふぉーてぃーん 
Twenty Fourteenの特徴: 
・レスポンシブデザインを採用しています。 
・Automatti...
マガジンスタイルとは 
雑誌を読んでいる感覚を、Webサイトに応用したもの。 
画像入りの記事がタイル上に並びます。
LATOフォント
しかし、バージョンアップにともなって、WordPressの 
デフォルトテーマはどんどん難しくなってきています。 
例: スタイルシートファイルへのリンクがどこに書いてあるか分からない 
テーマのヘッダ部分にあたるheader.phpには当然下...
例:ページナビ部分の<h1>を削除したくても、 
どのファイルを編集していいか分からない! 
この<h1>タグを削除したい!
Twenty Fourteenのindex.phpを見ても 
<h1>タグなんて見当たらない!
実際は 
twentyfourteen/inc/template-­‐tags.php の 
twentyfourteen_paging_nav()関数内という、 
php満載の処理内にhtmlが書いてあります。
WordPressはイノベーションのジレンマに陥ってるのかも知れません。 高機能化・複雑化が入門者の間口を狭めている可能性があります。 
ステップ数 
230000 
197500 
165000 
132500 
このままでは初心者の手に負え...
そこで 
WordPressの常識をくつがえす超簡単テーマ 
doshirouto2014 
「WordPressの常識をくつがえす」とは?
doshirouto2014の特徴(1) 
日本語しか理解できないオレたち。 
➔ 英語のサイトを開設する予定などさらさらないので、多言語化対応無し。 
WordPressユーザーにIE使ってる人なんていないよね。 
➔ 古いバージョンのIE対...
doshirouto2014の特徴(2) 
WordPressって言ったらCMSだろ! 
➔ いいえブログです。原点に戻ってください。 
デフォルトのテーマってなんであんなにファイルが多いの!? 
➔ 必要最低限のファイルだけに絞りこみました。...
doshirouto2014の外観 
Twenty Fourteenをベースに作っています。cssはほとんどイジってません。 
ファイル構成はどうなっている?➔
洗練されすぎたdoshirouto2014の世界 
TwentyFourteen 
ファイル数 62 
doshirouto2014 
ファイル数 6
そんなテーマは邪道だ! 
doshirouto2014は公式テーマに登録でき 
ませんでした。 
The zip file must include a file named 'screenshot.png'. 
ということでdoshirout...
なぜこんなにファイルを減らせるのか? 
Twenty Fourteenの現状 
デフォルトテーマTwenty Fourteenは、 
・ユーザのあらゆるニーズに対応できる利点があります。 
・WordPressが持つ機能をくまなくサポートしてい...
doshirouto2014は日本語のみ対応とし、 
初心者は使わない(使えない)機能を削ぎ落としました。 
1. 多言語化対応なし 
言語関連ファイルを削除しました。また、コードを分かりやすくするために 
テンプレートファイルに日本語を直接埋...
2. 古いバージョンのIE対応無し 
ie.css、html5.js といった互換性維持用のファイルを削除しました。 
削除 
削除
3. SEO対策無し 
コードを簡単にするため、<head>内のタイトルなどを簡略化。 
情報を削ったり、サイトタイトルを静的な固定表示のまま出すようにしました。 
<head> 
<title><?php 
wp_title( 
'|', 
...
4. カスタムヘッダー削除、カスタマイズ機能削除、おすすめコンテンツ機能削除 
これらはTwenty Fourteenが持つ拡張機能ですが、 
そんな機能はド素人には無縁なので、関連phpファイルを削除しました。 
削除 
削除 
削除
5. Webフォント削除、Genericons削除 
ttfやsvgなどフォント関連ファイルを削除しました。 
ガッツリ削除 
style.cssも編集し、フォントの呼び出しや 
アイコンフォントの呼び出しをしないように 
しました。
その結果、アイコンフォントが使えなくなります。 
Twenty Fourteen 
doshirouto2014
6. Javascriptによるアニメーション効果を省きました。 
ていうかjsファイルは全部削除しました。 
子供だましのアニメーショ 
ンは不要!
そしたら検索ボックスが出なくなった!/(^o^)\ 
Twenty Fourteen 
ムシメガネをクリックすると 
検索窓出現 
doshirouto2014 
クリックしても出ない 
でも検索窓はもうひとつあるから大丈夫!
7. 投稿フォーマットは1種類だけにしました。 
Twenty Fourteenでは、標準の投稿のほかに 
「音声」や「動画」、「引用」 
などが使えますが、doshirouto2014では標準の投稿のみとしました。 
Twenty Fourt...
投稿フォーマットとは 
テキストがメインの投稿(標準の投稿)以外に、例えば画像や動画などのメディアを投稿 
するときは別のデザインにすることができます。投稿の種類によって見せ方(=フォーマッ 
ト)を替えられます。つまり投稿フォーマットごとにデ...
Twenty Thirteenは、投稿フォーマットによっていろいろな 
外観が楽しめました。 
引用 
では、Twenty Fourteenはどうなっているでしょうか?→ 
標準 
ギャラリー 
ビデオ 
ステータスチャット
「標準」の投稿フォーマット 
Twenty Fourteen 
content.php 
デフォルトの投稿フォーマットです。 
テキストメインの記事を掲載する 
ときに使います。
Twenty Fourteen 
「アサイド」の投稿フォーマット 
content-­‐aside.php 
記事投稿ほどではないけど、 
メモのような感覚で残せるもの。 
タイトルは表示されず、本文だけの 
表示になります。
「画像」の投稿フォーマット 
Twenty Fourteen 
content-­‐image.php 
画像記事を掲載するときに使いま 
す。
「動画」の投稿フォーマット 
Twenty Fourteen 
content-­‐video.php 
YouTube等から動画ファイルを埋 
め込むことができます。 
YouTubeのURLを投稿するだけ 
で埋め込み記事になります。 
パ...
「音声」の投稿フォーマット 
Twenty Fourteen 
content-­‐audio.php 
音声ファイルを埋め込むことがで 
きます。
「引用」の投稿フォーマット 
Twenty Fourteen 
content-­‐quote.php 
外部サイトの記事を引用して掲載 
したいときに使います。 
アサイドと同様、タイトルは表示 
されません。
Twenty Fourteen 
「リンク」の投稿フォーマット 
content-­‐link.php 
リンクURLを貼ると自動的にリン 
クタグもついて掲載される… 
と思いましたが、自動的にはリン 
クされないようです。 
リンクされない...
Twenty Fourteen 
「ギャラリー」の投稿フォーマット 
content-­‐gallery.php 
複数の画像ファイルを掲載する 
ときに使います。
Twenty Fourteenは、どの投稿フォーマットも同じデザイン! 
標準 
アサイド画像 
動画音声ギャラリー
Twenty Thirteenはこんなにカラフルだったのに! 
標準 
ギャラリー 
ビデオ 
引用 
ステータスチャット
同じデザインなら1つの投稿フォーマット、 
1つのテンプレートファイルでいいじゃん? 
アサイド 
画像 
ギャラリー 
標準 
引用 
音声動画 
リンク 
投稿フォーマットは「標準」の 
1つのみにする
投稿フォーマットではないが 
「おすすめコンテンツ」 
content-­‐featured-­‐post.php 
ピックアップ画像としてページ上部 
に固定表示できます。 
タイル表示の他に、スライダーとし 
ての表示も可能です。 
これ ...
doshirouto2014では 
これらのテンプレートを1つにまとめました。 
content-***.php を1つに集約して 
index.php内に記載することで 
ファイル数を削減しました。
さらなるファイル削減: 
doshirouto2014は、メインのテンプレートは 
index.phpの一種類だけ! 
これってどういうこと? 
その秘密は「テンプレート階層」のしくみにあります。➔
記事の並べ方はいろいろあります 
カテゴリ毎表示 
(Twenty Fourteenの例) 
最新の投稿順表示 
新着順に並びます。カテゴリAの記事 
だけを表示します。 
アーカイブ表示 タグ毎表示 
2014年3月の記事 
だけ表示します。...
Twenty Fourteenでは、記事を並べる方法ごとに 
専用のテンプレートファイルがあります。 
最新投稿順ページ 
index.php 
カテゴリ毎ページcategory.php 
アーカイブ毎ページ 
タグ毎ページ 
1記事だけのペー...
それぞれのページごとに違うデザイ 
ンを見せることが出来る反面、 
テンプレートファイルの数は多くなっ 
てしまいます。 
archive.php 
category.php 
index.php 
single.php 
tag.php
doshirouto2014の記事表示テンプレートは 
index.phpだけ 
Twenty 
Fourteen 
404.php 404(not 
found)ページ 
author.php 
category.php 
image.php...
なぜindex.phpだけでも動くのか? 
WordPressの仕様では、以下のように動作します。 
カテゴリ毎ページの表示のとき、category.phpが無ければindex.phpを使います。 
年月毎(アーカイブ)ページの表示のとき、ar...
では実際に、 
doshirouto2014をインストールし 
構成を見てみましょう。 
doshirouto2014のダウンロードは 
こちらから 
http://toyao.net/doshirouto2014.zip
ダウンロードしたファイルはどこに置いたらいいの? 
doshirouto2014テーマは 
wordpress 
> 
wp-­‐content 
> 
themes 
の下に置きましょう。
管理画面でテーマを変更します。 
doshirouto2014を 
有効化
doshirouto2014が有効になりました!
doshirouto2014のファイル構成 
footer.php フッタテンプレート 
functions.php php関数の集まり(触らなくていい) 
header.php ヘッダテンプレート 
index.php メインテンプレート 
...
doshirouto2014では、1つのページを作るのに 
複数のパーツが組み合わされています。 
header.php index.php 
sidebar.php 
footer.php
この構成はTwenty Fourteenでも同じです。 
Twenty Fourteenの場合 
index.php 
header.php 
sidebar.php 
footer.php
doshirouto2014のコードを 
見てみましょう
その前に、phpの基礎知識 
WordPressはphpというプログラム言語で作られています。 
テーマを理解するにはこの言語の使い方を少し知っておく必要が 
あります。 
条件分岐 (if文) 
! 
<?php 
if( 
$a 
== 
...
繰り返し (while文) 
! 
<?php 
while( 
$a 
== 
1 
): 
?> 
繰り返し文は、新着の記事一覧のページなど、何件もの複数記事 
を1ページに表示させるときに使います。 
! 
この部分が繰り返されます。 
...
日本語コメントがいっぱいの超親切設計! 
中を簡単に解説します➔
<?php 
get_header(); 
?> 
<?php 
if 
( 
have_posts() 
) 
: 
?> 
<? 
while( 
have_posts() 
) 
: 
the_post(); 
?> 
<article ...
<html 
lang="ja"> 
<head> 
<meta 
charset="UTF-­‐8"> 
<meta 
name="viewport" 
content="width=device-­‐width"> 
<link 
rel=...
<div 
id="secondary"> 
<?php 
$description 
= 
get_bloginfo( 
'description', 
'display' 
); 
if 
( 
! 
empty 
( 
$descript...
! 
</div><!-­‐-­‐ 
#main 
-­‐-­‐> 
<footer 
id="colophon" 
class="site-­‐footer" 
role="contentinfo"> 
<div 
class="site-­...
まとめ 
・WordPressのテーマに触れたことが無い初心者の方は、まずdoshirouto2014で 
 WordPressのテーマ構造を理解し、慣れてきたらTwenty Fourteenなどデフォル 
 トテーマの中を解読してみるのがいい...
ありがとうございました。 
@uemera uemura
Upcoming SlideShare
Loading in …5
×

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

3,301 views

Published on

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

Published in: Technology
  • Be the first to comment

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

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

×