1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。

WordPress テーマ自作シリーズ第五回目です。
今回から、本格的にテーマを作っていきます。

前回の記事はこちらです。
WordPress テーマの基本構成と読み込まれるファイルの優先順位。

今回は gulp のプラグインを使って Pug ( 旧 Jade )をコンパイルするので、二回目のこちらの記事で、準備をしておいてください。
WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

記事一覧ページを作る

前回の記事で、ファイルの優先順位を解説しましたが、 もっとも優先度の低いファイルが index.php です。
しかし、このファイルは最も重要なファイルと言えます。極端な話、このファイル一つで、全てのページを作ることができるからです。

まず、サイト全体のベースから作っていきたいので、この index.php を使って記事一覧ページを作ります。となると、記事一覧ページは、 header.php, index.php, footer.php, sidebar.php の4つに分けることができます。

wordpress

しかし、まだサイドバーの設定をしていないので、今回使うファイルは、 header.php, index.php, footer.php の3つです。
サイドバーについては、後日、別の記事で解説していきます。

index.php ファイルを作る

パーツごとのファイル( header.php や footer.php など )は、 index.php から呼び出してあげる必要があります。
まずはその基礎となる index.php を作ります。

index.pug(コンパイル前)

:php get_header();
main#main
	:php while(have_posts()) :
	:php the_post();
	article.p-article-list.c-media
		:php if(has_post_thumbnail()):
		a.c-media__img.p-article-list__thumbnail(href!="<?php the_permalink(); ?>")
			:php the_post_thumbnail('medium', array('class' => 'p-article-list__catch p-article-list__catch--main'));
		:php endif;
		.c-media__body
			h1.p-article-list__ttl
				a(href!="<?php the_permalink(); ?>")
					:php the_title();
			p.c-media__txt.p-article-list__snippet
				:php the_excerpt();
		time.c-panel.p-article-list__time(datetime!="<?php the_time('c'); ?>")
			:php the_time("Y/n/j")
		a.p-article-list__readmore(href!="<?php the_permalink(); ?>") 続きを読む
	:php
		endwhile;
		the_posts_pagination(array(
			'mid_size'				=> 2,
			'prev_text'				=> 'Prev',
			'next_text'				=> 'Next',
			'show_all'				=> false,
			'before_page_number' => '',
		));
:php
	get_footer();

index.php(コンパイル後)

<?php get_header(); ?>
<main id="main">
  <?php while(have_posts()) : ?><?php the_post(); ?>
  <article class="p-article-list c-media"><?php if(has_post_thumbnail()): ?><a class="c-media__img p-article-list__thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('class' => 'p-article-list__catch p-article-list__catch--main')); ?></a><?php endif; ?>
    <div class="c-media__body">
      <h1 class="p-article-list__ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <p class="c-media__txt p-article-list__snippet"><?php the_excerpt(); ?></p>
    </div>
    <time class="c-panel p-article-list__time" datetime="<?php the_time('c'); ?>"><?php the_time("Y/n/j") ?></time><a class="p-article-list__readmore" href="<?php the_permalink(); ?>">続きを読む</a>
  </article><?php endwhile;
the_posts_pagination(array(
	'mid_size'				=> 2,
	'prev_text'				=> 'Prev',
	'next_text'				=> 'Next',
	'show_all'				=> false,
	'before_page_number' => '',
)); ?>
</main><?php get_footer(); ?>

header.php ファイルを作る

では、header.php を作ります。

header.pug(コンパイル前)

doctype
<html <?php language_attributes(); ?>>
head
	//metaタグ, css,js の読み込みなど
	:php wp_head();
<body <?php body_class('page'); ?>>
header.p-header
	h1.p-header__ttl
		a(href!="<?php echo home_url(); ?>" rel="home")
			:php bloginfo('name');
	p.p-header__info 
		:php bloginfo('description');

header.php(コンパイル後)

<!DOCTYPE html><html <?php language_attributes(); ?>>
<head>
  <!--metaタグ, css,js の読み込みなど--><?php wp_head(); ?>
</head><body <?php body_class('page'); ?>>
<header class="p-header">
  <h1 class="p-header__ttl"><a href="<?php echo home_url(); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
  <p class="p-header__info">
     <?php bloginfo('description'); ?></p>
</header>

footer.php ファイルを作る

footer.php を作っていきます。

footer.pug(コンパイル前)

footer.p-footer
	div.p-footer__copyright
		small Copyright © <?php bloginfo('name'); ?> All Rights Reserved
| </div>
:php wp_footer();
| </body>
| </html>

footer.php(コンパイル後)

<footer class="p-footer">
  <div class="p-footer__copyright"><small>Copyright © <?php bloginfo('name'); ?> All Rights Reserved</small></div>
</footer></div><?php wp_footer(); ?></body>
</html>

実際にサイトを表示してみると、スタイルのあたっていないシンプルなサイトになっていると思います。

まとめ

今回は、3つのファイルを使ってトップページをつくりました。

WordPress では、 PHP を使うということ、ヘッダーやフッターなどを分けて書くことから、 Pug を使うというのは効率が悪いようにも感じられるかもしれません。
しかし、記述の短さや、後々の編集のしやすさを考えると、 Pug を1つの選択肢に入れるのもありだと考えています。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

コメントをどうぞ!

メールアドレスが公開されることはありません。