romanのWordPress工房

WordPressを使って気付いたことを伝えるブログ

記事作成用プラグイン

WordPressでボタンっぽいビジュアルを表示させたいなら「Shortcodes Ultimate」

文章だけのブログも良いですが、ちょっと少しだけアクセントを加えたくなるときってありますよね。

このページでは、WordPressで「ボタン」を表示させるプラグイン「Shortcodes Ultimate」をご紹介します。

Shortcodes Ultimate」のボタンでどんな感じ?

「ボタン」とは以下のような形です。↓

テストボタンだよ! テストボタンだよ!

以上に表示させているのは、一例で他にも様々な形があります。

設定方法

WordPressへのインストール手順は以下のようになります。

また、ここでは「ブロックエディタ」と「クラシックエディタ」で説明を分けます。

  1. WordPressの「プラグイン」→検索枠で「Shortcodes Ultimate」と検索
  2. インストール&有効化

表示のさせ方(ブロックエディタの場合)

  • エディタ上の「⊕」→「[ ]もしくは[/](ショートコードを挿入)」を選択(写真1)
(↑写真1)
  • 次に「ボタン」ぼ選択(写真2)
(↑写真2)
  • 各種設定を行う

「任意のURL」「ボタンのスタイル」「大きさ&色」「表示させたいテキスト」などを自分好みに設定して終了です。

ブロックエディタの場合、エディタ上は以下のような表示になります。(写真3)

(↑写真3)

実際のボタンの形を確認したい時は「プレビュー」で確認できます。

例えば、上記で表示させていたボタンは、エディタでは以下のように表示されます。(写真4)

(↑写真4)

以上(写真4の下の方)の様に表示させるための設定は以下の通りになります。

  • リンク:無設定(空白)
  • スタイル:3D
  • 背景:♯39ef2d
  • サイズ:5
  • コンテンツ:テストボタンだよ!

表示のさせ方(クラシックエディタの場合)

  • エディタ上部にある「[ ]ショートコードを挿入」を選択(写真5)
(↑写真5)

※ボタンを表示させる設定のやり方は(写真2)と同じです。

  • クラシックエディタでは以下(写真6)のようにコードで表示されます。
(↑写真6)

実際のボタンの形を確認したい時は「プレビュー」で確認できます。

返信する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です