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

公開日: : プラグイン , ,


LINE facebook twitter URLコピー
B! pocket note 楽天


AMPカスタマイズ

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」
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP ↑