WordPressでAMP（Accelerated Mobile Pages）対応

このサイトのようにモバイルを意識して構築した場合に、AMPの必要性は個人的には若干疑問（現状では、表示速度やビジュアル性が低下する場合が多々ある）なんですが、Googleが対応を推奨している以上、AMPを無視するわけにもいきません。

現状、手間をかけてAMP対応はしたくないので、プラグイン「Accelerated Mobile Pages」を使用します。有料の機能/プラグインが必要な部分は通常ページへの案内をしてそちらへのリンクを掲載で対応して、お金も手間も倹約します。（開発者の為に余裕がある方は、有料の機能/プラグインもどんどん使ってあげてください。）

ampプロジェクトのプラグイン「AMP」ではなく「Accelerated Mobile Pages」をインストール

最初、Googleも案内するampプロジェクトの「AMP」をインストールしてみましたが、単独では使用できず追加のプラグインを要求されるし、設定方法も分り難いので、設定が分かり易い「Accelerated Mobile Pages」を使用します。

Accelerated Mobile Pagesの設定は簡単

プラグインをインストールして、有効にした後、AMPforWP OptionsのSettingsとDesignを設定するだけ、沢山設定がありますが、とりあえずわかるところだけでも設定して、＜your url＞/ampを見てみましょう！

Accelerated Mobile Pagesの設定の注意点

Custom CSSに通常ページのCSSを貼り付けるだけで、通常ページに似せたデザインにできますが、使えないCSSがあります。Custom CSSに貼り付けると文法チェックされて、無効なものは赤の△、注意が必要なものが黄色の△で表示されますので、最低限、赤の△は、修正or削除します。

Google Search consoleで「重大な問題のある AMP ページ」と表示されてしまいます。

コメントに禁止CSSと類似の記載があっても「重大な問題のある AMP ページ」となってしまうようなので、コメントはすべて削除しておくと安全かもしれません。

設定後はしばらくは、注意してGoogle Search consoleを見ましょう。もし、「重大な問題のある AMP ページ」と表示されてしまったら、速やかに修正しましょう。

その他、AMPページ作成でのポイント

各ページをAMP対応に変更したい場合は、SettingのPage Builder / Legacy Page Builder (widgets)を有効にすると各ページでAMP専用のページが簡単に作成できるようになります。

モバイルページはAMPを標準としたい場合は、SettingのAdvance Settings / Mobile Redirectionを有効にするとモバイルからのアクセスでは自動的にAMPページが表示されるようになります。ただ、この場合はSEO設定などもちゃんとしておかないとモバイルファーストとなったときにSEO的に不利となると思われます。ちなみに、このRedirection設定をしなくてもGoogle Search consoleはAMPページを認識します。

実は、まだこのサイトも対応中の段階で、ここでの記載は最終的に変更される可能性があります….(^-^;

Accelerated Mobile Pages設定項目について（追加）

SettingsのStructured Dataは設定しましょう。この設定をしてないと構造化データが不完全となってしまいます。

pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか？

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単！

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

A:1、B：2、C:3

A:3、B:1、C:2

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー＞狭い」とします。

/*レスポンシブデザイン　表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}

WordPressの新しいカスタムHTMLウィジェットが保存できない

テキスト ウィジェットと違い自動で<p>タグで括らず、htmlを記述できる新しい機能ですが、セーブが完了しない事があります。

この他にも、カスタムcssや投稿記事内でjavascriptを記述した場合とかも同様にセーブできない。セーブできたように見えても、保存出来てなかったなどが発生することがあります。

SiteGuardが動作している環境では、次の対処で解決します。

SiteGuardが稼働中の環境での対処方法

SiteGuardはセキュリティ強化を手軽に強力にしてくれる便利で頼れるWordpressのプラグインですが、セキュリティ対策故に誤動作して悪さをしてしまう事があります。間違いはないはずなのに保存・実行の段階で期待通りに動かない場合は、次のように対処しましょう。

1. レンタルサーバーの管理画面で、WAF機能のログを見てみましょう。
2. 不具合が発生した時間にログが登録されていたら、その「URL」と「検出されたシグネチャ」をメモしましょう。
3. WordPressの管理画面のSiteGuardのWAFチューニングサポートのメニューを開きます。
4. 「新しいルールの追加」をクリックして、シグネチャとファイル名、コメントの入力画面にします。
5. メモした「検出されたシグネチャ」をシグネチャへ、「URL」をファイル名に記入して保存します。

これで問題は解決するはずです。うまくいかない場合は、再度見直し（半角スペースやtabが挿入されていないか？など）修正は、一度削除して新規に入力し直すと良いと思います。修正だとうまく反映されない場合があるようです。WAFチューニングの設定方法の詳細はこちら

WAFチューニングをしても解決しない場合

SiteGuard以外にも要因になるプラグインはあると思います（定義が重なっている場合など）が、まずは、自分の作業内容を疑って、もう一度、丁寧に見直しましょう。もし新たに変数・関数定義をした場合などはユニークとなっているか？（簡単な確認方法は私は知りませんので、グローバルな定義は頭に特定のキーワードを付けるようにしています。）

そのうえで、やっぱり、不具合時にWAF機能にログが登録されているようなら、追加したWAFチューニングの設定を削除して、入力し直して見ましょう。

TinyMCEによく使うフォントや折角のフレームワークを登録して使いやすくする。

TinyMCE Advanceでツールアイコンを追加したりして、使いやすくできるのですが、フォントやスタイルまではやってくれません。

スタイルについては、editor-style.cssでCSSを読み込んで見栄えを実際に近くでき、CSSのclassを付加することも出来ますが、セレクタ（tag）は指定は出来ません。

editor-style.cssを読み込んで、出来上がりに近い表示にする。

function.phpに以下の1行を追加します。

add_editor_style( array( 'css/editor-style.css' ) );

ここでは、cssフォルダーの下のeditor-style.cssを読み込んでいます。

editor-style.cssには、H1/H2/H3/…などをstyle.cssなどから抽出して記入します。初期設定と記事作成に使うタグだけなので、さほど多くはないと思います。あと、CSSフレームワーク関係も使えるようにしたいので、初期設定の部分と記事作成に使うものを抽出して追加します。 @importで丸ごとインポートもできるようですが、面倒でも必要な部分だけを記述するのが良いと思います。 フレームワークは、記事作成時には影響は少ないと思いますので、どの部分が必要かわからない場合は、省略でも良いと思います。 pure.cssの場合は、baseとtable、あと必要に応じてButtonsとGridでしょうか。記述の順番は以下の様な感じで（同じセレクタなら最後の設定が有効なので）

1. pure.css　Base
2. pure.css　Buttons
3. pure.css　Tables
4. pure.css　Grids
5. style.cssから抽出した共通（基本）設定とH1/H2/H3/…など

多機能のフレームワークを使っていて、どの部分を抽出すればよいかわからない場合は、記事ではpure.cssを使う方法もあります。大変小さいフレームワークで、他との競合もないので、追加しても邪魔にはならないと思います。

プラットフォーム違いでも使える代表的英字フォントと日本語フォントに変更する。

こちらも、function.phpに以下を追加します。

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "ＭＳ Ｐゴシック='ＭＳ Ｐゴシック','MS PGothic';".
 "ＭＳ ゴシック='ＭＳ ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "ＭＳ Ｐ明朝='ＭＳ Ｐ明朝','MS PMincho';".
 "ＭＳ 明朝='ＭＳ 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

フレームワークを利用する為のオリジナルのスタイルを登録する。

記事もレスポンシブ対応させる必要が多々あると思います。特に画像や表などは面倒ですし、よくわからない人にclassを追加してなんて言ってもわかりません。

ここでは、もともとのpure.cssとの対比が分かり易い（自分が使う為の設定なので）表記で登録していますが、実際に使う方が分かり易い表記にすればよいと思います。

先ほどのフォントと合わせて、

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "ＭＳ Ｐゴシック='ＭＳ Ｐゴシック','MS PGothic';".
 "ＭＳ ゴシック='ＭＳ ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "ＭＳ Ｐ明朝='ＭＳ Ｐ明朝','MS PMincho';".
 "ＭＳ 明朝='ＭＳ 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 $style_formats = [
 [
 'title' => 'Responsive Images',
 'selector' => 'img',
 'classes' => 'pure-img'],
 [
 'title' => 'Default Table',
 'selector' => 'table',
 'classes' => 'pure-table'],
 [
 'title' => 'Bordered Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-bordered'],
 [
 'title' => 'Table with Horizontal Borders',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-horizontal'],
 [
 'title' => 'Striped Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-striped'],
 [
 'title' => 'Striped Table tr',
 'selector' => 'tr',
 'classes' => 'pure-table-odd'],
 [
 'title' => 'Default Buttons',
 'selector' => 'a',
 'classes' => 'pure-button'],
 [
 'title' => 'Primary Buttons',
 'selector' => 'a',
 'classes' => 'pure-button pure-button-primary'],
 [
 'title' => 'Grids',
 'selector' => 'div',
 'classes' => 'pure-g'],
 [
 'title' => 'grid-u-x-5/24',
 'selector' => 'div',
 'classes' => 'pure-u'],
 [
 'title' => 'grid-u-sm-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-sm-1-2'],
 [
 'title' => 'grid-u-md-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-md-1-2']
 ];
 $arr['style_formats'] = json_encode($style_formats);
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

これでひとまず完了！

WordPressのビジュアルエディタTinyMCEの変な設定の表もこれで綺麗に作成できます。

あ～！．．．．忘れていました。

TinyMCE Advanceで、スタイルボタンの追加と高度なオプション「CSS クラスメニューの作成」のチェックをしましょう！．．．．．(‘◇’)ゞ

今度こそ、WordpressのビジュアルエディタTinyMCEが素敵に変身です。

めでたし、めでたし

追伸：

こんな感じが分かり易いのかなぁ～