MENU
HOME
TOP

AMPページに移動するだけのボタンを設置する方法

スマホではAMPページに流入がありますが、PCからの閲覧は、ほぼほぼないですよねえ。

だけどPCでもサクッとAMPページに移管する案内ボタンっちゅう感じ??

ま、そんな感じのモノがあれば、いいなっと思ったので設置してみました。

↓こんな感じで、このちょっと上にあるやつです。

ページ移管するだけのモノなので、カスタマイズってほどでもないですが、書き残しておきます。(書かせていただきます。)

WordPressの場合

とりあえず、みんな大好きWordPressの場合から。

WordPressの場合は単純に「the_permalink」という便利なテンプレートタグがあるので、それにampのパーマリンクを引っ付けるだけでいいかなと思います。

 <?php the_permalink(); ?> 

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

single.phpに追加する

テーマよって記述場所が違うので何とも言えませんが、とりあえずsingle.phpの表示したいところに以下のように追加します。

<div class="amp_information_button clr"> 
<a href="<?php the_permalink(); ?>?amp=1">AMPページ</a>
</div>

スタイルを追加する

ほんで、スタイリングするだけです。

/*amp移管案内ボタン*/
.amp_information_button a::before {
content: "\f138";
font-family: "FontAwesome";
margin-right: .5em;
}
.amp_information_button a:hover {
color: #ffffff;
background: #3b5998;
}
.amp_information_button a {
background: #f3f3f3;
display: inline-block;
padding: .3em 1em;
border-radius: 4px;
float: right;
text-decoration: none;
color: #3b5998;
font-size: 80%;
font-weight: bold;
border: solid 1px #3b6cae;
transition: all 0.5s ease-in-out;
}
.clr::after {
height: 0;
clear: both;
font-size: 0;
display: block;
content: "";
}
.clr {
display: block;
clear: both;
}

動作の確認

動作の確認と言っても、クリックするだけですが、、

冒頭で載せた画像と同じですが、こんな感じでボタンが現れていると思います。

これをクリックすると「/?amp=1」を付けたページに移管するだけです。

テーマによったり、プラグインなんかでAMP化してる場合には「/?amp=1/」ではなく、「/amp/」だったりもするので、そこらへんは環境に合わせて変更してください。

WordPress以外の場合

あんまりプログラムとか詳しくないので、もっといい方法があるかどうか分かりませんが、参考にさせてもらったコードをちょっともじってみました。

↓こんな感じでイケます。

<div class="amp_information_button clr">
<a href='<?php echo("//" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>/?amp=1'>AMPページ</a>
</div>

参考にさせて頂いたサイト様はこちらでございます。

これだとWordPressに限ったことではなく、単純にPHPが利用できるかどうかだと思います。

今気づいたんですが、こいうのはブログカードなんかに入れてやると親切かも知れませんね。

↓こんな感じで。

どっちゃみち、キャッシュされたページではないので意味ないといえば意味ないですね。

ということで、また( ´Д`)ノシ

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください