はじめに
「コピペでできる!!サクサクっとwordpressオリジナルテーマの作成」２回目ですが、今回は前回用意したテンプレートに基本的なhtmlを加えていきます。
前回の記事はこちら
コピペでできる!!サクサクっとwordpressオリジナルテーマの作成①～準備～
個別ページを作る
前回作成したテンプレートをテーマを有効化させた状態で、記事の個別ページを開きます。
まだ何も書き加えていないのでそこには何も表示されませんが、
まずはこのページに内容を表示させるhtmlを、これから記述していきます。
index.phpに基本的なhtmlを加える
外観>>テーマの編集>>index.php
<!DOCTYPE html> <html lang="ja"><!-- html5という宣言と、日本語だという指定 --> <head> <meta charset="UTF-8"> <title>タイトル</title><!-- エンコードとタイトルの指定 --> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの読み込み--> </head> <body> </body> </html>
bodyの間に記事のタイトルと内容を表示させる
<!DOCTYPE html>
<html lang="ja"><!-- html5という宣言と、日本語だという指定 -->
<head>
<meta charset="UTF-8">
<title>タイトル</title><!-- エンコードとタイトルの指定 -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの読み込み-->
</head>
<body <?php body_class(); ?>><!-- ページを区別 -->
<?php if(have_posts()): while(have_posts()) :the_post(); ?><!-- ループがここから始まり、php endwhile; endif;まで -->
<article <?php post_class(); ?>><!-- 記事を区別 -->
<h1><?php the_title(); ?></h1><!--記事のタイトルを表示し、h1でマークアップ-->
<?php the_content(); ?><!--記事の内容を表示-->
</article>
<?php endwhile; endif; ?>
</body>
</html>
スタイルシートを適用させる
外観>>テーマの編集>>style.css
@charset "UTF-8";
/*
Theme Name: MY_THEME
Author: babyhood
Description: This is my theme.
Version: 1.0
*/
body {
font-family: 'sans-serif'
}
/* 記事 */
article h1 {
margin: 0;
font-size: 30px;
font-weight: normal;
}
投稿日とカテゴリーを表示させる
外観>>テーマの編集>>index.php
・
・
・
<h1><?php the_title(); ?></h1><!--記事のタイトルを表示し、h1でマークアップ-->
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>">
<?php echo get_the_date(); ?>
</time>
<span class="postcat">
<?php the_category( ',' ) ?>
</span>
</div>
<?php the_content(); ?><!--記事の内容を表示-->
・
・
・
外観>>テーマの編集>>style.css
/* 記事の付加情報 */
.postinfo {
margin-top: 15px;
font-size: 14px;
}
.postinfo a {
color: #999;
text-decoration: none;
}
.postinfo .postcat {
margin-left: 20px;
}
まとめ
ここまでで、記事のページを見てみると以下のようになります。
