『THE THOR』【デザイン着せ替え機能】の使い方と注意点

サイトデザインを考えるのがちょっと苦手・・・、デザインの初期設定をすべて自分でするのがちょっと面倒・・・って方にオススメなのが【デザイン着せ替え機能】です。

この機能を使えば、『THE THOR』公式ページで公開されているデモサイトのような、素敵なデザインのサイトを、一瞬で設定することができるのです！！　素晴らしい！！

しかし、注意点しないといけないこともあります。それを理解した上で、着せ替え機能を使ってデザインの設定をしていきましょう。

デザイン着せ替え機能を使う上での注意点

まず、デザイン着せ替え機能を使う上で中止しなければいけない点があります。

自分のサイトに合わせた設定

デザイン着せ替え機能を使い、サイトデザインを設定した直後は状態は、デモサイトのデザイン！そのもの。

何が言いたいかというと、デモサイトをそっくりそのまま自分のサイトに持ってきている状態。つまり、「WP THEME THOR by FIT-Web Create.」や「国内トップクラスのブロガー/アフィリエイター向けWPテーマ」なんて文字がそのまま設定されています。

着せ替え後にすべきことは、これらを自分のサイトに合わせたものに設定していかなくてはならないのです。当たり前ですけどね。画像を一緒にダウンロードした場合は、サイトロゴなどもTHORのロゴが設定されています。これらの画像も用意しておく必要があるのです。

着せ替えを1番に

デザイン着せ替え機能を使ってデザインを設定しようと考えているのなら、何よりも一番に、着せ替え作業を行う必要があります。なぜなら、着せ替え機能を使うと設定していた項目が上書きされてしまうからです。

例えば、テーマを『THE THOR』に変更後、カスタマイザーで広告タグの設定をしたとします。着せ替えのスタイルデータには広告タグは設定されていないので、機能を使うと空欄に戻ってしまうのです。

カスタマイズ設定を行う場合は、着せ替え作業が終わってからすると、二度手間にならなくてすみます。

デザイン着せ替え機能を使うための準備

デザイン着せ替え機能を使うための準備は２つ！

1. Customizer Export/Importプラグインのインストール
2. デモサイトからスタイルのダウンロード

順番に決まりはないので、どちらから始めてもOKです。

Customizer Export/Importプラグイン

WordPressのカスタマイザー内にエクスポート/インポート機能を追加するプラグインです。このプラグインを使用すれば、カスタマイザーで設定したテーマに関する各種設定をエクスポートしたり、インポートしたりすることができるようになります。

エクスポートしたファイルをバックアップとして保存しておけば、いろいろと修正を加えた後に、やっぱり戻したいなぁって事になっても、ファイルを使って戻すことができます。

プラグインのインストールと有効化

まずは、ダッシュボード ＞ プラグイン ＞ 新規追加　から検索し、インストール・有効化しましょう。

スタイルのダウンロード

ザ・トールのデモサイト一覧の中から、自分のサイトデザインに設定したいスタイルをダウンロードします。

ダウンロード

スタイルダウンロードボタンをクリックすると、ファイルをどこに保存するか聞かれるので、任意の場所に保存しましょう。

保存したファイル名は、「the-thor-child-exort-demo05.zip」です。demoの後の数字は、デモサイトに表示されているスタイル番号になります。

ファイルの展開

ダウンロードしたZIPファイルを展開します。私はWindowsを使っているので右クリック ＞ すべての展開 でファイルを開くことができました。

展開すると同じ名前のフォルダが作成され、そのフォルダ内に「the-thor-child-exort-demo05.dat」というファイルが入っています。（05はスタイルの番号です。）

デザインを着せ替える

準備が終わったら、デザインを着せ替えましょう！

『THE THOR』の親・子テーマをインストールし、子テーマを有効化していることを前提に話を進めていきたいと思います。

カスタマイザーを開く

外観 ＞ カスタマイズ　でカスタマイザーを表示すると、一番下に【エクスポート/インポート】という項目が追加されています。（この項目が表示されていない場合は、Customizer Export/Importプラグインが有効化されてないので、ダッシュボードに戻りプラグインを有効化しましょう）

カスタマイザーの【エクスポート/インポート】を選択すると、「書き出し」「インポート」といった内容が表示されます。

スタイルをインポート（ファイルの選択）

デザインを着せ替えるために、ダウンロードしたスタイルファイルをインポートしていきます。

まずは、ファイルを選択ボタンをクリックし、準備でダウンロードした「the-thor-child-exort-demo0＊.dat」を選択します。

画像ファイルをダウンロード

ファイルを選択の下にある「画像ファイルをダウンロードしてインポートしますか？」にチェックを入れると、デモサイトで表示されている画像も一緒にダウンロードすることができます。画像も一緒に使いたい場合はチェックを入れましょう。

インポートする

最後にインポートボタンを押せば、インポートが始まり、デモサイトと同じデザインが設定されます。

以上でデザインの着せ替えが終わりました。チョチョイのチョイで簡単です。

デザイン着せ替え機能を使えば、簡単にデザインの設定をすることができる魔法のようなツールです。

しかし、それは始まりに過ぎません。そこから自分のサイトとして公開するには、着せ替えたデザインの中の必要項目を自分のサイトに置き換えなければならないのです。

私も着せ替えたら終わりって思ってたから、ちょっと戸惑いました。でも書き換える箇所があるのは当たり前のことなんですよね。新しいテーマなのでマニュアルも読まないといけないし、どんなカスタマイズができるのか、どう使えばいいのか・・・不安もいっぱいでした。

だから、これさえ見ればすぐに設定できるって情報を、次回からお伝えしようと思っております。

まだ『THE THOR（ザ・トール）』をダウンロードしようか手探りの方、WordPress初心者の方、とても素敵なテーマであることは間違いありません。次回以降に解説する「着せ替え機能の設定方法」を読んでいただくと、すぐに始められると思います。

デモサイトに興味がある方は、是非公式ページを参考にしてみてくださいね。