前回の記事で、WordPressの有料テーマである、THE THOR (トール)について、そのメリット・デメリットなどをご紹介した。下の記事だ。
本ブログとは別に、新たなブログを立ち上げているのである。 新たにドメインを取得してと、いろいろ作業をしているうちに、何か新しいテーマを使って、見てくれもちょっとは格好良くしたいなと、ふと思ってしまったのが始[…]
当ブログも、このTHORを使って作成されているのである。今回は、THORを使用する場合に必要なカスタマイズ(THORでの設定)について、当ブログでの設定の仕方をご紹介しながら、整理していくのである。
これから、THORを使おうかとご検討されている方への参考情報となれば幸いである。
この記事でわかること
では、早速、当ブログで設定している内容を見て行こう。ただし、ここですべての内容を解説ることはできないので、解説が必要と思われる項目をピックアップしている。容易に設定可能な項目については、触れていないので、ご了承頂きたい。
THE THORのカスタマイズメニューとは
THOR(トール)をインストールして有効化すると、WordPressのダッシュボードの左メニューから、
外観→カスタマイズ とクリックすると、以下のTHORのメニューが表示される。
これに沿って、当ブログの設定内容を引用しながら、設定方法について解説していこう。
基本設定
基本設定をクリックすると、さらにサブメニューが表示される。
このブログで言うと、ページの最上部に表示される、「早期退職を応援するサイトです」がサイトロゴだ。必ずどのページでも表示される。これは画像で指定するので、このような文字ではなく、サイトを代表する図形、ロゴなどを指定するのが良いであろう。
THORが自動でサイトマップを作成してくれる機能の設定であるが、本サイトでは使用していない(非表示)。ここで自動生成されるのは、htmlで記述された、読者向けのものであり、いわゆるサーチエンジン向けのxmlで記述されたものではない。よって、サイトマップについては、本設定は有効にせず、従来どおりプラグイン Google XML Sitemapsを有効化、使用している。
これもお問い合わせページを自動で生成してくれる機能だ。Adsense申請時にはあった方が良いので、ここでサンクス画面のメッセージを入力欄、自動返信メールの冒頭を入力欄に文章を設定している。サイト内から、このお問い合わせページに飛べるように設定してある。
Google Analytics, Google Search Console 機能を使用する方は、それぞれのIDをメニューにある指示のとおりの部分のみを設定します。IDをここに設定しておけば、他の場所で設定する必要がないので、便利です。
ここでサイト全体のカラーや文字の大きさ、ページの背景画像などを設定することができます。このブログでは、メイリオの小フォントサイズを設定しています。背景画像などは設定していません。
ここの設定でxxxを表示にすると、それが、記事一覧のページで確認できます。最初の総合閲覧数にチェックを入れると、各ページが何回累計で閲覧されているのかを表示してくれます。本ブログでは、最初の総合閲覧数だけチェック入れました。性能影響が出るリスクはあるので、必要のないものはチェックしないようにした方がよいでしょう。
これは、各ページの<head></head>や、<>body></body>の間に、決まった記述を入れる場合に、ここに設定することができます。これまでは、直接ファイルを編集して追加していたものが、このメニューから設定できるようになっており便利です。このブログでは、adsenseの自動広告のスクリプトを入れています。また、上記のアクセス解析設定ではなく、ここにGoogle Analyticsのスクリプトを記述しても問題なく動きます。
このブログでは、<body>の方は今のところ何も設定していません。
必ず設定しましょう。THOR購入後に通知されるユーザIDです。それをここに入力します。そうしないと、テーマの更新などができなくなるので、必ず設定が必要です。
共通エリア設定
ヘッダーとは、このブログだと、「早期退職を応援するサイトです」と表示されている背景が白い部分のことです。この部分の表示の設定が、ヘッダー設定の項目です。ページをスクロールしても常にヘッダーを表示したければ、固定表示するにしましょう。あとは、設定を変えながら、お好みで。
グローバルメニューとは、ヘッダー部に表示されているカテゴリーに飛べたり、プライバシーポリシーなどの固定ぺージに飛べるメニューのことです。このブログでも表示されていると思います。ここでは、表示するか、表示しないかだけを設定します。何を設定するかは、この共通エリア設定と同じレベルに、「メニュー」という項目があるので、そこで設定します。詳細はまたそこで解説します。
サブメニューとはヘッダーから飛べる目立つリンクです。このブログでは設定されていません。注目ボタン、ボタンのリンク先に何かを設定すると、目立つようにボタンで表示されます。
サーチパネルは、当ブログでは、ヘッダー部の左上にある虫眼鏡の検索アイコンです。必要なら表示させるだけです。
メニューパネルは、表示させるにすると、右上にメニューのアイコンが表示されます。当ブログでは使用していません。何を表示させるかは、ウィジェットのメニューパネルで設定することが可能です。
グローバルメニューの下に、検索する窓を表示するかを設定します。当ブログでは非表示として使っていません。
ヘッダーお知らせは、設定した文章を、左から右にスクロールしながら表示してくれます。何か緊急メッセージなどを表示させたい場合などには使用するのがよいでしょう。当ブログでは使用していません。
フッターCTAの設定です。デフォルトでTHORのCTAが設定されているので、わかりやすいかと思います。CTAとはCall to Actionの略で、読者様が記事を読み終わったあとに取る行動を促すための(より関連する記事を読んで頂けるなど)リンクや情報をここに表示させるものです。見出し、文章、アイキャッチ画像、リンクのボタン、urlなどを設定できます。当ブログでは今の時点では使用していません。設定したいと思っています。
TOPページ設定
メインビジュアルは、このページですと、大きな写真(道が続く写真)の上に早期退職:3人家族の退職金節約生活というタイトルが表示されている部分です。ブログの顔と言ってもよいでしょう。
これを表示するか、どのようなサイズで表示するかどを「メインビジュアル設定」で設定します。
ここに、静止画の写真を表示するだけでなく、youtubeの動画やスライドショーに設定することも可能です。当ブログでは、静止画を設定しています。
静止画を表示する場合の画像を指定します。また、静止画の上に表示させるブログタイトル、サブタイトルを設定します。当ブログでは、白い文字で表示されています。以降、動画の場合、スライドショーの場合、何を表示するかを指定できるようになっています。
あまり重いものを表示すると、ページ表示が遅くなるので、いろいろ試してみた方がよいでしょう。
このブログだと、上記の大きな写真のすぐ下に、早期退職に必要な準備・・・なんちゃらの解説文のようなものが、黒背景で白文字で表示されていると思いますが、それです。キャッチコピーという言い方をするようですが、何をどう表示するかをここで設定可能です。
このブログですと、上記のキャッチコピーの表示のすぐ下に、スクロールしながらいくつかの記事がブログカードで表示されて動いていると思います。これがカルーセルスライダーです。これを表示するか、表示する場合何を表示するかをここで設定可能です。当ブログでは、指定した投稿を表示に設定し、表示したい記事のID(記事一覧リストから入手)を、その下に入力しています。表示件数なども設定可能です。
当ブログでは表示していませんが、場所的には、上記のカルーセルスライダーのすぐ下あたりに、特に注目してほしい記事を3つだけ、表示させることができます。同じように、表示させたい記事を記事 IDで入力します。当ブログでは、その機能はカルーセルスライダーでやっているので、ピックアップ3記事は使用するのを止めました。トップ画面がちょっとごちゃごちゃすると感じる方もいると思います。
当ブログでは、トップページの下の方に、RANKINGと表示されていると思います。設定方法は簡単です。単純に指定した記事をランキングとして表示させることも可能です。
当ブログでは、上記の記事ランキングのすぐ下に、カテゴリーごとの最新記事を表示させています。その設定です。
アーカイブページ設定
アーカイブページとは、トップページの中央に、最新の記事一覧を新着順や人気順などで表示させる部分です。レイアウト設定では、この部分にサイドバーを表示させるか(2カラム)、させないか(1カラム)を指定します。表示させる場合には、右側か、左かなど。当ブログでは、右にサイドバーを表示させています。メインカラムの横幅は100% で問題ないでしょう。お好みで。
コントローラとは、当ブログでは、新着順、人気順、お勧めカテゴリーとかどういう順番で表示させるかを選択できる部分のことです。これを表示するかどうかを設定します。ここで注意したいのは、レイアウト切り替えボタンの設定です。これは、記事一覧(アーカイブ)を、カードのような真四角の形で表示するか、大きめのワイド型で表示するか、ノーマルで表示するか(当ブログはノーマル)を切り替え可能なボタンを表示するかどうかを設定します。これを表示するにすると、あとで、adsenseのインフィード広告の設定をメニューからできなくなってしまいます。また、インフィード広告を表示状態で、この表示切替をされると形がくずれてしまうので、インフィード広告を設定予定の方は、レイアウト切り替えボタンは非表示に設定してください。
投稿ページ設定
いわゆる、記事を表示するのが、投稿ページだ。レイアウト設定では、横にサイドバーを表示するかどうかなどを設定する。
本ブログのページタイトル設定は、バイラル風のブラックメッシュだ。ページタイトルデザインの変更でもっとシンプルな記事のタイトル表示にすることも可能である。この辺は好みなので、設定画面の右側に見えるサンプル画像を見ながら判断すればよいだろう。
これを表示するに設定すると、勝手にヘッダ部を集めて、目次を作成してくれる。何段のヘッダ部まで目次化するか、最初は目次を折りたたんで見えないようにしておくかなどを設定可能である。本ブログでは、目次は最初から開いておく設定だ。
記事の最上部に表示されている、各種SNSへのシェアボタンだ。表示したい好きなボタンを選べばよい。上部、下部にそれぞれ表示するかが選べる。当ブログでは、上部も下部も全部のボタンを表示する設定だ。なんか賑やかでよい。
記事下に表示されるツイッターのフォローボタンを表示するかしないかの設定です。当ブログでは表示させています。どのように表示されるかは、この記事の下の方で確認くださいませ。
これは前述の、フッタートップエリアのCTA設定とは別のCTAを表示するかどうかの設定です。当ブログでは、表示していません。ここで表示する設定にするには、まず、WordPressダッシュボードのメニューまで戻り、そこのCTA管理をクリックします。ここで新規にCTAページを作成します。記事を書くように、同じエディタで作成します。作成したら、CTA管理一覧でIDを確認します。その後、この設定にまた戻り、表示したいCTAのIDを設定します。
本ブログでは使用していません。使いにくいからです。本ブログでは、サイドメニューの中で、自分で自己紹介の文章と写真を設定しています。
本ブログでは、それぞれ表示する設定にしています。当該記事に関連する記事や、同じカテゴリに属する最新記事などを合わせて読んで頂けるための情報として表示するようにしています。
さて、ここまでで、基本的なブログの形を作るための設定はできたと思います。
一旦ここまでにします。
残りのメニュー設定については、次の記事で解説を続けますので、少しお待ちくださいませ。
(追記)下記より、次の記事に行けます。メニュー設定の続きになります。
前回の記事で、WordPressの有料テーマである、THE THOR (トール)について、そのメリット・デメリットなどをご紹介した。下の記事だ。 [sitecard subtitle=関連記事 url=ht[…]