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

WordPressの常識をくつがえす超簡単テーマ
doshirouto2014
を作ったのでこれでテーマを理解しよう!
2014.9.20
WordBench奈良上村崇
@uemera
Photo by SalFalko

最近のオレ@uemera
uemura 兵庫県西宮市在住。
フリーランスのシステムエンジニアです。
現在のメインの仕事はphpによるWebサービス構築。
WordBench神戸に参加しています。
phpでの開発
WordPressなど
・FuelPHP
　就活マッチングサイト「OfferBox」
　ネットショップ用受発注管理アプリ
・Linuxサーバー系もやります

このプレゼンでは
WordPressのテーマのしくみを
初心者にも分かるように解説します。
テーマを理解すればどういうメリットがあるの?
・自分のオリジナルテーマを作ることができます。
・WordPressへの苦手意識が無くなります。
・phpが少し分かるようになります。
!

2013年5月、Twenty Thirteenをベースにしたテーマ
"doshirouto"を公開しました。

Twenty Ten
デフォルトテーマの変遷
2010
Twenty Thirteenをベースに
doshiroutoを公開
Twenty Eleven
Twenty Twelve
Twenty Thirteen
Twenty Fourteen
2014
2013
2012
2011
Twenty Fourteenをベース
にdoshirouto2014を公開

doshirouto2014の啓蒙活動
2014/3/8
神戸
2014/5/24
福井
2014/9/20
奈良

最新バージョンWordPress4.0に同梱されているデフォルトテーマ
Twenty Fourteen
とぅえんてぃふぉーてぃーん

最新バージョンWordPress4.0に同梱されているデフォルトテーマ
Twenty Fourteen
とぅえんてぃふぉーてぃーん
Twenty Fourteenの特徴：
・レスポンシブデザインを採用しています。
・Automattic社入江隆さんによるマガジンスタイルなデザイン
・アイコンフォントGenericonsを採用して見た目が分かりやすくなりました。
・Twenty Fourteen短冊ウィジェットで、投稿の一覧が表示できます。
・フロントページにタイル状の画像やスライダーを設置できる「おすすめコンテンツ」
・3カラムにできます。
・Lato 欧文タイプフェイスの採用

マガジンスタイルとは
雑誌を読んでいる感覚を、Webサイトに応用したもの。
画像入りの記事がタイル上に並びます。

しかし、バージョンアップにともなって、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ファイルを探せないし、編集することもままならない！

例：ページナビ部分の<h1>を削除したくても、
どのファイルを編集していいか分からない！
この<h1>タグを削除したい！

Twenty Fourteenのindex.phpを見ても
<h1>タグなんて見当たらない！

実際は
twentyfourteen/inc/template-‐tags.php の
twentyfourteen_paging_nav()関数内という、
php満載の処理内にhtmlが書いてあります。

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ファイルを除く)

そこで
WordPressの常識をくつがえす超簡単テーマ
doshirouto2014
「WordPressの常識をくつがえす」とは?

doshirouto2014の特徴(1)
日本語しか理解できないオレたち。
➔ 英語のサイトを開設する予定などさらさらないので、多言語化対応無し。
WordPressユーザーにIE使ってる人なんていないよね。
➔ 古いバージョンのIE対応なし(IE9以降はOK)。
Google先生に頼るばかりの人生でいいんですか？
➔ 競争社会とは無縁。SEOは無視。ブログは口コミで広めよう。
新しい機能なんて使いこなせない、マジ無理。
➔ カスタムヘッダー機能なんて使ってないし削除。
➔ 読めればいいので、おしゃれなWebフォントなんて必要ない必要ない。
➔ オレだけ(私だけ)が使えればいいので汎用性なし、拡張性なし。
過去はふりかえらない主義
➔ 古いバージョンのWordPressは対応せず。互換性の考慮なし。
(Version3.8以降)。

doshirouto2014の特徴(2)
WordPressって言ったらCMSだろ！
➔ いいえブログです。原点に戻ってください。
デフォルトのテーマってなんであんなにファイルが多いの！？
➔ 必要最低限のファイルだけに絞りこみました。
テーマファイルの中身って、なんであんなに記号ばっかりなの？
見ると目まいがするんだけど。
➔ 日本語のコメントをできるだけたくさん入れてコードを読みやすくしました。
　WordPress用語(テンプレートタグ)についての解説を入れました。
では実際にdoshirouto2014を見ていただきましょう。→

doshirouto2014の外観
Twenty Fourteenをベースに作っています。cssはほとんどイジってません。
ファイル構成はどうなっている？➔

洗練されすぎたdoshirouto2014の世界
TwentyFourteen
ファイル数 62
doshirouto2014
ファイル数 6

そんなテーマは邪道だ！
doshirouto2014は公式テーマに登録でき
ませんでした。
The zip file must include a file named 'screenshot.png'.
ということでdoshirouto2014はWordPress非公式テーマです／(^o^)＼

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

doshirouto2014は日本語のみ対応とし、
初心者は使わない(使えない)機能を削ぎ落としました。
1. 多言語化対応なし
言語関連ファイルを削除しました。また、コードを分かりやすくするために
テンプレートファイルに日本語を直接埋め込んでいます。
comments_popup_link(
'コメントをどうぞ',
'1件のコメント',
'%件のコメント'
);
comments_popup_link(
__(
'Leave
a
comment',
'twentyfourteen'
),
__(
'1
Comment',
'twentyfourteen'
),
__(
'%
Comments',
'twentyfourteen'
)
);
日本語しか使わないので日本語を直接埋め込みました。

2. 古いバージョンのIE対応無し
ie.css、html5.js といった互換性維持用のファイルを削除しました。
削除
削除

3. SEO対策無し
コードを簡単にするため、<head>内のタイトルなどを簡略化。
情報を削ったり、サイトタイトルを静的な固定表示のまま出すようにしました。
<head>
<title><?php
wp_title(
'|',
true,
'right'
);
?></title>
</head>
<head>
<title>ヘッダのタイトル
doshirouto2014</title>
</head>
wp_title()でページのタイトル名を動的に表示していたところを、
doshirouto2014ではタイトルを固定。どんなページもこの文字列になります。

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 Fourteenで
は、記事を書くときに
投稿フォーマットを選
べる。
投稿フォーマットを詳しく→

投稿フォーマットとは
テキストがメインの投稿(標準の投稿)以外に、例えば画像や動画などのメディアを投稿
するときは別のデザインにすることができます。投稿の種類によって見せ方(=フォーマッ
ト)を替えられます。つまり投稿フォーマットごとにデザインを変えることができます。
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からの比較

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を貼ると自動的にリン
クタグもついて掲載される…
と思いましたが、自動的にはリン
クされないようです。
リンクされないURL文字列が掲載
されます。
タイトルは表示されません。

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

Twenty Fourteenは、どの投稿フォーマットも同じデザイン！
標準
アサイド画像
動画音声ギャラリー

Twenty Thirteenはこんなにカラフルだったのに！
標準
ギャラリー
ビデオ
引用
ステータスチャット

同じデザインなら1つの投稿フォーマット、
1つのテンプレートファイルでいいじゃん？
アサイド
画像
ギャラリー
標準
引用
音声動画
リンク
投稿フォーマットは「標準」の
1つのみにする

投稿フォーマットではないが
「おすすめコンテンツ」
content-‐featured-‐post.php
ピックアップ画像としてページ上部
に固定表示できます。
タイル表示の他に、スライダーとし
ての表示も可能です。
これ
doshirouto2014ではこんなオ
シャレな機能は必要無いのでカッ
トしました。

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

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

記事の並べ方はいろいろあります
カテゴリ毎表示
(Twenty Fourteenの例)
最新の投稿順表示
新着順に並びます。カテゴリAの記事
だけを表示します。
アーカイブ表示タグ毎表示
2014年3月の記事
だけ表示します。
タグZの記事だけを
表示します。

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

それぞれのページごとに違うデザイ
ンを見せることが出来る反面、
テンプレートファイルの数は多くなっ
てしまいます。
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
page.php
search.php
single.php
tag.php
index.php
index.php
ユーザ一ページ
カテゴリーページ
添付画像ページ
固定ページ
検索結果ページ
個別投稿ページ
タグページ
ブログ投稿一覧ページ
doshirouto2014
archive.php アーカイブページ
index.phpだけですべてのページ
を表示させる！

なぜ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を使用する仕様になっています。
この優先順位を持った階層をテンプレート階層と言います。

では実際に、
doshirouto2014をインストールし
構成を見てみましょう。
doshirouto2014のダウンロードは
こちらから
http://toyao.net/doshirouto2014.zip

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

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

doshirouto2014が有効になりました！

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

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
==
1
):
?>
!
<h1>変数$aが1のときは、この部分を表示します</h1>
!
<?php
else:
?>
!
<h1>$aが1以外のときは、この部分を表示します</h1>
!
<?php
endif;
?>

繰り返し (while文)
!
<?php
while(
$a
==
1
):
?>
繰り返し文は、新着の記事一覧のページなど、何件もの複数記事
を1ページに表示させるときに使います。
!
この部分が繰り返されます。
!
<?php
endwhile;
?>
以上をふまえて、doshirouto2014のソースコードを見てみます。→

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

<?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を読み込む
記事数分のループ

<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を読み込む
ナビゲーションメニュー
検索ボックス
サイトタイトル

<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
ブログの説明
サイドバーテンプレート

!
</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のフッタ処理
フッタテンプレート

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

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from Takashi Uemura

More from Takashi Uemura (20)

Recently uploaded

Recently uploaded (15)

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