THE THOR【ザ・トール】カスタマイザー機能を一覧で見ていこう。(part.2)

thor2

機能が豊富でカスタマイズに優れた有料テーマTHE THOR(ザ・トール)。

今回part.2ではカスタマイザーの機能について見ていこうと思う。

カスタマイザーのプレビューでどの部分に設定が反映されるのか分かりずらい時に見ると便利です。

ボリュームがすごいので、以下の3パートに分けています。

custom top c

目次(クリックで開く)

基本設定

サイトのロゴ設定

custom1logoa

サイトロゴの設定では、

サイトのロゴ画像を登録できます。

ロゴの高さを30、40、50pxから選択できます。横幅は自動で調節されます。

同じようにスマートフォン表示時の高さも20、25、30pxから設定できます。

アイキャッチ画像の設定

custom1 eyecatch1

custom1 eyecatch2

アイキャッチ画像の設定では、

アイキャッチ画像を設定していない場合に表示されるNO IMAGE画像を変更できます。

アイキャッチ画像の表示サイズやカーソルオン・オフ時のエフェクトを変更できます。

検索機能設定

 

custom kensaku a

THORには様々な検索機能が用意されていますが、

表示形式、表示場所、機能により名称が変わります。

 

設定は以下の検索機能(赤マーカー)が対象になります。

その他の関連設定は(緑マーカー)になります。

 

サーチパネル(格納式の絞込検索)

1 search panel

その他関連設定

外観>カスタマイズ>共通エリア設定>サーチパネルの設定から「表示」「非表示」などの設定が出来ます。

search panelb

 

 

ヘッダー検索窓

2 header botom serach

その他関連設定

外観>カスタマイズ>共通エリア設定>ヘッダーボトムエリア[検索窓・お知らせ]>ヘッダー検索窓の設定から「表示」「非表示」などの設定ができます。

header botom search b

 

絞込検索(THE THORのウィジェット)

3 widget siborikomi b

 

検索(ワードプレス標準のウィジェット)

4 widget search b

アクセスランキングの設定

custom1 access ranking1

アクセスランキングの設定では、

ランキング記事や、ウィジェットの人気記事ウィジェットのカテゴリ人気記事の「単位」を変更できます。

例)人、回など

タグ管理設定

custom1 tagrkanri1b

custom1 tagkanri4

タグ管理設定ではデフォルトの見出し名、詳細ページボタンとAFボタンのカラーを変更できます。

タグ管理>タグ管理一覧>「新規追加」>記事内の下部に

「タグ管理オリジナルフォーマット」があります。

 

①詳細ページボタンと

②AFページボタンのプレビュー表示した際の「ボタンカラー」の変更ができます。

③「独自項目の見出し設定」が変更できます。

 

custom1 tagranking2
プレビューするとこんな感じで表示されます。

 

自動生成サイトマップ設定

custom1 jidou sitemap
part.1
custom1 jidou sitemap2
part.2

ここでは自動生成サイトマップの表示や表示形式を設定できます。

まずは、①、⑥、⑪■サイトマップを表示するか選択を「利用する」に設定しておきます。

次にサイトマップを作成しましょう。

固定ページ>新規追加>タイトルにサイトマップと入力>

ページ属性を「サイトマップTPL」に設定>「公開」をクリック。

サイトマップが自動生成されているかプレビューで確認してみましょう。

custom jidou sitemap4b

 

custom sitemap 5c

その他関連設定:カスタム投稿タイプの設定項目を表示させる。

外観>カスタマイズ>カスタム投稿設定>基本設定>①③④を利用する」に設定

これでカスタム投稿タイプの設定項目が表示されました。

⑬、⑭カスタム投稿タイプ(初期設定ではお知らせ)で作成した記事にカテゴリを設定しておかないと表示されません。

タイトルセパレーター設定

title separater b

 

パスワード保護ページ設定

custom1 password1b

 

custom1 password 2b

パスワード保護ページ設定ではパスワード保護ページを表示した際のタイトルと文章を変更できます。

パスワード保護するには投稿の編集画面から公開状態をパスワード保護に設定します。

その他関連設定

投稿>新規追加>パスワード保護中コンテンツ>①パスワード保護中コンテンツの冒頭コンテンツ設定

 

お問い合わせページ設定

custom1 otoiawase1b
お問い合わせ時に自動表示される画面がサンクス画面

 

custom1 otoiawase2
画像はお問い合わせ時に自分と相手に送信される自動メール

 

アクセス解析設定

custom1 access kaiseki1

ビジュアルエディタCSS設定

custom1 visual1

ビジュアルエディタCSS設定では編集時の表示を変更できます。

プレビューする手間が減るのでデフォルトで良いです。

テキストエディタボタン設定

custom1 textediter

テキストエディタボタン設定ではテキストモード時の補助ボタンの表示数を変更できます。

セキュリティ関連設定

custom1 secrurity1セキュリティ関連設定ではログイン時の認証条件を変更できます。

デフォルトではユーザー名または

メールアドレスとパスワードでログインを、

メールアドレスとパスワードへログインへ変更できます。

設定変更しても見た目的には変わりませんがちゃんとメールアドレスとパスワードだけでログインできるようになっています。

基本スタイル設定

custom1 kihon style

記事分析設定

custom1 kijibunseki

記事分析の設定が出来ます。

投稿本文内のキーワドを検索できます。

投稿を検索できます。

内リンク数、発リンク数は設定システム処理に負荷がかかるため不要な機能は非表示に指定おいたほうが良いです。

また、すべてを表示にするに設定していると青枠部分のように文字が縦に伸びた感じに表示されるので投稿の一覧が見にくくなります。

高度な設定

custom1 koudonasettei

高度な設定が出来ます。

使用例)

Googleアドセンス:コードスニペット(自動広告)

自動広告を表示する各ページの <head> タグと </head> タグの間に広告コードを貼り付けます。

自動広告の設定方法より:google公式より引用

Bingウェブマスターツール:<meta>タグ(PVの測定など)

ユーザーID設定

custom1 userid

ユーザーIDを設定することでTHE THORが自動でダウンロードされインストール(手動)できるようになります。

ユーザーIDの発行方法は購入時のテキストファイル「初めにお読みください」に記載されています。

・テーマの更新が完了するまで、他の操作や画面を切り替えたりしないように注意しましょう。

・テーマが壊れたり重大な不具合が発生する恐れがあります。

・バージョンアップの際、親テーマでカスタマイズしている内容が消えてしまうので、テーマファイルのカスタマイズは子テーマでおこなうようにしましょう。

共通エリア設定

ヘッダーエリア設定

custom2 header1a

custom2 header2a

settei header1

ヘッダーボトムエリア設定(検索窓・お知らせ)

custom2 kyouutuarea2

その他関連設定

外観>カスタマイズ>基本設定>検索機能設定>①■注目キーワードを設定

メインカラムエリア設定

custom2 kyoutuuarea3

settei target main column

 

サイドカラムエリア設定

custom2 kyoutuuarea 4a

custom2 kyoutuuarea4b

settei target side column

フッタートップエリア設定(CTA)

custom2 kyoutuuarea5

フッターエリア設定

custom kyoutuuarea6

settei target footer

固定フッターエリア設定(スマホ設定)

custom2 kyoutuuarea6a

custom2 kyoutuuarea6bb

 

custom2 kyoutuuarea6d

 

footer
画像はPC表示でウィンドウを小さくした場合

この固定フッターエリア(スマホ用は実はPC上でも表示されている。ウィンドウを小さくしてみてくれ。

TOPページ設定

メインビジュアル設定

custom3-toppage1b

custom3-toppage2b

custom3-toppage3c

スライドショーでは静止画、Youtube動画背景、スライドショー(静止画同様の設定を5つまで設定し順番に表示します。)

設定した動画の音はでません。

マスクを適用するだけでホラーみたいになります。画像は猫が犬に「ネコパンチ」を喰らわすところ。

スライドショーは1~5まで設定できます。タイトルや、ボタンなどそれぞれ設定できます。

メインビジュアル下お知らせ設定

custom3 oshirase1

カルーセルスライダー設定

custom3 slider1

カルーセルスライダーは目立たせたい記事を右から左へスライド表示する機能です。

表示条件は投稿、カテゴリから選択可能。

指定するIDは投稿>投稿の記事一覧投稿>カテゴリに表示されているIDを入力します。

IDを指定しない場合はランダムで表示されます。表示される記事は更新すると切り替わります。

表示件数の指定は5以上10以下で設定可能です。

ピックアップ3記事設定

custom3 pickup1

ピックアップ3記事を使用するには投稿一覧画面に表示される記事IDを指定します。

⑦⑧マスクの適用される位置は1番目の記事上部の拡大表示された部分(横長の赤枠)です。

記事は3つまで表示されます。1番目に指定した記事は大きく表示されます。

記事ランキング設定

custom3 kiji ranking1

カテゴリ最新記事設定

custom3 category latest1

アーカイブページ設定

レイアウト設定

custom4 layout1

コントーラー設定

custom4 controller2

ここで注意したいのは「レイアウト切替ボタンの初期checkedを選択」は切替ボタンに関してだけでなく、切替ボタンの非表示状態のレイアウトに反映されることです。

記事一覧のレイアウト設定は「コントローラー設定」からすることになります。「記事一覧リスト設定」ではありません。

記事一覧リスト設定

custom4 kiji ichiran

Pickupマークリボン表示するか選択Pickupマークアイコンを入力に関してはどこに表示されるのか表示条件もわかりませんでした。

hironekopunch2
ヒロ
気になって寝れない。情報お持ちの方コメントよろ。

カテゴリアーカイブ設定

custom5 category archive1c
custom5 category archive2c
設定対象のウィジェットはカテゴリー。
関連設定:投稿>カテゴリー>カテゴリー名の下にある「編集」
category color
編集>イメージカラーはカテゴリーの色分けにも適用されます。

タグアーカイブ設定

custom5 tag archive1c
custom5 tag archive2e
設定対象のウィジェット名はタグクラウド
関連設定:投稿>タグ>タグ名の下にある「編集」
ここでのカラー指定は適用されず、基本設定>基本スタイル>のテーマカラーが適用されるようだ。

投稿ページ設定

レイアウト設定

custom5 layout1

スタイル設定

custom5 style1

目次

custom5 mokuji1c

シェアボタン設定

custom5 share button1

フォローボタン設定

custom5 follow button1

記事下CTA設定

custom5 cta

CTA管理>新規追加でCTAを作成すると表示されるCTAのIDを入力します。

ここでデフォルト指定したCTAがトップページ以外のすべての記事下に表示されるようになります。

フッタートップエリア設定(CTA) 記事下CTA
フッターエリア:トップページ+すべての記事下 トップページ以外のすべての記事下。
必要項目を入力するだけで作れる。 細部まで自作できる。
個別設定できない。 個別設定できる。:
記事ごとに非表示にできる。
記事ごとにCTA設定できる。
固定ページにデフォルトの記事下CTAを設定できる。
固定ページ設定>記事下CTA設定

投稿の編集画面から個別設定ができます。

注意点はCTA管理からCTAを作成後「公開」を押してないと記事下CTA設定に表示されません。

 

cta1
画像はCTAの個別設定画面

Prev Next記事設定

custom5 prev next1

プロフィール設定

custom5 profile

関連記事設定

custom5 kanren kiji

所属カテゴリ最新記事設定

custom5 syozoku category

固定ページ設定

レイアウト設定

custom6 layout1

スタイル設定

custom6 style1

目次設定

custom6 mokuji

シェアボタン設定

custom6 share button

記事下CTA設定

kotei page cta

固定ページ用記事下CTAを設定できます。

投稿ページ>記事下CTA設定と設定内容は同じですが、

固定ページ用のデザインやカラー、デフォルトCTAを投稿ページとは別に設定できます。

カスタム投稿タイプ設定

基本設定

custom7 kihon

一覧表示設定

custom7 ichiran1

TOPページ一覧表示設定

custom7 top ichiran1

広告設定

seo1

THE THORの広告設定ではこんな感じで表示できる位置が決められています。

PC・スマホ共通表示の広告タグもあれば、PC・スマホ別々に広告タグを設定する必要があるものもあります。

アーカイブ用:インフィード広告:PC
アーカイブ用:インフィード広告:スマホ
記事内広告:hタグの手前:PCとスマホ
記事内広告:記事下用ダブルレクタングル広告(左):PC・スマホ
記事内広告:記事下用ダブルレクタングル広告(右):PC

 

残りは[ adcode]サイドバーのウィジェット(カスタムHTML)を使って好きな位置に配置していく感じになります。

 

seo2

自分はこんな感じで設定してます。

サイズ感の近いものや、表示が見切れないようなものを適当に選んでみました。

細かい設定は行わず自動スキャン+デフォルト設定です。

しばらく様子見後の確認で、気になったのはインフィード広告でした。

インフィード広告(PC版)ではPCではうまく表示されているもののタブレットでは広告によっては見切れる事がある。

インフィード広告(スマホ版)に至ってはエラーによって表示されない。

 

スマートフォン、タブレット、PC環境すべてでうまく表示させるのはなかなか難しいですね。

検証にも時間がかかりそうです。

 

※きっちり表示させたい人は自分の環境に合わせて

広告のイメージ・見出し・説明部分の、

フォントや余白などの調整が必要です。

SEO設定

custom9 seo

TOPページのタイトルメタディスクリプションを設定します。サイト基本情報での設定より優先されます。

その他、読み込み速度をあげるプラグインLazy Loadの様な機能がテーマ標準で搭載されています。

ここら辺は初期設定のままで無理にいじる必要もないと思いますが、試してみたい方はバックアップ推奨です。

SNS設定

OGP設定

ogp

OGPとは、Open Graph Protocolの略で、Facebookやmixi、Google+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。引用元:コンテンツハブ

FacebookやTwitterのアカウントを持っていればURLがシェアされた際のタイトル・説明文・画像が表示されるようになる。

フォロー設定

custom8follow e

その他関連設定

共通エリア設定>ヘッダーエリア設定>サブメニュー設定>グローバルメニューの右に表示 or メニューパネル内で表示

AMP設定

AMPとは

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。引用元:SEO HACKS

 

amp

「上級者向け設定」

HTMLやAMPの理解が必要です。

設定自体は簡単なので何も考えずやってしまいがちですが、

試しにやってみたところ1つのページだけでエラーが36と出ていました。(そっと閉じました)

無理に対応させてもページ1つ1つエラーを修正していくのが大変だと思います。

また導入によるレイアウト崩れや、パーマリンクの変更からSEOの検索順位などに影響します。

リダイレクトの設定も必要かもしれません。

導入は慎重にどうぞ。

PWA設定

PWA機能設定

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

引用元:SEO HACKS

custom12 b

PWA機能では様々な環境に対応させるため複数のアイコンを設定する必要があります。

試しに437×500のjpg画像を1つだけ設定してみましたが普通に表示されました。

1つの画像からPWA用の複数のアイコンサイズを作成するサイトもあるようです。

何もテキストを入力しない場合サイト名が適用されます。

画像とテキストを設定したら「有効」にし公開をクリック。

モバイルから自分のサイトにアクセスしてみましょう。

以上、簡単な設定で最新の機能を利用することができます。

SSL化していないサイトではこの機能を利用できません。

 

custom12 1a
設定が完了するとこんな感じで表示されます。

アイコンの設定

上記を参照。

パーツスタイル設定

マーカー設定

custom marker

マーカー18色の中からよく使うマーカーを設定できます。

custom marker yokutukau

 

ラベル設定

custom label b

ラベル設定、ボタン設定、ボックス設定、ボックス内ボックス設定では、

初めから用意されている各10種類のパーツを、自分で作成したパーツに置き換えることができます。

赤枠の■タイトル部分に表示名、■スタイル部分にコードを貼り付けます。

 

コードの貼り付け方法は以下のようになります。

custom label2 (2)

まずはスタイル>■デフォルトパーツから登録したい自作ラベルを作成します。

 

custom label2 (1)

ラベルを作成したら「テキストモード」にしてコードの緑のマーカー部分をコピーし、

■スタイルへ貼り付けし、■タイトルに名前をつけ「公開」をクリック。

 

custom label2 (4)

これで、自作したラベルが登録されました。

THE THOR(ザ・トール)では

ラベル、ボタン、ボックス、ボックス内ボックスを自作して登録することが出来ます。

ボタン設定

custom button b

ラベル設定と同じように自作の「ボタン」を登録できます。

ボックス設定

custom box b

ラベル設定と同じように自作の「ボックス」を登録できます。

ボックス内ボックス設定

custom inbox b

ラベル設定と同じように自作の「ボックス内ボックス」を登録できます。

その他エディタ用パーツ設定

custom sonota2

その他エディタ用パーツのカラーを変更できます。

ここでのカラー指定は標準のカラーより優先されます。

標準のパーツカラーを使いたい場合文字色を「クリア」に設定しましょう。

アイコン系パーツのアイコンカラーは一括で変更されます。

共通ボタン設定(全ページ用)

custom kyoutuu

共通ボタンの文字色、背景色を変更できます。

見出し設定(個別ページ用)

custom midahi a1

custom midashi b1H2、H3、H4、H5の見出しデザインを53種類の見出しデザインから選択できます。

54、55、56のようにそれぞれの見出しデザインのカラーを指定できます。

リスト設定(個別ページ用)

custom list

①~⑧番号無しリスト①~⑧番号付きリスト」のデザインを8種類から選べます。

それぞれ⑨~⑪、⑨~⑪部分のカラーを変更できます。

吹き出し設定(個別ページ用)

custom fukidashi b

初期4種の吹き出し(右画像と左画像で2キャラ)の画像と吹き出しの文字色、背景色、ボーダーの線色を変更できます。

ここでのカラー指定は標準のカラーより優先されます。

標準の吹き出し色を使いたい場合文字色を「クリア」に設定しましょう。

 

この4種の吹き出し(右画像と左画像で2キャラ)以外に新たな吹き出しを作成したい場合

登録したコードへショートカットできるようにするプラグインAddQuicktagを使用します。

コードの位置が分かりやすいように記事の新規作成で何もないところで、プリセットパーツ>吹き出しを呼び出します。

ビジュアルモードにて名前、吹き出しの画像(吹き出し画像部分をクリックでメディアファイルから選択)、を変更します。

テキストモードのコードをすべてコピーしAddQuicktagの設定欄へ貼り付けます。

必要に応じて左画像も作成しましょう。

引用設定(個別ページ用)

custon inyoub

①~⑦引用設定のデザインを7種類から選べます。⑧~⑪部分のカラー指定が出来ます。

ここでのカラー指定は標準のカラーより優先されます。

標準の引用設定の色を使いたい場合文字色を「クリア」に設定しましょう。

テーブル設定(個別ページ用)

custom table b

テーブル設定ではデザインを線、点線の2種類から選べます。

②~⑦テーブルのカラー指定が出来ます。

ここでのカラー指定は標準の設定より優先されます。

標準のテーブル色を使いたい場合文字色を「クリア」に設定しましょう。

シェアボタン設定(個別ページ用)

custom share

記事上部、下部に表示されるシェアボタンのデザインを11パターンから変更できます。

①②左と右のシェアボタンで違いが分かりずらいですがはボタンが立体になってます。

は小さめのシェアボタン。

サイト基本情報

custom14 site kihon1b

サイトの基本情報①②はワードプレス標準の設定>一般設定>サイトのタイトル・キャッチフレーズと同じもので連動しています。

 

その他関連設定

外観>カスタマイズ>SEO設定>TOPページSEO設定>

①TOPページの<title>②キャッチフレーズ③TOPページの<meta description>

トップページタイトルとデスクリプションの設定はこちらから設定します。

設定はTOPページSEO設定が優先されます。

自分はサイトのタイトルとキャッチフレーズを逆に表示したかったのでSimple SEO PACKというプラグインを使用しています。

 

個別記事タイトルとディスクリプションは投稿の編集画面のSEO対策から設定します。

seo settei

メニュー

custom16 menu

メニューのカスタマイズができます。

まずはメニューを「新規作成」にて「項目を追加」しメニューを作成します。

次に「メニューの位置」を指定します。

メニューを表示できる位置は、

ヘッダーエリア(PC、スマホ)、フッターエリア(PC、スマホ)、メニューパネルエリア(スマホ限定)

の3カ所になります。

場所によって表示を変えたい場合は「新規作成」にて新しいメニューを作成し指定します。

ウィジェット

custom16b

ウィジェットエリアは以下の10種類。

ウィジェットエリアは使用している着せ替えテーマやサイト内のページにより異なります。

ウェジェットは10種類。

THE THORのウィジェットには頭に[THE]の文字が付いています。

widget

 

では1つずつどんなウィジェットがあるのか見ていこう。

QRコード

custom16a1c

ウィジェットに中央の画像のようなQRコードを設置することが出来る。スマートフォンでQRコードを読み取れば「URLを開く」ウィンドウが表示されます。で設定したURLページへ飛びます。

カテゴリ人気記事

category rank

 

スタイルテキスト

指定したカテゴリの記事を人気順に表示する。

custom profile b

文字や、画像、リンク、広告などテキストモード(HTML編集)と同じように使用することができます。

タグランキング

widget tagranking

タブコンテンツ

widget tabcontents

 

人気記事

category popular

 

広告

widget cm1

 

widget cm2

googleの広告コードを貼り付けるウィジェット。

googleアドセンス>広告ユニット>テキスト広告とディスプレイ広告>レスポンシブで表示してみると画像のよう小さな広告がでてきました。

自分は、以下のような大きめの広告を表示するために③斜めの格子状の背景部分「背景スタイルを無効にしますか?」にチェックを入れて使用しています。

widget cm3

 

画像付き新着記事

category new posts

絞込検索

widget search

普通の検索との違いはカテゴリを絞り込んで検索することができる点です。

著作者情報

widget author

 

フォローアイコンのタイトルにリンクを設定するには、

にチェックをいれ、に「フォローしてね・Follow me」などと入力する。

次に、twitterアカウントの設定が必要です。

その他関連設定:twitterアカウントの設定

外観>カスタマイザー>SNS設定>Follow設定>TwitterのURL欄にIDの@の前の部分を入力します。

ホームページ設定

custom17

ホームページの表示を最近の投稿(ブログタイプ)か固定ページ(ホームページタイプ)に変更する。

ホームページ投稿ページの欄に、サンプルページを設定すると以下のようになる。

sample1
ホームページがサンプルページ(自己紹介風)に変更される。
sample2
赤枠部分にサンプルページが挿入される。

 

追加CSS

custom18a

「カスタマイズ」>「追加CSS」>追加CSSを記入する。

CSSを使用してデザインをカスタマイズできます。

追加CSSは子テーマよりも優先される。

 

エクスポート/インポート

custom19a

 

custom19d

着せ替え機能の利用方法

THE THORでは9つのデモが用意されていてデザインの着せ替え機能が利用できます。

公式のデモサイト一覧で自分のサイトのイメージに近いスタイルをダウンロードしましょう。

>>>公式(THE THOR ザ・トール)デモサイト一覧へ

 

ダウンロードしたらファイルを「解凍」しておきましょう。

custom19c

 

custom19 a2

プラグイン>新規追加>Customizer Export/Importを検索しインストール。

 

custom19 b

Customizer Export/Importのインストールが完了したら「有効化」。

 

デモ切り替えの際は、設定を一旦デフォルト状態に戻す必要があります。

新しいデモを試したい場合は、

公式サイトで「デフォルトファイル」をダウンロードします。

※デフォルトに戻すとサイトタイトル、サイトディスクリプション、ユーザーIDが未入力の状態になってしまうので必ず設定しておきましょう。

カスタマイザーの設定をデフォルトに戻す方法

①画像ファイルをダウンロードしてインポートしますか?にチェックを入れておく。

※チェックを入れておかないと画像が表示されないなどの不具合が起こる可能性があります。

②「ファイルを選択」をクリックしてファイルを選択。

③「インポート」をクリックでスタイルが適用されます。

タイムアウト系のエラーが出る場合はサーバーの「php.ini」の「max_execution_time」を30秒から60秒に変更してみましょう。

ブログの最新記事8件