Webの記録

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」がうまく出来たら、ブログ全体がだいたい表示される状態になります。
それとメニューバーもメモが出来てなかったので、これも後日書いてみたいと思います。

-Webの記録
-, ,

執筆者:


  1. どらごん より:

    私もWordPressのテーマ作りに挑戦しているので参考になります!
    ぜひ、連載としてページをまとめてほしいです。

    • Motoshige より:

      どらごんさん、はじめまして!
      コメントありがとうございます!!

      >私もWordPressのテーマ作りに挑戦しているので参考になります!
      >ぜひ、連載としてページをまとめてほしいです。
      Wordpressのテーマ作りされているのですね。
      私もまだまだWordpressは手探りでいじってるところですが、こういうコメント頂けると励みになります♪

      実は、毎回メモ書きで書いていて・・・まとめなくちゃ!と思っている部分でした。
      過去記事も少し手をいれます。
      あとテーマ作りに関する全部の記事を、まとめた記事も作る予定です。
      しばらくお待ちくださいね。

      【追記。】
      http://motoshige.net/archives/2289
      WordPress はじめてのオリジナルテーマ作り。【まとめ】で、オリジナルテーマ作りをまとめました。
      これからもいろいろと私なりにWordpressのオリジナルテーマを研究して、ちょこちょこアップしていく予定です。

  2. 名無し より:

    「作業2 ブログ投稿記事が表示される部分に以下のコードを書く」のコード例のif構造が間違っています。

    • Motoshige より:

      名無しさん。
      ご指摘ありがとうございます!
      作業2、ソースコードの6と8行目がひっくり返ってましたので、修正しました。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Facebook タイムラインのカバー画像を設定してみた♪

この記事は約 1 分で読めます。 Facebookのタイムラインが登場して、少し経ちます。 カッコイイ画像をカバー画像にされている方もお見かけするのですが、私はまだ画像がしっくり決まらずジタバタしてい …

no image

初心者のアクセス解析勉強メモ【用語と計算式】

この記事は約 1 分で読めます。 Webサイトを制作し、運営していく中でアクセス解析は重要だと思っています。そのWebサイトを育て、サイト目的を達成させ、信の目的(事業)の達成をする為にも、とても興味 …

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

scroller.jsで「するするスクロール」にチャレンジ♪

この記事は約 1 分で読めます。以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 …

no image

Facebookページ コメント返信機能の設定をしてみた!

この記事は約 1 分で読めます。 Facebookページにコメントに対するコメントの返信、どのようにされてましたか? 私は都度相手の名前を入れて、誰に対する返信なのかを表示していました。 今回「返信機 …