WordPressでオリジナルテーマ作りにチャレンジ4【index.php編】

この記事は約 6 分で読めます。

WordPressのオリジナルテーマ作りにチャレンジしています。
今回は、「index.php」の部分を作りたいと思います。

前回までに1つのhtmlを「header.php」「sidebar.php」「footer.php」分割して作ってきました。

「index.php」は他のパーツを読み込んであたかも1つのhtmlのように見せます。
また、「index.php」はコンテンツを表示する部分なので、ブログ記事を表示させなくてはなりません。

「index.php」はWordpressでサイトを作るには必ず必要なphpファイルのようなので、ここはしっかり頭に入れておかなくちゃ！と思っています。

そんなワケで、ここはしっかりメモです♪

「sidebar.php」の作成は次回する予定です。

オリジナルテーマの制作の流れ。

1. html+cssで作ったサイトをWordpressへアップする
2. html+cssをWordpressへアップしたものをパーツテンプレートへ切り分ける
3. header・footerを作成
4. index.phpで各ページのベースを作成　←今回はココ。
5. sidebar.phpでサイドバーを作成
6. single.phpで記事の個別ページを作成
7. page.phpで固定ページを作成
8. トップページを作ってみる

 

今回は「index.php」がトップページとして作り、一通り作った後でトップページを別に作っていく予定です。

「index.php」は動的なファイルでいろんな役割を果たしているようなので、詳しいファイルの階層(テンプレート階層)は、「WordPress日本語Codex」を参考にしたいと思います。

ひとまず、今回の「index.php」イメージは・・・他のパーツを読み込みつつ、ブログ投稿記事を一定条件で表示するということです。

 

作業1　他のパーツテンプレートを読み込む

まず、「index.php」のコードもまず簡単な他のパーツを読み込むところから書いてみました。

「index.php」の1行目

<?php get_header() ;?>

「index.php」の1番最後の行

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

作業2　ブログ投稿記事が表示される部分に以下のコードを書く

 <?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>
　　<!-- 記事がある限り繰り返す 記事の表示などの処理　-->
  <?php endwhile; ?>
　　<!-- 繰り返しの処理が終わったらする処理 -->
<?php else : ?>
　　<!-- 記事がなかった場合の処理 -->
<?php endif; ?>

 

作業3　作業2のコード中の繰り返し処理内容を加えていく

ここは、コンテンツ部分(ブログ記事など)をどんな風に表示したいかで、書く内容が多少変わるかもしれません。

記事タイトルを表示する(記事に記事のURLをリンクする場合)

<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php the_title(); ?>
</a>

投稿日付、記事のカテゴリ、タグを表示する場合

<ul>
　　 <li class="cal"><?php the_time('Y年m月d日') ?></li>
	<li class="cat"><?php the_category(', ') ?></li>
	<li class="tag"><?php the_tags('', ', '); ?></li>
　　</ul>

コンテンツを表示する(「続きを読む」も表示する)

<?php the_content('続きを読む'); ?>

 

作業4　作業2のコード中の繰り返処理が終わったらの内容を加えていく

ここも、コンテンツ部分(ブログ記事など)をどんな風に表示したいかで、書く内容が多少変わるかもしれません。

次の記事(古い記事と新しい記事)へのリンクを表示する

<span><?php next_posts_link('古い記事へ') ?></span>
<span><?php previous_posts_link('新しい記事へ') ?></span>

 

作業5　作業2のコード中の記事がなかったらの内容を加えていく

ここは、コンテンツ部分(ブログ記事など)をどんな風に表示したいかで、もしかしたら必要がないかもしれません。

<h2 class="title">お探しのページが見つかりません。</h2>
<p>検索で見つかるかもしれません。</p><br />
<?php get_search_form(); ?>

 

作業6　保存してブラウザで表示確認。

ここまでで、思った通りに記事が連続して表示出来ていればOKです♪
 
phpやWordpressのテンプレートタグの間にhtmlのコードが入るのが、何となく慣れるまで変な感じです。
でも、うまく表示されてくると・・・Wordpressが面白くなってきました！！
 
あと一息です！
「sidebar.php」がうまく出来たら、ブログ全体がだいたい表示される状態になります。
それとメニューバーもメモが出来てなかったので、これも後日書いてみたいと思います。