モンスト中心、映画やアニメ、DIY…興味あることをその都度発信

171 views

コピペでできる!!サクサクっと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



  • このエントリーをはてなブックマークに追加
  • Pocket
  • 0 follow us in feedly

関連記事

2カラム左ナビゲーションのテンプレート

はじめに 今回は、札幌市格安ホームページ製作のbabyhoodで使用しているテンプレートのご紹介を

記事を読む

Benri500札幌~新しいSEO対策について

Benri500札幌のご紹介 google検索では「札幌 激安 10分 500円」と検索す

記事を読む

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成①~準備~

はじめに このブログでも姉妹ブログでも、私はwordpressを使っています。 wordpres

記事を読む

美容室ロゴ・看板・名刺デザイン

美容室のロゴ・看板・名刺デザインをさせていただきました。 ロゴ 4つ提案させていただき、こち

記事を読む

2カラム左ナビゲーションの別バージョンサンプル

はじめに 前回に引き続き、今回もホームページのレイアウトサンプルをご紹介いたします。 前回の

記事を読む

GIMPで簡単!!よく使われている文字加工のやり方

はじめに 今回は、ホームページのロゴ部分や、見出し部分、画像の上に掲載する文字など、少し目立った感

記事を読む

1カラムの高級感あるデザインテンプテート

はじめに 今回は前回の2カラムとは違い、1カラムのホームページのレイアウトサンプルをご紹介いたしま

記事を読む

最新版!!オススメFTPソフト「WinSCP」のダウンロードとインストール、使用方法まで

はじめに ファイル転送のFTPソフトを探していて、使いやすさの点などでこのWinSCPというフリー

記事を読む

クライアント向けにwordpressサイトを作ったときに役立つプラグイン10選

はじめに 今回はwordpressでクライアント向けにホームページやブログ等を作ったときに入れると

記事を読む

XHTMLとCSSを使って、固定幅で崩れないトップページのレイアウトを作る

はじめに またホームページ関連の内容になりますが、まずは前回までのおさらい。 先日こちらのブログ

記事を読む




PAGE TOP ↑