【第2回】Wordpressテーマ作成練習。デザイン設定 投稿日・カテゴリーの表示
前回、「Wordpressテーマ作成の超入門」でテーマ作成の設定方法だけを学んだんですよね。
設定方法だけなので、まだテーマらしい感じには仕上がっておれず、これから「HTML&CSS、PHP」のコードを書いていきます。
このnoteはWordpressテーマ作成の進捗メモとなっております。
学習に使っている書籍はこちらです
今回の進捗【デザイン設定、記事の投稿日・時間、カテゴリーの表示】
今回は、以下の2点の設定を追加しました。
1.デザイン設定
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
ブログ➡宇宙に入ったカマキリ(物理ブログ)
この記事が気に入ったらサポートをしてみませんか?