AMPデザインテンプレートの「Simp」に、通常の「Web」ページへ遷移するボタンを表示させてみた

以前、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法をご紹介いたしました。

WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入してみた

今回はそのAMPデザインテンプレートの「Simp」に、通常の「Web」ページへ戻るボタンを表示させてみたのでご紹介いたします。

single.php

「Simp」フォルダにある、記事ページの「single.php」にボタンの記述を挿入します。「single.php」は下記のようになっています。

html

ボタンをページの最も上に表示することにし、上記のソースにある「<body>」下の17行目に、下記の記述を挿入しました。

通常のWebページへ戻る「Web」、カレントである「AMP」を記述しています。

「href=””」内に「<?php the_permalink(); ?>」を記述することによって、現在のページのまま、通常のWebページへ戻ることができます。

上記ソースを挿入すると、headからbody付近は下記のようになります。

css

ボタン用のスタイルを「style.php」に下記のように記述します。

「position: fixed;」を指定することにより、画面上部にボタンを固定しています。「z-index: 10;」はアイキャッチよりも、重なりの順序を強くするために指定しています。

ボタン

ボタン表示は下記のようになります。

AMPページ上部に固定されるボタン
AMPページの上部に固定されるボタン

表示と遷移の確認

下記の画像で「Web」と「AMP」のボタンが「AMP」ページの上部に固定されていることがわかります。「Web」のボタンを押下することによって、現在いるページのまま、通常のWebページへ戻っています。

ボタンの表示と遷移の確認

まとめ

  • htmlを追加するファイルは「single.php」。
  • ボタン用のcssは「style.php」に記述。
  • 「position: fixed;」でページ上部に固定している。

。「AMP」ページはJSを使用することができないので、ボタンを固定するために「position: fixed;」を利用しました。

「position: fixed;」はブラウザやバージョンなどによる依存が激しいので、うまくいかない場合は無理に固定せず、サイトタイトルの横などにボタンを設置した方がいい場合もあると思います。

AMPデザインテンプレートの「Simp」を利用している方で、通常のWebページへ戻るボタン設置の参考になれば幸いです。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

AMPデザインテンプレートの「Simp」に、通常の「Web」ページへ遷移するボタンを表示させてみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!