この記事は約 6 分で読めます。
WordPressのオリジナルテーマ作りにチャレンジしています。
今回は、「index.php」の部分を作りたいと思います。
前回までに1つのhtmlを「header.php」「sidebar.php」「footer.php」分割して作ってきました。
「index.php」は他のパーツを読み込んであたかも1つのhtmlのように見せます。
また、「index.php」はコンテンツを表示する部分なので、ブログ記事を表示させなくてはなりません。
「index.php」はWordpressでサイトを作るには必ず必要なphpファイルのようなので、ここはしっかり頭に入れておかなくちゃ!と思っています。
そんなワケで、ここはしっかりメモです♪
「sidebar.php」の作成は次回する予定です。
オリジナルテーマの制作の流れ。
- html+cssで作ったサイトをWordpressへアップする
- html+cssをWordpressへアップしたものをパーツテンプレートへ切り分ける
- header・footerを作成
- index.phpで各ページのベースを作成 ←今回はココ。
- sidebar.phpでサイドバーを作成
- single.phpで記事の個別ページを作成
- page.phpで固定ページを作成
- トップページを作ってみる
今回は「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」がうまく出来たら、ブログ全体がだいたい表示される状態になります。
それとメニューバーもメモが出来てなかったので、これも後日書いてみたいと思います。
私もWordPressのテーマ作りに挑戦しているので参考になります!
ぜひ、連載としてページをまとめてほしいです。
どらごんさん、はじめまして!
コメントありがとうございます!!
>私もWordPressのテーマ作りに挑戦しているので参考になります!
>ぜひ、連載としてページをまとめてほしいです。
Wordpressのテーマ作りされているのですね。
私もまだまだWordpressは手探りでいじってるところですが、こういうコメント頂けると励みになります♪
実は、毎回メモ書きで書いていて・・・まとめなくちゃ!と思っている部分でした。
過去記事も少し手をいれます。
あとテーマ作りに関する全部の記事を、まとめた記事も作る予定です。
しばらくお待ちくださいね。
【追記。】
http://motoshige.net/archives/2289
WordPress はじめてのオリジナルテーマ作り。【まとめ】で、オリジナルテーマ作りをまとめました。
これからもいろいろと私なりにWordpressのオリジナルテーマを研究して、ちょこちょこアップしていく予定です。
「作業2 ブログ投稿記事が表示される部分に以下のコードを書く」のコード例のif構造が間違っています。
名無しさん。
ご指摘ありがとうございます!
作業2、ソースコードの6と8行目がひっくり返ってましたので、修正しました。