simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.11.24

【WordPress】シンプルなオリジナルテーマの作り方(4)~トップページ~

WordPress

読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月29日です。

前回までの記事でbootstrapとカスタムメニューをつかったナビゲーション、フッターを作りました。

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~
読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月28日です。前回はbootstrapと...

今回はindex.php、つまりトップページを作成したいと思います。とはいっても、あくまでテーマのコンセプトはシンプル。トップページに掲載される情報も限ったものだけにします。なので、大したことはありません。

トップページに表示する内容

今回トップページに表示するものですが、新着記事のタイトル、カテゴリー、その記事の投稿日時くらいです。

多くの場合、アイキャッチ画像やその他に色々と表示させることになると思いますが、記事の情報を取得するphp(“テンプレートタグ”と言います。)が違うだけで基本的な表示方法は殆ど同じです。

トップページを作る

ループを理解する

WordPressのオリジナルテーマを作成するとき、「ループ」をしっかりと理解することが大切になってきます。

基本の形であれば全く難しいことはなく、「ループ」という名称の通り、ただの「繰り返し」です。最もオーソドックスなループの形は下記のようなものです。

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

//ループする内容

<?php endwhile;  ?>

<?php else: ?>

//ループするもの、つまり記事が無い場合に表示される内容

<?php endif; ?>

今回はトップページには記事タイトル、その記事の属するカテゴリー、投稿日時を表示させます。なので、ループする内容はこの3点になります。このループは管理画面で設定できる表示件数分繰り返すことになります。

また、もし投稿記事が1件も無い場合(実際トップページにおいては殆ど考えられないですが)のための表示内容を用意しておくことも重要です。

ループに関しては、上記の書き方以外にもforeach文で書く方法があったり、表示件数の制御や任意のカテゴリーの記事のみを表示させる条件の設定なども出来ますが、今回は基本的なものだけで充分です。より詳細なループの設定については、WordPressをいじっていると、その内きっと実装してみたくなってくると思うのでそのときに調べてみてください。

index.php

先の説明を踏まえるとindex.phpは下記のようになります。

<?php get_header(); ?>

<div class="container">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<article>
			<p class="cat"><?php the_category(', ') ?></p>
			<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			<p class="postdate"><?php the_time('Y/m/j') ?></p>
		</article>
	<?php endwhile; ?>

	<?php else : ?>
		<h2>記事が見つかりませんでした。</h2>
	<?php endif; ?>
</div>

<?php get_footer(); ?>
<article>
	<p class="cat"><?php the_category(', ') ?></p>
	<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<p class="postdate"><?php the_time('Y/m/j') ?></p>
</article>

がループする内容、

<h2>記事が見つかりませんでした。</h2>

が記事が無かった場合に表示される内容になります。

カテゴリーや記事タイトル、投稿日時を表示させるテンプレートタグについてはWordPress Codexに詳しく書かれています。他に表示させたいものがある場合は参考にしてみてください。

なお、<div class="container">~</div>というのは、bootstrapのレイアウトに関する<div>です。

ページネーションを実装する

次に、ページネーションを設置します。WordPressのデフォルトでは、1ページに表示する記事件数の上限は10件になっています。このままだと、記事を11件以上投稿した場合、表示されなくなる記事が出てしまいます。そのため、記事を一覧で表示するページにはページネーションを付けます。プラグインなどもたくさんありますが、今回はプラグインを使わずに設置します。

functions.php

fnctions.phpには下記を書いてください。

function pagination($pages = '', $range = 2) 
{ 
     $showitems = ($range * 2)+1;//表示するページ数(5ページを表示) 
  
     global $paged;//現在のページ値 
     if(empty($paged)) $paged = 1;//デフォルトのページ 
  
     if($pages == '') 
     { 
         global $wp_query; 
         $pages = $wp_query->max_num_pages;//全ページ数を取得 
         if(!$pages)//全ページ数が空の場合は、1とする 
         { 
             $pages = 1; 
         } 
     } 
  
     if(1 != $pages)//全ページが1でない場合はページネーションを表示する 
     { 
         echo "<div class=\"pagination\">\n"; 
         echo "<ul>\n"; 
         //Prev:現在のページ値が1より大きい場合は表示 
         if($paged > 1) echo "<li class=\"prev\"><a href='".get_pagenum_link($paged - 1)."'><</a></li>\n"; 
  
         for ($i=1; $i <= $pages; $i++) 
         { 
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) 
             { 
                //三項演算子での条件分岐 
                echo ($paged == $i)? "<li class=\"active\">".$i."</li>\n":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>\n"; 
             } 
         } 
        //Next:総ページ数より現在のページ値が小さい場合は表示 
        if ($paged < $pages) echo "<li class=\"next\"><a href=\"".get_pagenum_link($paged + 1)."\">></a></li>\n"; 
        echo "</ul>\n"; 
        echo "</div>\n"; 
     } 
}

index.php

ページネーションを出力するには、index.phpに下記のソースを記述します。

<?php 
if (function_exists("pagination")) { 
	pagination($additional_loop->max_num_pages); 
} 
?> 

なので、最終的なindex.phpはこのようになります。

<?php get_header(); ?>

<div class="container">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<article>
			<p class="cat"><?php the_category(', ') ?></p>
			<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			<p class="postdate"><?php the_time('Y/m/j') ?></p>
		</article>
	<?php endwhile; ?>

	<section class="pagination_wrap">
		<?php 
		if (function_exists("pagination")) { 
			pagination($additional_loop->max_num_pages); 
		} 
		?> 
	</section>

<?php else : ?>
	<h2>記事が見つかりませんでした。</h2>
<?php endif; ?>
</div>

<?php get_footer(); ?>

CSSで見た目を整える

style.css

今回の部分に関するCSSは下記になります。<div class="container">の幅もbootstrapのデフォルトでは広過ぎるので変更しておきます。

.container{
    padding-top: 2rem;
    padding-bottom: 2rem;
    max-width: 850px;
}
h2{
    margin: 0 0 0.5rem 0;
    line-height: 1.2rem;
}
.cat a{
    display: inline-block;
    font-size: 11px;
    color: #fff;
    background: #999;
    margin: 0 0 0.5rem 0;
    padding: 3px 5px;
}
.postdate{
    font-size: 12px;
    color: #777;
    margin: 0 0 2rem 0;
}
.pagination_wrap{
    margin: 5rem 0 0 0;
    text-align: center;
}
.pagination{
    display: block;
}
.pagination ul li{
    display: inline-block;
    font-size: 13px;
    background: #aaa;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align:center;
    line-height: 30px;
    vertical-align: middle;
    color: #fff;
    margin: 0 0.3rem;
}
.pagination ul li a{
    display: block;
    color: #fff;
}
.pagination ul li.active:hover{
    background: #aaa;
}
.pagination ul li:hover{
    background: #ccc;
}

この状態で記事を投稿してみてください。指定しているフォントなどで細かい部分は変わってくるかも知れませんが、大体下の画像のようになると思います。ちなみに、サンプルは1ページに表示する記事の件数を2件に設定しています。

この時点では、記事名をクリックして画面が遷移しても投稿記事の本文は表示されないですが心配いりません。これは本文を表示させるためのテンプレートタグがどこにも書かれていないためです。

次回は本文を表示させるためのテンプレートを作っていきます。

台風クラブに思うこと

MUSIC

台風クラブに思うこと

【初心者必見】WEBフォントFont Awesomeの使い方

WEB

【初心者必見】WEBフォントFont Awesomeの使い方

ゴミな内容でもブログは書いた方が良いのか?

WEB

ゴミな内容でもブログは書いた方が良いのか?

【LPで使える小技】縦長ページをスクロールすると表示されるバナー

WEB

【LPで使える小技】縦長ページをスクロールすると表示されるバナー

オッサンになってから免許を取った

LIFE

オッサンになってから免許を取った

はてなブログからWordPressに引っ越した理由

WEB

はてなブログからWordPressに引っ越した理由

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

WEB

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

アルビレックス新潟、踏み止まる

THOUGHT

アルビレックス新潟、踏み止まる