steelydylan

ちょっと宣伝！！ブログのカスタマイズにお勧め！

https://mosya.dev

この勉強会の目的

今日のアジェンダ

時刻	内容	発表者
20:00 ~ 20:10	オープニング
20:10 ~ 20:30	SANGO 3.0リリース後に追加した新機能の紹介
20:30 ~ 20:50	サイドメニューやヘッターなどのカスタマイズ
20:50 ~ 21:00	SANGO Landで追加されたブロックの紹介
21:00 ~ 21:30	質問への回答やフリートーク

SANGO 3.0リリース後に追加した新機能

• 記事ごとの関連記事の選択機能

SANGO 3.0リリース後に追加した新機能

記事一覧ブロックで「更新順」を追加

SANGO 3.0リリース後に追加した新機能

Splideを使った新しいスライダーブロックを用意

• アクセシビリティ的にも速度的にもこちらがお勧め
• jQuery依存をなくすためにもこちらがお勧め

SANGO 3.0リリース後に追加した新機能

旧スライダーから新スライダーに切り替え可能です！

SANGO 3.0リリース後に追加した新機能

プラグインなしでプロフィールに写真を追加できるようになりました！

SANGO 3.0リリース後に追加した新機能

カスタムバリエーション機能

カスタマイズした独自のブロックを増やせる！！

SANGO 3.0リリース後に追加した新機能

SANGO Landでよく使うものを独自ブロック化するのがお勧め

SANGO 3.0リリース後に追加した新機能

コンテンツブロックのクリック計測機能

SANGO 3.0リリース後に追加した新機能

目次をダイアログで開く機能

SANGO 3.0リリース後に追加した新機能

段落ブロックの装飾追加

カスタム投稿タイプに対応

• 記事一覧ブロックでカスタム投稿タイプを選択可能
• 記事一覧ブロックでカスタム投稿タイプのタクソノミーを選択可能
• 関連ブロックでカスタム投稿タイプを選択可能

サイドメニューにはウィジェットグループを使おう

ウィジェットグループを使うと、タイトルとセットでサイドメニューにウィジェットを表示できます。 SANGO Landのブロックを使うのがお勧め！

https://sangoland.app/blocks/sidemenu

サイドメニューで部分的にウィジェットの影を消す

登録したウィジェットにnowidgetクラスをつけてください。

CSSのカスタマイズには共有CSSを使おう

共有CSSを使うと、全てのブロックで同じCSSを使えます！

ヘッダー、フッターのカスタマイズ

コンテンツブロックを使おう！

外観 → カスタマイズ → デザインレイアウト → コンテンツブロック

から設定できます!

SANGO Landのブロックを使うのがお勧め！

• https://sangoland.app/blocks/header
• https://sangoland.app/blocks/footer

フィルターを使った高度なカスタマイズ

「この記事を書いた人」のカスタマイズ

add_filter('sng_author_label', function () {
  return "この記事の監修者";
});

記事一覧のカードのカスタマイズ

https://sangoland.app/issues/4990ee4f-ed43-4a99-b3da-aba0a1c92f41

add_filter('sng_card_link', function($html, $id) {
  return "ここに加工したHTMLを返す";
});

フィルターを使った高度なカスタマイズ

ヘッダーのカスタマイズ

add_filter('sng_header', function($html) {
  return "ここに加工したHTMLを返す";
});

フッターのカスタマイズ

add_filter('sng_footer', function($html) {
  return "ここに加工したHTMLを返す";
});