伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】AMPページに通常ページへの移動リンクを追加する方法

投稿日:2017年3月22日 更新日:

【2017年4月追記】
AFFINGER4ver20170410アップデートで、通常ページへ戻るリンクボタンが標準仕様となりました。
▶【機能追加】AFFINGER4ver20170410アップデートのお知らせ

WordPressテーマ「AFFINGER4」のAMPページに通常ページへの移動リンクを追加する方法をご紹介します。

リンクボタンでの表示も考えましたが、通常ページへの「誘導」になってしまうとAMP化した意味がありませんので、必要な場合にのみ簡単に通常ページにアクセスすることができるように、あまり強調しないサイズで説明文つきの通常リンクを表示するようにしました。

見本ページhttps://kanamii.jp/1514/amp/

AMP機能自体が新しいものなので、その使い勝手やページのカスタマイズも試行錯誤。

ブログ記事に訪れて下さった方が何を求めているか。何を探しているか。

そのニーズは様々だと思っています。

高速表示が可能なAMPページは「探している答え」を提供する手段としては有効だと感じていますが、例えば...

  • 関連する記事をもっと読んでみたい→カテゴリ一覧やサイトマップ
  • 数か月前はどんな感じだったのかな?(経過報告記事など)→アーカイブページ
  • こんな記事もありそうor以前に見たページを探したい→検索フォーム
  • 更新情報を受け取りたい→購読ボタンやフォローボタン
  • 質問メールを送りたい→お問い合わせページ
  • 通常モバイルページのデザインを見たい(これは例外かな?)

このように感じてくださった場合などですね。
AFFINGER4の標準機能で、フッターやウィジェットで対応できる部分も多々ありますが、簡易的なAMPページよりもサイト全体を見渡せる通常ページの方が都合のよい場合もあるかもしれません。

そんなときに、簡単に通常ページにアクセスできるリンクがあったら便利かな?と。

実は、Google検索からのAMPページの標準機能でも通常ページへのアクセスは可能なんですね。
画面を上から下へスワイプすると、このようにアイコンが表示されます。

でも、これ...なんだかわかりにくいですよね。
それだけ利用される頻度が低いということなのかな?

当ブログでAMP化しているページ数はまだ少なく、今回のカスタマイズはテスト的な要素を含みますが、自身の備忘録の意味も含めてカスタマイズ方法を記録します。

よろしかったら参考になさってくださいね。

スポンサーリンク

子テーマの作成

今回のカスタマイズは「single-amp.php」「st-amp-css.php」を編集します。

AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の2つの該当ファイルをFTPで子テーマ内(affinger4-child)にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

続きを見る

今後のアップデートでAMPに関わる部分の変更(親テーマのコードの変更)があった場合は、再度子テーマの作成とカスタマイズが必要になります。

single-amp.phpを編集

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」(子テーマ)を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「更新がない場合」と入力してマークされる部分の下記コードを探してくださいね。

上記コード内の下から2行目、</span></p>すぐ上に下記コードを追加してください。
メッセージはお好みで変更可能です。

追加後のコードです。

続いて、上記コードのすぐ下に下記コードを追加してください。

コード内の、<i class="fa fa-paper-plane-o" aria-hidden="true"></i>の部分は、Font Awesomeの紙飛行機のアイコンフォントのコードです。
こちらのアイコンフォントとテキスト部分は自由に変更可能です。

カスタマイズコードの解説と参考サイト

表示されているページのURLを呼び出すテンプレートタグ「get permalink」については、下記ページを参考にしました。

参考テンプレートタグ/get permalink-WordPress Codex 日本語版

その後、通常ページへのURLを呼び出す方法がわからず悩み続けること2日間...(笑)

最終的には、AFFINGER4のfunctions-amp.phpで指定されている「ampページが存在する場合はそちらを優先的に取得するフィルターフック」の存在に気がつきました。
PHPの基礎知識がないと何をやるにも遠回りです。

参考サイトは下記ページです。
本当にお世話になりました。ありがとうございます。

参考WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック/Webデザインレシピ

参考WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方/株式会社LIG

ご紹介しているコードは、「フィルターフック削除のコード」→「表示中のページURLを取得するコード」→「フィルターフックを再設定するコード」になります。

st-amp-css.phpにコードを追加

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」(子テーマ)を開きます。

最下部に下記コード(通常ページへのリンクの文字サイズ指定)を追加してカスタマイズ完了です。

追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。

パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。

【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

続きを見る

以上、AFFINGER4のAMPページに通常ページへの移動リンクを追加する方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved Powered by AFFINGER4.