WordPress ボタンの作成(+ブロックエディタ&カスタムボタン) - WordPress 情報パッケージ
인기 WordPress テーマブルフセール 詳細

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

Last Updated:2022年10月26日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

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

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

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

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

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

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

カスタム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年末までにサポートおよびメンテナンスされ、その後必要に応じてサポートが拡張される可能性があります。 今はブロックエディタ機能が良くなりましたので、なるべくブロックエディタをご利用ください。

参照



2のコメント

コメント

  1. こんにちは 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年末までにのみ維持され、その後はメンテナンスの有無が不明です。

      応答

カフェで WordPress 情報を共有できます。

ありがとうございます!