AMPページ の フォントを変更する方法

WordPress Twenty Seventeen
AMPカスタマイズ
AMPページ の フォントを変更する
 
プラグインの AMP for WordPressで『AMP化』したページは、フォントが明朝体になってしまうので、通常ページと同じフォントになるよう「AMPのカスタマイズ」を行った。
 
「style.php」の「font-family:」を変更した結果
 
以下に、AMPページのフォント変更要領を記載。

AMPカスタマイズ SNSボタン(ソーシャルボタン)を表示する

WordPress Twenty Seventeen
AMPページに
SNSボタン(ソーシャルボタン)を表示する
 
SNSボタンの表示要領。
①.amp-social-shareスクリプトタグをAMPページのheadタグ内に入れる
 →「html-start.php」のカスタマイズ。
②.SNSボタンを表示するショートコードを作成する
 → <amp-social-share> タグが、ビジュアルエディターで削除されるため。
③.SNSボタンを表示したい箇所に、ショートコードを記述
 
 
AMPページにSNSボタンを表示
 
以下、AMPページにSNSボタンを表示させた記録。

AMPカスタマイズ amp-ad タグが消えて 貼り付けられない

WordPress Twenty Seventeen
AMPページに
アドセンス広告を表示する
 
AMP化における問題点の一つに、『アドセンス広告が表示されなくなる』というのがある。AMPアドセンスに対応させるには、『AMP用アドセンス』コードを追記すればよいだけなのだが・・・。
 
ハマった事
広告コードをテキストエディターで貼り付けるも、
WordPressにはテキストエディターからビジュアルエディターに切り替える際に、不要なタグを削除する機能が備わっている。』
為に、<amp-ad> タグがもろに引っかかり、テキストエディターで記述したAMP用の広告コードが、ビジュアルエディターに切り替えると消えてしまう。
 
以下、この対策として【ショートコード】で、AMPアドセンスに対応した記録。

AMPのカスタマイズ Analyticsの トラッキングコードを実装

WordPress Twenty Seventeen
AMPページに
Analyticsの トラッキングコードを実装
 
AMP化が完了すると、『AMP化の効果』が気になるところだが、残念ながら「AMP for WordPress」プラグインのインストールだけでは Google Analytics で計測されない。そこで、AMPページに【 Analyticsの トラッキングコードを実装 】するカスタマイズを行った。
 
AMPページがドンドン参照されるようになった
 
以下に、【 Analyticsの トラッキングコードを実装 】する AMPの カスタマイズ要領を記載。

WordPress 目的の異なる AMP化 で判ったこと

WordPress Twenty Seventeen
全く異なる目的で AMP化をしたことで
理解できたこと 判ったこと 多数
 
『Accelerated Mobile Pages』:通称AMPには本来の目的があり、AMPの意義や導入の仕方についての記事が、Webサイトに数多く掲載されている。
 
PCサイトでの、AMP化前の画面とAMP画面の比較
PCサイトでの、非AMP画面とAMP画面の違い。
 
今回、本来の目的とは全く異なった理由、「Search Console のクロールで、多くのページが【 ~/amp/ 】で 「URL エラー 404」 になる」、という対策のために『AMP化』を行った。この『AMP化』を通じて理解・判明した事項を以下に記録した。

WordPress 投稿の編集 画像が選択できない

WordPress Twenty Seventeen
投稿の編集で画像をクリックしても選択できない
 
通常であれば、WordPressのエディター画面で、画像をクリックすると「画像設定メニュー」がポップアップ表示されるが、画像を選択することすらできないという事態に陥る。
 
画像をクリックしても選択できない
 
以下、この原因と対策。

WordPress エクスポート/インポートで、バックアップを補完する

WordPress Twenty Seventeen
WordPress エクスポート/インポートで
バックアップを補完する
 
本番サーバーで稼働している【 WordPress 】は、毎日1回夜間に、システムバックアップを取っている。ところが時々、このバックアップ【 rsync 】に失敗してシステムダウンになることがある。この場合、前日のバックアップから修復せざるを得ないので、大事には至らないが、当日苦労して作成した記事が消滅してしまい気が滅入る。
 
WordPress エクスポート/インポートで、バックアップを補完する
この対策として、長時間を要して作成した記事を、簡単にバックアップして置く方法はないかと、WordPress のエクスポート/インポート機能のテストを試みた。

twenty seventeen 「続きを読む」ボタンのサイズ(高さ)が合せられない

WordPress Twenty Seventeen
①.「続きを読む」ボタンのカスタマイズ:css【 entry-content 】の変更
②.検索結果一覧を表示するテンプレートについて
③.検索結果の表示=記事抜粋を表示する the_excerpt のカスタマイズ
④.コンテンツ抜粋表示のカスタマイズ:【 content-excerpt.php 】の変更
⑤.「 twentyseventeen-featured-image 」での画像の回り込み制御

 
トップページの記事一覧に表示される「続きを読む」ボタンのサイズ(高さ)と、検索結果に表示される該当記事一覧に表示される「続きを読む」ボタンのサイズが同じにならない。
コンテンツを【 ‘excerpt’ 】で表示させる css のクラスは【 entry-summary 】で、【 get_post_format() 】を使用して表示させる css のクラスは【 entry-content 】である、という表示させる css のクラスの違いが理解できた。

WordPress 4.9 Expected COLON at line xxx, col 1.

WordPress Version 4.9
style.css でのエラーメッセージ
Expected COLON at line xxx, col 1.
 
 WordPress を Version 4.9 に更新したら、『外観』→『テーマの編集』の スタイルシート (style.css) で、エラーが表示されるようになった。
 
wordpress 4.9 スタイルシート (style.css) でのエラー

 

これに気づくのに、少々手間取った。

又、【 Advanced Code Editor 】プラグインは、使用しない方が良い。
 

以上。
(2017.11.20)

 
             

スポンサー リンク
 

Twenty Seventeen 文字と画像が被る 問題への対処

WordPress Twenty Seventeen
文章の一部に画像が重なる問題への対処
子テーマの style.css を変更
 
記事や固定ページの作成で、文章の下に画像を挿入した場合、画像が文章の下部に重なってしまう。
文字と画像が被る
 
以下に、この現象が発生するケースと、対処方法を記録。

“Twenty Seventeen 文字と画像が被る 問題への対処” の続きを読む