WordPressの小テーマを作る方法
WordPressのCSS等を触る場合、ツールバーの「外観」→「テーマ編集」から、選んでソースを触ります。
主に触るのは「style.css」「editor-style.css」「header.php」「index.php」位だと思いますが、例えば投稿日など日付を表示させたくない場合などには、多くのシートを触る事になります。
例えば「パンくずリスト」を設置する場合も、先日お話したプラグインのインストールと別に、「header.php」に追記をする場合もあります。（パンくずリストがデフォルトで設定されているテーマの場合は必要ありませんが・・・）
このようにめったに触らない場合はいいのですが、頻繁にシートのソースを書き換える場合、ちょっとしたミスで元のソースを壊してしまう事があっては面倒なことになります。
そこで、先日の「プログラムをさわる為の最低限の準備」でも少し触れていますが、小テーマを作ることにより、この問題を解消することが出来るのです。
では、具体的に小テーマの作り方を説明します。
小テーマは親テーマに関連付ける
「小テーマ」というくらいですから、「親テーマ」というのもあり、それに関連付けなければいけません。
親テーマとは、現在使っている、あるいはこれから使いたいテーマですが、ここで使っているテーマは「BlogoLife」ですので、これを親として小テーマを作っていきます。
他のテーマを使っている方は、「BlogoLife」の部分をご自分の利用されているテーマ名に直して読んでください。（例えば標準テーマで「Twenty Twelve」等がありますね）
スタイルシートを作成する
テキストエディターを使って、以下のソースを書きます。
[code language="CSS"]
/*
Theme: Name: BlogoLife Original
Author: Hoxmo
Template: blogolife
*/
@import url('../blogolife/style.css');
[/code]
「Theme:Name:」「Author:」の後の文字は、半角スペースを入れて、ご自身が分かる名前を記入してください。
「Template: blogolife」という所は親テーマの名前です。実際のディレクトリー名ですので大文字/小文字は正確に書く必要があります。
「BlogoLife」で作成されている方は、小文字で「blogolife」と記述します。
6行目は、親テーマのCSSの場所を記述し、この子テーマを使う時には、指定した親テーマも含めて適用出来る様にします。
書けましたら、仮にデスクトップやマイドキュメント等、分かる場所に「mystyle」「child」など、分かりやすい名前でフォルダを作成し、「style.css」というファイル名でテキストを保存します。
ここでは「mystyle」という名前で、フォルダを作っていきます。
【几帳面な方に起こりやすい失敗】
このソースを書く時に気をつけなければならない事があります。
「Author: Hoxmo」のように、コロン「:」が使われていますが、この半角記号「:」の後ろは半角スペースのみです。
見た目の体裁を整えるためスペースを多く入れてしまうと、テーマが表示されなかったりしますので注意してください。
もう一つ、同じようにビジュアルエディターも良く触りますので、小テーマに含めておきましょう。
テキストエディターで新規作成で新しくファイルを作ります。
以下のように記述します。
[code language="CSS"]
/*
heme: Name: BlogoLife Original
Author: Hoxmo
Template: blogolife
*/
@import url('../blogolife/editor-style.css');
[/code]
違う部分は、最後の行で指定しているCSSが「editor-style.css」になっているだけです。
書けましたら、先ほどと同じフォルダ「mystyle」に、テキストファイルを「editor-style.css」というファイル名で保存します。
余力があれば、同じフォルダにサムネイル画像(スクリーンショット)を作って入れておくと、後で見やすいと思います。
画像は300×255で、ファイル名は「screenshot.png」とします。
画像の作り方は、別途「faviconの作り方」で説明しますが、今回わからなければ下の画像をコピーして使ってもらってもかまいません。
確認しておきますが、「mystyle」フォルダの中身は、下の3つのファイルが入っています。
このように3つのファイルが「mystyle」というフォルダに出来ていればOKです。
データをアップロードする
では、前項で作成したデータをサーバーにアップロードします。
FTPツールを立ち上げて転送先の各項目を設定します。
FTPの設定内容は、サーバー契約時に送られてきたメールに記載されています。
各FTPソフトの設定はサーバーのマニュアルに詳しく記載されていますので、そちらを参照ください。FTP設定方法 (ロリポップのサイト内)
FireFTPの場合は下記の様な画面になります。
設定画面の入力ができたら保存して、「接続」をクリックしてサーバーに接続します。
FTP画面のサーバー側(左ウインドウ)で、「wp-content」→「themes」の順にクリックします。
この「themes」というディレクトリ内に、先ほど作成した「mystyle」というフォルダごと転送します。
転送先に「mystyle」といディレクトリが出来た事を確認します。
WordPressに小テーマを設定する
「WordPress」の管理画面にログインします。
「外観」→「テーマ」のテーマの設定画面の利用可能なテーマに「mystyle」と言うテーマが作成できましたので、これを有効化します。
「WordPress3.8」に更新している場合は以下の様な画面です。
「mystyle」というテーマにマウスを持っていくと画面に「有効化」というボタンが出てきますので、クリックします。
テーマのインストールがおわりましたら、「外観」→「テーマ編集」とクリックします。
この記事の1枚目の画像と比較すると解りますが、右側メニューもスッキリして作業に必要なスタイルシートだけが「小テーマ」として作成されています。
編集画面も、テキストエディターで作成したソース以外はありませんので、このソースの下に変更をしたい内容を書き足していけば大丈夫です。(既に記述しているソースを消さないように注意してください)
試しに、このスタイルシートに以下のソースを足してみます。
[code language="CSS"]
#site-title a {
color: #FF0000;
}
[/code]
サイトのタイトル文字を赤にするという記述です。(実験ですので解りやすくするため)
以下のように「style.css」内に記述して、「ファイルを更新」します。
サイトを確認すると、タイトル文字が赤になっていると思います。
小テーマのメリットとデメリット
小テーマを使うメリットは以下の点です。
ソースを記述する時にミスが起こりにくい
親テーマがアップデートされてもソースはそのまま使える
しかし、デメリットも有ります。
テーマによっては、親テーマと同じスタイルを適用した時(重複した時)に、表示が不安定な時があります。
また、標準にある「h1」「h2」などの見出しタグでも、テーマによって記述が変わる場合が多いですので、テーマが変われば結局は、書き換えなければいけません。
Hoxmoの場合、見出しなど汎用のもの以外は、「.akamoji-01」のように重複しないであろうタグで追加しています。
このため、たのテーマを使う場合も同じ設定を流用する事もできます。
しかし、テーマのイメージに合わせて、文字装飾も変えたいと思うので「親テーマ」が更新される時以外は、あまりこの作業は意味が無いかもしれませんね。
なので、元に戻したい場合や途中でわからなくなった場合、「小テーマ」以外のテーマを「有効化」してから、今回作った「小テーマ」は削除すれば元に戻ります。
「無駄なことをさせやがって！」と、怒られるかもしれませんが、「小テーマ」を作って作業することは「WordPress」を使う上で一般的なことです。
しかし、「小テーマ」を作らなくても、直接「親テーマ」のソースを書き換えることも出来ます。
なので、どちらが良いかは微妙なところですが、今回の一連の作業は今後応用が効きます。ゼロの状態からCSSを作り、FTPでアップロード先を選んでアップロードする。
テーマを頻繁に変えるHoxmoにしてみたら、今回の作業は「WordPress」のカスタマイズの作業の中で、一番面倒くさい作業だと個人的には感じます。
