こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
THE THORは使いこなせることができれば、最強のテーマですが、高機能ゆえ項目が多すぎて若干迷子になっておられる方もいるようです。
そこで、カスタマイズをどこよりもわかりやすく説明していきます。
THE THORのカスタマイズの目次
|
THE THOR（ザ・トール）のカスタマイズ 1. 「インストール準備～実践」
元々他のテーマを使っているブログにTHE THOR（ザ・トール）をインストールする場合には、バックアップを取って使っているプラグインを一旦停止しておいてください。
- バックアップを取る
- 使用中のプラグインを全て一旦停止する
- PHPバージョンを最新のものに変更しましょう（エラーが出たら・・・）
①～②は、プラグインがサイトに何らかの影響を与えたりサイトが表示されなくなったりする、管理画面にログインできなくなるなど不具合が生じる可能性があるとのこと。
③の「PHPバージョンを最新のものに変更しましょう」とやたら他のブログで書かれていて初心者の方などは迷うかもしれませんが、エラーが出たら確認するということで問題ないと思います。
なぜなら基本的には、（エックスサーバーの場合）新しく設置したドメインなら問題なく最新のPHPバージョンになっているからです。
以下は、最近設定したドメインのPHPバージョンです。最新なのでなんの問題もありませんね。
PFPのバージョンを確認しないといけない場合
PHPバージョンを確認する必要のある場合は「ドメインが古い場合」「ブログを作って設定していたが変更する場合」などです。
THE THOR（ザ・トール）のインストール方法 【動画】
THE THORのZIPファイルをダウンロードしたら、ブログに導入していきます。親テーマと子テーマのインストールをします。
↓ 画像をクリックすると動画が開きます。
THE THOR（ザ・トール）をブログにインストール
購入サイトよりTHE THORのファイルをダウンロードしたら、ブログにインストールします。他のテーマとも同じやり方でとても簡単です。
▼ 外観 ⇒ テーマ ⇒ 新規追加
- テーマのアップロードをクリック
- ファイルを選択
- ダウンロードしておいたファイルを選択
- 今すぐインストールをクリック
- 有効化をクリック
1. テーマのアップロードをクリック
テーマのアップロードというボタンをクリックします。
2. ファイルを選択をクリック
ここでは、THE THORなどのようなZIPファイルを導入することができます。
3. ダウンロードしておいたファイルを選択
あらかじめダウンロードしているTHE THORのファイルを選びます。
公式からアナウンスしていますが、ここでの入力は親テーマから子テーマの順でインストールしておかないとエラーが出る場合がありますので注意してください。
4. 今すぐインストールをクリック
ZIPのコードが入っていればそのまま「今すぐインストール」をクリックします。
5. 有効化をクリック
有効化をクリックすればインストールの完了です。
インストールした時にエラーがでる原因
インストールの時に2つのZIPファイルをインストールしますが、基本となる親テーマと子テーマの2つ。先ほども触れましたがインストールの順番が間違うとエラーがでてきます。
- 本体のファイル（the-thor.zip）
- 子テーマ（the-thor-child.zip）
この順番でインストールしてみてください。
↓ Wordpressテーマ「THE THOR」公式デザインに芸大卒なつのデザイン10種類追加！
当ブログで購入していただくと、公式の9種類のデザインと追加の10種類が無料で手に入ります！
↓ クリックで拡大します。
※デザインの全体像は以下の2記事をご覧ください。
⇒【超簡単】THE THORデザインの事例集6選！初心者でも作れるアレンジ！
⇒追加デザイン4種はコチラから見れます。
THE THOR（ザ・トール）のカスタマイズ 2. 「初期設定」
インストールした後の初期設定を説明していきます。
- THE THOR（ザ・トール）のユーザーID発行
- ID登録
- パーマリンクの設定
- ニックネームの設定
＞＞THE THOR（ザ・トール）の初期設定の記事にも書いてありますのでよろしければご覧ください。
テーマをインストールするとダッシュボードに以下のようなマニュアルサイトと会員フォーラムと会員フォーラムPASSが表示されます。
ここに出てくるPASSは会員フォーラムのもので、IDコードとはまた別のものになります。
1. THE THOR（ザ・トール）のユーザーID発行
THE THOR（ザ・トール）を購入した方には、IDコードが発行されます。このIDコードは、テーマのバージョンアップや更新の情報を受け取るために必要です。
IDコードは、公式に申請をした後に自分のブログに登録をします。
THE THORのユーザーID発行と登録を動画で説明
↓ 画像をクリックすると動画が開きます。
ID発行の具体的なやり方
ダッシュボードに表示されたマニュアルサイトをクリックしてマニュアルを出します。一般のマニュアルがでてきますが、左側の上に検索窓が出てきますので「ID発行」と入力し検索をしてください。
でてきた「更新用ユーザーIDの発行・登録」という記事を見てください。この記事から更新用ユーザーIDコードを申請します。
ボタンをクリックして必要事項を入力します。後日、指定をしたメールアドレスにメールが送られてきます。その中にユーザーIDがあります。
ユーザーIDは1回きりの付与ですので大切に保管してください。
2. ユーザーID登録
IDコードが発想されたらブログに登録をします。これをしておかないとバージョンアップが受けられないので、最初に必ずしておいてください。
▼ 外観 ⇒ カスタマイズ ⇒ 基本設定[THE] ⇒ ユーザーID設定
3. パーマリンクの設定
パーマリンクは、ドメインの一番最後で「 / 」の後ろに設置する部分です。
この画像のスラッシュの後ろ、「the-thor-customization」の部分がパーマリンクという名前で呼ばれています。
パーマリンクは、そのままなら意味のない番号になりますが、SEO的にはあまりよくありません。そこで、その記事内容がわかるように個別なワードを入れることができるように設定していきます。
＞＞詳しくはTHE THOR（ザ・トール）の初期設定でも書いていますのでよろしければご覧ください。
↓ カスタマイズするときにちょっと気を付けるとセンス良くなる配色のやり方です。
パーマリンク設定を動画で説明
↓ 画像をクリックすると動画が開きます。
パーマリンクの設定の具体的な方法
▼ ダッシュボード ⇒ 設定 ⇒ パーマリンク設定
共通設定は以下のとおり
- 基本
- 日付と投稿名
- 月と投稿名
- 数字ベース
- 投稿名
- カスタム構造
この中のカスタム構造のラジオマークを選びます。利用可能なタグに「/%postname%/」のボタンがありますのでクリックすると配置されますので変更の保存をクリックします。
これでパーマリンク設定の完了です。
↓ 2020年に向け優秀なテーマを徹底検証！
4. ニックネームの設定
WordPressを導入すると、ユーザ名として最初に設定をしたときの記号が入ります。この部分はIDなのでセキュリティ面そのままにするとあまりよくありません。そこで、初期設定で表にでる部分を設定してしまいます。
ニックネームの設定を動画で説明
↓ 画像をクリックすると動画が開きます。
ニックネームの設定の具体的なやり方
▼ ダッシュボード ⇒ ツール
ユーザー画面に切り替わったら、ユーザー名の部分をクリックするか「編集」をクリックします。
するとプロフィール画面が出てきますので、こちらでニックネームを設定しブログ上での表示を指定してください。
この設定をすることによって、ニックネームが表示されるようになります。
THE THOR（ザ・トール）のカスタマイズ 3. 「プラグイン」
THE THOR（ザ・トール）には相性の悪いプラグインがあります。THE THOR（ザ・トール）には表示速度を速くする施策があります。ですので、わざわざプラグインを入れる必要がないもの、さらに今現在報告されているうち不具合が起こるプラグインがあります。
最低限必要なプラグイン
- Customizer Export/Import
あったら便利なプラグイン
- Akismet Anti-Spam (アンチスパム)
- Classic Editor
- BackWPup
THE THORのテーマと相性の悪いプラグイン
- TinyMCE Advanced
- Jetpack
- SiteGuard WP Plugin（一部ブラウザで画像の一部が表示されない事例あり）
※必ず、不具合を起こすと言うわけではありません。
プラグインの導入方法
基本的なプラグインの導入方法をこちらで記載しておきます。プラグインの場合はほとんどがこの方法でできます。
▼ ダッシュボード ⇒ プラグイン ⇒ 新規追加
検索窓に、自分が入れたいプラグインの名前もしくは、プラグインの作者の名前を入力します。すると以下のような画面がでてきますので「今すぐインストール」をクリックしたあと「有効化」をします。
プラグインによっては設定が必要なものもありますが、着せ替えに必要な「Customizer Export/Import」やエディターを旧に戻す「Classic Editor」などは特に設定なしで使えます。
↓ 詳しくは以下の記事に書かれています。
| ブログの見た目は配色がポイント！芸大卒のなつが、他にはない超簡単な色合わせのコツを記事にしています。 |
THE THOR（ザ・トール）のカスタマイズ 4. 「着せ替え機能」
THE THOR（ザ・トール）の一番の特徴といえば着せ替え機能でしょう。着せ替え機能もすごく簡単なのですが、ほんの少しだけ独特のやり方があります。
↓クリックで拡大します。
出典：THE THOR（ザ・トール）
着せ替えは全部で9種類、デザイナーが作ったクール系のテーマです。
着せ替え機能とは？
着せ替え機能とは、あらかじめデザインされたレイアウトがワンクリックで自分のブログにインポートできるとても便利な機能です。
ヘッダーや、カルーセルスライダー、ピックアップ記事、フッター、個別記事、背景など全てセットになったものが用意されていますのでそれをダウンロードするだけです。
↓ クリックで拡大します。
最新オリジナルデザイン「綿毛」
※その他のデザインは以下の記事で見れますのでよかったらご覧ください。
⇒ THE THORデザイン追加特典
⇒ 【簡単な使い方】THE THORデザインの事例集6選！
初心者のうちは、なにかと設定に悩みがち・・・最初はできるだけサクッと導入してしまい、慣れてくれば自分でカスタマイズするのがベストでしょう。
着せ替えのやり方は覚えてしまえばすごく簡単なので説明していきます。
着せ替え機能を導入する手順
- 着せ替えに必要なプラグイン「Customizer Export/Import」をインストール
- THE THORのDEMOページよりファイルをダウンロード
- カスタマイザーでインポート
着せ替え方法を動画で説明
↓ 画像をクリックすると動画が開きます。
着せ替えの導入にあたっては、THE THOR（ザ・トール）の親テーマと子テーマをすでにインストールが終わっているという前提で説明をしていきます。
1. 着せ替えに必要なプラグイン「Customizer Export/Import」をインストール
着せ替えをするにあたって、プラグインCustomizer Export/Importをインストールして有効化しておきます。この作業を忘れると着せ替えが反映しませんのでご注意ください。
2. THE THORのDEMOページよりファイルをダウンロード
THE THORの公式DEMOページより、お好きなデザインのファイルをダウンロードします。
公式サイトの中にデモサイト一覧がありますのでココから展開すると、公式が用意した着せ替えのデモ一覧が現れます。
出典：THE THOR
好きなデザインを選んで、「スタイルダウンロード」のボタンをクリックしPCのお好きなスペースに保存しておきます。
初心者の頃は、どの部分に保存といってもわからないと思いますので、デスクトップ等ご自身のわかりやすい場所に保存しておくと便利です。
3. カスタマイザーでインポート
ダウンロードして保存した着せ替えのファイルをインポートしていきます。
▼ 外観 ⇒ カスタマイズ ⇒ エクスポート/インポート
インポートの部分、ファイルを選択で保存した着せ替えのファイルを選択します。
着せ替え「01」なら以下のような文字がファイル名についています。
「the-thor-child-export-demo01.dat」
ファイルを選んだら、インポートをクリックするとWordpressに反映しますので、すぐに使える状態となります。
↓ 着せ替え機能の詳細は以下の記事でも書いています。
【補足】アレ・・・イメージと違うから変更したい！
実際インポートして、やっぱり変更したいという場合に、いきなり次のファイルをインポートしてもうまくいきません。
順は以下の通りです。
- デフォルトの着せ替えファイルを保存
- デフォルトの着せ替えファイルをインポート
- 新しい着せ替えファイルをインポート
↓ 無料で使えるイラスト画像25選！
1. デフォルトの着せ替えファイルを保存
マニュアルより、デフォルトのファイルをダウンロードします。検索窓に「着せ替え」と入れ検索をかけてください。
マニュアル内記事「カスタマイザーの設定をデフォルトに戻す方法」をひらきます。この記事内に、デフォルトのファイルをダウンロードするボタンがあります。
このボタンより、「the-thor-child-export-default.dat」というファイルをPCに保存してください。
2. デフォルトの着せ替えファイルをインポート
▼ 外観 ⇒ カスタマイズ ⇒ エクスポート/インポート
一般の着せ替えファイルのインポートと同じ操作をします。ファイル選択のボタンをクリックし先ほど、ダウンロードした「the-thor-child-export-default.dat」というファイルをインポートします。
その後、上の「公開」を押すと作業は完了です。
3. 新しい着せ替えファイルをインポート
デフォルトのファイルをインポートすれば、真っ白な状態になりますので新しい着せ替えファイルをインポートします。
着せ替えの変更方法を動画で説明
↓ 画像をクリックすると動画が開きます。
↓ 着せ替えのデザインを変更したいときには以下の記事をご覧ください。
THE THOR（ザ・トール）のカスタマイズ 5. 「TOPページ」
ユーザーがまず目にする場所のTOPページの編集やカスタマイズは、一か所でほぼ完成します。着せ替えでは物足りない場合や、個別に自分自身でカスタマイズしていきたい場合もTOPページ設定で操作します。
↓クリックで拡大します。
↓クリックで拡大します。
- メインビジュアル設定
- メインビジュアル下お知らせ設定
- カルーセルスライダー設定
- ピックアップ3記事設定
- 記事ランキング設定
- カテゴリ最近記事設定
TOPページの基本的な作り方を説明していきます。
1. メインビジュアルとは
THE THOR（ザ・トール）でいうメインビジュアルとは、ヘッダー画像の部分のことです。この部分では、静止画以外にも、スライダーや動画の設定ができます。
- 静止画
- スライダー
- 動画
THE THOR（ザ・トール）のメインビジュアルで面白いのが、画像の上に色やメッシュボードを重ねて雰囲気を変えることができることです。
色を重ねるのは、Wordpress公式のTwenty Nineteenでもヘッダー画像に色を重ねることができますが、それよりももっと高度でプロのような仕上がりになります。
↓クリックで拡大します。
出典：なつ特製最新オリジナルデザイン「ai」
例えば、画像が可愛すぎてちょっと幼稚に見える時、カッコいい仕上がりにしたいときなどにブラックメッシュは生きてきます。
↓ THE THORの特有のヘッダー画像のカスタマイズはコチラ
メインビジュアルの具体的な作り方
▼ 外観 ⇒ カスタマイズ ⇒ TOPページ設定[THE] ⇒ メインビジュアル設定
メインビジュアルを表示するか選択
「表示」もしくは「非表示」を選択
メインビジュアルを表示させたい場合にはここで「表示」にしておいてください。メインビジュアルが必要ない場合は「非表示」にだけしておけばOKです。
表示サイズ[横]を選択
- ワイドサイズ
- ノーマルサイズ
- ビッグサイズ
こちらの大きさも右の画像を見ながら調整していってください。
メインビジュアルの表示モード設定
- 静止画
- Youtube動画
- スライドショー
静止画、動画、スライドショーのどれをメインビジュアルにしたいかここで設定をします。
ここまで設定すれば下に静止画や動画、スライドショーのセッティング画面がありますので、画像を取り込み装飾をしていきます。
↓ メインビジュアルで使える無料画像25選！
2. メインビジュアル下お知らせとは
THE THOR（ザ・トール）では、メインビジュアルのすぐ下にボタン付きのお知らせ部分を設置できるようになっています。
メインビジュアル下お知らせ設定の具体的な作り方
▼ 外観 ⇒ カスタマイズ ⇒ TOPページ設定[THE] ⇒ メインビジュアル下お知らせ設定
メインビジュアル下の注目エリア設定
注目エリアの「表示」もしくは「非表示」を選択する。
- キャッチコピーを入力
- ボタンのテキストを入力
- ボタンURLを入力
- 背景の色の設定
4の背景の色はデフォルトなら黒なので、問題なければそのままにしておいてもOKです。
3. カルーセルスライダーとは
カルーセルスライダーとは、メインビジュアルの下に位置するスライドショーのことです。独特の名前がついていますが、拡張されたスライダー機能だと思ってください。
カルーセルスライダー設定の具体的な作り方
▼ 外観 ⇒ カスタマイズ ⇒ TOPページ設定[THE] ⇒ カルーセルスライダー設定
カルーセルスライダー設定
「表示」もしくは「非表示」を選択する。
表示条件の設定
- 無し
- 指定した投稿を表示
- 指定した投稿以外を表示
- 指定したカテゴリの投稿を表示
- 指定したカテゴリ以外の投稿を表示
その他、表示する件数や、大きさの対比なども指定できます。
カルーセルスライダーの作り方を動画で説明
↓ 画像をクリックすると動画が開きます。
4. ピックアップ3記事とは
TOPページのピックアップ3記事は、THE THOR（ザ・トール）の目玉のうちのひとつ。訪問したユーザーに読んでほしい記事をランキングのようにして注目させる効果があります。
ピックアップ3記事の作り方を動画で説明
6分程度の動画です。ピックアップ3記事の使い方や、指定するIDコードなども併せて説明しています。
↓ 画像をクリックすると動画が開きます。
ピックアップ3記事設定の具体的なやり方
▼ 外観 ⇒ カスタマイズ ⇒ TOPページ設定[THE] ⇒ ピックアップ3記事設定
ピックアップ3記事設定設定
「表示」もしくは「非表示」を選択してください。
- セクションの見出しを入力
- アイコンの入力
- アイコン右の補足部分の入力
- 画像アスペクト比を選択
- 画像のマスクを入力
- 記事IDを入力
5. 記事ランキングとは
記事ランキングとは、TOPページの下部分に配置する記事のランキングのことです。この位置に配置することによって、ブログからの離脱を防ぎ再度ユーザーにブログ内を巡ってもらう効果があります。
記事ランキング設定の具体的な作り方
▼ 外観 ⇒ カスタマイズ ⇒ TOPページ設定[THE] ⇒ 記事ランキング設定
記事ランキング設定
記事ランキングを「表示」もしくは「非表示」を選択する。
- 表示件数を入力する。
- 表示条件を入力する。（必要に応じてIDコード入力）
- セクションの見出しを入力
- 見出しのアイコン選定
- アイコンの右の補足情報入力
- 画像サイズの選択
- 必要に応じてカラー系マスク選択
6. カテゴリ最新記事とは
カテゴリ最新記事とは、TOPページの下部、ランキングの下に位置する記事のことです。
カテゴリ最新記事の具体的な作り方
▼ 外観 ⇒ カスタマイズ ⇒ TOPページ設定[THE] ⇒ カテゴリ最新記事設定
カテゴリ最新記事
カテゴリ最新記事を「表示」もしくは「非表示」を選択する。
表示条件を選ぶ
- 無し
- 指定したカテゴリの投稿を表示
- 指定したカテゴリ以外の投稿を表示
セクションと画像サイズ
- セクションの見出しを入力
- アイコンを選択
- アイコンの右の補足情報を入力
- 画像サイズを選択
↓ TOPページの作り方の詳しい説明は以下の記事に書いてあります。
カルーセルスライダーについてもう少し詳しく！
THE THORでは、メインビジュアルに動画も設定できるので、静止画よりも動きを加えることができます。さらに、メインビジュアルの下にスライダーも設定可能。
サイズ・動き方・ピックアップ方法など変化を付けることもできますので是非使ってみてください。
※今なら、8大購入特典をお付けしています！
↓続きは次のページ↓
なつ さん。
初めまして、affiboy と申します。やっと本物に巡り逢う事が出来ました！ご指導のほど宜しくお願い致します。m(__)m
こういったコメントが適切かどうかわかりませんが、thethorを使っていて、うまくいかない点があります。どうかご教授お願いします。
外部リンクのブログカードを投稿内に貼り付けると、リンクは出来るのですが、出てくる画像は自分のHPの画像が入ってしまいます。本来、リンク先の画像が入るものと思いますが、どう解決したら良いでしょうか。
お忙しいと思いますがよろしくお願いします。
taku 様
ブログのURLについては個別ページを指定しておられますでしょうか？ブログ単独のURLでは画像は出てきません。
詳しくは以下の記事でも記載しておりますので、「ブログカード」の部分をご覧ください。
https://blognote01.com/thethor-shortcode
どうぞよろしくお願いいたします。