前回の記事で、WordPressの有料テーマである、THE THOR (トール)について、そのメリット・デメリットなどをご紹介した。下の記事だ。
当ブログも、このTHORを使って作成されているのである。今回は、THORを使用する場合に必要なカスタマイズ(THORでの設定)について、当ブログでの設定の仕方をご紹介しながら、整理していくのである。
これから、THORを使おうかとご検討されている方への参考情報となれば幸いである。
本記事は(2)です。前半部分の(1)は、以下からご参照くださいませ。
この記事でわかること
では、早速、当ブログで設定している内容を見て行こう。ただし、ここですべての内容を解説ることはできないので、解説が必要と思われる項目をピックアップしている。容易に設定可能な項目については、触れていないので、ご了承頂きたい。
THE THORのカスタマイズメニューとは
THOR(トール)をインストールして有効化すると、WordPressのダッシュボードの左メニューから、
外観→カスタマイズ とクリックすると、以下のTHORのメニューが表示される。
これに沿って、当ブログの設定内容を引用しながら、設定方法について解説していこう。
固定ページ設定
固定ページ設定は、投稿ページ設定とほぼ同じ内容なので省略する。投稿する記事のページではなく、固定ページとして作成ページのレイアウトや、目次を表示するかどうか、記事下CTAを表示するかどうかの設定である。
自分の固定ページの内容によって、決定するだけだ。
カスタム投稿タイプ設定
カスタム投稿タイプとは、通常の記事ではなく、それ以外の例えば臨時のお知らせや、特別なニュースなどの投稿の事をいいます。通常の記事と同じようにお知らせやニュースなどの投稿を作成し、その投稿の一覧が、TOPページのアーカイブ(通常の投稿記事の一覧が表示される部分)の下のところに、別枠で表示される機能です。
ちょっと実際にやってみましょう。まず設定からです。
利用するかしないの設定は、とりあえず「利用する」にします。
カスタム投稿タイプ名は、ダッシュボードのメニューで表示される名前なので、デフォルトの「お知らせ」のままでよいです。
カテゴリー機能は、普通の記事のようなカテゴリー分けをするかどうかですが、そこまでは不要なので、利用しないにしておきましょう。
タグは利用するにしましょう。
このカスタム投稿の一覧を表示する際のデザインなので、これは好みで設定しましょう。今回は、
ボーダーフレーム、ボーダースタイルに設定しておきます。
TOPページの記事アーカイブの下に、カスタム投稿の一覧を表示するかどうかを設定します。「表示」に設定します。
セクションの見出しは、この一覧の先頭に表示される見出しです。とりあえずデフォルトの「NEWS」にしておきましょう。
ここまで設定したら、保存して、カスタム投稿を作成してみましょう。
WordPressのダッシュボードのメニューに、先ほど設定した「カスタム投稿タイプ名」のメニューが見えるはずです。「お知らせ」と設定しましたね。
新規追加をクリックしましょう。
普段の記事投稿と変わらない編集画面が表示されたと思います。
ここに、何か特別にお知らせしたい投稿を入力しましょう。
「公開」をクリックすると、この記事が公開状態になります。お知らせ一覧を見ると、そこにも作成した投稿が登録されていると思います。
で、実際のブログのトップページに行くと、以下のように、
通常の記事アーカイブ(一覧)の下の部分に、NEWSの領域が表示され、そこに先ほど作成した、「兄弟サイト新規オープン」というカスタム投稿(お知らせ)が、表示されています。複数のカスタム投稿を作成すると、その一覧がここに表示されることになります。
うまく活用すれば、アクセスアップにつながるかもしれませんね。
広告設定
トップページの記事アーカイブ(記事一覧)が表示されている中に、同じようなスタイルでインフィード広告を設置する際に、ここにタグを設定します。
まずGoogle adsenseで、インフィード広告を作成し、タグを取得する必要があります。その取得したタグを現在表示しているアーカイブのレイアウトに該当する場所に入力します。
現在のアーカイブレイアウトが、ワイドなのか、カードなのか、ノーマルなのかで、設定する場所が変わってきます。このスタイルは、アーカイブページ設定のコントローラ設定、レイアウト切り替えボタンの設定の、初期checkedを選択のところで設定します。また、合わせて、その上のレイアウト切り替えボタンを表示するかの選択は、「非表示」になっていることを確認してください。表示になっていると、インフィード広告が表示されません。
本ブログの表示はノーマルですので、ノーマルレイアウト用(PC版)のところに、adsenseで作成したインフィード広告のタグをコピーして入力してあります。
ここでは、同様に、記事の中のどこかに広告を表示させたい場合に、その表示させたい広告のタグをここに入力しておきます。記事編集時に、広告を入れたい場所に、「adcode」と入力すると、そこにそのタグに従った広告が挿入されます。
自分のこだわりの場所に広告を入れたい方には便利な機能ですね。
また、記事の最後に、四角い広告を2つ横並びで入れたい方は、左、右、それぞれの広告タグをここに入力しておけば、自動的に記事の下に広告が設置されます。
どのような広告をどこに入れるかは、いろいろ後にノウハウを学んでから決定すればよいでしょう。
現時点ではTHORのメニューにはこういう便利な機能があるよということを覚えておきましょう。
SEO設定
だんだん、込み入った設定になってきました。THORのような有料テーマは、プラグインなどを使用することなく、メニューからSEO対策用の設定ができるようになっているのが、利点です。この設定をきちんとやらないと意味がありません。設定をちゃんとすれば、検索時に上位に表示されやすくなる、それがSEO設定です。
titleタグの設定は、SEO上、非常に重要です。詳細にはSEO対策に特化した情報を参照頂くのが良いと思います。自身のブログのキーワードがちゃんと含まれている、ブログの内容がよくわかるなど、様々な条件があります。この先、できるだけ変更しないで済むように、しっかり設定しましょう。
meta descriptionは、検索結果の表示の際に、ページの説明文として使用されます。Google検索では、SEO上はあまり意味を持ちません。
いずれにしても、ここはブログのトップページに対するものです。各記事それぞれのtitleタグや、meta descriptionは、各記事の編集時に設定するので、こことはまた別になります。
ページを早く常時させるための設定です。まずはデフォルトで、子テーマcss, アイコンフォント、Googleフォント(Lato), (Fjalla)の4つにチェックしておけばよいでしょう。
これもページ表示を早くする設定です。非同期読み込みにするにチェックを入れておくのがよいでしょう。
これもページ表示を早くする設定です。表示するページをwordpress内でキャッシュしているので(前回表示したページの内容をそのまま手元に持って置き、そのページへのアクセスがあった場合に、1からページを作るのではなく、その手元に保存しておいたキャッシュを表示させるので、速く表示できる)。
Gzip圧縮も同様ですので、両方ともチェックを入れておきましょう。
ただし、ブラウザキャッシュを有効にすると、記事を変更した場合に、その変更がすぐにブラウザ上に反映されないことがあるので、その場合には、一旦、ブラウザを全閉じしてから、再度、そのページにアクセスすれば最新のページが表示されます。まあ、これはブログを作る人だけの手間ですが。
これは、記事が書かれているHTMLコードの中で、無駄な改行などがあったら、そういうのは圧縮(削除)して表示させる機能です。
無駄なコードを送らないので、表示は速くなります。
しかし、意図的に改行を入れる場合などは、勝手に削除されるため、意図しない形で表示される場合もあります。書いた通りに表示させたい場合には、この設定は有効にしない方が良いでしょう。
SNS設定
OGPとは、Open Graph Protocolの略で、要は、Facebook, twitterに共有されたときに、このサイトの写真や内容がちゃんと表示してもらえるように、情報を設定することです。SNSで宣伝したり、共有したり、紹介されたり、そういう場合に大事な設定になるので、きっちり設定しておきましょう。
画像は、ブログの顔になりますので、ちゃんと用意しましょう。サイズは1200×630ピクセルです。サイズが異なると、うまくSNSで表示してくれない場合があるので、注意しましょう。
twitter cardは、twitterから共有される場合に、カードスタイルで表示されますが、小さいSummary カードか、写真が大きく表示されるwith large imageカード、どちらにするか選びましょう。
うまく表示できるかどうか(twitterカードで)、以下のサイトで確認できます。
自分のブログのurlを入力して、カードを表示させてみましょう。
うまく表示されればOKです。
ここで表示されるブログタイトルや、説明文は、以前のTOPページSEO設定で設定したtitle, meta descriptionの内容になります。
各種SNSのフォローを設定します。Header、Footerでフォローアイコンを表示するにチェックを入れると、ページの上部、下部に、各種SNSで本サイトをフォローするボタンが並んで表示されます。
写真赤枠内の部分のことです。
ブログを気に入っていただけたら、合わせてツイッターのアカウントをフォローして頂けたり、RSSで更新をチェックしていただけるように、しっかり設定しましょう。
AMP設定
AMP設定は、今のところ本サイトでは使用していません。
THORの機能ではなく、これまで使っていたAMPというプラグインをインストールして、AMP対応しています。
なので、残念ながら実践に基づく明確な設定方法を記載できません。申し訳ありません。
ちなみに、上記AMPプラグインの使用でまったく問題なくAMP対応できています。
AMPは、モバイル端末でサイトを高速にするための技術です。AMPに対応していると、googleの方でキャッシュしてくれるので、高速に表示されます。
ですので、収益をめざすサイトは、ぜひともAMP対応は完了させておくべきです。AMP対応の作業は、それだけで1記事書けてしまうので、本記事とは別に書きたいと思います。
基本的には、ここの設定でAMP機能を有効化(AMPページを表示するに設定)すれば、AMP化できるはずです。(繰り返しますが、自分はAMPプラグインを使用している)。
AMP化がちゃんとできているかどうかは、下記のサイトで確認できます。
ここに調べたいページの(例えばどこかの記事のページなど)urlの最後に/amp/を加えたアドレスを入力して「URLをテスト」をクリックしてください。
「有効なAMPページです」と表示されればOKです。
THORの設定完了までもう一息です。今回はここまでにしておきます。
残りのメニュー設定については、次の記事で解説を続けますので、少しお待ちくださいませ。