BLOG

Web制作

【WordPress】ACF PRO をつかってカスタムブロックを作成！

Date : 2024.12.22

Category : 一次創作

WordPressのカスタマイズは多少わかるけど、込み入ったこととなるとちょっと…

…なほたかが、ACF PRO をつかってカスタムブロックをつくることができた！というお話です。

(なんかモメてるらしいですが) みんなだいすき「Advanced Custom Fields」。
いつの間にか、このプラグインでカスタム投稿タイプ、カスタムタクソノミーまでつくれるようになってただけでも驚きだったのに、オプションページまで作れるようになってたとは… (いまさら

オプションページで繰り返しフィールドまで使えて、最強過ぎませんかね…
((ﾋｨﾋｨ言いながら functions.php にコード書いて設定ページ作ってた過去の自分ｪ…

さらには、なにやらACFのフィールドを「ブロック」にも適用できるとな…！？
残念ながらPRO版のみらしいですが…神過ぎますね。

カスタムブロックといえば…。

ブロックエディタでURL単体をぺろっ貼り付けると、勝手に「埋め込み」が適用されるのですが…
たいていの場合

「このコンテンツを埋め込めませんでした。」
余計なことをしておいて、「結局ダメでした！」。

…そんなモヤモヤを、カスタムブロックをつくることで (ついに) 解決できる！

しかしひとつ懸念が。

聞いた話では、カスタムブロックをつくるには React.js とかがつかえないとダメとかなんとか…？

そんな事になると学習コストがすごそうなので考えてしまうかもですが、
ダメ元で調べていたら、どうやらそんなことをしなくても良さそう！？

▼ 読んで勇気づけられた記事

秀丸だけ(?!)でWordPressのオリジナルブロックをお手軽につくってみる

ただ、コチラの例では入力周りも含めて自分で設定するタイプだったので、少しばかり内容が異なるようで… (よくわからずに進めたのもあり、メチャクチャはまってしまった)

結局は公式の記事をみながら進めました。(公式の推奨する「JSONに記載する方法」)

Create Your First ACF Block

このサイトは完全オリジナルのテーマをつかっているので (子テーマの対応の必要なし)、その点がまた異なりましたが…💦

試行錯誤の結果…こんなものが出来上がりました！

カスタムブロック「リッチリンク」TEST

WordPress、リンクを埋め込みしようとして、よく失敗するので…

サムネイル画像・テキストをマニュアル設定＆自分好みに表示できるカスタムブロックをつくりました！ACFは神さま…。

「外部リンクかどうか (真/偽)」のフィールドをつくり、外部リンクの時だけ「target=”_blank” をつける」「別窓で開く旨を示すアイコンを表示する」設定をしています。

これで、Wordpressに埋め込みを拒否られたとき・Wordpress標準の埋め込みリンクが気に入らないときにも、イイかんじにリンクを設置できます。やったー！🙌

ACF PRO をつかえば、ポンコツほたかでもカスタムブロックをつくることができました！

よくわからないけど、カスタムブロックをつくりたい…なひとの、わずかな勇気につながりますように…

ハマりポイント

今回ハマって時間がかかってしまったポイントも書いておきます…
前提として「仕組みとか色々とよくわからないままやった」ので、くわしくわかっていらっしゃる方々にとっては「当たり前やん」な事かもですが…笑

acf-json フォルダをつくる

しれっと書いてて見逃してました笑
が、大事なものらしいです。ACF側でフィールドを設定→保存したところ、その設定データのファイルが自動出力され格納されていました。

日本語版Wordpressの公式にある記述を使用するとうまくいかなかった

"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"render": "file:./render.php",

↑この辺を追記したりしたら失敗しました…
ACFの使用を前提とした場合は、WP公式が提示しているやり方とも若干変わるっぽいです。

記号の使い方

"name": "acf/testimonial",

name には、必ず「acf/」などと「名前空間」の指定をしなければならない…とのことですが、コレを入れるとうごかなくなり、消すと動き出す…という現象にしばらく悩まされました。

結論からすると「acf/」のあとの方が問題でした。
ここにアンスコをつかうと良くないっぽいです。
(WordPressの自動出力スクリプトなどでは、アンスコではなくすべてハイフンがつかわれているので、その関係？)

エディタなんかでは、アンスコをつかった方が、ダブルクリックで一気に選択出来ていいんですけどね…
結局はどちらの記号もつかわない名称で登録、解決しました。

追記

実装出来て、一呼吸着いたので、ファイル名などをもっと自分で管理しやすいように変更してみたり…

その中で、CSSをJSON内で読み込むと、「今回作ったブロックをつかっていなくても」「ヘッダー内に直書き出力される」ことがわかりました。CSSの内容は大したことないので、ページのパフォーマンス的にはそこまで気にするほどではないですが…ヘッダーは極力すっきりさせたいです。

というわけで、JSONの方のCSS設定を削除し、

  "name": "acf/richlink",
  "title": "カスタムリッチリンク",
  "description": "サムネイル画像、テキスト等を手動設定できます",
  "style": ["file:./style.css"], // ← これを削除

functions.php のほうに、「このブロックの使用があるときのみ」読み込むようにします

add_action(
  'init',
  function () {
    wp_enqueue_block_style(
      'acf/richlink',
      array(
        'handle' => 'acf-richlink-style',
        'src' => get_theme_file_uri('/blocks/richlink/style.css'),
        //'path' => get_theme_file_path('/blocks/richlink/style.css')
      )
    );
  }
);

“src” と “path”、両方入れると相変わらずヘッダー内に直書きで出てしまうので、結局 “path” の方は消しました。

…が、あれ…このブロックをつかっていない記事でも読み込まれてる……？？

まあ、直書きで出ることは無くなったので、いったんそれで良しとして、後日調べてみますかね…💧

↑こういうコードハイライターとか、いろいろプラグインを入れている以上しかたないのですが、極力ヘッダーはキレイにしたいもの…。

城の手入れ

Date : 2024.12.01

Category : 一次創作

とつぜんコード書いたりしらべたりしたい欲が出てきたので…
とてもとても久々に、城 (という名の自分のサイト) の手入れをしました。

コードの見直し

非推奨になっていた関数やら、昔未熟だったころに書いた非効率なコードを書きなおしました。
外観的にはほとんど変わりは無いですが…

CSSを SASS → 1行CSS に変更したり、JavaScriptを統廃合したり…
多少はパフォーマンス向上してるといいな…

とりあえず、自分の成長が実感できて良かったです。

セキュリティ対策対策

WordPressの自動出力スクリプトがいくつもあって、うざいナーとおもいながら確認していたら…

「oEmbed (JSON)」「oEmbed (XML)」の中身をなんとなく見てみたところ、なんと「見えたらよろしくないデータ」までバッチリ出ていたではありませんか…！

やばいやばいと至急対応。

手っ取り早いのは、このoEmbedの自動出力を無効化することだと思いますが…
万が一だれかがうちの記事を埋め込もうとした場合に不格好なことになったらやだナー…という不安から、無効にしていませんでした…

とりあえず、気づいてよかった。

SEO対策アップデート

記事ページを中心に、「構造化タグ」なるものを追加してみました。
個人サイトレベルで、どこまで効果があるものなのかはわかりませんが…
とりあえず、少し経ったらまた様子をみてみます。

Googleも推奨している「JSON-LD」形式を採用。

ただ、一部のコンテンツタイプ (「WebSite」など) は Search Console で認識してくれないらしく…
エラーチェックなどする場合は、Search Console ではなく「Schema.org」の検証ツールをつかった方が良さそうです。

パンくずリストの構造化タグは、使用しているプラグイン「Breadcrumb NavXT」のほうで出力してくれます。(bcn_display_json_ld() 関数で実装)

ただ、プラグインのデフォルトテンプレートが「RDFa」形式に対応したものだったので (だいぶ前からつかっているから？)、構造化タグ情報が2つ入っている状態…
なおした方が良いのかな💦

Home	「WebSite」「SiteNavigationElement」「ItemList」 ※Homeには新着情報集みたいな役目もあるので、いちおうアイテムリストも追加…SEO的にどうなのかは不明
アーカイブページ	「BreadcrumbList」「ItemList」 ※アーカイブページ特化のものは無いっぽいので、「ItemList」にしてみました…
投稿詳細ページ	「BreadcrumbList」「BlogPosting」