Spectraは、WordPressのブロックエディタに、より機能的なブロックを追加するプラグインです(旧Formerly, Ultimate Addons for Gutenberg)。このプラグインを導入すると、記事の見出しブロックに以下のようなものが追加されます。見出しはこのなかの「Heading」です。
このHeadingを利用すると、WordPress標準で用意されている見出しブロックよりもより豊富な種類の細かい設定が可能です。
この中にTypographyという欄がありますが、これはフォントの種類を選択できるものです。しかし、海外の方が作成したプラグインのため、日本語フォントは当然用意されていません。どれを選択しても、日本語のフォントはシステムの標準フォントになってしまいます（Windowsだとメイリオ、Macだとヒラギノ？）。
今回はこのTypographyに游ゴシックを追加したいと思います。
１．絶対にバックアップを取る
忘れないでください！結構複雑なファイルをこの後に編集します。念のためデータベースとファイル両方のバックアップを取ってください。バックアップの取り方は以下です。
２．以下3つのファイルに記述を追加する。
- \wp-content\plugins\ultimate-addons-for-gutenberg\admin-core\assets\build\dashboard-app.js
- \wp-content\plugins\ultimate-addons-for-gutenberg\blocks-config\uagb-controls\fonts.js
- \wp-content\plugins\ultimate-addons-for-gutenberg\dist\blocks.js
この3ファイルに追記します。すべて1行で書いてあります。挿入箇所を間違えないようにしてください！前後の文字列で検索をかけて該当箇所を探すと早いです。
dashboard-app.js
(t.Component),nl.defaultProps={defaultInputValue:"",defaultMenuIsOpen:!1,defaultValue:null},rl),ll=il,ol={
"Yu Mincho":{weight:["Default","100","200","300","400","500","600","700","800","900"]},"Yu Gothic":{weight:["Default","100","200","300","400","500","600","700","800","900"]},
Default:{weight:["Default","100","200","300","400","500","600","700","800","900"],google:!1},Arial:{weight:["Default","100","200","300","400","500","600","700","800","900"],google:!1},
fonts.js ファイルの上部に書いてあるので見つけやすいかも
const fonts={
'Yu Mincho':{weight:['Default','100','200','300','400','500','600','700','800','900'],i:["normal"]},'Yu Gothic':{weight:['Default','100','200','300','400','500','600','700','800','900'],i:["normal"]},
'Default':{weight:['Default','100','200','300','400','500','600','700','800','900'],google:!1},'Arial':{weight:['Default','100','200','300','400','500','600','700','800','900'],google:!1},
blocks.js
React.createElement("div",{className:"uagb-responsive-control-inner"},a[t]?a[t]:a.Desktop))}var ii={
"Yu Mincho":{weight:['Default','100','200','300','400','500','600','700','800','900'],i:["normal"]},"Yu Gothic":{weight:['Default','100','200','300','400','500','600','700','800','900'],i:["normal"]},
Default:{weight:["Default","100","200","300","400","500","600","700","800","900"],google:!1},Arial:{weight:["Default","100","200","300","400","500","600","700","800","900"],google:!1},
ファイルの編集方法はこちらをご覧ください。
３．ブロックエディタで確認
FTPアップロードが済んだら、最後に確認です。Headingブロックを選択して以下のような表示になっていればOKです！
注）ファイルの編集をミスしていると、ブロックエディタの表示がおかしくなったり、Spectraブロックが表示されないことがあります。その場合は、記事の保存をせずに画面を閉じて、再度ファイル編集をみなおすかバックアップの復元をしてください。
まとめ
Spectraは、Astraテーマのスターターテンプレートをインストールすると、一緒に追加されることが多いです。海外製テーマとプラグインですが、非常に使いやすいテーマだと思いますので、なんとか日本語でも使いやすい工夫を見つけて共有していきます！それでもホームページ作成が難しいという方はぜひ私のココナラサービスをご利用ください！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
