【yStandard Toolbox v2.0】管理画面刷新・yStandard「専用」から「連携」へと変更した大型アップデート

yStandard Toolbox v2.0.0を公開しました。

今回の更新は、設定画面・見出しデザイン編集機能・主要ブロックを中心に、管理画面の操作性と機能の使いやすさを大きく見直したメジャーアップデートです。

これまでyStandardテーマとの連携を前提にしていた機能の一部も整理し、v2.0.0からはyStandard以外のテーマでも使える機能を増やしています。

大きな変更を含む更新のため、アップデート前にはバックアップを取り、可能であればテスト環境で表示を確認してから本番サイトへ反映してください。

yStandard Toolbox v2.0

「yStandard Toolbox」はyStandard以外でも使えるようになります

yStandard Toolboxは今回の大型刷新によって、yStandard専用プラグインからyStandard以外でも使えるプラグインへと方向転換します。

また、ある程度WordPressバージョンやPHPバージョンが古い環境でも動作するように努力をしています。

「今のサイトも古くなってきていて、リニューアルをしたいけど、なかなかそこまでの予算も取れない…でも、情報の追加やサービスページの更新はしていきたい…」

こんな相談をもらうことが多いため、サイトリニューアルまでのつなぎ役として、ご検討いただければと考えています。

ただし、「使えるからアップデートしなくて良い」という訳ではなく、基本的には推奨要件の範囲内でご利用いただけるよう、保守・運用の体制を整えてください。

これはプラグインが安全に動作するという意味だけでなく、WordPressサイトを安全に運用するためも必要なことです。

プラグイン設定画面をリニューアル

v2.0.0では、yStandard Toolboxの設定画面全体を見直しました。

これまでの設定項目を整理し、サイトデザイン拡張、見出しデザイン、フォント、カスタムCSS、コード追加、投稿詳細ページ拡張、ブロックパターンなどの各機能を、より操作しやすい画面構成に変更しています。

設定項目が多い機能でも、どこを編集しているか分かりやすくなるようにUIを調整しました。

見出しデザイン編集機能を全面刷新

見出しデザイン編集機能は、v2.0.0で大きく変わりました。

マニュアルはこちら▼

これまでは、h2やh3などの見出しレベルごとにデザインを設定する使い方が中心でしたが、新方式では、まず「見出しデザインのスタイル」を作成し、そのスタイルをh2やh3などに割り当てる形に変わります。

さらに、作成した見出しデザインをブロックスタイルとして登録できるようになりました。

見出しブロックだけでなく段落ブロックにも登録できるため、本文中のリード文や補足テキストなど、必要な場所だけに見出し風のデザインを適用できます。

これまでの見出しデザイン設定を使っている場合は、v2.0.0へのアップデート後もすぐに表示が変わらないように下位互換モードで動作します。

新しい編集画面で設定を変更する場合は、「見出しデザイン編集」画面からv2形式への変換を実行してください。

yStandard以外のテーマでも使える機能を拡充

v2.0.0から、yStandardテーマ以外でも使える機能を増やしました。

たとえば、フォント設定、投稿一覧ブロック、カスタムCSS機能などは、yStandard以外のテーマでも利用しやすいように調整しています。

一方で、ヘッダー・メニュー・投稿タイトル設定など、yStandardテーマとの連携が必要な機能は、yStandard以外のテーマでは非表示または無効になるように整理しました。

すべての機能がどのテーマでも同じように使えるわけではありませんが、使える機能とyStandard連携が必要な機能の区別が分かりやすくなるようにしています。

記事一覧ブロックをToolbox独自の実装に変更

記事一覧ブロックは、yStandardテーマのショートコードを呼び出す形式から、yStandard Toolbox内でHTMLを構築する形式へ変更しました。

これにより、yStandardテーマ以外でも記事一覧ブロックを使えるようになりました。

あわせて、概要文の制御は「文字数」ではなく「最大行数」で指定する形式に変更しています。

カード型の一覧などで、概要文の高さをそろえたい場合に使いやすくなります。

記事一覧ブロックをCSSでカスタマイズしている場合は、HTML構造とCSSクラス名が変わる点に注意してください。

多くの場合、.ys-postsから始まるセレクターを.ystdtb-postsへ置き換えることで対応できますが、サムネイルまわりなど一部の要素はHTML構造も変わっています。

※注意点についてはこのページの後半にまとめて記載しています。

カスタムCSS編集機能刷新

カスタムCSS機能では、CSSを書く場所を整理し、フロント画面・エディター画面のどちらに反映するCSSか分けて管理しやすくしました。

これまでの「追加CSS」編集とは異なり、プラグイン独自のコード管理になりましたので、その点は注意してください。

動作環境について

v2.0.0から動作環境の条件についても刷新します。

「推奨要件」と「最低要件」の2種類の動作要件があります。

ただし、基本的には推奨要件の範囲内でご利用ください。
これはプラグインが安全に動作するという意味だけでなく、WordPressサイトを安全に運用するためも必要なことです。

WordPressバージョンについては最新のバージョン、PHPバージョンやデータベースのバージョンについてはご利用のレンタルサーバー会社などが推奨しているバージョンをお使いください。

「推奨要件」と「最低要件」については今後徐々に引き上げられていきますので、特にWordPressのメジャーバージョンアップデート後はよく確認をしてください。

v2.0.0への更新方法

v2.0.0へのアップデートには設定が必要です

v1.x.x系からv2.x.x系のアップデートは自動では行われません。

マイページの購入履歴から最新版をダウンロードするか、以下の方法で管理画面からアップデートしてください。

まず、yStandard Toolboxをv1.37.0へアップデートします。

すると、以下のように、v2への切り替え設定に関する案内が表示されますので「v2切り替え設定を開く」を押します。

切り替え設定画面ではアップデート前の注意事項と設定が表示されます。

大きく仕様が変わる部分がありますので、必ずバックアップを作成しましょう

「yStandard Toolbox v2への切り替えを有効化する」にチェックをいれて、「変更を保存」で準備完了です。

設定変更後、プラグインがアップデートできるか確認してください。

アップデートの通知が出ていればOKです。バックアップの作成後にアップデートを実施し、この記事記載の注意点などを見ながらサイトの表示を確認してください。

気になる点はユーザーコミュニティで質問してください

今回の更新は、yStandard Toolboxの今後の開発を進めやすくするための土台作りも兼ねたメジャーアップデートです。

管理画面やブロック構造の変更など、これまでより大きな変更を含みますが、今後のWordPressやブロックエディターの変化に合わせて、より使いやすくしていくための更新になります。

通常のプラグイン更新と同じように、念のためバックアップを取ったうえで更新してください。

更新後に気になる点があれば、ユーザーコミュニティからお知らせください。

その他の注意点・変更点など

ここまでの内容に記載がない注意点・変更点のまとめです。詳細についても記載しています。

• 記事一覧ブロックのHTML構造が変更になりました
• 記事一覧ブロックの「概要文の長さ」設定の廃止、「概要文の最大行数」設定が追加されました
• 定義リストブロックで.is-not-stacked-on-* / dl-column-width-* に変更が加わりました。

記事一覧ブロックのHTML構造の変更

記事一覧ブロックは、yStandardテーマの

ショートコードを呼び出す形式から、Toolboxプラグイン内でHTMLを構築する形式に変更しました。

それに伴い、HTML構造・CSSクラスともに大きく変更があります。

多くのケースではセレクター名を.ys-posts...から.ystdtb-posts...へ置き換えることで対応できます。

また、サムネイルの縦横比制御はCSSのaspect-ratioを使う形に変更し、.ratio / .ratio__item / .ratio__imageのネストを削除しています。

CSSセレクターの置き換えで対応できるもの

次のセレクターは、基本的に.ys-postsを.ystdtb-postsへ置き換えてください。

• .ys-posts → .ystdtb-posts
• .ys-posts__list → .ystdtb-posts__list
• .ys-posts__item → .ystdtb-posts__item
• .ys-posts__image → .ystdtb-posts__image
• .ys-posts__text → .ystdtb-posts__text
• .ys-posts__meta → .ystdtb-posts__meta
• .ys-posts__date → .ystdtb-posts__date
• .ys-posts__cat → .ystdtb-posts__cat
• .ys-posts__dscr → .ystdtb-posts__excerpt

HTML構造が変わるため、CSSの見直しが必要なもの

次の要素は、セレクター名だけでなくHTML構造も変わっています。

• .ys-posts__content
  • v1: 投稿アイテム内のラッパー要素
  • v2: .ystdtb-posts__linkとして、アイテム全体のリンク要素に変更
• .ys-posts__thumbnail
  • v1: サムネイル周辺のラッパー要素
  • v2: .ystdtb-posts__thumbnailの<figure>要素に変更
• .ys-posts__title
  • v1: タイトル内にリンクを含む構造
  • v2: タイトルは.ystdtb-posts__title、リンクは外側の.ystdtb-posts__link
• .ys-posts__link
  • v1: タイトル部分のリンク
  • v2: .ystdtb-posts__linkとして、アイテム全体のリンクに変更
• .ratio.is-{比率}
  • v2: .ystdtb-posts__thumbnail.is-{比率}へ変更（例: .is-16-9, .is-4-3, .is-1-1）

削除されたもの

次のセレクターは、v2では使いません。

• .ratio__item
• .ratio__image

v2ではCSSのaspect-ratioを使ってサムネイルの縦横比を制御するため、上記のネスト要素は不要になりました。

記事一覧ブロックの「概要文の長さ」設定の廃止、「概要文の最大行数」設定の追加

記事一覧ブロックの「概要文の長さ」設定は削除されました。デザイン要件に応じて新しい「概要文の最大行数」設定へ置き換えてください

定義リストブロックの一部設定の変更

定義リストブロック（dl-column）で旧クラス .is-not-stacked-on-* / dl-column-width-* を使用している投稿は、エディターで開いて再保存してください

---