注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

THE THOR（ザ・トール）へテーマを変更😆すんなり行く為の準備は👉コレ👈

WordPress THE THOR（ザ・トール）へテーマを変更。すんなり行く為の準備はコレ。

LuxeritasからTHE THORへテーマを変更した時のメモと設定です。記憶の新しい内に書きました。参考になれば幸いです。

数回に分けて、丁寧にお届けします。

THE THOR　公式

目次

準備すること

スポンサーリンク

ドキュメントをよく読む

販売元のインフォトップさんからダウンロードしたzipファイルを解凍してテーマが入っているフォルダの中の、ドキュメントを読みます。「テーマ変更時の危険回避」「更新用ユーザーIDと会員フォーラムのアカウントの発行手順」が載っています。

 

更新用ユーザーIDと会員フォーラムのアカウントは登録しておきましょう。私の場合、次の日に更新用ユーザーIDなどの返信が来ました。

着せ替え機能について

THE THORは「デザイン着せ替え機能」を搭載。プロが作ったデザインでサイトを始められます。着せ替え機能を利用してカスタマイズするもよし、外観 カスタマイズで、最初から作るのもよし。どちらも簡単ではなかったですが、プレビューしながら「この機能なのかー」ってカスタマイズする作業は楽しかったです。

 

個人的意見としては、最初から作った方が楽かも。でも一度は着せ替えをやってみたいですよねw　デモサイトには、現在8種類のデザインがあります。デモサイト（ https://fit-theme.com/the-thor/demo/）

 

着せ替え機能を利用する場合、「Customizer Export/Import」が専用のプラグインです。事前にインストールしておいてもいいですね。

 

THE THOR（ザ・トール）へテーマを変更

テーマがLuxeritasだった変更前です。
クリックで拡大出来ます！

Luxeritasの時は初めてだったし、設定できる項目が多かった分大変でした。


THE THOR（ザ・トール）へテーマを変更

THE THORへ変更直後です。
クリックで拡大出来ます！

アイキャッチ画像が大きい(笑)「だったら着せ替え機能でサクッと変えちゃおう」と思っている貴方！着せ替え後も色々な機能が付きすぎて割と衝撃です。

ロゴ画像作り

サイトロゴを作っておきましょう。

最初からリサイズされないサイズは、横220px×縦50pxです。
参考元：よしじゅんブログさん

インストールしておくプラグイン

私の好みのプラグインですので参考程度にご覧ください。
Classic Editor
LuxeritasのClassic Editorっぽい機能で記事を書いていました。過去記事の修正をClassic Editor形式でやりたい為にインストール。Classic Editorのサポートは2021年末で終わってしまいます。早くブロックエディタに慣れないとですね。

 

wp-jquery-lightbox

THE THOR（ザ・トール）へテーマを変更
この画像は拡大指定してないよ

指定した画像をクリックすると、拡大表示する(閉じるボタン付き←ここ重要)プラグイン。この画像はもともと小さいので拡大指定はしていません。


この機能はLuxeritasだと標準機能であったので、閉じるボタンが無いと物足りなくなってしまいました(笑)。キャプションや代替テキストも表示されます。もし使用する場合は、 プラグインの設定で「スクリーンサイズに合わせて画像を縮小」に必ずチェックを入れて下さい。ブラウザの「戻る」の代わりに「閉じる」を押されちゃうと、折角来てくれたのに残念だし勿体ないですよね。。

同じようなプラグイン「Easy FancyBox」と「FancyBox for WordPress」は残念ながら動作しなくなってしまいました。最初は動いていたので他のプラグインとの相性かもしれません。

旧テーマ依存のCSSの変更

Luxeritasの蛍光ペン機能や吹き出し機能のCSSを自前のCSSに書き直しました。

メモしておくコード

引き継がれない設定をメモしました。
カスタムフィールドのコードを記事ごとに
カスタムCSSのコード(見出しの設定etc)
<head>～</head>に追加したコード(アドセンス、アナリティクスetc)
functions.phpに追加したコード(関数)

テーマをTHE THORに変更

データ損失が心配な方はバックアップをして下さい

テーマのインストール

使用中のプラグインを、すべて一旦停止して、親テーマと子テーマ、両方インストールして下さい。有効化するのは子テーマの方です。インストール・有効化後はプラグインを戻してＯＫです。

最初、販売元のインフォトップさんからダウンロードしたzipファイルを解凍せずにインストールしてしまいましたw

メモしておいたコードを貼り付け

全て子テーマで設定出来るのが分かりやすい。親テーマのバージョンアップでも設定を変更する所はありませんでした。

カスタムCSSのコードを設定

私は自前のCSSを多用していたので、一番先にやりました。
これが無いと、記事のレイアウトが大変なことに！

ダッシュボードの、外観 テーマエディター スタイルシート (style.css)

見出しのCSSについて

THE THORには沢山の見出しデザインがありますが、自作派は読んでね。THE THORの場合、見出し(h1～h5)のCSSは下記になります。参照元：MASAa.netさん

.dividerBottom h1 {見出しの装飾コード}
.content h2 {見出しの装飾コード}
.content h3 {見出しの装飾コード}
.content h4 {見出しの装飾コード}
.content h5 {見出しの装飾コード}

カスタムフィールドを記事ごとに設定

CSSの説明記事など、その投稿のみでしか使用しないCSSはカスタムフィールドに記載していました。テーマの変更時は受け継がれない為(消えてしまう)、メモに残して記事ごとにコピペします。

THE THORにはCSS入力欄が用意されていない為、functions.phpをいじって作りました。参照元：WordPressで記事ごとに個別のCSSを設定する方法3選

THE THOR（ザ・トール）へテーマを変更

Custom CSSの欄にCSSを書くと、その投稿ページのみのCSSが設定できるのです。


<head>～</head>にコードを貼る

私の場合は、5種類でした。多いのかな(笑)
looks_one Googleマテリアルアイコン
looks_two Font Awesomeアイコン
looks_3 Googleアドセンスの自動広告用
looks_4 Googleアナリティクス用
looks_5 Font Awesomeアイコン　アニメーション用

ダッシュボードの、外観 カスタマイズ 基本設定[THE] 高度な設定 ■</head>直上の自由入力エリア

<body>直前にコードを貼る

私の場合は、2種類でした。残念ながらモリサワフォントのJavaScriptはTHE THORと相性が悪いのかもしれません。ページの切り替えごとに一瞬真っ白になるので今は止めてます。
looks_one JavaScript（モリサワフォント）
looks_two JavaScript（マーカーが自動で流れる）

ダッシュボードの、外観 カスタマイズ 基本設定[THE] 高度な設定 ■<body>直上の自由入力エリア

functions.phpにコードを貼る

私の場合は、2種類でした。ショートコードは便利なので、これから勉強して増やして行きたいです。
looks_one CSS入力欄用関数
looks_two ショートコードを使う関数

ダッシュボードの、外観 テーマエディター テーマの為の関数 (functions.php)

ユーザーIDの設定

更新用ユーザーIDなどの返信メールが来たら、ユーザーIDの設定をしましょう。

ダッシュボードの、外観 カスタマイズ 基本設定[THE] ユーザーID設定
会員フォーラム関係のIDも載っているので、困ったときや、WordPress・THE THORがバージョンアップした時などに便利です！
次の記事は見た目のカスタマイズの予定です。
同じタグの記事です
0

WordPressの最新記事8件