ブロックエディッタのスタイルエフェクトの作り方/WordPress

備忘録_17 / Word Press_08

WordPressブロックエディッタにカスタムスタイルを追加してクリック一つでサイトのweb表現を増やします。
写真画像やイラストの画像に、縁取り枠・陰影を入る様な、ちょっとしたほんのひと手間だけでサイトがエレガンスに仕上がっている様に見えてしまうものです。
頭が悪くて文章を書くことが苦手、… 分かります。私にも経験があります。… いえ、誰よりも不自由しています。
だからこそ‼ こういったちょっとした部分で地道にポイントを稼いで行くのですよ‼

■ 画像の囲み効果の説明

[図_2] 右ツールバー赤枠の部分
投稿記事を作成するとき写真やイラストなど、（ .Jpeg .gif .bitmap）画像ファイルを挿し込みますが、このとき画像の縁に「縁枠」「角の丸み」「影」などのエフェクトを付けることが出来ます。また、それと同様の機能はCocoonにも備わっており、こちらはCocoon設定から行えます。しかし、少々不便なことはサイト全体の画像に適用されて一種類しか選べないことです。
そこでブロックエディッタのスタイルツールを活用します。スタイルツールはブロックエディッタにもとから備わっている機能ですが、しかし、選べるスタイルが「デフォルト」「角丸」のたった２種類しか実装されてないのです。
ですからそのスタイル数を増やします。この方法を使うとお好みのエフェクトを個別に指定する事が可能になります。

■ 画像の囲み効果を全体に適用する方法

全体に適用する方法と個別に適用する方法、どちらも使い方次第です。知っておくと便利ですから先に全体に適用する方法を説明しておきます。但し、こちらのエフェクトはサイト全体の画像ファイルに適応されてしまい、個別に変える等の融通が全く利きません。

■ 画像の囲み効果を個別に適用する方法の前準備

＂functions.php＂という、WordPressのプログラムのシステムの根幹に関わる重要なファイルを弄ります。雑に扱うと、WordPressそのものが動かなくなってしまいます。失敗すると画面が真っ白に表示されます。
弄る前にバックアップは必ず取っておきましょう。

具体的に言いますと、ブロックエディッタのスタイルツールのエフェクトを増やすために子テーマの＂functions.php＂に、スタイルの枚数分のプログラムをコピペを活用して書き加えていく作業を行います。
前回説明した子テーマですね。早速、ここで役に立ちます。

■ 画像の囲み効果を個別に適用する方法

[図_3] 赤枠の部分
この投稿記事の下部に「■ テンプレート集」があります。そこより以上の様にコピペを行ってください。

• 罫線のノートにプログラムが書かれたフレームの右上部分にマウスオーバーさせます。
  ＂Copy to clipboard＂と表示されます。
• そこをクリックしてください。
  PCのクリップボードにプログラム内容がコピーされ保持されました。

• ①[外観] → ②[テーマエディター] → ③[テーマのための関数(functions.php)] と、順番に開きます。
• 以下、④の説明です。

複数のエフェクトを追加したい場合には、途中一行開けて次々とコピペして行ってください。

• 最後に、⑤ [ファイルの更新] をクリックしてプログラムを反映させて下さい。

■ テンプレート集

register_block_style(
  'core/image',
  [
    'name'         => 'roundb',
    'label'        => '角丸２',
    'inline_style' => '.wp-block-image.is-style-roundb img { border-radius: 20px; }',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'shadowa',
    'label'        => 'ドロップシャドウ',
    'inline_style' => '.wp-block-image.is-style-shadowa img { box-shadow: 0px 2px 3px rgba(0,0,0,.3); }',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'bordera',
    'label'        => 'ピンク',
    'inline_style' => '.wp-block-image.is-style-bordera img {border:5px solid #ffdff9;}',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'borderb',
    'label'        => '水色',
    'inline_style' => '.wp-block-image.is-style-borderb img {border:5px solid #6dcff6;}',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'borderc',
    'label'        => 'グリーン',
    'inline_style' => '.wp-block-image.is-style-borderc img {border:5px solid #c4df9b;}',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'bordere',
    'label'        => '青色',
    'inline_style' => '.wp-block-image.is-style-bordere img {border:1px solid #0000ff;}',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'borderd',
    'label'        => '赤色',
    'inline_style' => '.wp-block-image.is-style-borderd img {border:1px solid #ed1c24;}',
  ]
);

・

---

・

register_block_style(
  'core/image',
  [
    'name'         => 'borderf',
    'label'        => '灰色',
    'inline_style' => '.wp-block-image.is-style-borderf img {border:1px solid #ebebeb;}',
  ]
);

・

---

・

もともと選べるスタイルが「デフォルト」「角丸」のたった２種類しか実装されてない事自体、不思議な話しです。
ゆくゆくはアップデートでこの様に選べるスタイルの種類が増えるのでないでしょうか？
それまでの間だけこの裏ワザは使えると思います。
画像の囲みエフェクトなんてフォトショップで画像処理する時に陰影表現を付けてしまえば良いだろ？… … ご指摘の通り、ただそれだけの事なのですが、しかし毎度毎度その処理をこなす作業を考えますと、やはりHTML上で表現できたほうが確実に早い上に楽です。

本日は以上です。本当に申し訳ございませんでした。

EyeCatch画像：中二病 / いらすとや