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行目がひっくり返ってましたので、修正しました。

名無し にコメントする コメントをキャンセル

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

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

苦手なJavaScriptをイチから勉強してみる【イベント編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

WordPress 新着記事のタイトルを表示する方法。

この記事は約 1 分で読めます。 WordPressのテンプレートタグ、いろいろあって奥が深いです。 今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思っ …

no image

IllustratorとPhotoshopで刺繍風のイラストと文字を作ってみた。

この記事は約 1 分で読めます。布地に刺繍をしたみたいなイラストと文字をIllustratorとPhotoshopで作ってみました。 ※布地素材は既に用意している状態の説明です。