ザ・トールでは、９種類のデザインが用意されていますので、
ここでは、そのデモサイトから、０４のデザインを利用して
ザ・トール・ワードプレスの雛形を作成するための
カストマイズを行います。
デザイン着せ替え機能でスタイルを取り入れる。
ダッシュボード「外観」⇒「カスタマイズ」からカスタマイザー画面を開きます。
WordPressプラグイン「Customizer Export/Import」を有効化すると
メニューの最下部に「エクスポート/インポート」というメニューが
追加されているので、これをクリックします。
これまでのザ・トール・ワードプレスの設定を「書き出し」項目の
「書き出し」ボタンをクリックして、現在のカスタマイズ設定の
バックアップファイルを保存します。
ファイル名は「the-thor-export-dat」となっています。
分かりやすい様にフォルダを作って保存しておきましょう。
これで着せ替えで上手く行かなかった場合に元の状態に戻せます。
スタイルNO 04 のデモサイトをダウンロード・インポートする。
公式サイトからスタイル04デモサイトをダウンロード。
https://thor-demo04.fit-theme.com/
トップページのメインビジュアルが静止画になっていて、
画像にマスクがかかっていて落ち着いた印象のデザインスタイルです。
「the-thor-child-export-demo04.zip」というzip形式の圧縮ファイルが
ダウンロードされるので、これを任意の場所に解凍して保存します。
解凍されたファイル名は「the-thor-child-export-demo04.dat」という形になります。
「エクスポート/インポート」のメニュー画面の「インポート」
項目の「ファイルを選択」ボタンをクリックして、
あらかじめダウンロードしたデザインスタイルのファイル
「the-thor-child-export-demo04.dat」を選択します。
ダウンロードしたzipファイルではなく、解凍したdatファイルを
選択します。
スタイルファイルを選択したら、
「画像ファイルをダウンロードしてインポートしますか？」に
チェックを入れて、「インポート」ボタンをクリックして
着せ替え完了です。
ザ・トールの「デモサイト04」カストマイズ
ここでは、「デモサイト04」で既に設定されているHE THOR DEMO04用の
サイトロゴ等の画像や、テキスト等やそれ用の設定それらを削除して
デモサイト04スタイルを活かしたオリジナル雛形にするための変更
（カストマイズ）を７項目行います。
【1:TOPページ（タイトル）】
（トップページタイトルが「My WordPress Blog│THE THOR」と設定されています。
変更は、SEO設定 ＞ TOPページ設定 ＞ TOPページの＜title＞から行う）
【2:TOPページ（ヘッダー・メインビジュアル）】
1.サイトロゴ削除
（「THE THOR DEMO04」という画像が設定されています。
ロゴの変更は、基本設定 ＞サイトロゴの設定 ＞ロゴ画像の設定から
行うことができます。画像が用意できていない場合は、設定されている画像を
削除すれば、テキストでサイト名が表示されます。）
2.注目ボタン（SNSアイコン左）[テーマダウンロード]
（SNSアイコンの左側に示されているのが注目ボタンです。
この変更は、共通エリア設定 ＞ ヘッダーエリア設定 ＞ サブメニュー設定から
行うことができます。）
設定すべき項目は・・・
注目ボタン
注目ボタンのテキストを入力
「テーマをダウンロード」と設定されています。
ボタンのリンク先URLを入力
ザ・トール公式サイトのURLが設定されています。
※注目ボタンを表示したくない場合は、文字とURLを消すと表示されません。
3.メインビジュアル
（静止画像が設定されています。
変更は、TOPページ設定 ＞ メインビジュアル設定 ＞ 静止画時の設定から
行うことができます。 ）
設定すべき項目は・・・
メインビジュアルの設定
画像を登録 削除
画像も一緒にインポートした場合は、デモサイト用の画像が登録されています。
タイトルを入力 削除
「＜img src=”https://thor-demo04.fit-theme.com/wp-content/uploads/2018/09/big_logo.png” alt=”IMAGE”＞」と画像のURLが設定されています。
タグを入力することで、メインビジュアルの上にロゴ画像を表示することができます。
サブタイトルを入力 削除
「結果へ導く次世代WordPressテーマ「ザ・トール」」と設定されています。
※タイトルとサブタイトルを入力している場合、画像の上に表示されます。
【3:TOPページ（フッターエリア）】
（デモサイト04では、フッターエリアにCTAが設置されています。しかし、
自サイトのものではなく、『THE THOR』の案内が表示されているので、
変更する必要があります。）
1.フッターCTA
設定は、共通エリア設定 ＞ フッタートップエリア設定［CTA］ ＞ フッターCTAの
表示設定から行うことができます。
CTAはすぐに必要ないという方は、「フッターCTAを表示するか選択」を
非表示にしておけば、他の項目が入力されていても表示されません。
設定すべき項目・・・
フッターCTAの設定
見出しを入力 削除
「最強のWordPressテーマ「THE THOR」」と設定されています。
本文を入力 削除
「本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマに
したいと思っていますので、些細なことでも気が付いたのであれば
ご報告いただけると幸いです。
ご要望も、バグ報告も喜んで承っております！ 日本国内のテーマでナンバー1を
目指しております。
どうか皆様のお力をお貸しください。よろしくおねがいいたします。」と
設定されています。
アイキャッチ画像を登録 削除
背景画像を登録 削除
画像もインポートした場合は、アイキャッチに表示される画像が設定されています。
ボタンテキスト・リンク先URLを入力 削除
ボタンテキストを入力に「テーマをダウンロード」、ボタンリンク先URLに
ザ・トール公式サイトURLが設定されています。削除
2.コピーライト設定
『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという
表示を消すことができました。ザ・トールにも同じ機能が備わっています。
（急ぐ必要ではないので、後回しでもOKです。）
設定は、共通エリア設定 ＞ フッターエリア設定 ＞ コピーライトの設定から
行うことができます。
FITの表示を設定(コピーライトの説明短文)
「非表示」にすれば消すことができます。
【3:スマホ用固定フッター】
（スマホでサイトが表示されたときに、固定フッターが表示されるように
設定されています。
設定の変更は、共通エリア設定 ＞ 固定フッターエリア設定［スマホ用］から
行うことができます。
設定すべき項目・・・
項目2と項目4の設定
項目２の設定
項目２の設定）シェアボタンが表示されるように設定されていますが、各項目
（Facebook、Twitter、Google+、はてな、Pocket、LINE、Linkedln、Pinterest）
にはチェックが入っていません。表示したい項目にチェックを入れましょう。
項目4の設定
電話番号が表示されるように設定されています。上の画像はデモサイト01
のものですが、04でも同じように「電話番号を入力」欄に（03-0000-0000）が
登録されています。削除
POINT
スマホ用固定フッターの表示が不要であれば、
「スマホ用固定フッター表示するか選択」を非表示にしておきましょう。
不要な項目のみ表示しないのであれば、各項目の「表示する項目を選択」で
自由選択リンクボタンを選び、リンクボタン欄を空欄にしておくと表示されません。
【4: 投稿ページ】
(シェアボタンの設定、フォローボタンの設定、記事下CTAの設定が必要です。)
customizeNo03013（投稿ページ）
1.シェアボタンの表示設定
投稿ページの上下別に表示設定が行えます。設定の変更は、
投稿ページ設定 ＞ シェアボタン設定 ＞ シェアボタンの表示／非表示からです。
デモサイト04では、Facebook、Twitter、Google+、はてぶを表示するように
チェックが入っています。
2.フォローボタン設定
設定の変更は、投稿ページ設定 ＞ フォローボタン設定 ＞ フォローボタンの表示／
非表示から行います。
不要な場合は「表示しない」に設定しましょう。
3.記事下CTA設定
設定の変更は、投稿ページ設定 ＞ 記事下CTA設定から行います。
記事下CTAは、ダッシュボード ＞ CTA管理でコンテンツを作成してからでないと
使えません。作成するまでは「表示しない」にしておいてもいいでしょう。
CTAコンテンツを表示させる場合は、「デフォルトCTAコンテンツ設定」に
CTAのＩＤを入力します。（デフォルトでは175と設定されています。
デフォルトCTAコンテンツ設定 削除
きちんと設定をすると、デモサイトのような表示になります。
【5:SNS設定】
(SNSフォローアイコンの表示設定をしていても、きちんと自分のURLを
設定しておかないと意味がありませんよね。)
1.Follow設定
URLの設定は、SNS設定 ＞ Follow設定から行います。
設定できるSNSは、Facebook、Instagram、Twitter、Google+、YouTubeチャンネル、
Linkedln、Pinterest、RSSです。項目ごとに、URLの入力欄と
Header・Footerの表示設定があります。
2.SNS設定 Follow
デモサイト04では、FaceBook、Twitter、YouTubeチャンネル、RSSで、
RSSにおいてURL欄にDemo-URLが設定されていますので、
変更をしておきましょう。
また同じように、上記３つとRSSの「Header、Footerでフォローアイコンを
表示する」にチェックが入っていますので、不要なものはチェックを外しましょう。
（ここでいうHeader、Footerは、TOPページの表示を指しています。）
【6:AMP設定】
(デモサイト04では、AMPページを表示する設定になっています。
AMPロゴ画像が必要になるので用意しましょう。設定は、
AMP設定 ＞ AMPロゴの設定から行います。)
【7:PWA機能】
(デモサイト04では、PWA機能は無効になっていますが、アイコン下テキストが
設定されています。
そもそもPWAってなぁに？
PWAとは「Progressive Web Apps」の略です。
モバイル向けのサイトを、スマートフォンのアプリのように
使える仕組みのことです。
PWAを実装することで、プッシュ通知やホーム画面へアイコンを
追加したりすることができ、アプリのような機能をWebサイトに
持たせることができるのです。
（参考サイト：SEO HACKS https://www.seohacks.net/basic/terms/pwa/）)
1.アイコン下テキスト
設定は、PWA設定 ＞ PWA機能設定から行います。
PWAテキスト設定
ホーム画面のアイコン下テキストを入力に「THE THOR」と
設定されていますので、変更の必要があります。
デモサイト04と同じようにウィジェトを設定する方法
外観＞カストマイズ＞共通エリア設定 ＞ サイドカラムエリア設定
＞ウィジェット見出しデザイン
【1:サイドカラム】
サイドカラムには、サイドバーエリアと追従サイドバーエリアがあります。
共通の設定として、ウィジェットの見出しデザインの設定が必要です。
着せ替え直後は、ウィジェットの見出しデザインを設定が項目が、
デフォルトの角丸が設定されているので、「はみだすボーダー」を選択し
直します。（済）
外観＞カストマイズ＞＋＞サイドバーエリア
【2:サイドバーエリア】
デモサイト04で設置されているウィジェットの設定について解説していきます。
（配置されている上から順に）
検索
WordPress標準のウィジェットです。ただ設置するだけです。
＋ウィジェット追加＞［THE］著作情報の設置
［THE］著作情報の設置（済）
・タイトル：管理人
・記事一覧へボタンを表示しますか？：チェックする
・フォローアイコンを表示しますか？：チェックする
・フォローアイコンのタイトル入力：Follow （未入力の場合、フォーローしてね！
と表示されます。）
自己紹介文は、ダッシュボード ＞ ユーザー ＞あなたのプロフィールで設定します。
＋ウィジェット追加＞［THE］画像付き新着記事
［THE］画像付き新着記事（済）
・表示する投稿数：3
・タイトル：新着記事と入力。
・投稿日を表示しますか？：チェックする。
・更新日を表示しますか？：チェックする。
・ノーマルレイアウト（左画像）に変更しますか？：チェックする。
・画像アクスペクト比：「1：1」を選択。
ドラッアンドペーストで並び替え をする。
左上 公開 で 保存する。
デモサイト04では、これだけしかウィジェットは設定されていませんでした。
かなり少なめなので、追加する余地がありますね。
まとめ
以上で、デモサイト04の雛形作成カストマイズは終わりです。
とりあえず、これさえできれば、これを横展開することで、
サイト毎ののテーマカラーや、各パーツのカラー設定、
デザインの細かな設定などは、じっくりと考えながら
行うことができるかと思います。