3.1 オリジナルテーマの初期設定 - Yoshikikojima/hajimete-no-wordpress GitHub Wiki

WordPress の管理画面の機能は一通りキャッチアップできたでしょうか？ここからはいよいよオリジナルのテーマ作成を行っていきます。

見本となるテーマを用意しましたので、そちらをダウンロード・インストールして、カスタマイズをするという流れで学習を進めていきたいと思います。

オリジナルテーマのダウンロード

オリジナルテーマは「first theme」という名前で作成されています。

こちらからダウンロードしてください。

[オリジナルテーマの画像]

オリジナルテーマのインストール

テーマのインストールは 2 種類の方法があります

テーマのディレクトリにファイルを設置する

ダウンロードした「first-theme.zip」を解答し、「first-theme」フォルダを、WordPress フォルダの wp-content/themes に設置します。

設置がうまくいくと、管理画面の外観 > テーマ内に「first theme」が表示されます。

管理画面からファイルをアップロードする

管理画面の外観 > テーマ > テーマのアップロードから「first-theme.zip」を選択すると、テーマのアップロードができます。

どちらも同じになりますが、後者のほうは「上書き保存」ができません。ですので前者のようにディレクトリに直接設置する機会が多いかと思います。

style.css について

style.css は WordPress のテーマの中には絶対に必要なファイルの 1 つです。

「first theme」の中を見てみると、以下のようなファイルとフォルダがあります。

• index.php
• header.php
• footer.php
• archive.php
• single.php
• page.php
• functions.php
• screenshot.png
• images
• style.css

それぞれのファイルの役割はこのあとのレッスンで 1 つずつ説明します。

今回は特に重要な style.css の解説です。

style.css の冒頭にあるコメントについて

style.css には、このテーマの名前や作者、バージョンなどの情報が記載されます。

ファイルを開いて、冒頭部分を見てみましょう。

Theme Name : first theme
Theme URL :
Description : ちょっとデザインWordPress講座用のテンプレートです
Author : Yoshiki Kojima
Author URI : https://chot.design
Version : 1.0
Tags :

それぞれの項目について解説します。

Theme Name : テーマの名前（必須）
Theme URL : テーマのURL
Description : テーマの説明
Author : テーマの作者
Author URI : 作者のURL
Version : バージョン
Tags : テーマのタグ

「Theme Name」は必ず記載しなければならない項目で、それ以外は任意での記載になります。

ここの記述した内容は外観 > テーマの詳細部分に表示されます。

[画像]