THE THOR(ザ・トール)設定方法のすべて その10「SNS/AMP/PWA設定」
katsuです。
今回はWordPressのテーマTHE THOR(ザ・トール)の「SNS設定」「AMP設定」「PWA設定」の3つの設定方法をお伝えします。といっても、ここまでくると基本設定はほぼ終了しています。また、AMPとPWA設定については別記事でも説明していますので、ここでは設定内容だけまとめておきたいと思います。
もうすぐ外観設定も終わりです!もうひといき。
THE THOR(ザ・トール)「SNS設定」
僕の場合、SNSはTwitterを使っています。理由は少しでも多くの方にこのブログを知って頂きたい。ただそれだけです。このブログのために、Twitterの利用を開始しました。
こちらの設定は、一見難しそうに見えますが結構簡単です。ぜひ設定しましょう。(僕もこの記事を書きながら設定しました。)
OGP設定
画像の設定
まずOGPってなに??ってアタマにハテナがとびました。OGPとは、「Open Graph Protocol」の略だそうです。これでもよくわかりませんね。要はFacebookやTwitterなどのSNSで利用しているサイトとの共有情報をここで設定できる、ということです!!
まずは画像の設定です。下記の画像をご覧ください。こちらが僕のツイッターで一番上に表示されているブログトップサイトの紹介ページです。
固定ページといって常に一番上に表示されるツイートです。下の部分にカードのような部分がありますね。サイトのアドレスを書くと自動的にこのようなツイッターカードが表示されるのですが、なぜ画像が表示されず「No Image」となっているのかが気になっていました。
この設定項目で画像を登録することで、サイトのトップページを投稿したときに、その画像を表示することができます。(投稿した後は更新までしばらく時間がかかるようです。)
FacebookのAPPID
Facebookは使用していないので「空欄」設定としています。
FacebookのユーザーID
APPIDと同じく、「空欄」設定です。Facebookを利用している方は登録しましょう。
Twitter Cardの種類を選択
次にツイッターカードの種類の設定です。選択できるのは2種類だけ。サマリーカード(デフォルト)とラージイメージカードです。最初は自動的にデフォルトに設定されていますが、ツイッターで少しでも目立たせたいと思い、このたび「ラージイメージカード」に変更しました。
ラージイメージに変更すると、先ほど紹介した画像のツイッターカードが以下のような表示になります。
画像が大きく表示されることで、とても目立つページになります。少し目立ちすぎな気もしますが、固定ページとして登録するには良いと思います。
※この記事を執筆した段階では固定ページの設定が変更されていませんでしたので、通常のツイート画像を参考に貼っています。
Follow設定
Follow設定では、「Facebook」「Instagram」「Twitter」「Google+」「YouTube」「LinkedIn」「Pinterest」「RSS」それぞれのフォローボタンの表示有無を選択することができます。僕の場合は、TwitterとRSSを「Headerでフォローアイコンを表示する」としています。Footerでのアイコン表示は全く行っていません。
いずれかの設定でフッターへのアイコン表示を行うと、サイト一番下のコピーライト表示のすぐ上にフォローボタンを表示することができます。僕の場合は画面にいろいろ表示するのを避けるため、フッターへの表示をやめました。チェックをひとつも入れなければ、このフォローアイコンバーは表示されません。
ヘッダーにアイコンを表示する設定とした場合、表示場所はヘッダーバー(グローバルメニューの右)とメニュー内の2通りの表示場所があります。「共通エリア設定」→「サブメニュー設定」をご覧ください。
THE THOR(ザ・トール)「AMP設定」
AMP設定については、以前に以下の記事で詳しくお伝えしています。今回の記事では設定内容を一通り記載しておくだけにとどめます。
過去の記事はこちら。
【THE THOR ザ・トール】WordpressでAMPとPWA機能を使うか否かkatsuです。ようやく・・・新しく購入したWordpressのテーマTHE THOR(ザ・トール)の設定がほぼ終了しました。結局、最後まで設定で[…]
AMP機能設定
AMP機能設定
AMPページを表示するか選択:「非表示(デフォルト)」
AMPページで検索ボックスを表示するか:「表示」
AMPページで通常ページへのボタンを表示するか:「表示」
AMPページは無効にしていますので、実質下の2項目の設定は意味がありません。
AMPロゴの設定
ロゴ画像の設定
60✕600px以下でサイトのロゴを登録することができます。僕の場合はサイトのヘッダーに表示されている「KATSU NOTE」ロゴを登録しました。(今はAMP使っていないので意味ありませんが・・・)
AMPページ用広告設定
AMP広告の設定
Adsense等の広告タグを入力:「空欄」
通常投稿ページの広告をここで記載するAMP広告に切り替える、と書かれています。AMPでサイトが表示されると、広告はここで登録したものに限定されるということでしょうか・・・。僕がAMPをやめたひとつの理由でもあります。
THE THOR(ザ・トール)「PWA設定」
PWA設定についても、先ほどのAMP設定と同じく「WordpressでAMPとPWA機能を使うか否か」記事を参照ください。(AMPとPWAをまとめて執筆しています)
それでは設定を記載しておきます。
PWA機能設定
PWA機能設定
PWA機能を有効化するか選択:「有効」
ホーム画面のアイコン下テキストを入力:「活ノート!」
PWA機能は現在使用中です。スマホ内でアプリアイコンを作成することができます。アプリの名称をここで設定することができます。
アイコンの設定
アイコンの設定
PWA機能を使ってスマホアプリ化したとき、ホーム画面に表示されるアイコンをここで設定します。理由はよくわかりませんが3種類のサイズの画像を登録する必要があります。僕の場合は、サイトロゴをサイズを変えて登録しました。
参考に・・・画像のサイズの変更には「Photo Scape」という無料のソフトを愛用しています。
このあたりの設定は、できれば早いうちに自分の方針を決めて設定しておきたいところですね。特にAMP設定については、使うか使わないかでサイトの見栄えやページの管理手間に大きな差がでてきます。
次回は「その他」設定6項目についてお伝えします。いよいよTHE THORの設定説明も次回で最後です。