More Related Content
Similar to ゼロからつくるWord pressテーマ第5回 後編 (19)
ゼロからつくるWord pressテーマ第5回 後編
- 2. ⽬目次
前編(前回Up)
1. テーマファイル⼀一覧
2. 今回のポイント
3. テンプレートを決定する仕組み
後編
4. ファイルの編集
1. トップページ⽤用テンプレート作成
2. 個別記事ページ⽤用テンプレート作成
3. 動作確認
5. まとめ&次回予告
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 2
- 3. 4-‐‑‒1. トップページ⽤用テンプレート作成
⽬目次
1. 今回の編集ポイント
2. トップページのサイト表⽰示イメージ
3. ファイル編集⼿手順
4. home.phpの編集
5. style.phpの編集&サイト表⽰示結果
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 3
- 4. 4-‐‑‒1-‐‑‒1. 今回の編集ポイント
編集前のテーマ
ü トップページ表⽰示に、index.phpが使われる。
編集後のテーマ
ü トップページ表⽰示に、home.phpが使われる 。
ü サイト名の下に「最近の投稿記事」の⽂文⾔言を表⽰示する。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 4
- 5. 4-‐‑‒1-‐‑‒2. トップページのサイト表⽰示イメージ
トップページ表⽰示⽤用テンプレート”home.php”を作成して、
サイト名の直下に「最近の投稿記事」というタイトルを挿⼊入する
編集前
編集前
サイト名 サイト名
最近の投稿記事
記事のタイトル1 記事のタイトル1 ここに
タイトル
記事の本⽂文1 記事の本⽂文1
挿⼊入したい
記事のタイトル2 記事のタイトル2
記事の本⽂文2 記事の本⽂文2
・・・ ・・・
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 5
- 6. 4-‐‑‒1-‐‑‒3. ファイル編集⼿手順
1. index.phpをコピーして、ファイル名を
home.phpとして保存する。
2. home.phpを編集して、「最新の投稿記
事」のタイトル表⽰示コードを追加する。
3. style.cssを編集して、⼿手順2で追加した
タイトルのデザインを指定する。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 6
- 7. 4-‐‑‒1-‐‑‒4. home.phpの編集(⼿手順2)
サイト名の直下にタイトルを表⽰示したい
→headerのインクルードタグの直下にコードを挿⼊入
サイトイメージ テンプレートファイル
トップページ home.php
サイト名
<?php
get_header();
?>
最近の投稿記事
<p
class="page-‐title">
記事のタイトル1 ここに
最近の投稿記事</p>
挿⼊入
<div
id="contents">
ここに
記事の本⽂文1
<?php
if(have_posts()):
…
挿⼊入
<?php
get_template_part('content');
?>
記事のタイトル2
<?php
endwhile;
endif;
?>
記事の本⽂文2
</div>
<!–contents–>
・・・ <?php
get_footer();
?>
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 7
- 8. 4-‐‑‒1-‐‑‒5. style.cssの編集&サイト表⽰示結果(⼿手順3)
style.cssで指定したデザインに従って
タイトルが追加された!
style.css サイト表⽰示
・・・
p.page-‐title
{
font-‐size:
1.5em;
background-‐color:
darkred;
color:
#fff;
padding:
5px
0
5px
10px;
margin-‐bottom:
0;
}
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 8
- 9. 4-‐‑‒2. 個別記事⽤用テンプレート作成
⽬目次
1. 今回の編集ポイント
2. ファイル編集⼿手順
3. single.phpの編集
4. content-‐‑‒single.phpの編集
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 9
- 10. 4-‐‑‒2-‐‑‒1. 今回の編集ポイント
編集前のテーマ
ü 個別記事表⽰示に、index.phpが使われる。
編集後のテーマ
ü 個別記事表⽰示に、single.phpが使われる 。
ü 記事のタイトルのリンクが無くなる。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 10
- 11. 4-‐‑‒2-‐‑‒2. ファイル編集⼿手順
1. index.phpをコピーして、ファイル名を
single.phpとして保存する。
2. content.phpをコピーして、ファイル名
をcontent-‐‑‒single.phpとして保存する。
3. single.phpを編集して、⼿手順2で作成し
たファイルのインクルードタグを変更更す
る。
4. content-‐‑‒single.phpを編集して、リンク
を外す。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 11
- 12. 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();
?>
を読み込むように変更更する
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 12
- 13. 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>
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 13
- 14. 4-‐‑‒3. 動作確認
click!
トップページ
(home.php)
タイトルが追加された!
個別記事
(single.php)
リンクが無くなった!
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 14
- 15. 第5回後編 まとめ&次回予告
n まとめ
l home.phpを追加することで、トップページ
表⽰示のカスタマイズができる。
l single.phpを追加することで、単⼀一記事ペー
ジ表⽰示のカスタマイズができる。
l get_̲template_̲part( ʻ‘xxxʼ’ , ʼ’yyyʼ’ );の形式
で、xxx_̲yyy.phpのテンプレートパーツを読
み込むことができる。
n 次回予告
l サイドバーを追加していきます!
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 15
- 16. 補⾜足
n 個別記事ページ上のリンクについて
l 今回はリンクを削除しましたが、これはあくまでも編集⽅方針の
⼀一例例なので、このリンクを外さなければならないというもので
はありません。
n ファイル名に関して
l 以下のファイルはファイル名が決まっています。
• テンプレート階層(前編参照)に記載されているファイル
• header.php, footer.php, comments.php, sidebar.phpなど、専⽤用のイン
クルードタグが⽤用意されているテンプレートパーツファイル
l 専⽤用インクルードタグは無いが、⼀一般的に広く使われているテ
ンプレートパーツ(content.phpなど)は、混乱を避けるため
にこのままのファイル名を使うことをオススメします。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 16
- 17. 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
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 17