WordPress ボタンの作成（+ブロックエディタ＆カスタムボタン）

記事ではHTMLを使用してボタンを挿入しますが、 WordPressでは、基本エディタであるブロックエディタ（Gutenberg）で提供されるボタンブロックを使用して簡単にボタンを作成できます。 また、HTMLでボタンを追加することもできますが、この場合でもCSSクラスを使用してカスタムボタン（カスタムボタン）を作成できます。

エレメン などのページビルダーを使用している場合は、ページビルダーが提供するボタン要素を使用してボタンを追加できます。 Elementorの場合、マウスオーバー時に効果（テキストの色、背景色など）を設定し、アイコンを追加できます。

ティーストーリーでは、きれいなボタンを作成するにはHTML / CSSでボタンを作成できますが、 WordPressに比べて面倒です。ティーストーリーからボタンを簡単に作成して挿入したい場合は、次の記事を参照してください。

• ティーストーリーボタンを簡単に作成する方法

WordPress ボタンの作成：ブロックエディタのボタンブロックを使用する

WordPressの基本エディタであるブロックエディタで提供されているボタンブロックを使用して、さまざまなスタイルのボタンを作成できます。

以下はいくつかの例です。

下のビデオで WordPress Gutenberg 편집기でボタンブロックを追加する方法を見ることができます。

マウスオーバー効果は現在、ボタンブロックではサポートされていません。 マウスオーバー効果を入れたい場合」WordPress ボタンホバー効果を適用する（Gutenberg ボタンブロック）「を参考にしてください。

WordPressが更新され、ボタンにマウスを置くと、ボタンのテキストの色が赤に変わることが多くなりました。 この場合、CSSクラスをXNUMXつ指定し、hover colorを指定できます。 例：

.b-hover a:hover { color: white; }

ブロックエディタでブロックを追加するときは、ブロック挿入アイコンを使用することもできますが、「/ボタン」のように「/ブロック名」を入力して簡単にブロックを選択して挿入できます。 Gutenberg キーボードショートカットに関する次の記事を参照してください。

パターンとして保存して活用する

ブロックエディタ（Gutenberg）ではボタンなどをパターンで保存してから簡単に読み込むことができます。

初期パターン（再利用可能ブロック）の機能が少し不足していましたが、今は機能が向上し、私はボタンなどをパターンとして保存して活用しています。たとえば、次のようなリンクをパターンにして挿入しています。

ボタンを作成し、必要なCSSクラスを追加してスタイルを設定し（下記の「ブロックエディタのボタンブロックに適用する」セクションを参照）、パターンとして保存できます。以来、キーボードショートカットを使って簡単に呼び出すことができます。

ブロックエディタのパターンについては、次の記事を参照してください。

• WordPress ブロックエディタパターン（再利用可能ブロック）の使い方

参考として、定型句プログラムを一緒に活用すると、CSSクラスを簡単に追加できます。 （CSSクラス名を定型句として指定...）

• 無料定型句プログラムBeefText

カスタムHTMLボタンを使用する

オンラインボタンジェネレータサイトでボタンを生成する WordPressに適用することも可能です。

例えば、 ボタンジェネレータという無料のボタンジェネレータサイトでお気に入りのボタンを生成し、HTMLコードとCSSコードを WordPressに適用できます。

ボタンスタイルを選択し、必要に応じて色などを適切に変更してから、 Get Code（コードのインポート） ボタンをクリックすると、下図のようにボタンコードが生成されます。

たとえば、デフォルトで表示される緑色のボタンを選択すると、次のコードが生成されます。

<a href="#" class="myButton">green</a>

.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

上記のコードでは、最初の行はHTMLパーツで、残りはCSSパーツです。 複数のスタイルを使用している場合は、CSSクラス（上記では「myButton」）を適切に変更することをお勧めします。 CSSクラスを変更する場合は、HTMLパーツとCSSパーツの両方で一括変更できます。

CSSパーツは WordPress 管理者ページ»デザイン（ 또는 外観）»カスタマイズ»追加CSSに追加します。 CSSコードは一度だけ追加できます。

そしてHTMLパーツはブロックエディタで カスタムHTML ブロックに追加してください。 もちろん、テキストやリンクは適切に編集してください。 スタイルがボタンジェネレータサイトとは異なり、表示される場合はCSSを適切に変更する必要があります。

この方法はボタンを追加するたびに カスタムHTML ブロックを使用する必要があるため、あまりお勧めできません。

ブロックエディタのボタンブロックに適用する

次の方法で試すことができます。

1. カスタムCSSコードを追加します。
2. ボタンブロックにCSSクラスを割り当てます。

上記のように、カスタムCSSは WordPress 管理者ページ » デザイン » カスタマイズ » 追加のCSSに入力します。 ボタンジェネレータが提供するコードがうまく機能しない場合は、CSSコードを少し変更する必要があります。 基本的なCSSを覚えれば簡単に可能になります。

ブロックエディタでボタンを追加し、 追加のCSSクラス 部分にCSSクラス（myButtonなど）を入力します。

古典エディタを使用している場合は、HTMLでボタンを追加してCSSでスタイルをつかむ作業が必要になると思います。 WordPress 5.0以降では、ブロックエディタがデフォルトエディタに統合されました。 クラシックエディタプラグインは2022年末までにサポートおよびメンテナンスされ、その後必要に応じてサポートが拡張される可能性があります。 今はブロックエディタ機能が良くなりましたので、なるべくブロックエディタをご利用ください。

ブロックエディタでグラデーションボタンを作成する

次のボタンのようなグラデーション背景のボタンをブロックエディタで素早く簡単に作成できます。パターンを作成して活用する方法も、最後に簡単に説明されているので役に立ちます。

グラデーションボタンを作成する方法については、次のYouTubeのビデオを参照してください。

最後に、

以上で WordPress ブロックエディタでボタンを作成する方法と、ボタンを作成した後にパターン化してリサイクルする方法について説明しました。

WordPress/ リストナビメニューで特定のメニュー項目をボタンの形にしたい場合は、次の記事を参照してください。

• WordPress/履歴メニュー項目をボタンの形に変更する方法

参照

• WordPress Gutenberg（ブロックエディタ）テーブルブロックの使用
• 有用な Gutenberg ブロックプラグイン2種 - Stackable & Gutenberg Post Blocks