WordPress 初心者向け カスタマイズってどうやるの?

「WordPressはインストールできた。オリジナルテーマの作成はまだハードルが高いので、まずは配布テーマをカスタマイズしてみよう。イメージに合う配布テーマもインストールした。さて、カスタマイズはどうやればいいのだろう?」という初心者の方向けの記事です。

WordPressのディフォルトテーマである「Twenty Eleven」をカスタマイズすることを前提に解説していきます。

「Twenty Eleven」のデザイン↓

ヘッダー、コンテンツ、サイドバー、フッターと、横幅固定の3カラムのレイアウトですね。

では、カスタマイズしていきましょう!

管理画面から手軽にカスタマイズできる項目

テーマによっては、管理画面から手軽にカスタマイズできる項目が用意されている場合があります。
「Twenty Eleven」は、WordPressのディフォルトテーマなだけあって、そういう項目が多いですね。

管理画面 > 概観 > テーマ

設定: ウィジェット | メニュー | テーマ設定 | 背景 | ヘッダー」という項目がそれです。
ウィジェット、メニューに加えて、文字色、リンク色、レイアウト、背景画像、背景色、ヘッダー画像などのカスタマイズが、管理画面のメニュー項目としてすでに用意されています。(「Twenty Eleven」のテーマフォルダ内の functions.php とかにそういうコードが書いてある)

これらの項目のカスタマイズであれば、テンプレートやタグなどを意識しなくても、管理画面上から簡単にカスタマイズすることができます。

ウィジェット

ウィジェットをカスタマイズしてみましょう。
このテーマでは、「メインサイドバー、ショーケースサイドバー、フッターエリア1、フッターエリア2、フッターエリア3」と、ウィジェットを配置できるエリアがたくさん用意されているようですが、基本的なメインサイドバーにウィジェットを追加してみます。

使いたいウィジェットをドラッグ&ドロップで追加していきます。
試しに「カレンダー」と「最近の投稿」を追加してみましょう。

こうなります↓

※「ディフォルトで表示されていたアーカイブとメタ情報はどこにいったの?」と疑問を持った方は、後述する「テンプレートの編集」まで出来るようになれば謎は解けます。
最初に答えを言っておくと、サイドバーのテンプレートに『ウィジェットがなにもなかったら「アーカイブ」と「メタ情報」を表示する。』というコードが書かれているからです。

メニュー

メニューをカスタマイズしてみましょう。

1. メニューを作成します。名前をつけて保存です。
2. メニュー項目を追加します。
3. メニューを表示する位置を指定します。

こうなります↓

※「Twenty Eleven」のテーマはメニュー機能に対応している為、作成したメニューを管理画面上で組み込むことが可能になっています。対応していない場合は、テンプレートを編集して組み込むことになります。

その他

「テーマ設定」「背景」「ヘッダー」の項目から、文字色、リンク色、背景色、ヘッダー画像などをカスタマイズすることができます。

さて、「Twenty Eleven」のように、管理画面上からカスタマイズできる項目を用意しているテーマもありますが、これらの項目もすべて含めて、さらにそれ以外のカスタマイズの基本は、やはりテンプレートの編集になるかと思います。

テンプレートの編集には、HTMlやCSS、テンプレートタグの知識が必要になってきます。

テンプレートの編集

テンプレートの編集方法としては、管理画面から編集する方法と、ファイルを直接編集する方法の2通りがあります。
いずれも作業内容はまったく同じです。
まずは、管理画面から編集する方法を説明していきます。

テンプレートの編集(管理画面から)

管理画面 > 概要 > テーマ編集

右側に、「Twenty Eleven」のテーマに含まれる、テンプレートの一覧が表示されています。
この中から編集したいテンプレートを選択して、コードを編集していきます。

と、さらりと言ってしまいましたが、テンプレートの予想外の多さに、「なんだこれ!?」と思われたかもしれません。
多機能なテーマほど、デザインに凝ったテーマほど、テンプレートは細分化されているものです。

でも大丈夫です。WordPressの基本のテンプレートがなにかを知っていれば、まったく恐れることはありません。

「Twenty Eleven」のデザインをテンプレートで分割してみます↓

そう!
ほとんどのカスタマイズには、ヘッダー(header.php)、サイドバー(sidebar.php)、フッター(footer.php)の3つのテンプレート、そして、スタイルシート(style.css)を編集するだけ十分なのです。

もちろん、その他に用意されたテンプレートに意味がないわけではありません。
そういう細分化されたテンプレートは、テンプレート編集に慣れてきたら徐々に紐解いていけばいいと思います。

※もう少し詳しい基本テンプレートについては、「WordPress Webデザイナー向け オリジナルテーマ作成方法」も参照してみてください。

テンプレートの編集(ファイルを直接)

テキストエディタとFTPソフトをお使いなら、直接ファイルを編集する方が簡単かもしれません。
作業内容はまったく同じです。
テンプレートの格納されているテーマディレクトリ(wp-content/themes/twentyten/)を開いて編集しましょう。

カスタマイズのプロセスがわかったら

あとはもう、HTML、CSS、テンプレートタグなどを覚えていって、徐々にカスタマイズできる範囲を広げていくしかありません。勉強ですッ

コメントを残す