【第4回】Wordpress自作テーマ作成練習。トップページの作成デザイン

物理・プログラミング・Python、Web制作・自己啓発

2020年1月11日 00:27

今日も引き続き、こちらの参考書を見ながらWordpressのカスタマイズの練習を進めていきます。

前回の記事はこちらです。

本日の内容では、トップページを作成・デザインを行っていきます。

トップページを3記事だけにする

まずは、トップページを3記事だけ表示するように設定します。

「設定」→「表示投稿」→「1ページに表示する最大投稿数」を３にします。こうすることでトップページには3記事しか表示されないような設定にできます。

「固定ページ（リンク無し）」と「個別ページではない記事（リンクあり）」を区別する

まずは、「index.php」の中身を示しましょう。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

</head>
<body <?php body_class(); ?>>

<div class="container">
   <?php if(have_posts()): while(have_posts()): 
   the_post(); ?>

   <article <?php post_class(); ?>>

   <?php if( is_single() ): ?>
       <h1><?php the_title(); ?></h1>
   <?php else: ?>
       <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
   <?php endif; ?>

   <div class="postinfo">
       <time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>">
       <i class="fa fa-clock-o"></i>
       <?php echo get_the_date(); ?>
       </time>

       <span class="postcat">
       <i class="fa fa-folder-open"></i>
       <?php the_category( ', ' ); ?>
       </span>
   </div>

   <?php the_content(); ?>


   <?php if( is_single() ): ?>
   <div class="pagenav">
       <span class="old">
       <?php previous_post_link( 
       '%link', 
       '<i class="fa fa-chevron-circle-left"></i> %title' 
       ); ?>
       </span>

       <span class="new">
       <?php next_post_link( 
       '%link', 
       '%title <i class="fa fa-chevron-circle-right"></i>' 
       ); ?>
       </span>
   </div>
   <?php endif; ?>

   </article>

   <?php endwhile; endif; ?>
</div> <!-- container -->


<?php if ( $wp_query->max_num_pages > 1 ): ?>
<div class="pagenav">
	<span class="old">
	<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
	</span>

	<span class="new">
	<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
	</span>
</div>
<?php endif; ?>
	


</body>
</html>

個別記事ではないページはリンクにしたいのです。

なのでif文を使って以下の設定を行います。
●個別ページであればトップページに常に表示されるようにしたいので、リンクにはしない
●個別ページでなければ、その記事だけを表示させたい（文章が長くなる場合が多いから）ので、リンクにする

その設定が以下です。

is_single()関数：個別ページが存在すれば「true」を返す関数
<?php if( is_single() ): ?>
<h1><?php the_title(); ?></h1>
<?php else: ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>

記事が3記事以上の場合は次のページにする

<?php if ( $wp_query->max_num_pages > 1 ): ?>
<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>

<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div>
<?php endif; ?>

if($wp_query->max_num_pages > 1 )でif文を使って、トップページの記事数が1以上の時だけ、if文の中身が実行させるようになっています。

if文の中は、以下のようなページ送りを表示させるかどうかの記述です。

「$wp_query->max_num_pages > 1 」って何？

$wp_query->max_num_pages > 1

は、「->」というアロー演算子を使っています。

簡単に言う「$wp_query」の中の変数max_num_pagesを引っ張り出してきているだけです。

例えば、以下のようなクラスがあったとします。

class Robot {
   public $name;
}
$a = new Robot;
$a->name = 'ロボ太郎';

echo $a->name; // ロボ太郎;

●Robotというクラスを設定します。
●「$a=new Robot」でインスタンス化します。
●「$a->name = 'ロボ太郎';」では、$a（クラスRobot）の中の変数を「ロボ太郎」にする。

という意味になります。

トップページのデザイン

トップページのデザインは「style.css」に記述します。

トップページ全体を「<div class="container"></div>」でまとめておきましょう。

「style.css」には以下のように書きます。

style.css

@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

.container	{max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px}

/* 記事 */
article	{margin-bottom: 40px;}

article h1	{margin: 0;
	font-size: 32px;
	font-weight: normal}

article h1 a	{color: #000000;
	text-decoration: none}


/* 記事の付加情報 */
.postinfo	{margin-top: 15px;
	font-size: 14px}

.postinfo a	{color: #000000;
	text-decoration: none}

.postinfo .postcat	{margin-left: 20px}

.postinfo i	{color: #888888}


/* 前後の記事へのリンク */
.pagenav a	{padding: 5px 10px;
	border: solid 1px #cccccc;
	border-radius: 10px;
	color: #666666;
	font-size: 12px;
	text-decoration: none}

.pagenav .old a	{float: left}

.pagenav .new a	{float: right}

.pagenav	{overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px}

記事左に依っているので以下の記述により、記事全体が中央に来ます。

幅や余白を設定
.container {max-width: 650px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px}

完成したものがこちら。

記事が中央に来ていますね(^^)/

引き続き頑張ります。

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）

この記事が気に入ったらサポートをしてみませんか？