ゼロからつくるWordPressテーマ第4回

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

〜～インクルードタグを利利⽤用する〜～

http://hitsuji.me

⽬目次

1.  今回のポイント
2.  動作のイメージ
3.  ファイルの編集
v  作業1 （空の）ファイル作成
v  作業2 　コードのカット＆ペースト
v  作業3 　インクルードタグを記⼊入
4.  まとめ＆次回予告

ゼロからつくる WordPress テーマ #4 http://hitsuji.me 2

今回のポイント
編集前のテーマ

ü  サイトのソース(html)を出⼒力力するためのコードを、すべて
index.phpに書く。

編集後のテーマ

ü  サイトのソース(html)を出⼒力力するためのコードを、３つの
ファイルに分けて書く。

ü  index.phpは、上の３つのファイルを、インクルードタグor
ファイル読込⽤用WordPress関数で読み込む。


動作のイメージ

ソースコードを３つのファイルに分割し、index.phpに読込み

↓この３つのファイルは、

index.php
　”部品”のような働きをする
header.php

get_header(); サイト名を
インクルードタグ
表示するコード

ループ処理 content.php

get_template_part(‘content’); 投稿記事を
ファイル読込⽤用WP関数

footer.php

get_footer(); コピーライトを
インクルードタグ


ファイルを分割するメリット

部品化したファイルを、異異なるテンプレート間で共有できる。

カテゴリページ
(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は、次回説明します。


ファイルを分割するメリット

n コード修正がラク
l  全ページに関わる修正であっても、部品化し
たファイル１つを修正すればOK.

例例）フッターに記載した年年を、2012から2013に変える

→footer.phpファイル内に記載した年年１カ所を修正するのみでOK


ファイルの編集　〜～作業の流流れ〜～

1.  3つの空ファイル作成
2.  index.phpから、1で作成したファイルに
カット＆ペースト
3.  index.phpにインクルードタグを記⼊入


作業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>


作業2 index.phpからカット&ペースト
index.php header.php
<!DOCTYPE
html>

<html>

<head>

<meta
charset="<?php
?>"
/>

<title><?php
bloginfo('name');
?><?php
wp_title();
?></title>

<link
rel="stylesheet"
href="<?php
?>"
type="text/css"
/>

Cut
&
Paste <meta
content="text/html;

<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()):
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>
<!–container–>

</body>


作業3 index.phpにインクルードタグを記⼊入
index.php header.php
<!DOCTYPE
html>

<html>

<head>

<meta
charset="<?php
?>"
/>

<title><?php
bloginfo('name');
?><?php
wp_title();
?></title>

<link
rel="stylesheet"
href="<?php
?>"
type="text/css"
/>

<?php
get_header();
?> <meta
content="text/html;

<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()):
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>
<!–container–>

</body>


まとめ＆次回予告

n まとめ
l  ファイル分割することで、各ページに共通する部
分のコードを共有できる。
l  それにより、保守性がUpする。
l  分割したファイルは、インクルードタグや、
get_̲template_̲part()関数で読込むことができる。

n 次回予告
次回は、カテゴリ表⽰示や単⼀一投稿記事の表⽰示テンプレート
を作成することによって、テンプレート階層について解説
します。


Appendix

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

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


ゼロからつくるWordPressテーマ第4回

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a ゼロからつくるWordPressテーマ第4回

Semelhante a ゼロからつくるWordPressテーマ第4回 (20)

Último

Último (11)

ゼロからつくるWordPressテーマ第4回