3.1 テーマ作成の準備

2018年7月2日

はじめに、サイト（ブログ）の全体のデザインを決めます。この作業は、テーマの作成において、実は一番重要な部分だったりします。自分で作成する場合は、あらかじめグラフィックツール等のソフトで、全体のデザインをできるだけ詰めておくと、後の作業がとても楽になります。

3.1.1 サイトのデザイン決定

今回は必要最低限なデザインとして、以下のようなテーマで解説していきます。

デスクトップサイズのデザイン

スマートフォンサイズのデザイン

目次へ

3.1.2 index.phpとstyle.cssの作成と編集

テーマとして、最低限必要なファイルは、index.phpとstyle.cssです。この2つのファイルがあれば、WordPressにテーマとして認識させることができます。

※ WordPressでは、サイトのトップページに読み込まれるテンプレートファイルとして、front-page.php、home.php、index.php の順に優先順位がつけられています。一般的なテーマでは、index.phpが使用され、ブログの前にサイトを作る必要が生じたときなどに、home.php等が使用されることがあります。

まず、index.phpとsytle.cssを、メモ帳等のテキストエディタで作成します。
（ファイル名をindex、style、拡張子をそれぞれphp、css、として保存します。）

style.cssをテキストエディタで開き、冒頭部分に、以下のように「テーマの詳細」をコメントアウトします。

/*
Theme Name: テーマ名
Theme URL: サイトのアドレス
Author: 製作者の名前
Version: バージョン
*/

記述内容は必要最小限にとどめています。
（必要に応じて製作者の情報を記述してください。）

※ 半角英数字で入力してください

この記述部分は、WordPressの管理画面でテーマの詳細説明として表示されるもので、WordPress側では必須項目としています。
(参考サイト – テーマの作成 – WordPress Codex 日本語版）

同様にindex.phpをテキストエディタで開き、以下のように編集し、保存します。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>" type="text/css" media="screen" />
</head>
</html>

<!DOCTYPE html>でHTMLであることを宣言した後、<head>内のlink要素で、先程作成したstyle.cssへのリンク設定をしています。ここはHTMLの記述と異なるところです。get_stylesheet_uriというWordPressのPHP関数で、スタイルシート（style.css）のパスを受け取り、echoで出力しています。PHPはこのようにHTML内に直接記述することができ、基本的に、<!?で始まり;?>でおわります。

（参考サイト – 関数リファレンス/get stylesheet uri – WordPress Codex 日本語版）
（参考サイト – PHP: PHP マニュアル – Manual）

これで、作成したindex.phpにstyle.cssのスタイルが適用されました。

以上の編集が終われば、新しくフォルダを作り、フォルダ名をテーマ名にして、ここにindex.phpとstyle.cssを移動します。そして、ローカルサーバーのWordPressのテーマフォルダ、「C:\xampp\htdocs\wordpress\wp-content\themes」にコピーします。