設定記録 – パンくずリストの設置

本ブログのテーマをWordPress 標準テーマ Twenty Fifteen にして、ページを表示した時、ページの上部にパンくずリストがないことに気づきました。 Twenty Fifteenの場合、レイアウトが完全に2カラムに分かれていて、メインカラムの上部が何もなくて、記事のタイトル、本文が続くデザインになっています。

デフォルトのTwenty Fifteenでの表示は、とてもシンプルです。記事の上部のスペースが空いていて、少し味気ない感じがしました。パンくずリストくらいは、あった方が良いなと思いました。改めて考えてみると、日本のブログでは、パンくずリストはかなり普及していて、パンくずリストが表示されないブログの方が珍しいのではないかと思います。

記事ページのタイトルの上にパンくずリスト (Bread Crumbs)を加えようと思い、設置方法をネットで検索したところ(私は普段、英語のページを検索します)、検索のトップはWordPressのSEOプラグインを提供するYoastのパンくずリストの設定方法についてページでした。YoastのSEOプラグインにパンくずリストの表示オプションが含まれていて、設定方法が紹介されていました。

このブログはYoastを使用しているので、渡りに船と思い、早速設定してみました。簡単に設置できたのですが、見た目がイマイチでした。ブロギンライフで使用しているDigiPressさんのテーマやSimplicityとCocoonなどと比べるとどうしても見劣りしてしまいます。(Cocoonの場合は、パンくずリストはページ下に表示されます。)

WordPressのパンくずリスト設定で検索した結果の2番めのページは、wpbeginnerの記事でした。wpbeginnerの記事では、Breadcrumb NavXTと言うプラグインを使った設定方法(とYoastのプラグインを使った方法)が紹介されていました。

WordPress プラグインページのBreadcrumb NavXTを見てみると、利用者も多く更新も比較的最近行われていることが分かりました。評価も高かったので、早速、インストールしてみました。プラグインを有効にしても、AMPのバリデーションでエラーにはなりませんでした。パンくずリストも表示されました。

しかし、Breadcrumb NavXTのパンくずリストの表示もYoastと同様にイマイチ感が強い表示でした。特に気になったのが、「ブログタイトル カテゴリー 記事名」と言う表示形式となることです。記事タイトルの上にタイトルが重複して表示されるのは違和感があります。ブログタイトル(サイト名)が表示されるのもおかしな感じです。

プラグインデフォルトのパンくずリスト表示

記事タイトルを非表示にする方法を調べてみると、Breadcrumb NavXTの製作者がエクステンション(拡張機能)のコードをGitHubに公開していることが分かりました。このエクステンションを使用すると、記事(投稿)ページでは、記事タイトルは非表示になります。また、デフォルトではホームページにサイトタイトルがパンくずリストとして表示されていたのですが、非表示になりました。

Twenty Fifteenの場合、ホームページを表示すると直近に投稿した複数の記事がそのまま表示されます。(ホームで表示する記事数を減らしたり、全文ではなく部分表示にして「もっと読む」などのリンクからその記事の全文を表示する設定にすることもできます。)現在のホームページには、パンくずリストは表示されない設定になっています。

サイトタイトルではなく、日本のサイトの一般的なパンくずリスト表示の「ホーム」にした方がスッキリすると思い表示をホームに変更しました。また、ホームとカテゴリー名の前にアイコンを追加しました。

パンくずリストの表示をシンプルにカスタマイズ

デフォルトと比べるとかなりスッキリしました。表示系は、気にしだすとキリがなくなりがちなので、まずはこの状態で良しとしようと思っています。(コンテンツの強化に優先順位を置きます。)

 

ブログ設定記録 – AMPでのGoogle カスタム検索、ソーシャルリンク、SNS共有ボタン設置

本ブログが使用しているWordPress テーマ Twenty Fifteenでは、デフォルトでサイドバーに通常のサイト内検索窓が設置されています。Google カスタム検索にするとサイトだけでなく他のサブドメインやメインドメインを含む関連サイト全体を対象にした記事検索が可能になります。

Google カスタム検索はJava スクリプトで動作するため、AMPではそのままでは利用することができません。(現状、Googleカスタム検索そのものは、ampでは動作しません。)調べたところ、amp-formを使用して対応する方法が紹介されているのをstackoverflowのQ&Aで見つけました。

設定したところ、無事に動作しました。詳しい設定方法は、以下のブロギングライフの記事をご参照下さい。

AMPページにGoogle カスタム検索を設置する方法 – ブロギングライフ

パソコンページではサイドバーに、「サイト内検索」の下にGoogle カスタム検索の入力欄が表示されています。モバイルでは、タイトル横のハンバーガーメニューアイコン(横3本線 – )の部分をタップすると、サイドバーが表示されます。

モバイルページでサイドバーを表示

検索を行うとクエリと関連性の高い記事が関連サイト内から選ばれて結果が表示されます。本ブログはまだ記事数が少ないので、通常のサイト内検索ではは実質的にほとんど意味がありませんが、関連サイトを含めて検索できるとユーザーへの利便性も高まると思います。

ソーシャルリンクの設定

Twenty Fifteenには、ソーシャルリンクと呼ぶWordPressのメニュー機能を使用して、SNSのアカウントへのリンクをアイコンで並べて表示する機能を備えています。サイドバーに表示される通常のメニュー項目の下にSNSアイコンが横に並んで表示されます。ちょっとした機能ですが、見た目も良く、まとまっていて、意外と使い勝手が良さそうな感じなので、設定してみました。

Twenty Fifteenのメニューとソーシャルリンク

Twitter, Facebook, Google+, YouTubeとPinterestのアカウントへのリンクを貼っています。ソーシャルリンクでは、WordPressもサポートしているのですが、WordPressのユーザーアカウントページを訪問するユーザーは多くないように思うので割愛しました。

FontAwesomeのアイコンフォントを実装

このブログでは装飾はこだわらずシンプルにすることを基本方針としています。しかし、それでも、メニュー項目やパンくずリストの「ホーム」の前にアイコンを加えたいと考えて、FontAwesomeのアイコンフォントを実装しました。アイコンフォントのAMPページへの実装は、カスタムフォントの設定と同様で、<head>タグ内に以下の<link>タグを使用してフォントを供給するURLをリンクするだけでできます。(アイコンフォントはカスタムフォントの一種です。)

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

AMP for WordPressのAMPテーマを使っている場合は、ブロギングライフのAMP for WordPress にFont Awesomeリンクコードを挿入する方法の記事のやり方になるのですが、ネイティブAMPの場合は通常ページの<head>タグ内に設置することで動作します。(やり方は色々あると思います。)

本ブログでは、プラグインHeader and Footerを使用して設置しています。

記事下にSNS共有ボタンを設置

記事下にはSNSの共有ボタンを設置したいと考え、いくつかプラグインを試してみました。しかし、SNS共有ボタン表示のプラグインはCSSが大きいためエラーとなって使えませんでした。プラグインは色々な表示方法に対応しているため、CSSもサイズが大きくなります。ネイティブAMPでの利用には適しません。

JetpackもSNSシェアボタン機能があるので、インストールしてみましたが、(予想通り)CSSの容量エラーが発生しました。

どうしようかと考えているうちに、AMP by Exampleにamp-social-shareの使い方が紹介されていたことを思い出しました。早速設定してみたところ、無事にSNS共有ボタンを設置することができました。AMPのコンポーネントで必要な基本機能は全て動作するので助かりました。

AMPページ記事下に表示されるSNS共有ボタン

機能的には問題なく動作しています。デザイン的にも悪くないので、そのまま使っています。

本ブログで使用しているSNS共有ボタンの設置方法については、以下の記事をご覧下さい。

AMP ページにSNS共有ボタンを簡単に設置する方法

ネイティブAMPブログ設定記録 – AdSense自動広告、GTM、OneSignal他

ブログの基本的な機能などを中心に設定を行いました。

AdSense 自動広告

当初の設置方法では、AdSenseのAMP 自動広告の設定がうまくできずにいましたが、プラグイン”Header and Footer”がエラーが発生せずに使えることができたため、無事に自動広告のコードを設置することができました。Header and Footerが使えると、設定が楽です。

現時点では、まだ、AdSense AMP 自動広告は表示されていません。投稿記事が2つしかない状態なので、これから記事を投稿していった時に自動広告が表示されるようになるか注目しています。(自動広告は設定すると必ず表示されるとは限りません。)

プラグインHeader and Footerによるコードの挿入について

現在までのAMP for WordPress v1-beta3を使用したネイティブAMPサイトでの、Header and Footerの使い方としては、通常ページのheadやbody部にAMPページ用のコードを挿入しています。AdSenseの自動広告、Google Tag Manager、OneSignalのAMP用コードを通常ページに挿入して、無事に動作しています。

Header and Footerは、AMPページへの挿入も対応しているのですが、AMP for WordPress の仕様の場合は、現時点での認識としては、通常ページにコードを挿入した方が確実に設定できるように考えています。

Google Tag Managerの設置

Google Tag Managerは、通常ページ用に比べるとAMPページで利用できるタグ挿入機能が限られています。通常ページでは、HTMLコードの挿入も対応しているので、使えると便利だと思っているのですが、残念ながら通常ページ用のGoogle Tag Managerは使えませんでした。

HTMLコードのタグ挿入ができると、構造化データの設定などもGoogle Tag Managerを使用してできるのですが、構造化データの設定をする方法を探す必要があります。

AMP用のコードを設置して、無事、アナリティクスのトラッキングができることを確認しました。ネイティブAMPの場合は、通常ページとAMPページのトラッキング調整の問題(同じプロパティを使うか別のプロパティを使うかなど)が発生しないので、解析がしやすいのが長所だと思います。

OneSignalのプッシュ通知購読ボタンの設置

ブロギングライフのサブディレクトリーに設置しているCocoonを使用したWordPressのサイトにプッシュ通知購読ボタンを設置するのは、既に作成しているブロギングライフのWebプッシュアプリを共有して使うことができたのですが、本ブログでは既存のアプリを共有して使うことはできませんでした。メインドメインに設置されているmanifestやSDK、アプリIDなどは、サブドメインからは使えないようです。

AMP for WP v1.0-beta3 を使用してネイティブAMP化したWordPressサイトでは、OneSignalのプラグインはエラーになって使用できませんでした。一般のサイトでの設置方法に基づいて、サブドメインのトップにSDKをアップロードして、専用のWebプッシュアプリを作成したところ、無事にプッシュ通知購読ボタンが表示されました。

OneSignalのドキュメントには、AMPプッシュ通知は、現時点ではiOSでは対応されておらず、Androidのみ動作すると書かれています。ネイティブAMPの場合、プッシュ通知購読は、MacのOS-XでもChromeで購読することができました。しかし、完全に動作するかはまだ不明です。Firefoxでも試してみる予定です。

Webプッシュの購読ボタン表示機能は、iOSではサポートしていないのが残念なところです。

ブログ設定変更記録 – AMP for WordPress v1.0-beta3 他

AMP for WordPress プラグインのバージョン1.0 ベータ3がリリースされたので、当ブログにインストールしました。バージョン1.0のベータは、WordPressテーマのAMP化にも対応しています。(ベータサポート)

以下、今回のプラグインのアップデートに伴って変更した内容や作業などを備忘録として記します。

テーマの変更

本ブログでは、ネイティブAMPが発表された時に、ネイティブAMPサポートテーマを使用していたのですが、今回のベータ3へのアップグレードを機にWordPress標準テーマ Twenty Fifteenに変更しました。

Twenty FifteenでもネイティブAMP対応できています!

プラグインの動作テスト

ネイティブAMPでエラーが発生せずに動作するプラグインは少ないです。今回、AMP for WordPress v1.0 ベータ3にアップデートしたので、いくつかプラグインをインストルールするなどして、てすとしてみました。

Ad Inserter

以前動作しなかったAd Inserterを今回、もう一度有効にしてみましたが、AMPのバリデーションでエラーとなりました。

Ad Inserterの制作者にネイティブAMPのサポート対応について問い合わせしてみようかと考えています。Ad Inserterの制作者の方は、本当に凄いので、良い機会なので、またメールでやりとりしてみようかと思っています。

キャッシュ系プラグイン

AMP for WordPressのプラグインは、persistent object cacheを有効にすると最適とのことなので、対応しているプラグインをいくつかテストしてみました。

W3 Total Cacheはそのまま有効にすると、投稿記事の一部でAMPのエラーが発生しました。細かくチェックすれば、エラーを取ることもできたかもしれませんが、あまり時間はかけたくなかったので、使用を見送りました。

WP Super Cacheは、エラーも発生せずに問題なく動作しました。WP Super Cacheは、Automattic社のプラグインなので、AMP for WordPressの方でも併用して使えるようになっているようです。しかし、persistent object cacheをサポートしているのか不明です。少し調べた感じでは、サポートしていないように思われます。

マニュアルでコード変更をして、persistent object cacheを有効にすることもできそうなのですが、キャッシュの消去などの保守操作まで対応するのは大変そうなので、対応するのであれば、プラグインで行うことを考えています。

このブログは、テキスト中心で表示系も簡素なので、キャッシュは必要ないようにも思います。元々、プラグインなどで行うソフトキャッシュは好きではないので、結局WP Super Cacheは無効にしました。

広告の設定

このブログは多くの訪問者を得るような類のサイトではありません。そのため、広告も表示しなくても構わないのですが、ネイティブAMP環境での広告の設定などの知識や経験を身につける目的で広告を設置しています。

使用テーマ Twenty Fifteenの場合、ウィジェットのサポートはサイドバーのみなので、ヘッダーやボトム部などにウィジェットを使用して広告を設置することはできません。

現状、広告の設置は自作のプラグインで記事下にAdSenseのコードを挿入しています。自動広告も設定しようとしたのですが、AMP for WordPress v1 ベータで外部テーマをサポートした場合のプラグインが動作する仕組みなどがまだ十分にわかっていないため、うまく設定できませんでした。

Twitterの埋め込み

AMP for WordPress v1-beta3では、amp-twitterのプロフィール表示をサポートしていると変更ログに記載されているのですが、試してみたところ動作しませんでした。

amp-twitterでプロフィールの表示に最近対応したとのことですが、ブロギングライフのAMPページなどを含めてテストしてみましたが、表示されませんでした。

単体のツイートやモーメントは、AMPで動作しますが、プロフィールはまだのようです。

以下は、ツイートを埋め込み表示の例です。

Twitter プロフィールのタイムラインを埋め込めるようになったら、サイドバーに設置する予定です。

上記の様な作業を行って、5-6時間も費やしてしまいました。設定などのテストや調整は時間がかかりがちです。時間を使うことに有効なことなのか、悩ましいところでもあります。ただ、ネイティブAMPに関しては、個人的にも興味があるのである程度は、取り組んで(対応して)みるつもりでおります。

ブロギングライフ BLOG 始めました!

ブロギングライフのブログ版として本ブログを立ち上げました。サイト運営関連の少しカジュアルで軽めの話題、気になることや注目のニュース等、あまり縛らずに自由な感じで書いていこうと考えています。よろしくお願い致します。