ゼロからつくるWord pressテーマ第5回後編

ゼロからつくるWordPressテーマ#5

テンプレート階層を理理解する（後編）

http://hitsuji.me

⽬目次

前編（前回Up）
1.  テーマファイル⼀一覧
2.  今回のポイント
3.  テンプレートを決定する仕組み
後編
4.  ファイルの編集
1.  トップページ⽤用テンプレート作成
2.  個別記事ページ⽤用テンプレート作成
3.  動作確認
5.  まとめ＆次回予告
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 2

4-‐‑‒1. トップページ⽤用テンプレート作成

⽬目次

1.  今回の編集ポイント
2.  トップページのサイト表⽰示イメージ
3.  ファイル編集⼿手順
4.  home.phpの編集
5.  style.phpの編集＆サイト表⽰示結果


4-‐‑‒1-‐‑‒1. 今回の編集ポイント
編集前のテーマ

ü トップページ表⽰示に、index.phpが使われる。

編集後のテーマ

ü トップページ表⽰示に、home.phpが使われる。

ü サイト名の下に「最近の投稿記事」の⽂文⾔言を表⽰示する。


4-‐‑‒1-‐‑‒2. トップページのサイト表⽰示イメージ
トップページ表⽰示⽤用テンプレート”home.php”を作成して、

サイト名の直下に「最近の投稿記事」というタイトルを挿⼊入する

編集前
編集前

サイト名サイト名
最近の投稿記事

記事のタイトル１記事のタイトル１ここに

タイトル

記事の本⽂文１記事の本⽂文１
挿⼊入したい

記事のタイトル２記事のタイトル２

記事の本⽂文２記事の本⽂文２

・・・・・・


4-‐‑‒1-‐‑‒3. ファイル編集⼿手順

1.  index.phpをコピーして、ファイル名を
home.phpとして保存する。
2.  home.phpを編集して、「最新の投稿記
事」のタイトル表⽰示コードを追加する。
3.  style.cssを編集して、⼿手順2で追加した
タイトルのデザインを指定する。


4-‐‑‒1-‐‑‒4. home.phpの編集（⼿手順2）
サイト名の直下にタイトルを表⽰示したい

→headerのインクルードタグの直下にコードを挿⼊入

サイトイメージテンプレートファイル
トップページ home.php
サイト名
<?php
get_header();
?>
最近の投稿記事
<p
class="page-‐title">

記事のタイトル１ここに
最近の投稿記事</p>
挿⼊入

<div
id="contents">
ここに

記事の本⽂文１

<?php
if(have_posts()):
…

挿⼊入
<?php
get_template_part('content');
?>
記事のタイトル２

<?php
endwhile;
endif;
?>

記事の本⽂文２

</div>
<!–contents–>

・・・ <?php
get_footer();
?>


4-‐‑‒1-‐‑‒5. style.cssの編集＆サイト表⽰示結果（⼿手順3）

style.cssで指定したデザインに従って

タイトルが追加された！

style.css サイト表⽰示

・・・

p.page-‐title
{

font-‐size:
1.5em;

background-‐color:
darkred;

color:
#ﬀf;

padding:
5px
0
5px
10px;

margin-‐bottom:
0;

}


4-‐‑‒2. 個別記事⽤用テンプレート作成

⽬目次

1.  今回の編集ポイント
2.  ファイル編集⼿手順
3.  single.phpの編集
4.  content-‐‑‒single.phpの編集


4-‐‑‒2-‐‑‒1. 今回の編集ポイント
編集前のテーマ

ü 個別記事表⽰示に、index.phpが使われる。

編集後のテーマ

ü 個別記事表⽰示に、single.phpが使われる。

ü 記事のタイトルのリンクが無くなる。


4-‐‑‒2-‐‑‒2. ファイル編集⼿手順

1.  index.phpをコピーして、ファイル名を
single.phpとして保存する。
2.  content.phpをコピーして、ファイル名
をcontent-‐‑‒single.phpとして保存する。
3.  single.phpを編集して、⼿手順2で作成し
たファイルのインクルードタグを変更更す
る。
4.  content-‐‑‒single.phpを編集して、リンク
を外す。


4-‐‑‒2-‐‑‒3. single.phpの編集（⼿手順3）
●インクルードタグの書き⽅方

テンプレートパーツ

インクルードタグ
ファイル名
get_template_part(
‘xxx’
,
’yyy’
); 読み込む “xxx_yyy.php”

●single.php

<?php
get_header();
?>

<div
id="contents">

<?php
if(have_posts()):
…

<?php
get_template_part('content’,’single’);
?>

<?php
endwhile;
endif;
?>
このインクルードタグを

</div>
<!–contents–>

content_single.php

<?php
get_footer();
?>
を読み込むように変更更する


4-‐‑‒2-‐‑‒4.content-‐‑‒single.phpの編集（⼿手順4）

リンクに関するコードを削除する

content.php
<div
class="post”>

<h2><a
href="<?php
the_permalink();
?>”><?php
the_title();
?></a></h2>

<?php
the_content();
?>

</div>

content-‐single.php
<div
class="post”>

<h2><?php
the_title();
?></h2>

<?php
the_content();
?>

</div>


4-‐‑‒3. 動作確認

click!
トップページ
(home.php)

タイトルが追加された！
個別記事
(single.php)

リンクが無くなった！


第5回後編まとめ＆次回予告

n まとめ
l  home.phpを追加することで、トップページ
表⽰示のカスタマイズができる。
l  single.phpを追加することで、単⼀一記事ペー
ジ表⽰示のカスタマイズができる。
l  get_̲template_̲part( ʻ‘xxxʼ’ , ʼ’yyyʼ’ );の形式
で、xxx_̲yyy.phpのテンプレートパーツを読
み込むことができる。

n 次回予告
l  サイドバーを追加していきます！


補⾜足

n  個別記事ページ上のリンクについて
l  今回はリンクを削除しましたが、これはあくまでも編集⽅方針の
⼀一例例なので、このリンクを外さなければならないというもので
はありません。

n  ファイル名に関して
l  以下のファイルはファイル名が決まっています。
•  テンプレート階層（前編参照）に記載されているファイル
•  header.php, footer.php, comments.php, sidebar.phpなど、専⽤用のイン
クルードタグが⽤用意されているテンプレートパーツファイル

l  専⽤用インクルードタグは無いが、⼀一般的に広く使われているテ
ンプレートパーツ（content.phpなど）は、混乱を避けるため
にこのままのファイル名を使うことをオススメします。


Appendix

n  WordPress公式ページの関連記事

l  http://wpdocs.sourceforge.jp/テンプレート階層
l  http://wpdocs.sourceforge.jp/インクルードタグ
l  http://wpdocs.sourceforge.jp/関数リファレンス/get_̲template_̲part

n  編集後のテンプレート DL link

l  http://wordpress.hitsuji.me/wp-content/uploads/Training_5.zip


ゼロからつくるWord pressテーマ第5回 後編

More Related Content

What's hot

Similar to ゼロからつくるWord pressテーマ第5回 後編