WordPressは比較的簡単にインストールできますが、デザインを変更するには、多少勉強が必要になります。これから WordPress の勉強をする方が知っておきたいWordPress 基礎知識の中で、WordPress のテーマについて分かりやすく説明します。
目次
WordPress のテーマとは？
WordPress は、デザイン部分とコンテンツ部分が完全に分かれているため、着せ替え遊びを楽しむように、簡単にWebサイトのデザインを切り替えることができます。着せ替えの洋服にあたるのがテーマです。
テーマは多くのデザイナーさんが公開していて、無料でも素敵なものがたくさんあります。
テーマには、色や写真の形などのデザインだけではなく、スライドショーや記事の表示方法、アクセス解析などの機能も含まれています。
このブログで使わせていただいているテーマは、EmanonFreeというテーマで、無料ですが、高機能です。
テーマの選び方
テーマには背景色やヘッダ画像などを管理画面から変更できる高機能なテーマと、カスタマイズを前提に作られているシンプルなテーマがあります。
あまり面倒なことはしたくなくて記事を書くことに集中したい方は高機能なテーマがお勧めです。
逆に、これから WordPressを勉強される方は、シンプルなテーマがお勧めです。
テーマの切り替え方法
テーマを切り替えるには、WordPressの管理画面で「外観」にマウスポインタを合わせると表示されるサブメニューから「テーマ」を選びます。
インストールされているテーマが表示されるので、使いたいテーマにカーソルを合わせ、表示される「有効化」ボタンをクリックします。
ブログを表示すると、切り替わっていることが確認できます。
公式テーマのインストール
テーマを選択する画面で、「新しいテーマを追加」に「＋」記号が表示されているので、そちらをクリックします。
テーマの一覧が表示されるので、使いたいテーマにマウスを合わせると表示される「インストール」ボタンをクリックするとインストールできます。
ダウンロードしたファイルをFTPでインストールする方法
インターネット上で見つけたテーマをFTPでインストールすることもできます。スパムが仕込まれた危ないテーマもあるので十分気をつけて選ぶようにしてください。
今回は、カスタマイズにお勧めの WordPress Theme Gush5をインストールしてみます。
まず、Gush のサイトからテーマをダウンロードします。
次に、ダウンロードした zip ファイルをいったん解凍してから、FTPでアップデートします。
アップロード先フォルダですが、FTP で WordPress をインストールしたフォルダ内をのぞいてみると、３つのフォルダがあります。各フォルダの内容は以下のとおりです。
| wp-admin | 管理画面に関連するファイル |
| wp-content | 投稿記事、写真などのファイル |
| wp-includes | WordPress本体のプログラム |
テーマのアップロード先は、「wp-content」の中にある「themes」フォルダになります。
カスタマイズの準備
子テーマをつくる
カスタマイズするときはテーマ本体ではなく、子テーマをつくり、子テーマの中を変更していきます。そうすることで、親テーマがアップデートされても影響を受けずに済みます。
まず、FTPで、theme フォルダ内に子テーマ用のフォルダを作ります。フォルダの名前は何でも良いですが、「gush-child」という名前にしておけば、後で分かりやすいです。
テキストエディタで、style.css を作り、「gush-child」にアップロードします。
style.css の内容は、次のようにします。
|
1 2 3 4 5 6 |
/* Theme Name: gush-child Template: gush */ /*子テーマ用のスタイルを以下に記述 */ |
子テーマのstyle.css の注意事項
上記をコピペすればうまくいくはずですが、注意点は以下のとおりです。
- 必ず、１行目から記入します。
- Template名は、親テーマの入っているフォルダと同じにします。大文字・小文字を区別しますので注意が必要です。
- Thema Name: の「:」と「gush-child」、Template: の「:」と「gush」の間には、必ず半角スペースを入れます。
- スペースを入れなかったり、全角にするとうまくいかないようです。
次に、function.php を作り、「gush-child」にアップロードします。
function.php の内容は、次のようにします。
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
テーマのイメージ画像 screenshot.png も作って、「gush-child」にアップロードします。
親テーマの中にある「screenshot.png」に「子テーマ」の文字を追加したイメージ画像を新たに作ります。
これで、テーマに「子テーマ」が表示されるようになりますので、有効化すればOKです。
子テーマを使ったカスタマイズ
WordPress は、まず、必要なファイルを、子テーマの中から探すようになります。ですから、今後、カスタマイズが必要になったら、子テーマ内にファイルを作っていきます。
親テーマと同じファイル名のファイルが子テーマにあった場合は、親テーマのファイルは無視されて、子テーマのファイルが採用されます。
また、スタイルシートは、今回追加した style.css 内に書きます。同じ クラス名やID のスタイルは、親ではなく、子テーマが優先されます。
functions.php だけは特別で、親テーマの functions.php が優先され、その後、子テーマの functions.php が読み込まれます。
テーマの構成
Gushのファイルはどうなってる？
カスタマイズの準備が整ったところで、Gush のフォルダ（親テーマの方）を見てみましょう。
画像格納用のフォルダが１個、ファイルが19個あります。
ファイルの内訳は以下のとおりです。
特別な役割のあるファイル
| css3-mediaqueries.js、gush.js、html5shiv.js、respond.src.js | JavaScript |
| editor-style.css、style.css | スタイルシート |
| functions.php | テーマ専用の機能を持たせるためのプログラムを記述するファイル |
| screenshot.png | テーマの画像 |
記事を表示するためのファイル
| home.php | フロントページ用 |
| index.php | フロントページ以外のページ用 |
| page.php | 固定ページ用 |
| single.php | 投稿ページ用 |
| archive.php | アーカイブページ用 |
| header.php、sidebar.php、footer.php、comments.php、sns.php | その他ページを構成するパーツ |
WordPress テンプレートファイルの仕組み
Gush にはテンプレート用のファイルは必要最低限になっているため、カスタマイズや WordPress の勉強に向いています。先ほどご紹介した simplicity のように、管理画面から簡単にカスタマイズできるテーマは、その分、ファイル数が多くなり、複雑になります。
例えば、sidebar.php というファイルは一つでも良いし、sidebar-left.php や sidebar-right.php を作って、左右に異なるサイドバーを表示させることができます。
このように、WordPress は用途によってテンプレートファイルを増やしていき、自在に Webサイトを構築できるところが魅力です。ただし、自由な分、テンプレートファイルがたくさんあると、どこにどのファイルを使っているのか分からなくなります。そんなとき便利な図があります。
見にくくてすみません。こちらに大きい画像があります。出展は、テンプレート階層 – WordPress Codex 日本語版です。
左側から順番に優先されるテンプレートファイルが並んでいます。
例えば、サイトのトップページ（フロントページ）を表示するとき、WordPress は、まず、front-page.php を探します。なければ、次に、home.php を探し、home.php もなければ、index.php を表示するというわけですね。
テンプレートの基礎知識は以上で終わります。
次回は、それぞれのファイルの中を見て行こうと思います。
長野県駒ヶ根市在住。ネットショップ構築とネットショップ運営サポートをしています。このサイトでは、ユーザーさん向けに役立つIT情報や、技術情報のメモを公開しています。詳しいプロフィール