ＤＫです。
今回はWordPressテーマ「THE THOR」の着せ替え後にするべき初期設定の仕方を解説していきます。
「THE THOR」のインストール方法については下記の記事①と②を参照してください。
ＤＫです。今回はWordPressテーマ「THE THOR」の購入方法と初期登録の仕方を解説していきます。 「THE THOR」の第一印象は「うわー、綺麗なテーマだなー」です。初心者でもこれを作れるならいい[…]
ＤＫです！ 今回は「THE THOR」の導入方法と注意点、初めにやるべき設定等をまとめていきます。今から「THE THOR」を扱う方は是非とも参考にしてください。 👇も[…]
まずはこのページに記載してある事を実行した上で、各種のパーツを調整しカスタマイズしていきましょう。
「THE THOR」のカスタマイズ記事は追って公開いたします。
「THE THOR」の設定は画面左のダッシュボードメニューのカスタマイザーに集約されています。
そしてそのメニューの中の上から１３項目に[THE]の文字があると思います。その文字がある項目が「THE THOR」独自の設定項目です。
残りの６項目はWordPressにデフォルトで表示される設定項目です。
ココでの説明はこの１３項目[THE]の付いたモノから最初に設定しておきたい主要な部分を10個紹介、解説していきます。
では、早速設定していきましょう！
THE THORの初期設定
ココでは「THE THOR」を購入し、インストールをして、デザインを着せ替えた後に行うべき初期の設定「初期設定」について解説していきます。
まずはこれを設定しておけば大丈夫！というモノを超初心者のＤＫが初心者目線で解説します。
THE THORは設定のほとんどをダッシュボードのカスタマイザーから行います。
カスタマイザーから「外観」⇒「カスタマイズ」の中のから操作・変更します。
初期設定① フッターエリアの設定
まずは「フッターエリア」の邪魔者を掃討します。
因みに「フッターエリア」とはページの最下部の事です。
初期のままだと、コピーライトの下に販売会社のFITとWordPressへのリンクが貼られています。
この部分は全てのページからの発リンクとなり、SEO対策の面から芳しくない為「非表示」にします。
この部分を非表示にする為には
「共通エリア設定[THE]」⇒「フッターエリア設定」⇒「コピーライトの設定」の順でポチってください。
「共通エリア設定[THE]」
⇩
「フッターエリア設定」
⇩
「コピーライトの設定」
最後にこのコピーライトの設定の下部から「コピーライト下のリンク」を表示するかどうかの選択で「非表示」を選択して、カスタマイザーの上部にある「公開」ボタンをポチっとします。
すると👇こうなります。
これでフッターエリアの邪魔者は掃討できました。
初期設定② サイトマップの表示設定
「THE THOR」ではプラグインを入れなくても、デフォルトで「サイトマップ」が作成できる機能があります。
ココで言う「サイトマップ」はGoogleへ通知する方ではなく、自身のサイトを訪れてくれた人向けの「サイトマップ」です。
サイトマップの作成は二段階の手順を踏みます。
まずは第一段階として
「基本設定[THE]」⇒「自動生成サイトマップ設定」をポチっと。
すると次のメニュー⇩が出てきます。
①と③がデフォルトでは「非表示」になっていますので、②と④のように「表示」に切り替えます。
ココでは除外ページの設定や出力するカテゴリーの階層指定等が出来ます。
しかし、初めのうちはカテゴリーも記事数も少ない為、デフォルトのままでも問題ないでしょう。
最後に⑤の「公開」ボタンをポチっとすれば第一段階完了です。
次に固定ページでサイトマップを作成していきます。
ダッシュボードの固定ページから新規作成をします。
私はタイトルを「サイトマップ」にして、パーマリンクを「sitemap」にしています。
画面右下のページ属性内のテンプレートの「サイトマップTPL」を選択します。
記事の内容は空白でＯＫです。
最後に「公開」ボタンをポチっとすれば第二段階も終わりです。
これでサイトマップの設定は完了です。
初期設定③ お問い合わせページの表示設定
「THE THOR」ではプラグインを入れなくても、デフォルトでお問い合わせページが作成できる機能があります。
お問い合わせページはもし気づかないうちに画像や音声、動画などをインターネット上から取り込み、自身のサイトに設置していた際、図らずも著作権等に触れている事があります。
そんな時にこのお問い合わせページが無く、連絡が付かない場合、あなたならどうしますか？
手間暇もかけたくないし・・・・となると、いきなり訴えられる可能性も出てきてしまします。
そうした理由から、必ず設置するようにしてください。
お問い合わせページの作成も二段階の手順を踏みます。
まずは第一段階として
「基本設定[THE]」⇒「お問い合わせページ設定」をポチっと。
「基本設定」
⇩
「お問い合わせページ設定」
⇩
自由入力項目のタイトル名⇒サンクス画面のメッセージ文⇒自動返信メールの冒頭文を入力し、公開ボタンをポチっと。
これが第一段階。
次に固定ページでお問い合わせページを作成していきます。
ダッシュボードの固定ページから新規作成をします。
私はタイトルを「お問い合わせ」にして、パーマリンクを「otoiawase」にしています。
画面右下のページ属性内のテンプレートの「お問い合わせTPL」を選択します。
記事の内容は空白でＯＫです。
最後に「公開」ボタンをポチっとすれば第二段階も終わりです。
これでお問い合わせページの設定は完了です。
初期設定④ 記事の分析設定
「THE THOR」には、見える化システムという機能が標準搭載されています。
このシステムはWordPressの投稿一覧で記事毎に下記の９項目の情報が見てわかるシステムの事です。
- 総合閲覧数を表示
- 平均閲覧数を表示
- タイトル文字数を表示
- 本文文字数を表示
- タイトル内キーワード数を表示
- 本文内キーワード数を表示
- 内部リンク数を表示
- 外部発リンク数を表示
- メモを表示
設定でこの９項目を投稿一覧ページに表示させることが出来る機能です。
この投稿一覧ページに表示させる設定はまたカスタマイザーから行います。
「基本設定[THE]」⇒「記事分析設定」をポチっとします。
「基本設定」
⇩
「記事分析設定」
するとこのようなメニューが出てきますので、表示させたい項目にチェックを入れて、公開ボタンをポチっと。
これで記事分析設定は完了です。
設定が完了したら「公開」ボタンをポチっと。
初期設定⑤ 基本スタイルの設定
基本スタイルの設定はまたカスタマイザーを使います。
「基本設定[THE]」⇒「基本スタイル設定」をポチっと。
「基本スタイル設定」
⇩
①テーマカラーを指定する項目
②投稿内テキストリンク色を指定する項目
③全体の背景色を指定する項目
④全体の背景画像を登録する項目
⑤スマホ全体のフォントサイズを選択する項目
⑥PC全体のフォントサイズを選択する項目
⑦全体のフォントファミリーを選択する項目
基本スタイルの設定は全部で７つの項目があります。
- テーマカラーを指定する項目
- 投稿内テキストリンク色を指定する項目
- 全体の背景色を指定する項目
- 全体の背景画像を登録する項目
- スマホ全体のフォントサイズを選択する項目
- PC全体のフォントサイズを選択する項目
- 全体のフォントファミリーを選択する項目
①テーマカラーを指定する項目
「テーマカラーの設定」で行える変更箇所は
- トップページのランキング背景色
- ヘッダーエリア背景色（ヘッダーのテキストカラーの選択を白文字にした場合）
- プロフィールウィジェットのフォローボタン背景色
- 注目キーワードタイトルの背景色
- カテゴリーウィジェットのカテゴリ名の背景色
- ウィジェットのタイトル背景色
- フッターSNSエリアの背景色
- フッターのページ上部へ戻るボタンの色
- スマホのフッターのTOPへ戻るボタンの色
- キーワード検索時の枠の色
- 記事サムネイルのカテゴリ表記の色
- 記事一覧画面の「NEW」及び「PICK UP」のリボンの色
- サーチパネル、メニューパネル内の「CLOSE」ボタンの色
- コメントの送信ボタンの色
- 記事下のNext/Prevのボタンの色
- リストのアイコンの色
など多数に上ります。
ここでは色を設定するだけです。
私はなるべく統一するようにしています。このサイトのテーマカラーは「オレンジ」です。
②投稿内テキストリンク色を指定する項目
投稿内テキストリンクとは投稿記事の中のテキストリンクの文字の色を設定する項目です。
テキストリンクとは文字がリンクになっているモノの事。
例えば
など。
③全体の背景色を指定する項目
サイト全体の背景色を設定する項目。ココで選んだ色がそのまま背景の色になる。
カスタマイザーで見ながら編集すると視覚的に確認出来て、容易に行える。
因みに④の項目とは相容れず、同時に設定した場合は④の画像の方が優先される。
④全体の背景画像を登録する項目
サイト全体の背景画像を登録、設定する項目。ココで選んだ画像がそのまま背景画像になる。
これもカスタマイザーで見ながら編集すると視覚的に確認出来て、容易に行える。
因みに③の項目とは相容れず、同時に設定した場合はこちらが優先される。
⑤スマホ全体のフォントサイズを選択する項目
スマホで表示されるフォントのサイズを調整する項目。
デフォルトは小。
⑥PC全体のフォントサイズを選択する項目
PCで表示されるフォントのサイズを調整する項目。
デフォルトは小。
⑦全体のフォントファミリーを選択する項目
サイト全体のフォントの種類を選択する項目。
- 游ゴシック体
- ヒラギノ角ゴシック
- メイリオ
- Noto Sans JP(WEBフォント)
の４種類から選べる。デフォルトは游ゴシック体。
全ての設定が終わったら、「公開」ボタンをポチっとお忘れなきように！
初期設定⑥ ＳＥＯ設定
またまたカスタマイザーを使います。
「外観」⇒「カスタマイズ」⇒「SEO設定[THE]」をポチっと。
「SEO設定[THE]」をポチっと。
⇓
「THE THOR」はＳＥＯ対策として
- TOPページSEO設定
- ＣＳＳ非同期読み込み設定
- ｉｍｇ非同期読み込み設定
- htaccess設定
- ＨＴＭＬ圧縮設定
の４つを設定できるようになっています。
この４つの設定はあなたのサイトページを表示する速度に影響します。
ここの項目は後日詳しく調べたいと思いますが、今回はざっと説明を。
- TOPページSEO設定
- ホームページトップの設定を行えます。
- まだよくわからず触っていない。
- ホームページトップの設定を行えます。
- ＣＳＳ非同期読み込み設定
- サイトのレイアウトやカラーの読み込みを遅らせて表示速度をあげる。
- 最初の状態から触ってない。
- サイトのレイアウトやカラーの読み込みを遅らせて表示速度をあげる。
- ｉｍｇ非同期読み込み設定
- 画像の読み込みを遅らせて表示速度をあげる。
- これにはチェックを入れました！
- 画像の読み込みを遅らせて表示速度をあげる。
- htaccess設定
- ４０４に関する設定。エラーページの事。
- ブラウザキャッシュを有効、Gzip圧縮を有効共にチェックを入れました！
- ４０４に関する設定。エラーページの事。
- ＨＴＭＬ圧縮設定
- ＨＴＭＬから余分なモノを削除して表示速度をあげる。
- これにはチェックを入れました！
- ＨＴＭＬから余分なモノを削除して表示速度をあげる。
「ＣＳＳ非同期読み込み設定」を行うと、サイトのレイアウトが崩れて見えることが有ります。
設定を終えたら「公開」ボタンをポチっと。
初期設定⑦ アクセス解析設定
「THE THOR」を使うと、GoogleアナリティクスとSearchConsole（サーチコンソール）とも連携が簡単に行えます。
ＩＤをコピーぺするだけで設定できてしまいます。
ＩＤの取得方法は後日記事にしますので少々お待ちください。
「基本設定[THE]」⇒「アクセス解析設定」をポチっと。
「アクセス解析設定」をポチリ！
⇩
①と②の欄にそれぞれのＩＤをペタッと貼り付けるだけです。
ね？簡単ですよね？
ペタッとした後に「公開」ボタンをポチっと、お忘れなく。
初期設定⑧ SNSのFollow設定
さて、またカスタマイザーで設定していきます。
「SNS設定[THE]」⇒「Follow設定」をポチっと！
「SNS設定[THE]」
⇩
②「Follow設定」をポチっと！
⇩
- Google+
- You Tube
- RSS
上記①～⑧のＳＮＳが利用可能です。
表示させたいSNSの記入欄に自分のSNSページURLを入力します。
SNSページURLとは、例えばFacebookならhttps://www.facebook.com/▽▽▽の▽▽▽の部分の事です。@以下のＩＤの事です。
上下のチェック欄に印を付けると上はヘッダー部分に、下はフッター部分に表示されます。
具体的な位置は
となります。
設定が終わったら「公開」ボタンをポチっとやってください。
初期設定⑨ レイアウト設定
初期設定の９番目はサイトのレイアウトの設定です。
「THE THOR」は最初にインストールしたデザインにもよりますが、サイドバーの位置を「逆側に配置したい」若しくは「消したい」「表示させたくない」等の要望に応えてくれます。
しかも簡単に！３工程で完結です。
では、その設定方法を解説します。
カスタマイザーメニューの上から４番目「アーカイブページ設定[THE]」⇒「レイアウト設定」をポチポチっと！
「アーカイブページ設定[THE]」
⇩
①「レイアウト設定」
⇩
この画面で設定していきます。
①カラムを選択
カラムは例えるなら「枠」ですかね？メインのみの場所が１枠目、横のメニューの場所が２枠目。
「１カラムは１枠のみ表示、２カラムは２枠とも表示」
この項目は「１カラム」と「２カラム」から選べます。
後でも替えられますので気楽に選んでもいいでしょう。
②２カラム時のサイドバーの位置を選択
①で２カラムを選択した場合のメニュー枠の配置選択です。
右配置（デフォルト）と左配置から選択します。
どちらがどうという事は有りません。
このサイト「ＤＫの部屋」はデフォルトの「右」で使用しています。
③１カラム時のメインカラムの横幅を選択
①で１カラムを選択した場合のメイン枠の幅の調整です。
下記５種類から選択します。
- 100％（デフォルト）
- 1,000px
- 900px
- 800px
- 700px
以上、５種類の違いです。
お好みで設定してもいいと思います。
このサイト「ＤＫの部屋」はデフォルトの「100％」で使用しています。
まとめ
以上が最初に設定しておきたい優先度の高い10の項目になります。
何とか設定できましたか？
「THE THOR」は勿論、その他のWordPressテーマは聞いたり見たりしていても中々覚えられるものではありません。
ひたすらに触っていじって覚えるしかありません。そして、同じことをするにもテーマ毎にやる事や内容が変わってきます。
要は使いながら覚えるしかない！！
という事ですね。
変更したい内容を探して、それを設定し公開して、確認する。地味な作業になりますが、根気強く設定していきましょう。
因みに今でも私はひたすら調べて、設定してやっぱり違っていて戻して、そしてまた別の所をいじってみて・・・・・の繰り返しです。
そしてその調べたことを、他の皆さんのためにまとめて記事にしてみたり。
「THE THOR」はとても素晴らしいテーマになります。根気よく向き合えば必ず要望に応えてくれると私は思います。
是非とも使いこなして自身のサイトやブログをより良いものにしていきましょう。
今回紹介した内容以外にもまだまだたくさんの設定項目がありますので順次解説していきますのでよろしくお願いします。
ココまで読んでいただきありがとうございます、お疲れさまでした。
では、また。