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

209 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

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む




PAGE TOP ↑