WordPressのプラグインディレクトリにあります、AMP Project Contributors製のAMPプラグインを使っています。とくに難しい設定はしておらずほぼデフォルトです。
書体が明朝体になってしまうところやCSS、さらに「xx日前」という日付形式を、通常の日付表示に変更して、カスタマイズしました。
AMPプラグインのデザインをカスタマイズしたい
おそらく、AMP対応していないWordPressテーマでは広く使われていると思われる、AMP Project Contributors製のAMPプラグインを使っています。
ただ、更新頻度も多く安心なのですが、以下を変えたいと感じていました。
- デフォルトで書体が明朝体になってしまう
- 記事日時が、xx日前となってしまう
子テーマを作り、AMPテンプレートにCSSカスタマイズを適用すればいけるはずです。そのうえで、後述の変更点をお読みください。
なお私は、子テーマづくりがわからなかったので、直接プラグインを修正しました（プラグインがアップデートされると上書きされていまいます）。
WordPressのAMPプラグインのカスタマイズ
以下のサイトを参考にさせていただきました。ありがとうございます。
公式AMP情報。
＞＞Handling AMP Legacy Themes : AMP for WordPress
サイトで詳しく見る
AMPで明朝体を変える
AMPカスタマイズの方法が書かれています。
＞＞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以上のタイムセール
セール特設ページを見る
＞＞楽天トラベル国内ツアーのバーゲン情報はこちら
楽天で詳しく見る
何日前、という日付形式を変える
タイムスタンプについてはこちらの記事が役立ちました。
＞＞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サイトの作り方 (「いちばんやさしい教本」シリーズ) | 石川栄和, 大串 肇, 星野邦敏
関連情報リンク
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@をフォローしていただけると更新情報を受け取れますのでおすすめです。記事を気に入ったというかたはぜひ。
・ ・ ・ ・ ・
＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です
