4年半ぶりWebサイトのデザイン変更を実施!【ローカル環境でテスト編】

前回「Local by Flywheel」でのローカル環境が構築できたところまで進みました。

今回は、ローカル環境で「THE THOR」の機能の使用・不使用の決定、カスタマイズなどをレポートします。
この工程はローカル環境構築とは異なり手数は多いもののひとつづつ潰していく単純作業に近いので、それほど難しくはありません。しかし、約50ヵ所超と変更箇所が多かったのが予想外でした。

ローカル環境でテーマ変更

最初に行うのは当然テーマの変更です。
既に、新しいテーマ「THE THOR」はインストールしてあるので「有効化」するだけ。「THE THOR」は親テーマの「the-thor.zip」と子テーマの「the-thor child.zip」の2つで構成されていますが、有効化するのは「the-thor child.zip」の方だけでOKです。

「the-thor child.zip」を有効化したところ、レイアウトに大きな崩れはなかったので安心。正直、レイアウトの不具合が多発し、解決に多くの時間を取られるのではと覚悟していました。その作業がなくすぐに「THE THOR」の設定作業に入れたのは助かりました。

そのような中、不具合が発生したのは「albatros」独自のコードを使用した個所です。具体的には、

内部リンクの関連情報
強調用のカラーマーカーライン

の2個所。「albatros」に依存していない部分は問題なしでした。

独自コードの部分は一括置換での対応が不可なので個々に削除するしかありません。コードが表示されていて見てくれが悪いですが、緊急性が高くはないので空いた時間に徐々に対応する予定です(^.^;)

マニュアルが簡易過ぎて役に立たない

「THE THOR」は本体に多くの機能を搭載することにより、相性問題や動作が重くなるなどのデメリットが発生するプラグインを最小限にするというのがひとつの売りです。一方、多機能ゆえ使いこなせないとのユーザーの声があるのも事実。

そのためには詳しいマニュアルが必要です。しかし、「THE THOR」のマニュアルは説明が簡易すぎて役に立ちません。なぜなら内容のほとんどが管理画面の機能の場所を示しているだけで、個々の機能の説明がないからです。
例えば投稿ページのスタイル設定を選ぶ場合でもマニュアルはその場所が書かれているだけ。投稿ページのプレビュー画面で確認するしかないので物凄く時間がかかります。マニュアルに個々の機能の画像があれば一瞬で解決する作業です。
時間ばかりかかり効率的でなかったので、ボックス・ボタンなどすべての装飾機能が画像で紹介されている「THE THOR」ユーザーのブログを見つけたおかげで時間短縮に成功しました。

「THE THOR」にはマニュアルをフォローするユーザーフォーラムがあります。マニュアル以外の疑問点をユーザーフォーラムで解決するとの役割になっています。
私は、マニュアルより痒いところに手が届くユーザーフォーラムに期待をしていました。しかし、このユーザーフォーラムも残念ながら期待外れ。何故なら、疑問点を検索窓に入力しても該当事例がまったくヒットしません。理由としてフォーラムのQ&Aのボリュームが圧倒的に少ないからです。

結局、Webサイトで検索した方が有効な情報に当たり、素早く解決することがわかりました。この過程で、「THE THOR」を利用し情報発信をしているユーザーが多いことを知りました。良い意味で予想外でした。
ということで、私と同じく「THE THOR」の設定で迷いサポートが欲しい方のために参照したWebサイトのリンクを極力貼っておきます。迷った時に参考にしてください。

「THE THOR」の設定

「THE THOR」の機能は他のテーマに比べたくさんあります。その中から自分に必要な機能がどれかを判断するため、そこそこ時間がかかります。各機能はユーザーの使い方により必要、不必要は変わりますので、ひとつひとつチェックすることをお薦めします。

その上、実際に投稿ページで記事を執筆する際に便利な機能がありましたので紹介します。その機能は下記の3点です。

詳細は下記に記します。

「スタイル」、「プリセットパーツ」、「共通ボタン」

「THE THOR」には「6種類のカラー＆3種類の太さを揃えたマーカー、10種類のボックス、10種類のボタン、10種類のラベル」が最初から設置されています。通常のテーマではボタンやラベルは数種類なので、「THE THOR」のレパートリーの多さは特別です。さらに、ボックス、ボタン、ラベルは色の変更も可能です。

スタイルなどの多さは購入前から知ってはいましたが、実際に記事を書き始めて感じたのは「種類が多いのは正解！」ということです。
前テーマ「albatros」はボタンなどの種類が限られていたので大きなデザイン変更はできませんでした。もし、それ以上を求めるならCSSで変更しなければならないのでハードルが一気に上がります。CSSに詳しくブログ管理者ばかりではないので、限られたレパートリーを使い回すことになります。その結果、他のブログと同じデザインイメージになるのが避けられません。

それに対して「THE THOR」はレパートリーが豊富なので同じテーマを使っても個性の表現しやすいメリットがあります。また、記事に内容に応じて変化が付けられるので読者を飽きさせないデザインも簡単です。

また、いろいろな種類があってもそれを使うのにツールの奥までたどらなければならないと面倒くさくなり結局使わなくなります。その点「THE THOR」は、記事入力画面のツールメニューから選択するだけというアクセスの簡単さ。バリエーションの豊かな画面を作りたいなら「THE THOR」は最適です!

サイトカスタマイズの覚え書き

［THE THOR（ザ・トール）］「ボックス」一覧と装飾の使い方、カスタマイズ | サイトカスタマイズの覚え書き「ブログのblog」

「THE THOR（ザ・トール）」は、記事装飾のためのパーツが大変充実しています。記事を分かりやすく見せるための「ボック…

「タグ挿入」

何度も使う広告リンクやテンプレート画像は「タグ管理」ができます。タグ設定すると記事入力画面のメニュー欄にある「タグ挿入」ボタンからプルダウンで素早くコードを挿入が可能になります。
これは本当に便利!
例えば私が旅行記をアップしている「フォートラベル」へのリンク先も「タグ管理」に登録すれば「タグ挿入」ボタンから簡単にリンク画像を購入することが可能です。

以前は、「フォートラベル」へのリンク先のコードをテキストファイルに書いておき、必要な際に該当ファイルからコピー&ペーストしていました。この作業って難しくはないのですが面倒くさくなるのですよね。
「タグ管理」は自由に何個でも追加できるので活用すればするほど便利さがアップします。

「ショートコード」

「ショートコード」は「タグ挿入」と似ていますが少々違います。
「タグ挿入」はユーザーが新規に追加することができます。それに対して「ショートコード」は追加などは不可で予め設定された項目だけが対象です。「ショートコード」の項目は、「外部リンク」、「内部リンク」、「目次」、「カテゴリー指定記事一覧」、「記事内広告」などです。

「外部リンク」の初期設定値ではリンク先を別ウインドウで開くコード「target=”_blank”」が付いていません（「内部リンク」には付いています）。
私は外部リンクは別ウインドウで開きたいので「target=”_blank”」が初期値として欲しかったと思っています。もし別ウインドウにしたくなかったら「target=”_blank”」を取る方が、「target=”_blank”」を付けるよりも楽なはずですから。
なお、最近は「target=”_blank”」単独ではセキュリティー上問題があるので「rel=”noopener noreferrer”」も追加することが推奨されています。

「関連記事一覧」と「カテゴリー指定記事一覧」は「ショートコード」を挿入すると関連記事、カテゴリー記事が表示されます。
確かに便利ですが、関連記事もカテゴリー記事もそのブログの基本方針により設置するかしないかが決まります。すると、「ショートコード」ではなく「投稿ページ設定」の中で「表示する・表示しない」で選択する方が考え方が自然で便利です。今後のアップデートでの修正を要望します。

「目次」も「ショートコード」ボタンのプルダウン一覧から設置できます。「THE THOR」の「目次」は「h」タグを目次項目としてピックアップする仕様となっています。
通常は「アンカータグ」でリンク元とリンク先をいちいち設定しなくてはいけないので面倒でついつい省略していました。「THE THOR」では「ショートコード」からの選択で完了するので簡単。今後は読者の読みやすさを考え「目次」を積極的に付けたいと考えています。

「XMind」にカスタマイズリストを記載

「THE THOR」はデザインなどの完成度が高いといわれていたので設定項目はそれほど多くないと思っていました。
しかし実際作業したら50か所超と予想をはるかに超えた設定変更作業となりました。やはり個々のユーザーによって好みが違うので設定変更は発生してしまいますね。

今回「THE THOR」の設定項目の備忘録に「XMind」を使い記載していました。もし、メモも何も付けていなかったら作業の再現はできませんでした。
「THE THOR」をテーマに使うのは当「monk himselh」だけでなく、将来別の他のWebサイトでも使うかもしれません。また、「monk himselh」でも細かい設定変更も考えられます。
そのため備忘録を付けていたたわけです。これが幸いしました。

「XMind」だけでなく各自の使いやすいツールでOK。肝心なのは後から作業の再現ができるようにすることです。
運用後、早々に設定変更をする必要が発生しましたが、その際この「XMind」の備忘録が早速役立ちました。

CSSやファイルへの追記

カスタマイズのためのCSSやファイルへの追記はアップデートの際の不具合などの発生につながるので止めるつもりでした。
しかし、設定過程でどうしても必要になり少々追加をしてしました（それでも以前の「albatros」に比べれば少ないです）。

CSSで追加した項目は、

です。
本文や見出しのフォントカラーが黒色（#000000）だったので「#696969」にし見やすくしました。
また、見出しの行間が詰まり気味だったので

に変更。
キャプションのフォントが大きすぎたので少し小さくし色も薄く変更。

さらに、今回直接ファイルに追加した個所が1ヵ所あります。それが「お問い合わせフォーム」です。
「THE THOR」には「お問い合わせフォーム」が標準で付いています。お問い合わせページの設定は面倒なので標準で付いているのは本当に助かります。しかし、実際に設定したら大きなデメリットがあるのに気付きました。それは、確認ページがないのです！

「WordPress」で有名な問い合わせフォーム用プラグイン「Contact Form 7」も確認ページがないので私は「albatros」の時には確認ページの設定ができる「MW WP Form」を使っていました。海外では確認ページがないのが一般的だと聞きましたが、逆に日本では確認ページがあるのが標準です。私も問い合わせフォームを利用する時には「確認ページ」がある方が便利と考えています。

そこで、「THE THOR」標準の問い合わせフォームではなく「MW WP Form」に切り替えテストをしてみました。しかし、どうしても「THE THOR」のデザインと一致しません。
いろいろと試行錯誤したが良い解決策が見つかりません。そこで、苦し紛れの対策をしました。
それが下記の画像のように「送信」ボタンの下に「※確認ページがありません～」との文章を入れるという方法です(^.^;)

この文章を入れるため「page-contact.php」ファイルを開き220行目に、

を追加しました。
今後のことを考えたら親ファイルへの追記は止めた方が良いことは理解しています。しかし、私の知識ではこれしか解決策が浮かびませんでした。このままでは「THE THOR」がアップデートした際に、この追記が引き継がれない可能性があります。そこでこれからもう少し、調べもっと良い解決策を探したいので継続作業をします。

まとめ

完成度が高いテーマといわれていたので設定変更やカスタマイズは少なくて済むと思っていました。しかし、変更個所が50カ所超と読みが甘かったです…
また、今までの「WordPress」使用の教訓からCSSを使ったカスタマイズは最小限にするつもりでした。しかしこれも自分の気に入ったレイアウトにしようとしたら予想外に多くなってしまいました。

このように、いろいろ予想外の点が多々ありましたが、これでほぼ本番環境に戻せるレベルまで設定完了。最終確認は本番環境で行います。
本番環境での移行とチェックは次回にレポートします!