見出し画像

【第3回】Wordpress自作テーマ作成練習。アイコン表示、前後記事リンクの表示

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


今日も引き続きWordpress自作テーマの練習に取り組んでいます。

こちらのnoteは勉強用のメモとなっていますが、勉強が終了して自作テーマが作成できるレベルに達したら、内容をより洗練して「初学者がWordpress自作テーマ作成のロードマップ」として公開したいと思いまます(^^)/

参考文献はこちらです。

前回の内容

今回の内容。「アイコン表示、前後記事リンクの表示」

今回は、「アイコン表示（赤色）」と「前後記事リンクの表示（青色）」が表示されるようにしました。

画像1

全体のコードは以下となっております。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<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(); ?>>

   <h1><?php the_title(); ?></h1>

<!--- 投稿日、カテゴリー表示--->
   <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(); ?>

   <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><!--- （終了）投稿日、カテゴリー表示--->

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


</body>
</html>


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;
}

アイコン表示。Front Awesomeを使おう

アイコンの表示には、Font Awesomeという無料のサービスを使います。

Font Awesomeとは、Webサイトでアイコンフォントを簡単に導入することができるサービスです。

使い方は以下のサイトを参考にして下さい。

ポイントは2つだけです。

１．Font Awesomeが使えるようにリンク設定
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
２．アイコンが表示されるクラスを設定
  <i class="fa fa-clock-o"></i>

２については以下の画像のようにFont Awesomeのサイトから使いたいアイコンを選択して、クラスを持ってくるだけです。

例えば、「🕓時計のアイコン」を使いたい場合は以下のように選択します。

画像2

すると、どのようなクラス名を使えば良いかが表示されるので、それをHTMLの記述だけで「🕓時計のアイコン」が使えます。

画像4

実際にFont Awesomeを使ってアイコンを表示させると以下のようになります。

画像3

前後記事リンクの表示

前後リンクの表示にはWordpress独自の関数を使います。

前の記事リンク。関数：previous_post_link( )
<?php previous_post_link(
'%link',
'<i class="fa fa-chevron-circle-left"></i> %title'
); ?>
</span>
後の記事リンク。 関数：next_post_link()
<span class="new">
<?php next_post_link(
'%link',
'%title <i class="fa fa-chevron-circle-right"></i>'
); ?>

それぞれ引数に、「%link」「<i class="fa fa-chevron-circle-left"></i> %title'
)」などの変数が入っていることに注意してください。

細かい使い方はネットで調べれば出てくるのでここでは割愛します。

ここまでの完成形

画像5

引き続き頑張ります(^^)/

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

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