550Views
         

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成②~基本的な設定~

はじめに

「コピペでできる!!サクサクっとwordpressオリジナルテーマの作成」2回目ですが、今回は前回用意したテンプレートに基本的な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;
}

まとめ

ここまでで、記事のページを見てみると以下のようになります。
スクリーンショット_070215_105010_PM

コメント