Spectraは、WordPressのブロックエディタに、より機能的なブロックを追加するプラグインです(旧Formerly, Ultimate Addons for Gutenberg)。このプラグインを導入すると、記事の見出しブロックに以下のようなものが追加されます。見出しはこのなかの「Heading」です。

Spectraの追加要素

このHeadingを利用すると、WordPress標準で用意されている見出しブロックよりもより豊富な種類の細かい設定が可能です。

Headingの設定内容

この中にTypographyという欄がありますが、これはフォントの種類を選択できるものです。しかし、海外の方が作成したプラグインのため、日本語フォントは当然用意されていません。どれを選択しても、日本語のフォントはシステムの標準フォントになってしまいます(Windowsだとメイリオ、Macだとヒラギノ?)。

今回はこのTypographyに游ゴシックを追加したいと思います。

追加した後のTypographyのフォントファミリー選択。游ゴシックと游明朝が使える。

1.絶対にバックアップを取る

忘れないでください!結構複雑なファイルをこの後に編集します。念のためデータベースとファイル両方のバックアップを取ってください。バックアップの取り方は以下です。

2.以下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},

ファイルの編集方法はこちらをご覧ください。

3.ブロックエディタで確認

FTPアップロードが済んだら、最後に確認です。Headingブロックを選択して以下のような表示になっていればOKです!

追加した後のTypographyのフォントファミリー選択。游ゴシックと游明朝が使える。

注)ファイルの編集をミスしていると、ブロックエディタの表示がおかしくなったり、Spectraブロックが表示されないことがあります。その場合は、記事の保存をせずに画面を閉じて、再度ファイル編集をみなおすかバックアップの復元をしてください。

まとめ

Spectraは、Astraテーマのスターターテンプレートをインストールすると、一緒に追加されることが多いです。海外製テーマとプラグインですが、非常に使いやすいテーマだと思いますので、なんとか日本語でも使いやすい工夫を見つけて共有していきます!それでもホームページ作成が難しいという方はぜひ私のココナラサービスをご利用ください!


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP