yStandard v1.0.0公開のおしらせ

yStandard v1.0.0を公開しました。

主な変更点についてのご案内です。

yStandard v1.0.0公開
機能追加
不具合修正
まとめ

yStandard v1.0.0公開

よっひー(@yosiakatsuki)です。

2017年8月16日 yStandard v1.0.0を公開しました。

主な更新内容は以下のとおりです。

機能追加
- AMPページでのFont Awesomeをサポート
- デフォルトのフォントカラーを黒濃いめに調整
- AMP設定メニューはAMP有効化した時のみに表示する
- AMPページ生成でWordPressサイトのoembed関連iframeの削除
- AMP用 Google Analytics トラッキングID設定の追加
- 広告のキャプション変更フィルターフック追加
- 広告用HTML作成メソッドに広告ラベル無しオプションを追加
- AMP正規表現置換処理を関数化
- AMP用置換でテーマが置換する内容より先に置換処理をするためのフィルタを追加
不具合修正
- ギャラリーが機能していない点の修正
- パーマリンク設定が「基本」の時にAMPページのURLが正しく出力されない点の修正
- 記事下広告に高さの違うものを設定した時、上揃えにする
- apple touch iconが反映されていない点の修正

機能追加

AMPページでのFont Awesomeをサポート

今までAMPページではFont Awesomeのアイコンフォントは使わないようにCSSを調整していましたが、今回のバージョンからAMPページであってもFont Awesomeのアイコンフォントを使ってのアイコン表示が可能になります。

記事下のフォローボタンやフッターのSNSリンクがAMPフォーマットでもアイコン付きで表示されるようになりました。

デフォルトのフォントカラーを黒濃いめに調整

今まではいろいろなサイトを参考に設定していた紺系の文字色だったものをもう少し黒色の強い色に変更しました。

理由は、嬉しいことにyStandardユーザーが増えてきて、皆さんいろいろカスタマイズしてくださっているのですが、結構文字色を黒っぽく変えてる方が多い印象でした。

#000という手もありましたが、真っ黒だとちょっと強すぎて、サイトによって合う・合わないの差が出るかと思ったので、#333にしています。

AMP設定メニューはAMP有効化した時のみに表示する

[ystandard設定]の「AMP設定」ページはyStandardのAMPが有効化されているときのみ表示するように変更しました。

[ystandard設定]→[高度な設定]の「AMP有効化」にチェックがあるときにAMPページに関する設定ページが表示されます。

AMPページ生成機能でWordPressサイトのoembed関連iframeの削除

oembedの機能を使っているとWordPress側で生成するiframeをAMPページ生成時に削除するようにしました。

URLからblockquoteタグへの変換は残ってしまうので、CSSなどでうまく調整してあげれば見栄え良くなると思います。

今後のバージョンアップで何か機能強化するかもしれません。（単純にcssにスタイル追加するだけかもしれません…）

AMP用 Google Analytics トラッキングID設定の追加

今まで1つしか無かったGoogle AnalyticsのトラッキングIDの設定をAMPページ用に追加致しました。

[ystandard設定]→[AMP設定]→[AMP用 Google Analytics トラッキングID]から設定できます。

空白の場合は通常ページ用のトラッキングIDを使用します。

こちらについては以前カスタマイズしていただいておりました▼

広告のラベルを変更できるフィルターフック追加

広告エリアの上部に表示される「スポンサーリンク」部分をカスタマイズするフィルターフックを追加しました。

ys_advertisement_label_textで「スポンサーリンク」の文字を、ys_advertisement_label_htmlで広告ラベル部分のHTMLをカスタマイズできます。

サンプルコードはこちら▼

my_advertisement_label_text( $label ){
  $label = '広告';
  return $label;
}
add_filter( 'ys_advertisement_label_text', 'my_advertisement_label_text' );

my_advertisement_label_html( $html ){
  $html = '<div class="ad-label-2">広告</div>';
  return $html;
}
add_filter( 'ys_advertisement_label_html', 'my_advertisement_label_html' );

必要があればご活用下さい

広告用HTML作成メソッドに広告ラベル無しオプションを追加

独自カスタマイズで広告枠を追加したいときなどはys_template_get_the_advertisement_formatというメソッドを使うと「スポンサーリンク」というラベル付きでHTMLを作成出来るのですが、このメソッドの第2引数に広告ラベルを無しにするオプションを追加しました。

function ys_template_get_the_advertisement_format( $ad, $label = true ) {
//略
}

$ad部分に広告コードを渡して、$labelで広告ラベルあり・無しを指定します。

デフォルトは広告ラベル「あり」です

AMP正規表現置換処理を関数化

AMPのエラー対処系エントリのピンバックで知った記事に「関数化したらいいのに」的なことが書かれていたのをきっかけにiframeやらSNS埋め込み系をゴリゴリ置換する処理を関数化しました。（スミマセン…どの記事だったかは失念しました…）

関数の中身は以下のようになってます。

/**
 *    AMP用正規表現置換処理関数
 */
function ys_amp_preg_replace( $pattern, $replacement, $content ) {

    if( 1 === preg_match( $pattern, $content, $matches ) ){
        $content = preg_replace( $pattern, $replacement, $content );
    }
    return $content;
}

$patternに置換対象にする正規表現パターン、$replacementに置換後の文字列、$contentは投稿本文を渡して下さい。

やや難しいカスタマイズになると思います。必要な方はinc/amp.phpを覗いてどんなふうに使われているか参考にしてみてください。