WordPressのテーマを作っていこう【index.php編】

Day:2012.8.31 0:05 Comments: 4

code WordPress

さて、久々のWordPress記事です。

今回は肝心要のindex.php。

これがなければ話にならない。

昨日は油そばで今日はWordPress。

カオスですなぁ(；・∀・)ｗ

前回の記事

index.htmlとindex.php

http://www.kyoji-kuzunoha.com/

など、ブラウザのアドレス欄にドメイン名を入力すればウェブサイトにアクセスできる。

これは当たり前なんだけど、ドメイン名/ 以降に何も入力しないとindex.htmlやindex.phpに自動で接続するようになっている。

ただ省略されているだけで、必ずWebサイトを公開するサーバーにはこのファイルが絶対必要。

家の扉のような物。

扉が無きゃ入れないでしょ？

HTML文だけでウェブサイトを作る場合、扉のページにHTMLタグを打ち込みながら作っていく。

HTML文だけだと管理が煩雑

だが、HTML文でウェブサイトを作ると管理が大変。

メニューを作るのにもindex.html書き込み、abc.htmlにも書き込み・・・と、メニューバーのコードをいちいち全てのファイルに書き込まねばならない。

しかも、修正も一つ一つ直していく。

こんなやり方だと間違いやすいし、何より尋常じゃなくメンテナンスが非常に面倒くさい。

WordPressは分割管理

WordPressはこの問題を解決し、１コンテンツずつモジュール化されている。

サイドバーメニューはsidebar.php。

ヘッダーはheader.php。

フッターはfooter.php。

等々、分割管理でき、必要な時に必要なだけindex.phpに呼び出せる。

このブログで説明すると、上部メニューなどがheader.php。

sidebar.phpは右メニュー。

footer.phpはコピーライトが記述してある。

index.phpはそれらを呼び出したり記事を表示したり。

こうやって画像で表現してみるとわかりやすいかな。

ソースコードを見てみよう

画像を見て理解したところで、サンプルとしてブログ主のindex.phpに記述してあるソースコードを見てみよう。

<?php get_header(); ?>

<div class="content">
　　<p class="title">RECENT POSTS</p>
　　　　<?php if(have_posts()): while(have_posts()): the_post(); ?>
　　　　　　<?php get_template_part('content'); ?>
　　　　<?php endwhile; endif; ?>
　　<?php wp_pagenavi(); ?>
</div>

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

たったこれだけ。

とはいえ、わかりにくいので分割してみてみよう。

上の画像と照らし合わせながら見るとわかりやすい。

まず、

<?php get_header(); ?>

でheader.phpを読み込み、

<?php if(have_posts()): while(have_posts()): the_post(); ?>
　　<?php get_template_part('content'); ?>
<?php endwhile; endif; ?>

でループしながら記事を読み込み、

<?php get_sidebar(); ?>

でsidebar.phpを読み込み、

<?php get_footer(); ?>

でfooter.phpを読み込んでいる。

切り分けてみると分割管理されているのがわかるね。

ブラウザでソースを見てみよう

ブラウザでソースの表示をしてみると、ズラーッとHTML文が出てくるが、これはPHPが生成してくれている。

いちいち更新するたびにこの文を書き換えてられないけど、PHPを使うと自動でやってくれる。

上の短いソースコードがheader.phpなどを読み込み、この長いコードを生成してるというわけ。

自動化こそWordPressの真骨頂

画面に出力される文字はRECENT POSTの部分だけで、後はすべてPHPコード。

PHPがコードを読み込んで処理を行い、このブログを表示してくれている。

PHPが処理を行ってくれるおかげで、自分はただ記事を書くだけで更新すると最新記事を一番上に表示したりしてくれる、というわけ。

imotenもくじのページも、自分で書き加えるわけではなく、カテゴリに加えると勝手にもくじに追加されるようになっている。

追加で記事を書いたからと行って、いちいちHTMLコードを書き換える必要はない。

非常に管理が楽になった。

単純な作りのコード

ソースコードをぱっと見たときは、うわなにこれ？

って思うかもしれないが、分割してみるとそれほど難しくない。

見てわかるとおり、行数も少ないし非常に単純な作り。

複雑なコードはブログ主も組めないので、多分難しくならないと思うｗ

でも言い換えればそれほど難しくないコードを使ってもうちのブログ程度のものは作ることが出来る。

VPSの余った領域でブログを作ってみても面白いよ。

というわけで次回へ続く。