【第2回】Wordpressテーマ作成練習。デザイン設定投稿日・カテゴリーの表示

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

2020年1月8日 20:35

前回、「Wordpressテーマ作成の超入門」でテーマ作成の設定方法だけを学んだんですよね。

設定方法だけなので、まだテーマらしい感じには仕上がっておれず、これから「HTML&CSS、PHP」のコードを書いていきます。

このnoteはWordpressテーマ作成の進捗メモとなっております。

学習に使っている書籍はこちらです

今回の進捗【デザイン設定、記事の投稿日・時間、カテゴリーの表示】

今回は、以下の2点の設定を追加しました。
１．デザイン設定
２．記事の投稿日・時間、カテゴリーの表示

主に「index.php」と「style.css」の中身を追加していく流れです。

完成したコードが↓こちら！

index.php

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <title>Wordpress練習用</title>
       <!-- <link href="http://localhost/wordpress/wp-content/themes/mythema/style.css"> -->
		<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
       
   </head>
   <body <?php body_class(); ?>>
       
     <?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'); ?>">
           <?php echo get_the_date(); ?>
           <?php echo get_the_time(); ?>
        </time>
        <span class="postcat">
            <?php the_category('-'); ?>
        </span>
   　</div>
         
     <?php the_content(); ?>
     
     <?php endwhile; endif;?>
         
     </article>
    
   </body>
</html>

style.css

@charset "URTF-8";
/*
Thema Name: kamakiri
Author: kamakiri
Description: This is a original thema.
Version: 1.0
*/

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

/* 記事 */
article h1{
   margin: 0;
   font-size:32px;
   font-weight: normal;
}

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

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

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

記事デザインを指定する

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

これにより、stylesheetを呼び出すことができ、「style.css」が参照されていることになります。

このようにWordpress独自が用意している関数（クラス？）を上手く使うことで汎用性のある書き方ができます。

記事の投稿日、時間、カテゴリーを表示する

<div class="postinfo">
        <time datetime="<?php echo get_the_date('Y-m-d'); ?>">
           <?php echo get_the_date(); ?>
           <?php echo get_the_time(); ?>
        </time>
        <span class="postcat">
            <?php the_category('-'); ?>
        </span>
   　</div>

記事の投稿日・時間、カテゴリーの表示は以下の関数を使います。

記事の投稿日・時間を表示
<?php echo get_the_date(); ?>
<?php echo get_the_time(); ?>

カテゴリーの表示
<?php the_category('-'); ?>

ここまでで完成した記事の見た目

まだまだ見た目はきれいではありませんが、自分でテーマを作成していくのはとても楽しいですね。

引き続き頑張ります('ω')

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

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