AMPカスタマイズ

WordPress公式のAMPプラグインのCSSと何日前という日付形式をカスタマイズした

by
Share on Hatena Share on Pinterest Share on Pocket

WordPressのプラグインディレクトリにあります、AMP Project Contributors製のAMPプラグインを使っています。とくに難しい設定はしておらずほぼデフォルトです。

書体が明朝体になってしまうところやCSS、さらに「xx日前」という日付形式を、通常の日付表示に変更して、カスタマイズしました。

本記事の執筆は、WordPress歴11年目のカグア！（@kagua_biz）によるものです。なお、情報は2020年11月5日時点・WordPress 5.3.6で試したのものです。ご注意ください。

AMPプラグインのデザインをカスタマイズしたい

おそらく、AMP対応していないWordPressテーマでは広く使われていると思われる、AMP Project Contributors製のAMPプラグインを使っています。

ただ、更新頻度も多く安心なのですが、以下を変えたいと感じていました。

  • デフォルトで書体が明朝体になってしまう
  • 記事日時が、xx日前となってしまう

子テーマを作り、AMPテンプレートにCSSカスタマイズを適用すればいけるはずです。そのうえで、後述の変更点をお読みください。

なお私は、子テーマづくりがわからなかったので、直接プラグインを修正しました（プラグインがアップデートされると上書きされていまいます）。

WordPressのAMPプラグインのカスタマイズ

以下のサイトを参考にさせていただきました。ありがとうございます。

公式AMP情報。

＞＞Handling AMP Legacy Themes : AMP for WordPress
サイトで詳しく見る

AMPで明朝体を変える

AMPカスタマイズの方法が書かれています。
絶対にやってはいけないCSS修正

＞＞AMP対応のHTMLで画像とCSSを扱う | オウンドメディア | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
サイトで詳しく見る

子テーマを作ってからCSSを修正。

＞＞Wordpressプラグイン「AMP」のカスタマイズが超簡単だった！ | freeSIM.tokyo
サイトで詳しく見る

パンくずリストも掲載。

＞＞WordPressのAMP表示カスタマイズ（AMP for WordPress）
サイトで詳しく見る

amp/templates/style.php に書かれているCSSが適用されますので、そこを修正します。以下をBODYに追加しました。

font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;

あとは、末尾に、自身のブログのデザインに近くなるようなCSSを書き足しました。

＞＞Amazonで50%OFF以上のタイムセール
セール特設ページを見る

＞＞楽天トラベル国内ツアーのバーゲン情報はこちら
楽天で詳しく見る

何日前、という日付形式を変える

タイムスタンプについてはこちらの記事が役立ちました。
post_publish_timestamp 更新日を変える

＞＞WordPress 記事の公開日時と最終更新日時を表示する方法 |
サイトで詳しく見る

＞＞WordPress AMPプラグインをいろいろ改造してみる ? ねんでぶろぐ
サイトで詳しく見る

amp/templates/meta-time.phpに、post_publish_timestamp という下りがあります。それをまるまる削除して以下にしちゃいました。とりあえず、一般的な公開日と更新日の表記に変更することができました。

<div class="amp-wp-meta amp-wp-posted-on">
	<p><?php the_time("Y年m月d日"); ?>（更新:<?php the_modified_date("Y年m月d日"); ?>）</p>
</div>

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) | 石川栄和, 大串 肇, 星野邦敏

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方
Amazonで詳しく見る

楽天で詳しく見る

Yahoo!ショッピングで詳しく見る

関連情報リンク

MFI移行しましたねー。

＞＞もう待ったなし！ グーグルが全サイトをMFIに強制移行へ（2020年9月予定）【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
サイトで詳しく見る

WordPress公式ディレクトリにも掲載されていますので、気になっています。

＞＞フルAMP WordPressテーマ LIQUID AMP をリリースしました | LIQUID PRESS
サイトで詳しく見る

100%GPL をチェックしている人向け。

＞＞100%GPLのWordPressテーマまとめ
該当ページを詳しく見る

まとめ

  • AMPプラグインをカスタマイズするときは子テーマを使おう
  • templates.phpのCSSをカスタマイズする
  • 何日前という表記はPHPを書き換える

なんども言いますが、AMPプラグインを直接かきかえる私の方法は、やめましょう。

子テーマを作り、そちらで対応してください。直接書き換える方法は、AMPプラグインのアップデートにより無になりますので、ご注意ください。

お疲れ様でした。

・・・と、こんな感じの父親目線で、SNS、ドライブ、ゲーム、生活防衛ネタが多めでブログ記事を2009年から書いています。よろしければLINE@をフォローしていただけると更新情報を受け取れますのでおすすめです。記事を気に入ったというかたはぜひ。

LINE@で無料の更新情報を受け取る

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

post_publish_timestamp


Post Views: 95