機能が豊富でカスタマイズに優れた有料テーマTHE THOR（ザ・トール）。
今回part.2ではカスタマイザーの機能について見ていこうと思う。
カスタマイザーのプレビューでどの部分に設定が反映されるのか分かりずらい時に見ると便利です。
ボリュームがすごいので、以下の３パートに分けています。
基本設定
サイトのロゴ設定
サイトロゴの設定では、
①サイトのロゴ画像を登録できます。
②ロゴの高さを30、40、50pxから選択できます。横幅は自動で調節されます。
③同じようにスマートフォン表示時の高さも20、25、30pxから設定できます。
アイキャッチ画像の設定
アイキャッチ画像の設定では、
①アイキャッチ画像を設定していない場合に表示されるNO IMAGE画像を変更できます。
②アイキャッチ画像の表示サイズやカーソルオン・オフ時のエフェクトを変更できます。
検索機能設定
THORには様々な検索機能が用意されていますが、
表示形式、表示場所、機能により名称が変わります。
設定は以下の検索機能（赤マーカー）が対象になります。
その他の関連設定は（緑マーカー）になります。
サーチパネル（格納式の絞込検索）
その他関連設定
外観＞カスタマイズ＞共通エリア設定＞サーチパネルの設定から「表示」「非表示」などの設定が出来ます。
ヘッダー検索窓
その他関連設定
外観＞カスタマイズ＞共通エリア設定＞ヘッダーボトムエリア[検索窓・お知らせ]＞ヘッダー検索窓の設定から「表示」「非表示」などの設定ができます。
絞込検索(THE THORのウィジェット）
検索（ワードプレス標準のウィジェット）
アクセスランキングの設定
アクセスランキングの設定では、
ランキング記事や、ウィジェットの人気記事、ウィジェットのカテゴリ人気記事の「単位」を変更できます。
例）人、回など
タグ管理設定
タグ管理設定ではデフォルトの見出し名、詳細ページボタンとAFボタンのカラーを変更できます。
タグ管理＞タグ管理一覧＞「新規追加」＞記事内の下部に
「タグ管理オリジナルフォーマット」があります。
①詳細ページボタンと
②AFページボタンのプレビュー表示した際の「ボタンカラー」の変更ができます。
③「独自項目の見出し設定」が変更できます。
自動生成サイトマップ設定
ここでは自動生成サイトマップの表示や表示形式を設定できます。
まずは、①、⑥、⑪■サイトマップを表示するか選択を「利用する」に設定しておきます。
次にサイトマップを作成しましょう。
固定ページ＞新規追加＞タイトルにサイトマップと入力＞
ページ属性を「サイトマップTPL」に設定＞「公開」をクリック。
サイトマップが自動生成されているかプレビューで確認してみましょう。
その他関連設定：カスタム投稿タイプの設定項目を表示させる。
外観＞カスタマイズ＞カスタム投稿設定＞基本設定＞①③④を利用する」に設定
これでカスタム投稿タイプの設定項目が表示されました。
⑬、⑭はカスタム投稿タイプ（初期設定ではお知らせ）で作成した記事にカテゴリを設定しておかないと表示されません。
タイトルセパレーター設定
パスワード保護ページ設定
パスワード保護ページ設定ではパスワード保護ページを表示した際のタイトルと文章を変更できます。
パスワード保護するには投稿の編集画面から公開状態をパスワード保護に設定します。
その他関連設定
投稿＞新規追加＞パスワード保護中コンテンツ＞①パスワード保護中コンテンツの冒頭コンテンツ設定
お問い合わせページ設定
アクセス解析設定
ビジュアルエディタCSS設定
ビジュアルエディタCSS設定では編集時の表示を変更できます。
プレビューする手間が減るのでデフォルトで良いです。
テキストエディタボタン設定
テキストエディタボタン設定ではテキストモード時の補助ボタンの表示数を変更できます。
セキュリティ関連設定
セキュリティ関連設定ではログイン時の認証条件を変更できます。
デフォルトではユーザー名または
メールアドレスとパスワードでログインを、
メールアドレスとパスワードへログインへ変更できます。
設定変更しても見た目的には変わりませんがちゃんとメールアドレスとパスワードだけでログインできるようになっています。
基本スタイル設定
記事分析設定
記事分析の設定が出来ます。
①投稿本文内のキーワドを検索できます。
②投稿を検索できます。
①内リンク数、発リンク数は設定システム処理に負荷がかかるため不要な機能は非表示に指定おいたほうが良いです。
また、すべてを表示にするに設定していると青枠部分のように文字が縦に伸びた感じに表示されるので投稿の一覧が見にくくなります。
高度な設定
高度な設定が出来ます。
使用例）
Googleアドセンス：コードスニペット（自動広告）
自動広告を表示する各ページの
<head>タグと</head>タグの間に広告コードを貼り付けます。自動広告の設定方法より：google公式より引用
Bingウェブマスターツール：<meta>タグ（PVの測定など）
ユーザーID設定
ユーザーIDを設定することでTHE THORが自動でダウンロードされインストール（手動）できるようになります。
ユーザーIDの発行方法は購入時のテキストファイル「初めにお読みください」に記載されています。
・テーマが壊れたり重大な不具合が発生する恐れがあります。
・バージョンアップの際、親テーマでカスタマイズしている内容が消えてしまうので、テーマファイルのカスタマイズは子テーマでおこなうようにしましょう。
共通エリア設定
ヘッダーエリア設定
ヘッダーボトムエリア設定（検索窓・お知らせ）
その他関連設定
外観＞カスタマイズ＞基本設定＞検索機能設定＞①■注目キーワードを設定
メインカラムエリア設定
サイドカラムエリア設定
フッタートップエリア設定（CTA）
フッターエリア設定
固定フッターエリア設定（スマホ設定）
この固定フッターエリア（スマホ用）は実はPC上でも表示されている。ウィンドウを小さくしてみてくれ。
TOPページ設定
メインビジュアル設定
スライドショーでは静止画、Youtube動画背景、スライドショー（静止画同様の設定を5つまで設定し順番に表示します。）
⑫設定した動画の音はでません。
⑭マスクを適用するだけでホラーみたいになります。画像は猫が犬に「ネコパンチ」を喰らわすところ。
㉕スライドショーは1～5まで設定できます。タイトルや、ボタンなどそれぞれ設定できます。
メインビジュアル下お知らせ設定
カルーセルスライダー設定
カルーセルスライダーは目立たせたい記事を右から左へスライド表示する機能です。
②表示条件は投稿、カテゴリから選択可能。
③指定するIDは投稿＞投稿の記事一覧、投稿＞カテゴリに表示されているIDを入力します。
IDを指定しない場合はランダムで表示されます。表示される記事は更新すると切り替わります。
④表示件数の指定は５以上１０以下で設定可能です。
ピックアップ3記事設定
ピックアップ3記事を使用するには投稿一覧画面に表示される記事IDを指定します。
⑦⑧マスクの適用される位置は１番目の記事上部の拡大表示された部分（横長の赤枠）です。
⑨記事は3つまで表示されます。１番目に指定した記事は大きく表示されます。
記事ランキング設定
カテゴリ最新記事設定
アーカイブページ設定
レイアウト設定
コントーラー設定
⑩ここで注意したいのは「レイアウト切替ボタンの初期checkedを選択」は切替ボタンに関してだけでなく、切替ボタンの非表示状態のレイアウトに反映されることです。
記事一覧のレイアウト設定は「コントローラー設定」からすることになります。「記事一覧リスト設定」ではありません。
記事一覧リスト設定
⑧Pickupマークリボン表示するか選択⑪Pickupマークアイコンを入力に関してはどこに表示されるのか表示条件もわかりませんでした。
カテゴリアーカイブ設定
タグアーカイブ設定
投稿ページ設定
レイアウト設定
スタイル設定
目次
シェアボタン設定
フォローボタン設定
記事下CTA設定
④CTA管理＞新規追加でCTAを作成すると表示されるCTAのIDを入力します。
ここでデフォルト指定したCTAがトップページ以外のすべての記事下に表示されるようになります。
| フッタートップエリア設定(CTA) | 記事下CTA |
|---|---|
| フッターエリア：トップページ＋すべての記事下 | トップページ以外のすべての記事下。 |
| 必要項目を入力するだけで作れる。 | 細部まで自作できる。 |
| 個別設定できない。 | 個別設定できる。： 記事ごとに非表示にできる。 記事ごとにCTA設定できる。 固定ページにデフォルトの記事下CTAを設定できる。 固定ページ設定＞記事下CTA設定 |
投稿の編集画面から個別設定ができます。
注意点はCTA管理からCTAを作成後「公開」を押してないと記事下CTA設定に表示されません。
Prev Next記事設定
プロフィール設定
関連記事設定
所属カテゴリ最新記事設定
固定ページ設定
レイアウト設定
スタイル設定
目次設定
シェアボタン設定
記事下CTA設定
固定ページ用の記事下CTAを設定できます。
投稿ページ＞記事下CTA設定と設定内容は同じですが、
固定ページ用のデザインやカラー、デフォルトCTAを投稿ページとは別に設定できます。
カスタム投稿タイプ設定
基本設定
一覧表示設定
TOPページ一覧表示設定
広告設定
THE THORの広告設定ではこんな感じで表示できる位置が決められています。
PC・スマホ共通表示の広告タグもあれば、PC・スマホ別々に広告タグを設定する必要があるものもあります。
アーカイブ用：インフィード広告：スマホ
記事内広告：hタグの手前：PCとスマホ
記事内広告：記事下用ダブルレクタングル広告（左）：PC・スマホ
記事内広告：記事下用ダブルレクタングル広告（右）：PC
残りは[ adcode]とサイドバーのウィジェット（カスタムHTML）を使って好きな位置に配置していく感じになります。
自分はこんな感じで設定してます。
サイズ感の近いものや、表示が見切れないようなものを適当に選んでみました。
細かい設定は行わず自動スキャン＋デフォルト設定です。
しばらく様子見後の確認で、気になったのはインフィード広告でした。
インフィード広告（PC版)ではPCではうまく表示されているもののタブレットでは広告によっては見切れる事がある。
インフィード広告（スマホ版）に至ってはエラーによって表示されない。
スマートフォン、タブレット、PC環境すべてでうまく表示させるのはなかなか難しいですね。
検証にも時間がかかりそうです。
※きっちり表示させたい人は自分の環境に合わせて
広告のイメージ・見出し・説明部分の、
フォントや余白などの調整が必要です。
SEO設定
①TOPページのタイトルとメタディスクリプションを設定します。サイト基本情報での設定より優先されます。
その他、読み込み速度をあげるプラグインLazy Loadの様な機能がテーマ標準で搭載されています。
ここら辺は初期設定のままで無理にいじる必要もないと思いますが、試してみたい方はバックアップ推奨です。
SNS設定
OGP設定
OGPとは、Open Graph Protocolの略で、Facebookやmixi、Google+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。引用元：コンテンツハブ
FacebookやTwitterのアカウントを持っていればURLがシェアされた際のタイトル・説明文・画像が表示されるようになる。
フォロー設定
その他関連設定
共通エリア設定＞ヘッダーエリア設定＞サブメニュー設定＞グローバルメニューの右に表示 or メニューパネル内で表示
AMP設定
AMPとは
AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。引用元：SEO HACKS
「上級者向け設定」
HTMLやAMPの理解が必要です。
設定自体は簡単なので何も考えずやってしまいがちですが、
試しにやってみたところ１つのページだけでエラーが３６と出ていました。（そっと閉じました）
無理に対応させてもページ１つ１つエラーを修正していくのが大変だと思います。
また導入によるレイアウト崩れや、パーマリンクの変更からSEOの検索順位などに影響します。
リダイレクトの設定も必要かもしれません。
導入は慎重にどうぞ。
PWA設定
PWA機能設定
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。
①PWA機能では様々な環境に対応させるため複数のアイコンを設定する必要があります。
試しに437×500のjpg画像を1つだけ設定してみましたが普通に表示されました。
1つの画像からPWA用の複数のアイコンサイズを作成するサイトもあるようです。
②何もテキストを入力しない場合サイト名が適用されます。
③画像とテキストを設定したら「有効」にし公開をクリック。
モバイルから自分のサイトにアクセスしてみましょう。
以上、簡単な設定で最新の機能を利用することができます。
アイコンの設定
上記を参照。
パーツスタイル設定
マーカー設定
マーカー18色の中からよく使うマーカーを設定できます。
ラベル設定
ラベル設定、ボタン設定、ボックス設定、ボックス内ボックス設定では、
初めから用意されている各10種類のパーツを、自分で作成したパーツに置き換えることができます。
赤枠の■タイトル部分に表示名、■スタイル部分にコードを貼り付けます。
コードの貼り付け方法は以下のようになります。
まずはスタイル＞■デフォルトパーツから登録したい自作ラベルを作成します。
ラベルを作成したら「テキストモード」にしてコードの緑のマーカー部分をコピーし、
■スタイルへ貼り付けし、■タイトルに名前をつけ「公開」をクリック。
これで、自作したラベルが登録されました。
THE THOR（ザ・トール）では
ラベル、ボタン、ボックス、ボックス内ボックスを自作して登録することが出来ます。
ボタン設定
ラベル設定と同じように自作の「ボタン」を登録できます。
ボックス設定
ラベル設定と同じように自作の「ボックス」を登録できます。
ボックス内ボックス設定
ラベル設定と同じように自作の「ボックス内ボックス」を登録できます。
その他エディタ用パーツ設定
その他エディタ用パーツのカラーを変更できます。
ここでのカラー指定は標準のカラーより優先されます。
標準のパーツカラーを使いたい場合文字色を「クリア」に設定しましょう。
①アイコン系パーツのアイコンカラーは一括で変更されます。
共通ボタン設定（全ページ用）
共通ボタンの文字色、背景色を変更できます。
見出し設定（個別ページ用）
H2、H3、H4、H5の見出しデザインを53種類の見出しデザインから選択できます。
54、55、56のようにそれぞれの見出しデザインのカラーを指定できます。
リスト設定（個別ページ用）
①～⑧「番号無しリスト」①～⑧「番号付きリスト」のデザインを8種類から選べます。
それぞれ⑨～⑪、⑨～⑪部分のカラーを変更できます。
吹き出し設定（個別ページ用）
初期4種の吹き出し（右画像と左画像で2キャラ）の画像と吹き出しの文字色、背景色、ボーダーの線色を変更できます。
ここでのカラー指定は標準のカラーより優先されます。
標準の吹き出し色を使いたい場合文字色を「クリア」に設定しましょう。
この4種の吹き出し（右画像と左画像で2キャラ）以外に新たな吹き出しを作成したい場合
登録したコードへショートカットできるようにするプラグインAddQuicktagを使用します。
コードの位置が分かりやすいように記事の新規作成で何もないところで、プリセットパーツ＞吹き出しを呼び出します。
ビジュアルモードにて名前、吹き出しの画像（吹き出し画像部分をクリックでメディアファイルから選択）、を変更します。
テキストモードのコードをすべてコピーしAddQuicktagの設定欄へ貼り付けます。
必要に応じて左画像も作成しましょう。
引用設定（個別ページ用）
①～⑦引用設定のデザインを7種類から選べます。⑧～⑪部分のカラー指定が出来ます。
ここでのカラー指定は標準のカラーより優先されます。
標準の引用設定の色を使いたい場合文字色を「クリア」に設定しましょう。
テーブル設定（個別ページ用）
テーブル設定ではデザインを①線、点線の2種類から選べます。
②～⑦テーブルのカラー指定が出来ます。
ここでのカラー指定は標準の設定より優先されます。
標準のテーブル色を使いたい場合文字色を「クリア」に設定しましょう。
シェアボタン設定（個別ページ用）
記事上部、下部に表示されるシェアボタンのデザインを11パターンから変更できます。
①②左と右のシェアボタンで違いが分かりずらいですが②はボタンが立体になってます。
⑪は小さめのシェアボタン。
サイト基本情報
サイトの基本情報①②はワードプレス標準の設定＞一般設定＞サイトのタイトル・キャッチフレーズと同じもので連動しています。
その他関連設定
外観＞カスタマイズ＞SEO設定＞TOPページSEO設定＞
①TOPページの<title>②キャッチフレーズ③TOPページの<meta description>
トップページのタイトルとデスクリプションの設定はこちらから設定します。
設定はTOPページSEO設定が優先されます。
自分はサイトのタイトルとキャッチフレーズを逆に表示したかったのでSimple SEO PACKというプラグインを使用しています。
個別記事のタイトルとディスクリプションは投稿の編集画面のSEO対策から設定します。
メニュー
メニューのカスタマイズができます。
まずはメニューを「新規作成」にて「項目を追加」しメニューを作成します。
次に「メニューの位置」を指定します。
メニューを表示できる位置は、
ヘッダーエリア（PC、スマホ）、フッターエリア（PC、スマホ）、メニューパネルエリア（スマホ限定）
の3カ所になります。
場所によって表示を変えたい場合は「新規作成」にて新しいメニューを作成し指定します。
ウィジェット
ウィジェットエリアは以下の10種類。
ウィジェットエリアは使用している着せ替えテーマやサイト内のページにより異なります。
ウェジェットは10種類。
THE THORのウィジェットには頭に[THE]の文字が付いています。
では１つずつどんなウィジェットがあるのか見ていこう。
QRコード
ウィジェットに中央の画像のようなQRコードを設置することが出来る。スマートフォンでQRコードを読み取れば「URLを開く」ウィンドウが表示されます。②で設定したURLページへ飛びます。
カテゴリ人気記事
スタイルテキスト
指定したカテゴリの記事を人気順に表示する。
文字や、画像、リンク、広告などテキストモード（HTML編集)と同じように使用することができます。
タグランキング
タブコンテンツ
人気記事
広告
googleの広告コードを貼り付けるウィジェット。
googleアドセンス＞広告ユニット＞テキスト広告とディスプレイ広告＞レスポンシブで表示してみると画像のよう小さな広告がでてきました。
自分は、以下のような大きめの広告を表示するために③斜めの格子状の背景部分「背景スタイルを無効にしますか？」にチェックを入れて使用しています。
画像付き新着記事
絞込検索
普通の検索との違いはカテゴリを絞り込んで検索することができる点です。
著作者情報
フォローアイコンのタイトルにリンクを設定するには、
⑤にチェックをいれ、⑥に「フォローしてね・Follow me」などと入力する。
次に、twitterアカウントの設定が必要です。
その他関連設定：twitterアカウントの設定
外観＞カスタマイザー＞SNS設定＞Follow設定＞TwitterのURL欄にIDの＠の前の部分を入力します。
ホームページ設定
①ホームページの表示を最近の投稿（ブログタイプ）か固定ページ（ホームページタイプ）に変更する。
②ホームページ③投稿ページの欄に、サンプルページを設定すると以下のようになる。
追加CSS
「カスタマイズ」＞「追加CSS」＞①追加CSSを記入する。
CSSを使用してデザインをカスタマイズできます。
追加CSSは子テーマよりも優先される。
エクスポート/インポート
着せ替え機能の利用方法
THE THORでは9つのデモが用意されていてデザインの着せ替え機能が利用できます。
公式のデモサイト一覧で自分のサイトのイメージに近いスタイルをダウンロードしましょう。
ダウンロードしたらファイルを「解凍」しておきましょう。
プラグイン＞新規追加＞Customizer Export/Importを検索しインストール。
Customizer Export/Importのインストールが完了したら「有効化」。
デモ切り替えの際は、設定を一旦デフォルト状態に戻す必要があります。
新しいデモを試したい場合は、
公式サイトで「デフォルトファイル」をダウンロードします。
※デフォルトに戻すとサイトタイトル、サイトディスクリプション、ユーザーIDが未入力の状態になってしまうので必ず設定しておきましょう。
①画像ファイルをダウンロードしてインポートしますか？にチェックを入れておく。
※チェックを入れておかないと画像が表示されないなどの不具合が起こる可能性があります。
②「ファイルを選択」をクリックしてファイルを選択。
③「インポート」をクリックでスタイルが適用されます。
