本ブログが使用しているWordPress テーマ Twenty Fifteenでは、デフォルトでサイドバーに通常のサイト内検索窓が設置されています。Google カスタム検索にするとサイトだけでなく他のサブドメインやメインドメインを含む関連サイト全体を対象にした記事検索が可能になります。
Google カスタム検索はJava スクリプトで動作するため、AMPではそのままでは利用することができません。（現状、Googleカスタム検索そのものは、ampでは動作しません。）調べたところ、amp-formを使用して対応する方法が紹介されているのをstackoverflowのQ&Aで見つけました。
設定したところ、無事に動作しました。詳しい設定方法は、以下のブロギングライフの記事をご参照下さい。
AMPページにGoogle カスタム検索を設置する方法 – ブロギングライフ
パソコンページではサイドバーに、「サイト内検索」の下にGoogle カスタム検索の入力欄が表示されています。モバイルでは、タイトル横のハンバーガーメニューアイコン（横3本線 – ）の部分をタップすると、サイドバーが表示されます。
検索を行うとクエリと関連性の高い記事が関連サイト内から選ばれて結果が表示されます。本ブログはまだ記事数が少ないので、通常のサイト内検索ではは実質的にほとんど意味がありませんが、関連サイトを含めて検索できるとユーザーへの利便性も高まると思います。
ソーシャルリンクの設定
Twenty Fifteenには、ソーシャルリンクと呼ぶWordPressのメニュー機能を使用して、SNSのアカウントへのリンクをアイコンで並べて表示する機能を備えています。サイドバーに表示される通常のメニュー項目の下にSNSアイコンが横に並んで表示されます。ちょっとした機能ですが、見た目も良く、まとまっていて、意外と使い勝手が良さそうな感じなので、設定してみました。
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のコンポーネントで必要な基本機能は全て動作するので助かりました。
機能的には問題なく動作しています。デザイン的にも悪くないので、そのまま使っています。
本ブログで使用しているSNS共有ボタンの設置方法については、以下の記事をご覧下さい。
