AMPページを「highlight.php」を使って シンタックスハイライトする

 
WordPress Twenty Seventeen
AMPページでのシンタックスハイライト
「highlight.js」から「highlight.php」に変更
 
AMPページを、「highlight.js」を使用してシンタックスハイライトすると、Search Consoleにおける AMPでのエラーが続発することになった。そこで、【 Javascript 】ではなく【 PHP 】を使用した「highlight.php」でシンタックスハイライトすることにした。
 
PHP版の「highlight.php」での Syntax Highlight
 
以下、PHP版の「highlight.php」をインストールした記録。

 

タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。

WordPress Twenty Seventeen
Search Console の AMP
「CSS !important」が含まれています エラー
 
Search Console の AMPで、『タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。』というエラーが出る。
 
「CSS !important」が含まれています エラー
 
以下、「CSS !important」エラーの修正記録。

 

WordPress Related Posts 関連記事 AMP用のカスタマイズ

WordPress Twenty Seventeen
関連記事プラグイン WordPress Related Posts
AMPページ用のカスタマイズ
 
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう。
 
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう
 
以下、AMPページ用にCSSをカスタマイズした記録。

 

AMPに「highlight.js」シンタックスハイライトを適用する

WordPress Twenty Seventeen
pre ソースコードのハイライト
AMPページで「highlight.js」を使用する
 
「Crayon Syntax Highlighter」から「highlight.js」に乗り換えたが、AMPページでは【ソースコード】がハイライト表示されない。
 
ampページではハイライトされない
 
以下、「highlight.js」を AMPページに組み込んだ記録。

 

Syntax Highlighterを「Crayon」から「highlight.js」に乗り換える

WordPress Twenty Seventeen
Crayon Syntax Highlighterから
highlight.jsへの移行
 
「Crayon Syntax Highlighter」プラグインを長年に亘り使用してきたが、ここに来てバグが顕在化してきたり、サイトのスピードアップの弊害になってきたので、思い切って代替策を検討することにした。
 
当サイトで採用したのは、「tomorrow-night-blue.css」
 
以下、「highlight.js」に乗り換えた記録。

 

第三者コードの影響を抑えてください 解決策

WordPress Twenty Seventeen
PageSpeed Insights Webサイトの高速化
その-10
第三者コードの影響を抑えてください 解決策
 
PageSpeed Insights では、診断の欄に、
「第三者コードの影響を抑えてください」と指摘される。
GTmetrix では、「YSlow」タブに、
「Reduce DNS lookups」と指摘される。
 
診断の欄に、「第三者コードの影響を抑えてください」と表示される
 
以下に、この指摘を解消した方法を記録。

 

Google Analytics Safariからの 自分のアクセスを除外

Webサーバー サイトの管理
Google Analytics
iPad Safari から 自分のアクセスを除外する方法
 
iPadの Safariで、ブログにアップした記事内容のチェックや、AdSense広告の表示状況、あるいは、サイトの稼働状況等を頻繁に確認している。
 
AdFilter - 広告ブロック アプリ
 
これら自分のアクセスを、Analytics の「リアルタイム」計測から除外する対策を施した。

 

PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

WordPress Twenty Seventeen
WP Fastest Cache Premium

プラグインの更新が出来ない
 
 
WP Fastest Cache Premium の更新中にエラーが発生しました: パッケージをインストールできませんでした。 PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
 
 
WP Fastest Cache Premium の更新中にエラーが発生しました
 
以下、このプラグインの更新が出来ないトラブルへの対処記録。

 

EWWW Image Optimizer API クレジットの購入と Cloud版の使用

WordPress Twenty Seventeen
Webサイトの高速化
その-7 「適切なサイズの画像」

EWWW Image Optimizer を使ってみる
 
ブログで使用している画像は経験値として、
全て「.jpg」形式のフルサイズで、7
・デジカメ写真の場合は「800 x 600」
・スマホ写真の場合は「840 x 472」
に、サイズを縮小してアップロードしている。
 
スマホ写真の場合は、「840 x 472」にサイズ変更して後、「tinyjpg」による圧縮してプロードするのが良い。
 
ここに来て「Webサイトの高速化」の為に、画像サイズについて、今一度見直しを行ってみた。

 

EWWW Image Optimizer の導入で「jpegtran, optipng, gifsicle がありません。」になる

WordPress Twenty Seventeen
EWWW Image Optimizer の導入
有効化するとエラーが出る
 
EWWW Image Optimizer をインストールし、有効化すると次のエラーが出る。
 
EWWW Image Optimizer を有効化するとjpegtran, optipng, gifsicle がありません。
エラーメッセージの内容。
EWWW Image Optimizer は jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp を使用します。 jpegtran, optipng, gifsicle がありません。 設定ページ と インストール手順 をインストールしてください。
 
以下、このエラーを解決した記録。