*

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

関連記事

スクリーンショット_111114_020302_PM

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

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

記事を読む

紹介チケット

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

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

記事を読む

スクリーンショット_102514_125258_AM

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

Benri500札幌のご紹介 こないだ私たちが札幌市のホームページ製作代行という業務を始めまし

記事を読む

スクリーンショット_070115_021223_PM

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

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

記事を読む

03

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

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

記事を読む

スクリーンショット_110514_104041_AM

WordPress (stinger3)の細かなカスタマイズ~ブログタイトルや記事内hタグ~

はじめに 今回は、当ブログ表示画面の細かいカスタマイズを行ったのでそのやり方をご紹介していきます。

記事を読む

スクリーンショット_102814_094432_PM

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

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

記事を読む

スクリーンショット_110914_025524_PM

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

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

記事を読む

スクリーンショット_060215_121053_PM

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

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

記事を読む

スクリーンショット_122815_033611_PM

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

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

記事を読む

e2941cce339456cc46d8e9ee35a23a7f
モンスト!!天地開闢の始神「イザナギ」を徹底攻略!!

天地開闢の始神「イザナギ」 この記事はモンストの天地開闢の始神「

2016-11-02_11h29_48
モン玉ガチャ!!排出率や当たり確率について分析してみた

新しく始まったモン玉ガチャ。今回が初開催で、今後は定期的に開催される模

2016-11-01_16h51_05
Firefoxに必須の基本アドオン「FireGestures」の使い方

Firefoxを使うならまず入れていきたい基本的なアドオンのひとつ「F

2016-07-05_14h18_37
プログラミング学習サイト!!初心者でも楽しく覚えられるProgateがすごい!!

はじめに プログラミングを勉強したいと思ったときに、まず何からしてい

2016-06-30_13h31_04
画面が狭くてやりずらいときに試してほしい、作業レベルに合わせた3つの対策

PCで作業をしていると、画面がいっぱいになってしまい作業がやりずらいこ

→もっと見る

PAGE TOP ↑