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

WordPressの常識をくつがえす超簡単テーマ

doshirouto2014
を作ったのでこれでテーマを理解しよう!
2014.3.8
WordBench神戸上村崇
@uemera
Photo by SalFalko

最近のオレ

@uemera
uemura

兵庫県西宮市在住。
フリーランスのシステムエンジニアです。
WordBench神戸でよく喋ってます。

勉強会など

WordPress

phpでの開発
・FuelPHP
・Linuxサーバー系もやります

このプレゼンでは
WordPressのテーマのしくみを
初心者にも分かるように解説します。

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

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

Twenty Ten

2010

デフォルトテーマの変遷

Twenty Eleven

2011

Twenty Twelve

2012

Twenty Thirteenをベースに
doshiroutoを作成

Twenty Thirteen

2013

Twenty Fourteen

2014

Twenty Fourteenをベース
にdoshirouto2014を作成

最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ

Twenty Fourteen
とぅえんてぃふぉーてぃーん

最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ

Twenty Fourteen
とぅえんてぃふぉーてぃーん

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

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

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

例：ページナビ部分の<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

WordPressの各バージョンにおける
全ソースのphpステップ数(行数)
(themeファイルを除く)

3.7

3.8

そこで
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

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

doshirouto2014は日本語のみ対応とし、
初心者は使わない(使えない)機能を削ぎ落としました。
1. 多言語化対応なし 
言語関連ファイルを削除しました。また、コードを分かりやすくするために 
テンプレートファイルに日本語を直接埋め込んでいます。

comments_popup_link(
__(
'Leave
a
comment',
'twentyfourteen'
),

__(
'1
Comment',
'twentyfourteen'
),

__(
'%
Comments',
'twentyfourteen'
)
);

日本語しか使わないので日本語を直接埋め込みました。
comments_popup_link(
'コメントをどうぞ',
'1件のコメント',
'%件のコメント'
);

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

削除

削除

3. SEO対策無し 
コードを簡単にするため、<head>内のタイトルなどを簡略化。 
情報を削ったり、サイトタイトルを静的な固定表示のまま出すようにしました。

<head>

<title><?php
wp_title(
'|',
true,
'right'
);
?></title>

</head>
wp_title()でページのタイトル名を動的に表示していたところを、 
doshirouto2014ではタイトルを固定。どんなページもこの文字列になります。

<head>

<title>ヘッダのタイトル
doshirouto2014</title>

</head>

4. カスタムヘッダー削除、カスタマイズ機能削除、おすすめコンテンツ機能削除 
これらはTwenty Fourteenが持つ拡張機能ですが、 
そんな機能はド素人には無縁なので、関連phpファイルを削除しました。 

削除

削除

削除

5. Webフォント削除、Genericons削除 
ttfとかsvgとかのファイルを削除しました。

ガッツリ削除
style.cssも編集し、フォントの呼び出しや 
アイコンフォントの呼び出しをしないように 
しました。

その結果、アイコンフォントが使えなくなります。
Twenty Fourteen

doshirouto2014

6. Javascriptによるアニメーション効果を省きました。 
ていうかjsファイルは全部削除しました。

doshirouto2014では 
優雅なアニメーションは不要！

そしたら検索ボックスが出なくなった！／(^o^)＼
Twenty Fourteen
ムシメガネをクリックすると 
検索窓出現

doshirouto2014
クリックしても出ない

でも検索窓はもうひとつあるから大丈夫！

7. 投稿フォーマットは1種類だけにしました。 
Twenty Fourteenでは、標準の投稿のほかに 
「音声」や「動画」、「引用」 
などが使えますが、doshirouto2014では標準の投稿のみとしました。

Twenty Fourteenで
は、記事を書くときに
投稿フォーマットを選
べる。

投稿フォーマットを詳しく→

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

もう少し細かく見ていきます➔

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
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だけですべてのページ

を表示させる！

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

では実際に、
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

sidebar.php
footer.php

index.php

この構成はTwenty Fourteenでも同じです。
Twenty Fourteenの場合

header.php
index.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
):
?>

!

この部分が繰り返されます。

!

<?php
endwhile;
?>

繰り返し文は、新着の記事一覧のページなど、何件もの複数記事
を1ページに表示させるときに使います。

以上をふまえて、doshirouto2014のソースコードを見てみます。→

日本語コメントがいっぱいの超親切設計！

中を簡単に解説します➔

<?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を読み込む

コメント欄を表示する

記事数分のループ

<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">

!

検索ボックス

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
-‐-‐>

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>

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

!
・doshirouto2014はWordPress公式のテーマではありませんし、素人まるだし 
なので、こんなテーマは早く卒業しましょう。

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

@uemera

uemura

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (16)

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

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

Plus de Takashi Uemura

Plus de Takashi Uemura (20)

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