テーマフォルダを作成する

今回から、index.php(ブログ一覧)作成に部分に入ります。 実際にポートフォリオ課題をWordPressテーマに移し替えていきましょう。

Wordpressのテーマについて

htmlを作成した際に、ブログ一覧ページはblog-index.htmlやblog-top.htmlなど任意でファイル名を付けました。

しかしWordpressの場合、ファイル名にルールがあります。 上の作成順番を見て「index.phpならトップページ(index.html)では？」と思った方もいらっしゃるのではないでしょうか。

WordPress基礎講座ではindex.phpをトップページに利用しました。 が、WordPressでホームページ(フロントページ)用に使用されるテンプレートファイルは複数あります。 WordPressは各テンプレートの有無・表示設定をチェックして、優先順位に沿ってテンプレートを選択してくれます。

※全テンプレートファイルと優先順位の詳細は、テンプレート階層 – Japanese Team – WordPress.org 日本語に解説と図解があるのでご確認ください。

上の図のようにサイトフロントページは、以下の優先順位で採用されます。
front-page.php > home.php > index.php

front-page.phpやhome.phpが存在する場合にはそちらが優先で表示されます。

存在しない場合に、はじめてindex.phpがフロントページに表示されるのです。

課題サイトのページ構成

WordPressの優先順位と一致するよう、作成したhtmlファイルの名称を変更する必要があります。課題の３ページの場合では下図のようになります。

テーマディレクトリを作る

WordPressにテーマと認識してもらうためのルールとして、テーマディレクトリ内に最低でも２つのファイルが必要です。

• index.php
• style.css

今回は画像やjsファイルもありますので、作成中のフォルダ全体をコピーしてテーマディレクトリ化してしまいましょう。

①bootstrapポートフォリオサイトをフォルダごとコピー

②仮想サーバーの「themes」フォルダ内にペースト

③style.cssをテーマディレクトリ直下に移動させる

※cssファイルの名称が異なる方はファイル名をstyle.cssに変更してください。

④index.phpを作る

フォルダ内にあるblog-index.html（ブログ一覧ページ）をコピーします。

ファイル名をindex.phpに変更して保存してください。 下図のように注意のポップアップが出ることがありますが「はい」で大丈夫です。

自作テーマを有効化する

テーマ用の記述をする

テーマ管理（選択画面）で管理しやすいよう、style.cssにテーマ情報を入れましょう。

デモファイルでは最低限の３項目を記入しました。

/*
Theme name: ポートフォリオレッスン - ○○
Description:bootstrap課題をワードプレス化してみよう！
Author: ○○
*/

※ ○○部分にはご自身のお名前を入れてください。 Theme Nameの「ポートフォリオデモ」部分は任意の名前に変更して頂いて構いません。

公式サイトにアップロードされているようなテーマであれば、下記のようにもっと色々な情報が書かれています。 他に書きたい項目がある方は追加してください。

/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

テーマを有効化する

WordPressの管理画面にログインし、 テーマ選択画面から作ったテーマを有効化します。

テーマのイメージ画像を入れたい方は WordPress基礎講座【前編】7.テーマの準備 と同様にテーマディレクトリにscreenshot.pngを追加してください。

ローカルサイトを確認する

テーマを有効化したら、画面上部に表示されている管理バーから「サイトを表示」をクリックしてください。

HTML/CSSの構成により表示には多少の違いがありますが、下図のような、何となくHTMLで作ったサイトの骨格は感じられるような表示になるはずです。

次回からはこのindex.phpをWordPressテーマらしく修正していきましょう。