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

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

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

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

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

次期バージョンWordPress3.6に同梱される新デフォルトテーマ
TwentyThirteen
とぅえんてぃさーてぃーん
TwentyThirteenの特徴:
・レスポンシブデザインを採用しています。(パソコン、スマホ両対応)
・Webフォントの採用で、絵文字のような小さいアイコンが表示されます。
・下にスクロールするとヘッダ領域がコンパクト化され記事領域が大きくなります。
・サイドブロックがフッタ部分に移動しました。
・WordPress3.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ファイルを探したり、編集することもままならない！

WordPressはイノベーションのジレンマに陥ってるのかも知れません。
高機能化が入門者の間口を狭めている可能性があります。
このままでは初心者の手に負えないツールになってしまう！

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

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

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

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

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

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

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

通常の投稿以外に、いろいろなメディアを投稿したときに使われるフォーマット
です。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
どんなデザインなのかを順番に見ていきます➔

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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だけですべてのページ
を表示させる！

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

次に、
ページのパーツ構成を理解しましょう

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

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

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

doshiroutoテーマは
wordpress

>
wp-‐content

>
themes
に置きましょう。
ダウンロードしたファイルはどこに置いたらいいの?

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

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

doshiroutoが有効になりました！

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

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

<?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文によるループ処理
記事のタイトル
記事本文
コメントへのリンク

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

</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のフッタ処理

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

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

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

More Related Content

What's hot

Viewers also liked

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

More from Takashi Uemura

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