Cocoon設定画面にFont Awesome 6を追加する方法

はじめに

以下の質問に回答します。

Font Awesome 6に対応してほしい

はじめまして、こんにちは Cocoon設定でFont Awesomeの4か5のどちらを使用するか選択できますが ここでFont Awesome 6にも変更できるようになるといいなと思いました 6を使いたい理由はフリーアイコンの数が5の160...

wp-cocoon.com

Font Awesome 6では約500個の新しいアイコンが追加され、より多くのアイコンを利用できるようになりました。
また、Font Awesome 6は部分的に下位互換となっています。

Get the dev and design support you need | Font Awesome

Having trouble or got a specific question for us? We're here to help.

fontawesome.com

しかし、Cocoon設定→全体→サイトアイコンフォントは標準でFont Awesome 4かFont Awesome 5しか選べません。

そこで、Cocoon設定からFont Awesome 6を選択可能にします。

この記事では、この方法について説明します。

font-awesome @ 7.3.1 - Libraries - cdnjs

The iconic SVG, font, and CSS toolkit cdnjs is the free, open-source CDN for the web's most popular libraries. JavaScrip...

cdnjs.com

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// Cocoon設定（全体）に入力フォームを追加
add_filter('admin_input_form_tag', function ($res, $name) {
  if ($name == OP_SITE_ICON_FONT) {
    $res = str_replace('Font Awesome 5', 'Font Awesome 6', $res);
  }

  return $res;
}, 10, 2);


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  if (!is_site_icon_font_font_awesome_5()) {
    return;
  }

  wp_dequeue_style('font-awesome-style');
  wp_deregister_style('font-awesome-style');

  wp_register_style('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css', [], '6.7.2');
  wp_enqueue_style('font-awesome-style');
}, 20);


// Font Awesome 5のpreloadを削除
add_action('template_redirect', function () {
  ob_start(function ($buffer) {
    $buffer = preg_replace(
      '/<link[^>]+rel=["\']preload["\'][^>]+type=["\']font\/woff2["\'][^>]*>/i',
      '',
      $buffer
    );
    return $buffer;
  });
});

さいごに

今回紹介した方法を使えば、Font Awesome 6を簡単に利用可能になります。
従来のFont Awesome 5設定を上書きし、CDNからFont Awesome 6を読み込みつつ、不要なpreloadを削除することでパフォーマンスも最適化されます。
部分的な下位互換もあるため、既存アイコンもほとんど問題なく表示されます。
これでCocoonのサイトに豊富なアイコンを安全に追加できます。