【アフィリエイト初心者】WordPressでTHR THORを使ったサイト構築までの道~デザイン設定~

糸目ママ
今回はWordPressのテーマTHE THOR(ザ・トール)のデザイン設定を行っていきます。
初心者がサイトのデザインを設定するのは一苦労しますが、
THE THOR(ザ・トール)ならプロのデザイナーが作成したデザインを無料で使用すことができます!
※しかし各所にテンプレート用の設定が埋め込まれているのでそこは修正が必要です。
また今回はサイトで使用する画像の準備が必要になります。
※背景色が白の場合は透過(透過設定の「.png」ファイル)で保存しておいてください。
  • サイトロゴ(横長のそれなりのサイズ)
  • サイトアイコン(参考サイズ:512×512 ピクセル)

今回紹介するのは最低限の設定(とりあえず人に見られても大丈夫な程度の設定)になりますので、
サイトを運営するにあたっては他の設定も細かくしていく必要があるかとおもいます。

スタイルの設定

スタイルの取得

まずは
THO THOR(ザ・トール)の公式デモサイト
を開き、設定するスタイルを吟味してください。
使用したいスタイルの「スタイルダウンロード」ボタンをクリックします。
ダウンロードされたzipファイルを解凍してください。
zipファイルを右クリック>すべて展開 で大抵は解凍できます。
解凍すると中にdatファイルが一つ入っています。
これが入手できれば一旦OKです。

デザインの取り込み

糸目ママ
ここからはプラグインの「Customizer Export/Import」が有効化が行われている前提です。
WordPress設定を行っている前提です。
メニュー>外観>カスタマイズをクリックします。
メニュー>インポート/エクスポートをクリックします。
「ファイルの選択」をクリックします。
解凍したファイルを選択し、「開く」をクリックします。
「画像ファイルをダウンロードしてインポートしますか ?」にチェックを入れて「インポート」をクリックします。
インポートが完了するとデモサイトとほぼ同じものが右画面に表示されます。

デザインの設定(最低限)

メインビジュアルの設定

下の大きな画面の設定です。
まずは設定予定の画像など準備がある場合は、画像などを使用してください。
今回は画像の準備がない前提で進めていきます。

外観のカスタマイズメニュー>TOPページ>メインビジュアルの設定をクリックします。

「メインビジュアルを表示するかの選択」で「非表示」を選択します。

ついでに画像も削除して、YouTubeの動画IDも消しておきましょう。

「公開」をクリックすると保存されます。

サイトロゴの設定

外観のカスタマイズメニュー>基本設定>サイトロゴの設定をクリックします。

「画像を変更」をクリックします。

使用したいファイルをドラッグアンドドロップするなり、ファイルを選択画面から選ぶなりします。

ファイル選択の場合、対象のファイルをクリックして、さらに「開く」をクリックすればOKです。

メディアライブラリにアップロードした画像が増えています。
開いたついでに、デモ用の不要な画像は削除してしまっておきましょう。

削除したい画像をクリックした後、「完全に削除する」をクリックします。

ポップアップが出たら「OK」をクリックします。

不要なデモ用の画像を削除したところで、本題のサイトロゴに使用する画像をクリックし、タイトルを「サイトロゴ」に修正、そして「画像を選択」をクリックします。

「公開」をクリックして保存して完了です。

サイトアイコンの設定

メニュー>サイトの基本情報をクリックします。

「サイトアイコンを選択」をクリックします。

サイトロゴと同様の手順でファイルをアップロードします。
アップロードしたファイルを選択、タイトルを「サイトアイコン」に変更後、「選択」をクリックします。

「公開」をクリックして保存で完了です。

あ…

いちか(厳しい)
見事に潰れてるので、これは作り直しですねぇ…

固定ページの設定

次はメニューの設定を行いたいところなのですが、
そもそも固定ページがないと設定しにくいので先にページのみ作成してしまいます(中身は作らない)。

作成するのは下記ページです(不要だと判断した場合は作成不要です)

  • プロフィール
  • プライバシーポリシー ※最初から登録されていると思います。なければ作成しましょう
  • サイトマップ
  • お問い合わせ

WordPressメニュー>固定ページ>新規追加をクリックします。

……えぇ~…ナニコレ、エディタ開くのにエラー出てるじゃないですか…orz
慣れてないときにこんなエラー出ると一気にやる気がそがれますよね…。

今投稿してるこのサイトはこんなエラー出なかったんですよね…
「Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js」
…なるほど。テーブル、テーブルの設定に関するエラーか!(心当たりがあった!)

ということで調査の結果…(最初に思っていたと違った)
プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)」※クラシックエディタの拡張機能
をインストールして有効化したらエラーが発生しなくなりました。
(こっちには試しで入れてみていたので発生しなかったもよう)

同じエラーが発生していて、かつプラグインに特にこだわりがない場合はこちらをインストールしてみてください…(フゥ

プロフィールページの作成

それでは、気を取り直して固定ページ(中身は後から作るので空っぽ)を作成していきましょう。
「下書き保存」をクリックするとパーマリンクの設定が出てきます。

日本語はよろしくないので、直します。「編集」ボタンをクリックしてください。

英語の「profile」に変更した後、「OK」をクリックしてください。

「公開」をクリックして作成完了です。

プライバシーポリシーページの作成

固定ページ一覧を確認すると、おやおや、もういるようですね。
プライバシーポリシーの「編集」をクリックします。

ひゃぁ、中身は英語ですね。とりあえずタイトルをカタカナに直して、公開だけしてしまいましょう。

サイトマップページの作成

こちらはデフォルトでないページなので新規作成します。
タイトルを入力し、こちらはTHE THOR(ザ・トール)でテンプレートがあるので「サイトマップTPL」を選択します。

プロフィールと同様の方法でパーマリンクを英語の「sitemap」に変更して、「公開」をクリックして完了です。

お問い合わせページの作成

こちらもデフォルトでは用意されていないので、固定ページの新規作成をします。
タイトルを入力し、「サイトマップ」と同様に、お問い合わせ」ページもTHE THOR(ザ・トール)でテンプレートがあるので「お問い合わせTPL」を選択します。

プロフィールと同様の方法でパーマリンクを英語の「contact-form」に変更して、「公開」をクリックして完了です。

さて、一通りの固定ページの仮作成が完了しました。固定ページ一覧を確認してみてください。
「Sample Page」なるものが存在しますね。邪魔なので削除してしまっておきましょう。「ゴミ箱へ移動」をクリックです。

カテゴリーの設定

よし、次こそはメニューの設定…と行きたいところですがカテゴリーもないと設定しにくいので、カテゴリーも仮で作成してしまいましょう。
ここは自分で作成するサイトの内容によるので、各自で考える必要があります。

メニュー>投稿>カテゴリーをクリックします。

名前にカテゴリー名、スラッグに英名(もしくはローマ字)を入力し「新規カテゴリー」を追加をクリックします。
他の諸設定は自分の投稿スタイルに合わせて変更してください。

残り必要分を適宜作成してください。
デフォルトで入っているカテゴリーですが、デフォルトのサンプル用投稿などで使用されている場合は削除ができません。
サンプル用投稿を削除した後カテゴリーも削除するなり、もしくは自分が使用するカテゴリーで上書きしてしまいましょう。

メニューの設定

それでは最後にやっとメニューの設定に入ります。
メニューの設定はとりあえず下記を行います。サイトの運用に慣れてきたらメニューの内容も含め適宜変更してください。

  • グローバルメニュー(ヘッダーメニュー)
  • フッターメニュー

メニューの内容の設定をします。
メニュー>外観>メニューをクリックします。

メニュー名に「グローバルメニュー」を入力、「ヘッダーエリア」とにチェックを入れた後、メニューを作成をクリックします。

メニューが作成されると、左側の「メニュー項目を追加」が触れるようになります。
「カテゴリー」タブをクリック→「すべて表示」タブをクリック→「すべてを選択」をクリック→「メニューを追加」をクリックしてください。

「固定ページ」タブをクリック→「すべて表示」タブをクリック→「ホーム」と「プロフィール」をクリック→「メニューを追加」をクリックしてください。

各項目をドラッグして、メニューの表示順を整えてください。

順番を整えたら右下の「メニューを保存」をクリックします。

不要なメニューを削除したい場合は、「一括選択」をクリック→削除したいメニューを選択→「選択した項目を削除」をクリックで削除できます。

次はフッターメニューを作成します。
「新しいメニューを作成しましょう」をクリックします。

メニュー名に「フッターメニュー」を入力、「フッターエリア」にチェックを入れた後、メニューを作成をクリックします。

「固定ページ」タブをクリック→「すべて表示」タブをクリック→「プライバシーポリシー」と「お問い合わせ」と「サイトマップ」と「 プロフィール」をクリック→「メニューを追加」をクリックしてください。

順番を整理した後に「メニューを保存」をクリックします。

 

フッターエリアに(私的には)余分な文言があるので、それを非表示にします。

外観のカスタマイズメニュー>共通エリア設定>フッターエリア設定をクリックします。

「コピーライト下のリンク(THE THEME及びWordPressなどのリンク)を表示するか選択」を「非表示」に選択して「公開」をクリックすれば完了です。

最後にPC用のメニューパネルも設定をします。
メニュー>外観>ウィジェットをクリックします。

「メニューパネル」をクリックした後、下の「+」をクリックし、さらに「すべてを表示」をクリックします。

「カテゴリー一覧」をクリックします。

右上の「更新」ボタンをクリックして完了です。
※投稿している分のカテゴリーしか表示されないようです。