WordPress ボタンの作成(+ブロックエディタ&カスタムボタン)

Last Updated:2024年06月12日| | 7のコメント

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

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

エレメントボタンエレメント
エレメントボタンエレメント

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressでカスタムHTMLボタンを使用する - ボタンジェネレータ

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

<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クラス 部分にCSSクラス(myButtonなど)を入力します。

WordPress ボタンの作成(+ブロックエディタ&カスタムボタン)2

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

参照


7のコメント

コメント

  1. 本コンテンツに使用されたボタンデザイン生成サイトはどのようなものですか? myCustomBtnです!

    応答
    • myCustomBtnというCSSクラスを指定すると、青いトーンのボタンになるようにコードを追加しました。

      スタイルはButton Generatorサイトで作成し、アプリケーションを試してください。

      応答
  2. ブロックエディタの丸いボタンブロックにhoverバックグラウンドカラーを入れると、なぜ色がエッジにのみ適用され、背景には適用できないのですか?

    応答
  3. こんにちは WordPress 初心者です。
    いつもたくさん学んでいます。
    私は古典エディタを書いています。
    「古典エディタを使用している場合は、HTMLでボタンを追加してCSSでスタイルをつかむ作業が必要になると思います」
    この部分について詳しく説明してもらえますか?
    いつもありがとうございます。

    応答
    • こんにちは、CHOさん。 方法は上記の記事で実際に説明されています。 HTMLコード部分を適切な場所に追加し、CSS部分を ルックス>ユーザー定義>追加CSS セクションに入力してください。 古典エディタでは テキストモードでHTMLコードを追加できます。

      CSSについて少し知っておくと、ボタンの書式を好きなように変更できます。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/

      本文に言及しましたが、ブロックエディタ機能は今や大幅に改善され安定化されているので、可能な限りブロックエディタ(Gutenberg)を使用してください。 WordPress 5.0以降では、ブロックエディタはデフォルトエディタです。 クラシックエディタ(Classic Editor)プラグインは2022年末までにのみ維持され、その後はメンテナンスの有無が不明です。

      応答
割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy