静的HTML・CSSファイルをWordPressのテーマにする方法

1. 山尾 雅也
静的HTMLファイルを
WordPressのテーマにする
ワークショップ

2. 自己紹介
山尾 雅也 （38
歳）
〜2007年
2007年〜2008年
2008年〜2011年
2014年〜現在
CAD/CAMでのマシニングオペレーター
WEB制作会社・広告代理店でコーダー
SEOマーケティング＆コーダー
マークアップエンジニア＆WEBエンジニア
大阪府吹田市生まれ
三重県桑名市育ち

3. そして初めてのスピーカーです！！
どうか優しい目でみていただけると助かります。
そしてテーマ作成の経験者の方
手助けしていただけると
すごく喜びます

4. タイムテーブル
•テーマについて説明
•ワークショップ
•まとめ
•ネクストタイム

5. テーマとは？

6. テーマとは
例えば、
デザインの着せ替え
（コンテンツの内容はそのままに
デザインだけを一瞬にして変える）

7. テーマの作成方法

8. テーマの作成方法
親テーマから子テーマ
既存のテーマをベースにカスタマイズする方法
フルスクラッチ
ゼロから作成する方法
（静的HTMLから関数を埋め込んだり、
共通部分を切り分けたりする）

9. 子テーマでの作成のメリット・デメリット
• メリット
親テーマの必要な部分はそのままに、カスタマイズできる。
ゼロからの作成の必要がないので、少ない時間で完成できる。
• デメリット
親テーマへの依存が大きくなり、学習時間がかかる。
親テーマのアップデートによっては、子テーマの再カスタマ
イズが必要になる。

10. フルスクラッチでのテーマ作成の
メリットデメリット
• メリット
デザイン、機能など細かいところまで自由にカス
タマイズできる。
• デメリット
ゼロからコードを書くため、制作に時間がかかる。
HTML・CSS・PHPの総合的な知識が必要になる。

11. 今回のワークショップでは
親テーマから子テーマ
既存のテーマをベースにカスタマイズする方法
フルスクラッチ
ゼロから作成する方法
（静的HTMLから関数を埋め込んだり、
共通部分を切り分けたりする）
こちらで作成していきます

12. テンプレート階層

14. index.php
個別投稿ページ＝ブログ記事
single-{post_type}.php single.php

15. index.php
フロントページ＝トップページ
front-page.php

16. category.php
カテゴリーページ
category-{slug}.php
index.php
category-{ID}.php
archive.php

17. index.php
アーカイブページ
archive-{post_type}.php archive.php

18. index.php
style.css
があれば動きます
（テーマとしてエラーが出ない）

19. 実際にテーマとして認識されるか操作します

20. ということで
ワークショップを開始します
関数や参考ページはスライド最後にリンクを載せています

21. まず静的HTMLのファイルを
ダウンロードしてください
https://wbn1706.mistle.org/wbn.zip
今回の内容が動作しているページは
https://wbn1706.mistle.org/
に載せています。

22. テーマ情報追加
style.css
/*
Theme Name: テーマの名前
Theme URI: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のURI
*/
１行目に追加

23. ファイルパスの変更
index.php
<link rel=“stylesheet” href=“style.css”>
<link rel=“stylesheet”
href=“<?php echo get_stylesheet_uri(); ?>”>
１行目に追加

24. ファイルパスの変更
index.php
<img src=“./img/main_image.jpg” alt=“ワークショップ…”>
<img src=“
<?php echo get_stylesheet_directory_uri(); ?>/img/
main_image.jpg” alt=“ワークショップ…”>
１行目に追加

25. サイトのタイトルと説明文の表示
index.php
<header>
<a href=“#”>
<h1><?php bloginfo(‘name’); ?>
</a>
<p><?php bloginfo(‘description’); ?></p>
</header>
(例)例えば左上にサイトのタイトルと説明文を表示

26. TOPページへのリンク
index.php
<header>
<a href=“<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<h1><?php bloginfo(‘name’); ?>
</a>
<p><?php bloginfo(‘description’); ?></p>
</header>
(例)例えば左上にサイトのタイトルと説明文を表示

27. おまじないの入力
index.php
• wp_head()………</head>の直前に記述
• wp_footer()……</body>の直前に記述
<?php wp_head(); ?>
</head>
<?php wp_footer(); ?>
</body>
</html>

28. 投稿記事を表示
index.php
<?php if (have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“blog-top”>
<h3><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<div class=“entry-meta”><?php the_time(Y年n月j日); ?></div>
<?php the_content(); ?>
<div class=“more-link”><a href=“<?php the_permalink();>”>続きを読む</a></div>
</article>
<?php endwhile; ?>
<?php endif; ?>

29. 投稿記事の抜粋を表示
index.php
<?php if (have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“blog-top”>
<h3><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<?php if ( is_front_page() ) : ?>
<?php the_excerpt(); ?>
<div class=“more-link”><a href=“<?php the_permalink();>”>続きを読む</a></div>
<?php else : ?>
<?php the_content(); ?>
<?php endif; ?>
</article>
<?php endwhile; ?>
<?php endif; ?>

30. 記事がない時のエラーメッセージを表示
index.php
<?php if (have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“blog-top”>
</article>
<php endwhile; ?>
<?php else : ?>
<p>ページが見つかりませんでした。</p>
<?php endif; ?>
・
・
・
・

31. ヘッダ・フッタ・サイドバーの分割
index.phpのヘッダ・フッタ・サイドバーの部分を分割し、
別のファイルにして、汎用性を高めましょう。
例として、次の図のように分割します。

32. ヘッダ
コンテンツ サイドバー
フッタ

33. header.php（新規作成）→index.phpからヘッダ部分を持ってくる
footer.php（新規作成）→index.phpからフッタ部分を持ってくる
sidebar.php（新規作成）→index.phpからサイドバーの部分を
持ってくる
『header.php』『footer.php』『sidebar.php』の作成
index.php
header.php・footer.php・sidebar.phpから持って行った部分に以下の内容を記述
<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>

34. 各種ページの作成
• トップページ…front-page.php
• 個別記事ページ…single.php
• 固定ページ…page.php
【参考】
・テンプレート階層について
http://wpdocs.osdn.jp/テンプレート階層
（このスライドの12〜17ページ）
・テンプレート階層の図
http://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg
index.phpを参考に、トップページ・個別記事ページ・固定ページを
作成してみましょう

35. まとめ
今回、index.htmlから関数を付け足していき、表示がどうなるのか、
ソースがどう変化するのかを見ていただきました。
関数を追加する際、真っ白な画面が出てしまう場合がありますが、
その時はHTMLソースを見て、途中まで書かれていれば、その後の関
数の間違いがある。
何も書かれていなければ、ifやwhileの文に間違いがある。
など、判別できることがありますので、落ち着いて見直してみて下
さい。（これは自分自身への言葉でもあるのですが）
本当にお疲れ様でした

36. 参考ページ
• style.cssのヘッダ名
http://wpdocs.osdn.jp/ファイルヘッダー
• get_stylesheet_uri()
http://wpdocs.osdn.jp/関数リファレンス/get_stylesheet_uri
• get_stylesheet_directory_uri()
http://wpdocs.osdn.jp/関数リファレンス/get_stylesheet_directory_uri
• bloginfo()
http://wpdocs.osdn.jp/テンプレートタグ/bloginfo
• home_url()
http://wpdocs.osdn.jp/テンプレートタグ/home_url
• esc_url()
http://wpdocs.osdn.jp/関数リファレンス/esc_url
• トップページへのリンクでhome_urlをesc_urlでエスケープしてるのかについて
https://www.l2tp.org/archives/5661
http://morilog.com/wordpress/tips/wp_escape/

37. 参考ページ
• wp_head()
http://wpdocs.osdn.jp/関数リファレンス/wp_head
• wp_footer()
http://wpdocs.osdn.jp/テンプレートタグ/wp_footer
• スライド28ページの投稿記事のループについて
http://wpdocs.osdn.jp/ループ
• the_title()
http://wpdocs.osdn.jp/テンプレートタグ/the_title
• the_content()
http://wpdocs.osdn.jp/テンプレートタグ/the_content
• the_permalink()
http://wpdocs.osdn.jp/テンプレートタグ/the_permalink
• the_time(Y年n月j日)
http://wpdocs.osdn.jp/テンプレートタグ/the_time
http://wpdocs.osdn.jp/日付と時刻の書式

38. 参考ページ
• 条件分岐タグ
http://wpdocs.osdn.jp/条件分岐タグ
• is_front_page()
http://wpdocs.osdn.jp/関数リファレンス/is_front_page
• get_header()
http://wpdocs.osdn.jp/関数リファレンス/get_header
• get_footer()
http://wpdocs.osdn.jp/関数リファレンス/get_footer
• get_sidebar()
http://wpdocs.osdn.jp/関数リファレンス/get_sidebar
各関数やタグのページ終盤に【ソースファイル】とあります。
WordPressのコアファイルのどこにあるのか載っていますので参考に