ゼロからつくるWordPressテーマ第4回
- 1. ゼロからつくるWordPressテーマ#4 〜～インクルードタグを利利⽤用する〜～ http://hitsuji.me
- 2. ⽬目次 1. 今回のポイント 2. 動作のイメージ 3. ファイルの編集 v 作業1 （空の）ファイル作成 v 作業2 コードのカット＆ペースト v 作業3 インクルードタグを記⼊入 4. まとめ＆次回予告 ゼロからつくる WordPress テーマ #4 http://hitsuji.me 2
- 3. 今回のポイント 編集前のテーマ ü サイトのソース(html)を出⼒力力するためのコードを、すべて index.phpに書く。 編集後のテーマ ü サイトのソース(html)を出⼒力力するためのコードを、３つの ファイルに分けて書く。 ü index.phpは、上の３つのファイルを、インクルードタグor ファイル読込⽤用WordPress関数で読み込む。 ゼロからつくる WordPress テーマ #4 http://hitsuji.me 3
- 4. 動作のイメージ ソースコードを３つのファイルに分割し、index.phpに読込み ↓この３つのファイルは、 index.php ”部品”のような働きをする header.php get_header(); サイト名を インクルードタグ 表示するコード ループ処理 content.php get_template_part(‘content’); 投稿記事を ファイル読込⽤用WP関数 表示するコード footer.php get_footer(); コピーライトを インクルードタグ 表示するコード ゼロからつくる WordPress テーマ #4 http://hitsuji.me 4
- 5. ファイルを分割するメリット 部品化したファイルを、異異なるテンプレート間で共有できる。 カテゴリページ (category.php) 固定ページ (page.php) Hitsuji x Web Hitsuji x Web Home About WordPress App Blog Contact header.php Home About WordPress App Blog Contact “WordPress”の最近の投稿記事 ■Contact ■サイドバーを設置する⽅方法 このサイトの内容に関する ここでは、サイドバーを設置する⽅方法に ご質問、ご指摘などありま ついて解説します。まずは、sidebar.php したら、ここのメールアド content.php というファイルを作成します。 レスまでご連絡ください。 ■コメントフォームを設置する⽅方法 サイト訪問者とのコミュニケーション ツールとして、コメントフォームを設置 Hitsuji x Web©2012 All rights reserved. してみましょう。 footer.php ■アイキャッチ画像を利利⽤用する サイトのアクセス数をアップする⽅方法の １つに、画像ファイルを有効に活⽤用する というものがあります。 Hitsuji x Web©2012 All rights reserved. 部品化したファイルを 異異なるテンプレートから 呼び出せる。 ※お詫び：category.phpとpage.phpは、次回説明します。 ゼロからつくる WordPress テーマ #4 http://hitsuji.me 5
- 6. ファイルを分割するメリット n コード修正がラク l 全ページに関わる修正であっても、部品化し たファイル１つを修正すればOK. 例例）フッターに記載した年年を、2012から2013に変える →footer.phpファイル内に記載した年年１カ所を修正するのみでOK ゼロからつくる WordPress テーマ #4 http://hitsuji.me 6
- 7. ファイルの編集 〜～作業の流流れ〜～ 1. 3つの空ファイル作成 2. index.phpから、1で作成したファイルに カット＆ペースト 3. index.phpにインクルードタグを記⼊入 ゼロからつくる WordPress テーマ #4 http://hitsuji.me 7
- 8. 作業1. 3つの空ファイルを作成する テーマフォルダ内に、３つの空ファイルを作成する。 l header.php l content.php l footer.php テーマフォルダのファイル⼀一覧 /training-‐theme |-‐ content.php |-‐darkred_marker_12x12.png |-‐ footer.php |-‐ index.php |-‐ header.php |-‐screenshot.php |-‐style.css ゼロからつくる WordPress テーマ #4 http://hitsuji.me 8
- 9. 作業2 index.phpからカット&ペースト <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8"></head> Cut & Paste header.php <body> <div id="container"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> </div> <!–header–> <div id="contents"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> Cut & Paste content.php <?php the_content(); ?> </div> <!–post–> <?php endwhile; endif; ?> </div> <!–contents–> <div id="footer"> <?php bloginfo('name'); ?> All rights reserved. Cut & Paste footer.php </div> <!–footer–></div> <!–container–> </body> ゼロからつくる WordPress テーマ #4 http://hitsuji.me 9
- 10. 作業2 index.phpからカット&ペースト index.php header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> Cut & Paste <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8"></head> <body> <div id="container"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> </div> <!–header–> <div id="contents"> <div id="contents"> <?php if(have_posts()): … <?php if(have_posts()): while(have_posts()): the_post(); ?> content.php <div class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> Cut & Paste <?php the_content(); ?> </div> <!–post–> <?php endwhile; endif; ?> <?php endwhile; endif; ?> </div> <!–contents–> </div> <!–contents–> footer.php <div id="footer"> <?php bloginfo('name'); ?> All rights reserved. Cut & Paste </div> <!–footer–></div> <!–container–> </body> ゼロからつくる WordPress テーマ #4 http://hitsuji.me 10
- 11. 作業3 index.phpにインクルードタグを記⼊入 index.php header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <?php get_header(); ?> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8"></head> <body> <div id="container"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> </div> <!–header–> <div id="contents"> <div id="contents"> <?php if(have_posts()): … <?php if(have_posts()): while(have_posts()): the_post(); ?> content.php <div class="post"> <?php get_template_part('content'); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> </div> <!–post–> <?php endwhile; endif; ?> <?php endwhile; endif; ?> </div> <!–contents–> </div> <!–contents–> footer.php <div id="footer"> <?php bloginfo('name'); ?> All rights reserved. <?php get_footer(); ?> </div> <!–footer–></div> <!–container–> </body> ゼロからつくる WordPress テーマ #4 http://hitsuji.me 11
- 12. まとめ＆次回予告 n まとめ l ファイル分割することで、各ページに共通する部 分のコードを共有できる。 l それにより、保守性がUpする。 l 分割したファイルは、インクルードタグや、 get_̲template_̲part()関数で読込むことができる。 n 次回予告 次回は、カテゴリ表⽰示や単⼀一投稿記事の表⽰示テンプレート を作成することによって、テンプレート階層について解説 します。 ゼロからつくる WordPress テーマ #4 http://hitsuji.me 12
- 13. Appendix n WordPress公式ページの関連記事 l http://wpdocs.sourceforge.jp/インクルードタグ l http://wpdocs.sourceforge.jp/関数リファレンス/get_̲template_̲part ゼロからつくる WordPress テーマ #4 http://hitsuji.me 13