WordPressオリジナルテーマの作り方｜HTMLをワードプレス化で自作

2019-01-03 / 2022-08-04

困ってる人

自分で作ったサイトにワードプレスの機能を取り入れるには、一体どうやればいいんだろう？
PHP？とかあんまり難しい事は分からないんだけど

こんにちは、ヨロと申します。

今回はシンプルなWordPressのオリジナルテーマの作り方という事で

HTMLでテーマを自作した後に、WordPress化する方法について

今見ていただいているこちらのブログのテーマも実際にゼロから自作したものになるのですが、

今回は誰にでも出来るだけ分かりやすいように、ドットインストールの動画の内容などを参考にしつつ、

HTMLをwordpress化する方法について簡単にまとめてみました。

ですのでもしこの記事を見てもさっぱりと内容が理解出来ないといった場合には、

ドットインストールの動画を実際に見に行ってみるのがいいかもしれません（ただし有料です）

まず、WordPressのオリジナルテーマを作るにあたって必要な事は、

HTMLとCSSをある程度理解できる。
WordPressでブログをやった事がある、もしくは触った事がある。
基本的なWordPressとPHPの知識がある。

ですのでもしHTMLやCSSが分からないという人は「Progate（プロゲート）」や「ドットインストール」などで勉強するといいでしょう。

「WordPress」と「PHP」に関しても「ドットインストール」で勉強できます。

WordPressオリジナルテーマの作り方・手順｜自作でワードプレス化

WordPressテーマを作る手順を大まかに説明すると、

1. XAMPP（パソコン、ローカル環境）にWordPressをインストール（Windowsの場合）
2. WordPressの設定
3. HTML、CSSのファイルの準備
4. 作成したHTMLファイルをWordPress化（ファイルの分割 → index.phpを分けていく作業）

もし「XAMPP」やローカル環境（パソコン）について分からないといった場合には、こちらの記事が参考になるかもしれません。

Windowsローカル環境（XAMPP）にWordPressをインストール

そして今回紹介するのは４番目の、HTMLファイルをWordPress用に分割していく作業になりますね。

今回使うHTML、CSSのソースコードはここにあります。

https://codepen.io/malg_tw/pen/ZwEaWp/

こちらのHTMLとCSSのソースコードを自分のテキストエディタにコピペして

今回こちらで紹介している方法と、実際に見比べながら順番に作業していくといいと思います。

WordPressオリジナルテーマの作り方｜ファイルを準備し、分割していく

という事でまずは出来上がったHTMLのソースコードを、それぞれWordPressで使えるように要素別に分解していく必要があります。

①「index.html」のファイル名を「index.php」に変更

まずは自分のパソコンの「C:ローカルディスク」→「xamppフォルダ」の「htdocs」の中の「wordpress（自分で作ったデータベースのフォルダ）」の「wp-content」の中の「themes」フォルダの中に、今回新しく作るWordPressテーマ用のフォルダを作る

このフォルダの中に自分で作ったWordPressテーマ用の「HTML（index.html）」「CSS（style.css）」、画像ファイルなどを全て入れ、

「index.html」のファイル名を「index.php」に変更

②「style.css」にヘッダー情報を入れる

「https://codex.wordpress.org/Theme_Development」にアクセスすると、

Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: :::::
Version: 1.0

こういった感じのものが書いてあるので、この部分をコピーして「CSSファイル（style.css）」に貼り付け、内容を書き換える。

例

Theme Name: テーマの名前を書く
Theme URI: http://テーマのURLを入力
Author: 作者の名前
Author URI: http://作者のURLを入力
Description: テーマの説明など
Version: 1.0

このようにCSSファイルのヘッダー情報を書き換える事により、自分のWordPressテーマが適用出来るようになる。

※ファイルへのアクセス(ログイン)方法は、http://localhost/WordPress用に作ったフォルダの名前/wp-admin/

③WordPress用のファイルを準備する

①で作ったフォルダの中に「header.php」「footer.php」「sidebar.php」「functions.php」を新しく作る。

④ファイルの分割「header.php」

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>はじめてのWordPress</title>

    <link rel="stylesheet" href="css/stylesheet.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>

  <body>
    <div id="header" class="container">
      <h1><a href="">はじめてのWordpress</a></h1>
      
      <ul class="menu">
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
      </ul>

    </div> <!-- HEADER -->

上記のHTMLのヘッダー部分をカットして「header.php」に貼り付け。

そして、切り取った部分には、

<?php get_header(); ?>

と書く。

(これを入れる事によって「index.php」が読み込む時に、自動的に「header.php」を読み込んでくれる)

⑤「sidebar.php」「footer.php」

次に、サイドバー部分、

<div id="sidebar" class="container">
	<div class="widget">
    	<h3>カテゴリー</h3>
      	<ul>
        <li><a href="">アイテム</a></li>
        <li><a href="">アイテム</a></li>
        <li><a href="">アイテム</a></li>
      	</ul>
    </div> <!-- WIDGET -->
</div> <!-- SIDEBAR -->

HTMLのサイドバー部分を切り取り、

<?php get_sidebar(); ?>

と書き、切り取った部分はそのまま「sidebar.php」に貼り付け。

そして次に、フッター部分「footer.php」

<div id="footer" class="container">フッター</div>

</body>
</html>

を切り取り、切り取った部分に

<?php get_footer(); ?>

を貼り付け。

HTMLをWordPress化｜自作テーマ(ファイル全体)にCSSが適用されるようにヘッダー部分を修正

「header.php」の

<link rel="stylesheet" href="style.css">

を

↓

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

に変更する事で、ファイル全体にCSSが適用される。

次にスマートフォン用のCSSファイルを読み込ませたい場合は、

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/responsive.css" type="text/css">

こんな感じでOK。

そして次にタイトル部分、

<title>はじめてのWordPress</title>

↓

<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title> に変更。

次に、

「header.php」の「h1」(ブログタイトル部分)

<h1><a href="">はじめてのWordpress</a></h1>

↓

<h1><a href=""><?php bloginfo('name');?></a></h1>

に書き換え。

そして次に、リンク部分

<a href=""> に、<?php echo home_url('/'); ?> を追加し、

↓

<a href="<?php echo home_url('/'); ?>"> という風にする

⑥固定ページのメニューバー部分「functions.php」

固定ページのメニューバー部分は、管理画面からいろいろとカスタマイズ出来ると便利なので、その為には

「functions.php」を作る必要がある、

「functions.php」に

<?php

add_theme_support('menus');

と入力。

次に、

「header.php」の、メニュー部分、

<ul class="menu">
	<li><a href="">menu</a></li>
	<li><a href="">menu</a></li>
	<li><a href="">menu</a></li>
</ul> を切り取り、

↓

<?php wp_nav_menu(); ?>

と書く。(切り取ったメニュー部分は必要ない)

※これをやる事によって、WordPressの管理画面の「ダッシュボード」→「外観」→「メニュー」から固定ページを追加出来るようになる。

そして、「header.php」に、

<?php wp_head(); ?> と入力

※これがないと動かないプラグインなんかが出てくる。書く場所は</head>の手前でOK。

⑦サイドバーをウィジェット対応にする「functions.php」

サイドバーをウィジェット対応にする為に「functions.php」に、

register_sidebar(
	array(
		'before_widget' => '<div class="widget">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	)
);

と追加する事によって、WordPress管理画面(ダッシュボード)に「ウィジェット」が追加される。

⑧ウィジェットを呼び出すようにするには「sidebar.php」

実際に、ウィジェットを呼び出す場合は「sidebar.php」の、

<div class="widget">
	<h3>カテゴリー</h3>
	<ul>
	<li><a href="">アイテム</a></li>
	<li><a href="">アイテム</a></li>
	<li><a href="">アイテム</a></li>
	</ul>
</div> <!-- WIDGET -->

このウィジェット部分を削除し、

 <?php dynamic_sidebar(); ?>と書く

記事一覧部分(POST部分)「index.php」

記事一覧(POST部分)を何度も繰り返す仕様にするために「index.php」の

<div class="post"></div>

の前後に「PHP」で、ループ(繰り返し処理)の指示を出してやる必要がある。

「index.php」の、

<div class="post">

の手前部分に、

<?php
if (have_posts()) :
	while (have_posts()) :
		the_post();
?>

次に、

<div class="post"></div>

この閉じタグ部分の後に、

<?php
	endwhile; 
	else:
?>

<p>記事はありません</p>

<?php
	endif;
?>

と追加(このループ命令文の中に記事がある間はずっと繰り返すという指示)

記事タイトルと日付、カテゴリー部分

次に、記事タイトル部分、

<h2><a href="">タイトル</a></h2>

↓

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> に変更。

次に、日付の部分とカテゴリの部分、

<div class="post-meta">2018年12月12日 【カテゴリ】</div> を、

↓

<div class="post-meta"><?php echo get_the_date(); ?> 【<?php the_category(', '); ?>】</div>

に変更。

※<?php echo get_the_date(); ?> は、日付に適用

※<?php the_category(', '); ?> はカテゴリー部分に適用

次に、本文の抜粋部分、

<p>本文。本文。本文。</p> を、

↓

<?php the_excerpt(); ?> に変更。

アイキャッチ画像を管理画面から指定出来るように

アイキャッチ画像も、管理画面から指定が出来ると簡単で便利なので「functions.php」に、

add_theme_support('post-thumbnails');

を追加する事によって、投稿画面からアイキャッチ画像を指定出来るようになる。

そして次に、

<div class="post-image"></div> の中、

<img src="表示させたい画像ファイルの名前（image-1.jpgなど）" width="100" height="100"></div> の部分を、

↓

<?php if (has_post_thumbnail()) : ?>

<?php the_post_thumbnail(array(100, 100)); ?> <!-- ここで数字を入力し、サイズを調整出来る -->

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>表示させたい画像ファイルの名前（image-1.jpgなど）" width="100" height="100"></div> <!-- ここは何も画像を指定しなかった時に表示させたい画像 -->

<?php endif; ?>

そして、画像のリンク部分に

<?php the_post_thumbnail(); ?>

を追加する事によって、サムネイル画像を取得出来るようになる。

ナビゲーション部分とフッター部分

そして、次にナビゲーション部分、

<div class="prev">前へ</div>

<div class="next">次へ</div>

↓

<div class="prev"><?php previous_posts_link(); ?></div>

<div class="next"><?php next_posts_link(); ?></div>

というタグを必ずループの外に書く。

そして、次にフッター部分を変更、

<div id="footer" class="container">
	Copyright 2012<?php if (date("Y")!=2012) echo date("-Y"); ?> All rights reserved, dotinstall.com
</div>

と書く事により、年が変われば自動的にフッターの日付も変わるようになる。

そして、BODYの閉じタグの手前に必ず、

<?php wp_footer(); ?>

を入れる。

(これを入れないとフッターが表示されなかったり、動かないプラグインが出てくる事もある)

個別記事部分「single.php」

個別記事部分は、見た目がほとんど「index.php」と同じなので、

「index.php」をフォルダ内でコピーして、名前を「single.php」に変える。

そして、個別記事部分にはアイキャッチ画像は必要ないので、

<div class="post-image">
	<?php if (has_post_thumbnail()) : ?>
	<?php the_post_thumbnail(array(100, 100)); ?> <!-- サイズを調整出来る -->
	<?php else: ?>
	<img src="<?php echo get_template_directory_uri(); ?>表示させたい画像ファイルの名前（image-2.jpgなど）" width="100" height="100"> <!-- ここはそれ以外の時に表示させたい画像 -->
	<?php endif; ?>
</div>

<div class="post-body"> <!-- 抜粋部分 -->
	<?php the_excerpt(); ?>
</div>

を削除し、post-contentクラスの中に、

<?php the_content(); ?> を追加。

↓

<div class="post-content">
	<?php the_content(); ?>
</div>

次に「single.php」のナビゲーション部分に関しては、

<div class="navigation">
	<div class="prev"><?php previous_posts_link(); ?></div>
	<div class="next"><?php next_posts_link(); ?></div>
</div>

の「s」を外し、

<div class="navigation">
	<div class="prev"><?php previous_post_link(); ?></div>
	<div class="next"><?php next_post_link(); ?></div>
</div>

という風に変更し、そのままループの中に入れてあげる必要がある。

（今回の場合だとpostの後、endwhileの手前にこのコードを追加する）

固定ページ「page.php」

固定ページは「single.php」をコピーして、名前を「page.php」に変更

時系列部分

<div class="post-meta"></div>

と、

ナビゲーション部分(次へ、前へ)

<div class="navigation"></div>

は、必要ないので削除。

【時系列部分】

<div class="post-meta">
  <?php echo get_the_date(); ?> 【<?php the_category(', '); ?>】
</div>

【ナビゲーション部分】

<div class="navigation">
  <div class="prev"><?php previous_post_link(); ?></div>
  <div class="next"><?php next_post_link(); ?></div>
</div>

削除したら、

<p>記事はありません</p>の部分を、

<p>ページはありません</p> に変更する。

WordPressテーマの作り方｜HTMLをワードプレス化で自作｜最後に

という風に今回は、HTML、CSSのファイルをWordPressテーマ用に変換するという作業を大まかにまとめてみました。

ただ、実際に動画を見ながらそのままやるのと、実際に一から作ってみるのとでは、

かなりの違いがありますので、一度試しにシンプルなテーマでも作ってみるといいでしょう。

あと、作業をしていてもし分からない事があれば「Teratail（テラテイル）」に登録をしておいて、すぐさまこちらで質問をしてみるといいです。

※「Teratail(テラテイル)」とは、Yahoo!知恵袋のような質問箱のサービス。

プログラミングを独学をしている人にとっては登録必須のサービスですね。

<< 前の記事へ次の記事へ >>

WordPressオリジナルテーマの作り方｜HTMLをワードプレス化で自作

WordPressオリジナルテーマの作り方・手順｜自作でワードプレス化

WordPressオリジナルテーマの作り方｜ファイルを準備し、分割していく

①「index.html」のファイル名を「index.php」に変更

②「style.css」にヘッダー情報を入れる

③WordPress用のファイルを準備する

④ファイルの分割「header.php」

⑤「sidebar.php」「footer.php」

HTMLをWordPress化｜自作テーマ(ファイル全体)にCSSが適用されるようにヘッダー部分を修正

⑥固定ページのメニューバー部分「functions.php」

⑦サイドバーをウィジェット対応にする「functions.php」

⑧ウィジェットを呼び出すようにするには「sidebar.php」

記事一覧部分(POST部分)「index.php」

記事タイトルと日付、カテゴリー部分

アイキャッチ画像を管理画面から指定出来るように

ナビゲーション部分とフッター部分

個別記事部分「single.php」

固定ページ「page.php」

WordPressテーマの作り方｜HTMLをワードプレス化で自作｜最後に

カテゴリー

サイト内検索

ブログ運営者

WordPressオリジナルテーマの作り方｜HTMLをワードプレス化で自作

WordPressオリジナルテーマの作り方・手順｜自作でワードプレス化

WordPressオリジナルテーマの作り方｜ファイルを準備し、分割していく

①「index.html」のファイル名を「index.php」に変更

②「style.css」にヘッダー情報を入れる

③WordPress用のファイルを準備する

④ファイルの分割「header.php」

⑤「sidebar.php」「footer.php」

HTMLをWordPress化｜自作テーマ(ファイル全体)にCSSが適用されるようにヘッダー部分を修正

⑥固定ページのメニューバー部分「functions.php」

⑦サイドバーをウィジェット対応にする「functions.php」

⑧ウィジェットを呼び出すようにするには「sidebar.php」

記事一覧部分(POST部分)「index.php」

記事タイトルと日付、カテゴリー部分

アイキャッチ画像を管理画面から指定出来るように

ナビゲーション部分とフッター部分

個別記事部分「single.php」

固定ページ「page.php」

WordPressテーマの作り方｜HTMLをワードプレス化で自作｜最後に

デザインが異なる固定ページが複数あるサイトをWordPress化する方法

サイトをワードプレス化した後にコンタクトフォーム7を設置する方法

【Node.js初心者】インストール・開発環境構築・設定・準備からHello World!

【Laravel初心者】開発環境構築・設定・準備として最初にやる事

カテゴリー

サイト内検索

ブログ運営者