--- title: "テーマフォルダを作ろう – WordPressテーマをゼロから作る" canonical_url: "https://olein-design.com/blog/dev-wp-theme-02" language: "ja" date_published: "2016-09-29T08:15:28+09:00" date_modified: "2016-09-29T08:15:28+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "WordPress" --- # テーマフォルダを作ろう – WordPressテーマをゼロから作る 今回から徐々にですが**WordPressテーマを作成**していこうと思います。 前回にも少し書きましたが、今回の企画では**WordPress内にテーマフォルダを新しく作り制作していく**という方法で制作していこうと思います。デザイニング・イン・ブラウザってやつですね。（やつですか？知ったかぶり）ブラウザなどで実際の表示を確認しながらコーディングを行い構築していく方法を指します。（のはずです） ## テーマファイルとしてWordPressに認識してもらうために最低限必要なファイル群 WordPressで利用できるテーマは、WordPressが設置してあるディレクトリの中の`wp-content`の中の`themes`というフォルダの中にインストールされています。実際にWordPress管理画面より新しくテーマをインストールしてみると、新しくディレクトリが作られてテーマファイルが表示されるはずです。 そこにこれから作っていくテーマファイルを作って、その中で制作作業を行っていくのですが、**最終的にどんなファイルが必要になってくるかは、現時点ではわかりません。**最初からきっちりと仕様を決めて制作することも可能ですが、実際は制作過程でどんどんと最適化をしていくので、必ずしも予定していた通りにはならないこともあります。ですので、まずは**WordPressにテーマとして認識してもらうために必要な最低限のファイルを設置する**ことから始めます。そして、制作を進めていくなかで、ファイルを分割したりしていくことになります。 では、最低限必要なファイルですが、以下の様なものになります。 - style.css（スタイルシート） - index.php（home.phpでも多分大丈夫。テンプレートファイル） この２つのファイルがあればWordPressはテーマとして認識してくれます。 ## WordPress管理画面にしっかりとテーマの情報を掲載するために 最低限のファイルは用意できましたか？`themes`フォルダ内に任意のフォルダ名をつけて、その中に`style.css`と`index.php`という２つのファイルを作りましょう。ちなみに私は、**od5.0**というフォルダの中にファイルを作成しました。 現在の状況をWordPress管理画面にログインして確認してみましょう。今はこんな表示になっているのではないでしょうか。 ![dev-wp-theme-02-01](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-02-01-1024x653.png) テーマの名前部分を見てみると、テーマフォルダ名に設定した名前が自動的に表示されています。【テーマの詳細】を押して詳細を見てみても、 ![dev-wp-theme-02-02](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-02-02-1024x647.png) ほぼ何も表示されていないという状況です。他のテーマとも掲載情報を見比べてみてください。 こちらに情報を掲載するためには、`style.css`ファイルに必要情報を記載しないといけない仕組みになっています。 各項目いろいろと設定ができますが簡単に紹介してみます。 Theme Name テーマの名前 Theme URI テーマを紹介しているウェブページアドレス Author テーマ作者 Description 説明文 Version バージョン License ライセンス名 License URI ライセンス内容が確認できるページアドレス Tags WordPress公式さテーマサイトで利用するためのタグ Text Domain テキストドメイン。多言語化する際に利用します。 これらを入力していきます。公式にアップするのであれば、すべてもれなく入力する必要があります。が、今回は最低限の内容で割愛させていただきます。詳しくはこちらをご覧ください。 参照：[https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90#.E3.83.86.E3.83.BC.E3.83.9E.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88](https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90#.E3.83.86.E3.83.BC.E3.83.9E.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88) 実際に入力した内容がこちらです。 このように入力すると、実際に管理画面で確認するとこのように表示されます。 ![dev-wp-theme-02-03](https://olein-design.com/wp-content/uploads/2016/09/dev-wp-theme-02-03-1024x646.png) 確認された際に【有効化】ボタンを押しておきましょう。**有効化**とは、WordPressにインストール（今回の場合だと作成）したこのテーマを利用しますよ！という作業になります。常にインストールされているテーマのどれかが有効化されている状態になっています。初期状態であれば、Twenty****というテーマが有効化されているはずです。 今後、制作を進めていく上で、ブラウザ上でも実際の表示やコードなどを確認していく必要があるので、有効化をしておいて適応されるようにしておきましょう。