WordPressに標準添付されているテーマや公開されているテーマを使うのも良いですが、WordPressの醍醐味はいろいろカスタマイズできること。世界に一つだけの自分だけのオリジナルサイトを作りたいですよね。またはお仕事でWordPressのサイト制作を任されることもあるかも知れません。 自分好みにカスタマイズしたい、でもどうすればいいか分からない、という方向けに、デフォルトテーマTwentyFourteenからのカスタマイズに必要な知識や事例を紹介します。 ・見た目の色とかフォントサイズの変更 ・トップページだけレイアウトを変えたい ・サイドバーをもっと自在に操る ・コメント欄をカスタマイズするには？

1. @uemera
2014.7.6
WordBench神戸 上村崇
WordPressでオリジナルサイトを作るための
最初の一歩的なカスタマイズテクニック
Photo by SalFalkoUsed with permission from Microsoft.

2. 最近のオレ @uemera
uemura兵庫県西宮市在住。
フリーランスのシステムエンジニアです。
WordBench神戸でよく喋ってます。
就活支援サイト
"OfferBox"
の開発(FuelPHP)
WordPress案件の手伝い
勉強会など
VPS構築とかインフラもやります。
ネットショップ支援
(FuelPHP、ExcelVBA)

3. このスライドでは、
WordPressデフォルトテーマTwentyFourteenを例にとって、
自分好みにカスタマイズしたい、でもどうすればいいか分からない、
という方のために、
自分の力で改造できるようになるための足がかり的なテクニックを
ご紹介します。

4. WordPressに標準添付されている
デフォルトのテーマ "Twenty Fourteen"
!
WordPress最新版 Version3.9.1
デフォルトテーマは
他に
Twenty Thirteen (2013)
Twenty Twelve (2012)
があります。
!
ここでは最新機能が盛り込まれた
Twenty Fourteen
を使います。

5. Twenty Fourteenを改造してこんな風にしてみます。
そのやり方を紹介します。
・トップページだけ専用レイアウトにする。
・最近の投稿、お知らせを
5件ダイジェスト表示。
・サイドバーの表示位置を変更。
・cssで色を変えたり。
文字の大きさを変えたり。
・コメント記入欄をカスタマイズ

6. wordpress
>
wp-­‐content
>
themes
>
twentyfourteen
!
にあります。
!
Twenty Thirteen, Twenty Twelveも
同じ場所にあります。
!
新しいテーマを作る場合も、themesディレクト
リの下にディレクトリを作成することになってい
ます。
!
今回はTwentyFourteenをディレクトリごとコピー
して別のテーマ名をつけてから改造します。
テーマ用のファイルってどこにあるの?

7. テーマファイルを自分好みに改造するということは、
この中のファイルを改造するということ。
!
たくさんファイルがありますが、改造する必要があ
るファイルはそんなに多くはありません。
(数ファイルくらい)
Twenty Fourteenを構成する
ファイルの数は60くらいあります。

8. テーマファイルを直接編集しなくても、
管理画面上で、ある程度はテーマをカスタマイズできます。
徳本さんのプレゼン資料参照
http://www.slideshare.net/tokumotonahoko/wck2014
http://wck2014sample.wordpress.com/
(ただし、wordpress.com

9. 管理画面からテーマをカスタマイズする方法。
管理画面 > 外観 > カスタマイズ でカスタマイズ用のバーが出てきます。
できること：
・サイトタイトルの変更
・ヘッダー画像の設定・表示
・サイドバーの表示/非表示
など
(背景色の変更はできません)
ここでカスタマイズできます

10. しかし、管理画面から設定変更できることには限界があります。
自分好みのデザインやレイアウトにするためには、
テーマファイルを自分で変更できる力が必要になります。

11. ・見た目の色とかフォントサイズの変更
・トップページだけレイアウトを変えたい
・サイドバーをもっと自在に操る
・コメント欄をカスタマイズするには？
今回紹介するカスタマイズポイント お題目

12. 見た目の色とかフォントサイズの変更

13. サイドバーの位置を変えるには？
まずサイドバーの位置を変えてみます
.content-­‐area
{
width:
100%;
}
!
#secondary
{
background-­‐color:
transparent;
float:
left;
}
!
.site-­‐content,
.site-­‐main
.widecolumn
{
margin-­‐left:
222px;
}
.content-­‐area
{
width:
70%;
}
!
#secondary
{
background-­‐color:
#000;
float:
right;
}
!
.site-­‐content,
.site-­‐main
.widecolumn
{
margin-­‐left:
100px;
}
cssファイルの変更だけで出来ます。style.cssを改造してください。

14. <div
id="site-­‐header">
<a
href="<?php
echo
esc_url(
home_url(
'/'
)
);
?>"
rel="home">
<img
src="<?php
header_image();
?>">
</a>
</div>
<header
id="masthead"
class="site-­‐header"
role="banner">
<div
class="header-­‐main">
<h1
class="site-­‐title">
<a
href="<?php
echo
esc_url(
home_url(
'/'
)
);
?>"
rel="home">
<?php
bloginfo(
'name'
);
?>
</a>
</h1>
</div>
</header>
色を変えたり、フォントの大きさを変えたりするのもCSSでできます。
ただしサイトタイトルは場所を移動させ
たりしました。
cssで背景色と
フォントを変更
(ヘッダ画像は
管理画面で
追加しました)
header.php

15. 見た目の色とか、
フォントサイズの変更とか、
サイドバーの位置も変更できるので、
これくらいまではほとんどcssを触るだけでなんとかなります。

16. トップページだけレイアウトを変えたい

17. TwentyFourteen
トップページ専用のページはありません。
!
トップページも、投稿ページと同じく最新
の記事を10件表示しています。
トップページ 投稿ページ
トップページだけレイアウトを変えるには、
専用のテンプレートファイルを作ります。
index.php
index.php
トップページ 投稿ページ
専用の
テンプレートファイル
index.php

18. デフォルトの状態では、
トップページに使われているテンプレートはindex.php
Display Template Name というプラグインを
使うと、今使われているテンプレート名が分かるので
便利です。
index.php
その前に、テーマファイルの基礎知識をおさえましょう

19. 例えば、index.phpは
中で複数のファイルを
呼び出しています。
header.php
footer.php
sidebar.php
content.php
footer.php
sidebar.php
content.php
header.php テンプレートファイルは
さらにパーツごとのファイルで
構成されています。
テーマファイルの構造について詳しく

20. <?php
get_header();
?>
<div
id="main-­‐content"
class="main-­‐content">
<?php
if
(
is_front_page()
&&
twentyfourteen_has_featured_posts()
)
{
get_template_part(
'featured-­‐content'
);
}
?>
<div
id="primary"
class="content-­‐area">
<div
id="content"
class="site-­‐content"
role="main">
<?php
if
(
have_posts()
)
:
while
(
have_posts()
)
:
the_post();
get_template_part(
'content',
get_post_format()
);
endwhile;
twentyfourteen_paging_nav();
else
:
get_template_part(
'content',
'none'
);
endif;
?>
</div>
</div>
<?php
get_sidebar(
'content'
);
?>
</div>
<?php
get_sidebar();
get_footer();
index.phpの中身
get_header()などのテンプレートタグの中で
子ファイルを呼び出しています。
どのテンプレートタグがどのファイルを呼び出してい
るか把握しておいた方が良いでしょう。
header.phpを呼び出す
content.phpを呼び出す
sidebar.phpを呼び出す
footer.phpを呼び出す
index.php

21. トップページ専用のテンプレートファイルを作ります。
index.php トップページだけでなく、どのページにも使われる
ことがあります。
home.php
トップページだけでなく、他のページにも使われる
ことがあります。
(投稿ページにも使われることがあります)
front-­‐page.php トップページにしか使われません。
index.php
home.php
front-­‐page.php
トップページだけ別の
テンプレートを使いたい場合は、
front-­‐page.php
を使えばいいです。
トップページ
投稿ページ固定ページ
アーカイブページ
カテゴリーページ
トップページになりうるテンプレートファイルの種類

22. front-­‐page.php
COPY
index.php
front-­‐page.php
ゼロからテンプレートファイルを作るのは大変なので、index.phpをコピーして
front-page.phpを作ります。そして部分的に改造していきます。

23. front-page.phpでは、ヘッダーやフッター、サイドバーはそのままで、
コンテンツ領域だけ変えていくことを考えれば良いです。
コンテンツ領域

24. front-page.phpの中身。
記事コンテンツを表示している部分を改造します。
front-­‐page.php
記事コンテンツを
表示している部分

25. 準備として、記事を先に作ります
スラッグ名：information
スラッグ名：blog
お知らせ5 先着100名様にプレゼント
お知らせ4 営業時間変更
お知らせ3 一部報道について
お知らせ2 臨時休業のお知らせ
お知らせ1 新製品入荷
カテゴリー名：お知らせ
ワニに襲われたのに眠りこけていた人
簡易トイレにジェットエンジンをつけた男
火葬の最中本人から電話がかかる
議会、草刈機の代わりに羊を導入
銀行の手数料が嫌で川を渡る→遭難
カテゴリー名：ブログ
「お知らせ」はinformation、「ブログ」はblogというスラッグでカテゴリを作り、
記事を5件ずつ作っておきます。
スラッグとは：カテゴリを区別するための英字文字列です。重複しないように個別の名前を
つけます。

26. カテゴリーは管理画面「投稿」の下の「カテゴリー」で作れます。
ここでカテゴリ名とスラッグを登録します。
準備ができたのでいよいよテンプレートファイルを触っていきます。→

27. 「お知らせ」カテゴリの記事を
新しい順に５件表示
記事タイトル
記事の抜粋
これは単なる画像
これは単なる画像
「ブログ」カテゴリの記事を
新しい順に５件表示
記事タイトル
記事の抜粋
ではどうやって作る?
ソースコードを見てみましょう →
トップページでやりたいこと

28. <?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
記事データを取ってくることができるテンプレートタグ
get_posts()
記事データを取ってきて$mypostsに入れている
どんな条件の記事を取ってく
るか？を指定している部分。
パラメータと言います。}}
まず、記事を5件取ってくることを考えます。

29. get_postsの解説はWordPress Codexで！
http://wpdocs.sourceforge.jp/テンプレートタグ/get_posts
Codexにあるサンプルコードをうまく利用すると
phpに詳しくなくても大丈夫！

30. <?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
get_posts()のパラメータはいろいろ指定できます。
詳しくはCodexの
http://wpdocs.sourceforge.jp/Class_Reference/WP_Query
に、どんなパラメータが指定できるかの情報が載っています。
1ページに表示する件数：5件
カテゴリーのスラッグ名:information

31. <?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
get_postsでデータを取ってきたあとは、
そのデータを表示します。
記事へのリンクURL
取ってきた5件の記事を繰り返し処理して
１件ずつタイトルと抜粋を表示します。
記事のタイトル
記事の抜粋
さらに：
the_excerpt()は記事本文の先頭55文字を抜粋してくれるけど、長すぎるの
でもっと短くしたい。どうすればいいの?

32. function
custom_excerpt_length(
$length
)
{
return
40;
}
add_filter(
'excerpt_length',
'custom_excerpt_length',
999
);
the_excerpt()は記事の抜粋を表示するテンプレートタグ
ですが、抜粋する文章の長さを変えることができます。
詳しくは以下参照
http://wpdocs.sourceforge.jp/テンプレートタグ/the_excerpt
デフォルトでは、抜粋の長さは55文字ですが、40文
字に変更しています。
テーマファイルの下にある

33. 作ったコードをfront-page.phpに組み込みます
<div
class="informationarea">
<h2>お知らせ</h2>
<img
src="<?php
echo
get_template_directory_uri();
?>/images/information.jpg"
/>
<div
class="titlelist">
<?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'information',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
<div
class="recentblogarea">
<h2>最近の投稿</h2>
<div
class="titlelist">
<?php
$args
=
array(
'posts_per_page'
=>
5,
'category_name'
=>
'blog',
);
$myposts
=
get_posts(
$args
);
foreach(
$myposts
as
$post
)
:
setup_postdata(
$post
);
?>
<h3>
<a
href="<?php
the_permalink();
?>"><?php
the_title();
?></a>
</h3>
<?php
the_excerpt()
?>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
<img
src="<?php
echo
get_template_directory_uri();
?>/images/recentblog.jpg"
/>
</div>
</div>
「お知らせ」最新５件表示
「最近の投稿」５件表示

34. トップページが出来ました
あれ？これは？

35. サイドバーを自在にあやつる

36. サイドバーのデフォルト位置はこうなっています。
テンプレートファイルを改造すれば、
サイドバーを表示する位置も自由に変えられます。
フッターウィジェットエリア
コンテンツサイドバー
メインサイドバー

37. 管理画面の
外観 > ウィジェット と連動しています。
利用できるサイドバーの数は３つです。

38. サイドバーとテンプレートタグの対応表
名 前 テンプレートタグ 実体のphpファイル
メインサイドバー get_sidebar() sidebar.php
コンテンツサイドバー get_sidebar('content') sidebar-­‐content.php
フッターウィジェットエリア get_sidebar('footer') sidebar-­‐footer.php
これ以外にサイドバーの数を増やすことも出来ます。
ただし、get_sidebar('xxxxx') の'xxxxx'とファイルを新しく作っただけでは、
管理画面で使うことはできません。
functions.phpの中で、phpコードを書いてサイドバーの定義を行う必要があります。
(やや高度な知識が必要なため、説明は割愛します)

39. コンテンツサイドバーの位置を変更してみます。
この位置変更はcssを編集するだけではできなかったので、
front-page.php内に書かれているコンテンツサイドバー表示のコード
<?php
get_sidebar(
'content'
);
?>
の記述している場所を移動しました。
コンテンツサイドバー

40. さらに：管理画面のウィジェット表示が実態にそぐわなくなったので、
表現を変更してみましょう。
register_sidebar(
array(
'name'
=>
__('Content
Sidebar',
'twentyfourteen'),
'id'
=>
'sidebar-­‐2',
'description'
=>
__('Additional
sidebar
that
appears
on
the
right.',
…
'before_widget'
=>
'<aside
id="%1$s"
class="widget
%2$s">',
'after_widget'
=>
'</aside>',
'before_title'
=>
'<h1
class="widget-­‐title">',
'after_title'
=>
'</h1>',
)
);
コンテンツサイドバー
の名前や説明は、
functions.php内のregister_sidebar()
で設定しています。
ここを変更すれば管理画面のウィジェット表示が変わります。
名前とか説明の文章が実態に合わない！

41. register_sidebar(
array(
'name'
=>
'コンテンツエリア下サイドバー',
'id'
=>
'sidebar-­‐2',
'description'
=>
'ドヤ顔サイドバー',
'before_widget'
=>
'<aside
id="%1$s"
class="widget
%2$s">',
'after_widget'
=>
'</aside>',
'before_title'
=>
'<h1
class="widget-­‐title">',
'after_title'
=>
'</h1>',
)
);
例えばこのように変えると、
管理画面の表現も変わります。
表記が変わった！
サイドバーは必ずしもサイドに配置する必要はありません。
ウィジェットを簡単に追加削除できる便利な箱として利用しましょう。

42. コメント欄を変えてみる

43. コメント記入欄のカスタマイズ
いままでの例と同じように、「フォントの大きさ」「背景色」などはcss
で調整できます。テキストエリアの大きさもcssで変えられます。
でも、
文字列を変えたい場合は？

44. 「コメントを残す」を「こめんとを残してちょ！」に変更する方法

45. コメントブロック表示を担当しているテンプレートファイルはどこ？
index.php
content.php
index.phpやcontent.phpにはコメントブロックを表示してそうな箇所は見
つからない。ではどこに？

46. テンプレートファイルから探すアプローチは諦めて、
HTMLコードから探します。
コメントブロック周辺にある、
comments-­‐area
comment-­‐respond
comment-­‐reply-­‐title
といった検索しやすい特徴的な名前のクラス名を拾います。

47. grep検索すると、"comments-area"というキーワードがcomments.php
に存在することが分かります。
grep検索(グローバル検索)できるエディタを使いましょう。
!
!
!
!
Windows Mac
サクラエディタ
秀丸
Sublime Text2 など
TextWrangler
mi
Sublime Text2
Coda2 など

48. comments.phpをじっくり見ると、"comment_form()"っていう、
それっぽい関数が！
!
!
の部分がコメント記入ブロックを担当している！
試しに確認のため、この部分を削除してブラウザで
表示してみると、コメントフォームが消えるので分か
ります。
となれば、もう
comment_form()の中身を覗いてみるしかない！
このへんの探し方は知識よりも勘や想像力が勝負！
<?php
comment_form();
?>

49. comment_form関数がコメント欄を担当していることは分かりました。
では次に、wp-include/comment-template.php
のcomment_form関数の中に入って、がまん強くソースを見てみます。
<h3
id="reply-­‐title"
class="comment-­‐reply-­‐title">
<?php
comment_form_title(
$args['title_reply'],
$args['title_reply_to']
);
?>
<small><?php
cancel_comment_reply_link(
$args['cancel_reply_link']
);
?></small>
</h3>
comment-­‐reply-­‐title発見！
さきほどブラウザのインスペクタで調べた時には
このクラスの中に「コメントを残す」文字列が表示されていた
のでした。

50. したがって、
wp-include/comment-template.php
のcomment_form関数(2112行目)を以下のように変えれば良い！
<h3
id="reply-­‐title"
class="comment-­‐reply-­‐title">
<?php
comment_form_title(
$args['title_reply'],
$args['title_reply_to']
);
?>
<small><?php
cancel_comment_reply_link(
$args['cancel_reply_link']
);
?></small>
</h3>
<h3
id="reply-­‐title"
class="comment-­‐reply-­‐title">
コメントを残してちょ!
<small><?php
cancel_comment_reply_link(
$args['cancel_reply_link']
);
?></small>
</h3>
これで望み通りの結果を得ることができます。

51. しかし、
wp-include/comment-template.php
はテーマディレクトリの下にあるファイルではなく、
WordPress本体に含まれるファイルです。
WordPressをバージョンアップしたらこのファイルが上書きされて変更
した箇所も元にもどってしまうし、コアファイルをいじったらいろいろ
とまずい！
(こういう魔改造に手を染めるとクセになるのでやめましょう)
もっとスマートなやりかたがあります。

52. がまん強くソースコードを読む練習
まずターゲットを探します。ターゲットが見つかったら上に遡る！
<h3
id="reply-­‐title"
class="comment-­‐reply-­‐title">
<?php
comment_form_title(
$args['title_reply'],
$args['title_reply_to']
);
?>
<small><?php
cancel_comment_reply_link(
$args['cancel_reply_link']
);
?></small>
</h3>
/**
*
Filter
the
comment
form
default
arguments.
*
Use
'comment_form_default_fields'
to
filter
the
comment
fields.
*
@param
array
$defaults
The
default
comment
form
arguments.
*/
$args
=
wp_parse_args(
$args,
apply_filters(
'comment_form_defaults',
$defaults
)
);
$defaults
=
array(
'fields'
=>
$fields,
'id_form'
=>
'commentform',
'id_submit'
=>
'submit',
'title_reply'
=>
__(
'Leave
a
Reply'
),
'title_reply_to'
=>
__(
'Leave
a
Reply
to
%s'
),
'cancel_reply_link'
=>
__(
'Cancel
reply'
),
'label_submit'
=>
__(
'Post
Comment'
),
'format'
=>
'xhtml',
);
function
comment_form(
$args
=
array(),
$post_id
=
null
)
{
__(
'Leave
a
Reply'
)
が"コメントを残す"の実体。
__()
関数によって、英語が日本語に変換されている。
comment_form関数は$argsを引数にとる。
関数の外から$argsを指定することができる！
ここがターゲット
上へ
$argsが無いときは$default
の設定を使うっぽい(想像)
上へ

53. 模範解答：
WordPressのコアファイルwp-include/comment-template.php
に手を入れるのではなく、
テーマファイルの中にある"comments.php" を改造します。
<?php
comment_form();
?>
<?php
$args
=
array(
'title_reply'
=>
'こめんとを残してちょ！'
);
comment_form($args);
?>
コメントのタイトルである、$args['title_reply']を
関数の外から指定してあげれば良い！
こうすることで、WordPressコアファイルに触れず、
テーマファイルだけで変更ができます。

54. 実はCodexにも書いてあります。(一部英語だけど)
http://wpdocs.sourceforge.jp/テンプレートタグ/comment_form
勘がするどい人は、ソースコードを解析する前に、
Codexに情報が載っていることに気づくかも！(これも勘と想像力の世界)

55. まとめ
・CSSの変更だけでも見た目は結構変わります。
・エディタ内で検索を駆使すれば解決へのヒントが導かれます。
・ソースを読む勇気があればいろいろ ります。
・勘と想像力を働かせよう！
・関数名やファイル名を覚えるのではなく、
探し方やアプローチのしかたを身に付ければ応用が効きます。

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