新しいサイト構築のため、テーマ『賢威6.2』をカスタマイズすることにしたので、記事として残しておこうと思います。CSSの編集内容自体は、他のテーマでも参考になりますしね。

テーマのインストール
最初は、テーマのインストールから始めます。
管理画面の『外観』>『テーマ』から、『新規追加』をクリック。
賢威WordPress版はZipファイルとして保存されているので、『テーマのアップロード』を実行し、インストールしたいテーマのZipファイルを指定。『今すぐインストール』をクリックします。

1-1

 

1-2

有効化したら、サイトに新たなテーマが適用されます。

 

コラム:賢威と子テーマ
通常、テーマを編集するときは、親テーマではなく、子テーマのスタイルシートを編集する方法を取ります。この理由は、以前に書いた記事を参照していただくのが良いと思います。

『Twenty Fourteen』はじめてのテーマカスタマイズ(第1回)子テーマの作成

ただ、賢威の場合は、子テーマを作らず、直接、親テーマとしてインストールしたテーマを編集している方が多いです。

そもそも、賢威は、ひとつのスタイルシート(style.css)ではなく、ユーザーがカスタマイズしやすいように、『○○.css』というファイルが複数用意されているという特徴があります。そのため、子テーマを作成して、従来のstyle.cssから、さまざまなデザイン変更を行おうとすると、PHPを編集するなどの作業が必要になるなど、かえって手間がかかるのです。
デザインに関わるCSSという拡張子がついたファイルの編集をミスっても、大したトラブルにはなりませんが、PHPの編集をミスると、管理画面にログインできなくなるといったトラブルが起こる可能性が高くなります。
また、賢威は、新たなバージョンのテーマは、新たなテーマとして適用し、古いものからバージョンアップしていくことが前提になっているテーマではありません。そのため、親テーマを直接編集する方が多いのだと思います。私も、賢威のカスタマイズは、子テーマは作成せずに編集していくことにします。ただ、カスタムCSSで問題ないものは、こちらを使おうかと思っていますが。
カスタムCSS機能については後日、記事にしたいと思います。

 

賢威のCSSの種類
管理画面の『外観』>『テーマの編集』をクリックすると、右側にテーマを構成するテンプレート(PHPやCSS)が一覧表示されます。
賢威を構成するテンプレートのうち、CSSを確認してみます。デザインに関わる設定変更の多くは、CSSの編集でおこないますが、賢威の場合は、特定の部分のデザインを変更するために、どのCSSの変更を行えばよいかわかりやすいよう、目的ごとにファイルが分けられています。

1-31-4

 

きりが良いので、今回はここまで。
次回からは、これらCSS(おもにdesign.css)を編集して、テーマのカタスタマイズをしていきます。