サイトをさらに改修

Date : 2025.05.26

Category : 一次創作/Web制作/お知らせ

Tags : 音楽/Webサイト/素材

引き続き、サイトをいろいろ改修して回っていますよー。

ブログのアーカイブページをコンパクト化

さいきん、How-To など長めの記事を書くことも出てきたので…

いままでは、ブログのアーカイブページで「記事内容全表示」状態だったのですが、それを「”抜粋” のみ表示＋ “続きを読む” リンクを追加」の方針に変更しました。

多少は見やすくなったかな？

カスタムブロック「目次」実装

↑この記事の上にもあるコレです！！🙌

アーカイブページをコンパクト化したのと同じ理由 (=長い記事が出てきた) で、必要な情報にすぐ飛べるよう、ページ内移動できる目次のパーツを作りました。

React.jsなどは扱えませんので、例のごとく ACF Pro 様様様にお世話になっております。笑

設定は (いまのところ) これだけ。
ここで設定された見出しタグまでを取得 → 目次生成とリンク設定 … という処理を自動化しました。
らくちん！🙌

しかしWordpressのブロックエディタ、なにもしない場合、記事の章ごとに<section>で囲んでくれたりしませんからね…見出しの親子関係など細かく処理しようとすると、結構面倒…。

それでも頑張ってスマートなコードにした…はず…たぶん。
でも管理画面でも反映されるように…まではやってない爆
一方、せっかく「アーカイブページで記事を全表示している場合、目次を使用している記事同士の情報が混線しないようにする」などなどの処理は丁寧にやったのに、前述の改修により無意味にｗｗｗ

今回はJavaScriptでの処理が大半なので…新たにcustomblock.jsなるものを作成し、ブロックを使用する場面で読み込まれるようにしました。

add_action('init', 'custom_block_styles');
function custom_block_styles() {
  wp_enqueue_block_style(
    'acf/index',
    array(
      'handle' => 'dp-customblock',
      'src' => home_url('/css/customblock.css'),
    )
  );
  wp_enqueue_script(
    'dp-customblock',
    home_url('/js/customblock.js'),
    array(),
    false,
    true
  );
}

調べたのですが、どうやらwp_enqueue_block_script()的な関数はないらしく…
とりあえず↑で問題なかったので、良いのかな………

それにしてもカスタムブロック、いろいろ作りためると楽しい＆便利ですね👍
ありがとう ACF Pro …。