THE THOR(ザ・トール)のデザイン着せ替え機能の設定方法

WordPressのテーマ「THE THOR(ザ・トール)」を2019年3月下旬にインストールし、使い始めました。

そもそもWordPress初心者で、テーマって何?どう使うの?WordPressってどう使うの?から始めたど素人です。どこをどう扱えば変更できるのか、かなり試行錯誤しながら、悩みながら数日かけて現在のページを作ることができました。

最初、テーマをインストールしたものの、デザイン着せ替え機能を知らずに何時間も悩んでいました。

自分で初期設定する方法もあるのですが、時間がかなりかかる...ということで便利なのがデザイン着せ替え機能でした。

私と同じような方がいるかもしれない...と思い、こちらの記事を書くことにしました。

この記事では主に、当サイトで使用しているTHE THOR(ザ・トール)のデモサイト04デザイン着せ替え機能の設定方法についてご説明しようと思います。

ぜひ、ご参考にしていただければ幸いです。

THE THOR(ザ・トール)のテーマをインストールする

テーマをダウンロード

「THE THOR(ザ・トール)」の公式サイトへいき、テーマをダウンロードします。

ダウンロードしたZIPファイルを解凍すると、「the-thor.zip」と「the-thor-child.zip」というファイルがあるかと思います。

the-thor.zip」が親テーマで、「the-thor-child.zip」が子テーマです。

この二つをまずは、「the-thor.zip」をインストールしたのちに「the-thor-child.zip」をインストールします。

※親テーマからインストールしないとエラーになってしまいます。

ダウンロードしたテーマをインストール

ダウンロードしたテーマをWordPressの管理画面でインストールします。

 

場所は、外観テーマにあります。そのページの「新規追加」をクリックします。

 

テーマを追加」という画面になるので、「テーマのアップロード」という所をクリックします。

 

「ファイルを選択」をクリックして、先ほどダウンロードした親テーマ「the-thor.zip」をインストールし、次に子テーマ「the-thor-child.zip」をインストールします。

 

二つともインストールしたら子テーマ「the-thor-child.zip」の方を有効化して下さい。

デモページのデザインに着せ替える

「Customizer Export/Import」(WordPressプラグイン)をインストールする

WordPressの管理画面の、プラグイン新規追加からプラグインを検索します。

 

右の赤枠の検索窓で「Customizer Export/Import」と検索し、検索できたら「今すぐインストール」をクリックして、インストールを開始します。

 

プラグインのインストールが完了したら、「有効化」をクリックし、プラグインを有効化させます。

デモページをダウンロードする

「THE THOR(ザ・トール)のデモサイト一覧のページ」へ行き、デモサイトのスタイルをダウンロードします。

「01」〜「09」まで様々なデモサイトがありますが、私が使用しているデモサイトが04なので、ここでは04をダウンロードしてみます。

自分が選んだ好きなデモサイトでもOKです!

the-thor-child-export-demo04.zip」というZIPファイルがダウンロードできたかと思います。

そのファイルを解凍すると、「the-thor-child-export-demo04.dat」というファイルが入っています。そのファイルを先ほどインストールしたプラグインを使ってインポートしていきます。

「the-thor-child-export-demo04.dat」(デモページデザイン)をインポートする

インポートは、外観カスタマイズから行います。

 

「エクスポート/インポート」をクリックして選択します。

 




先ほど、デモサイトでダウンロードした「the-thor-child-export-demo04.dat」というファイルを「ファイルを選択」をクリックして選択します。

「画像ファイルをダウンロードしてインポートしますか?」にチェックを入れたら「インポート」をクリックしてデモサイト04のデザインをインポートします。

インポートが完了すれば、デモサイトと同じレイアウトのデザインになるかと思います。

エラーが出る場合

私の場合、「Fatal error: Maximum execution time of 30 seconds exceeded  ......」とエラーが出てしまったのですが、それはサーバー側の問題のようなので心配いりません。

このサイトはエックスサーバーを使用しているので、そちらの「php.ini」を修正すればOKです。

サーバーパネルを開く(エックスサーバー)

エックスサーバーのサーバーパネルを開き、「php.ini」をクリックします。

使用しているドメインを選択し、「php.ini設定」の「php.ini設定変更」から「max_execution_time」の数値を"60'"に変更します。"60"でもエラーが出れば”180”に変更します。

※変更した後、デザインをインポートできたら元に戻しておきましょう。

まとめ

ふー。お疲れ様でした♪

長くなっちゃいましたが、要は

  1. テーマをダウンロードして、順番通りにWordPressにアップロードする。
  2. WordPressにデザインを着てくれるようにお願いして承諾してもらう(プラグインをインストールして有効化する)。
  3. デザイン選ぶ(デモサイトを「01」〜「09」の中から選ぶ)。
  4. WordPressが着る(インポートする)。
  5. WordPressが選んだデザインを着てくれた!(デザイン着せ替え機能設定完了)

2と3は逆になっても大丈夫ですが、素人が考えるに、こんな感じではないかな?

意外と簡単ですよね!

次回は、デモサイト04に着せ替えてからのこのサイトの初期設定などについてご説明できればと思います。