yStandard v1.0.0公開のおしらせ

coding

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を覗いてどんなふうに使われているか参考にしてみてください。

AMP用置換でテーマが置換する内容より先に置換処理をするためのフィルタを追加

yStandardでは投稿の中身をなるべくそのままAMPに対応出来るようにimgamp-imgにしたり、SNSの埋め込みをAMPの仕様に合わせたり…ゴリゴリ置換をかけています。

テーマが標準で行っている置換処理より先に独自に置換処理をかけられるようにys_convert_amp_beforeというフィルターフックを追加しました。

このフィルターを使うと「特定のドメインのimgタグだけ特別な置換をかける」といった使い方ができます。(作者がそういう使い方したいので追加しました)

引数は$contentという文字列1つになりますので、必要があればご活用下さい。

不具合修正

ギャラリーが機能していない点の修正

ギャラリー機能を使って画像を表示した場合に画像が横並びになっていない点を修正致しました。

画像関連の見た目のデモページも作成しましたので、見た目はこちらでご確認下さい↓

パーマリンク設定が「基本」の時にAMPページのURLが正しく出力されない点の修正

パーマリンク設定が「基本」になっている場合にAMPページのURLが正しく出力されない問題を修正しました。

  • 修正前:http://example.com?p=123?amp=1
  • 修正後:http://example.com?p=123&amp=1

記事下広告に高さの違うものを設定した時、上揃えにする

PC表示の記事下広告にサイズの違う広告を指定した時に上揃えにする

今まで、PC表示の記事下広告にサイズの違う広告を設定すると広告が下揃えになっていましたが、今回のバージョンから上揃えになります。

apple touch iconが反映されていない点の修正

スマートフォンでサイトへのブックマークのようなものをホーム画面に配置する際のロゴ指定のタグが欠落していた点を修正致しました。

まとめ

yStandardも使っていただける方が増えてありがたい限りです!

バージョンも1.0.0にして、正式リリースと致します。

理由は色々あるのですが、正式リリースとしておきたい事情があるのと、「もうこれだけユーザーも増えてきて、今更『β版ですから』とは言えないな」ってことで正式リリースと致します。

今後も機能については拡張していく予定なので、要望があればおっしゃっていただければと思います。

その他、改善中の内容、今後の追加機能については下記Trelloのボードをチェックしてみてください!

プログラムソースはGitHubでもご確認いただけます

GitHub