【LION BLOG】ブログ内にボタンを設置できるショートコードを作成する方法

今回はLION BLOGに簡単にボタンを作成できるショートコードを作成していきます。

functions.phpに追記

子テーマのfunctions.phpの「下記ユーザーカスタマイズエリア」の下に以下のコードを追記します。

/*/////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
/////////////////////////////////////////////////*/

function shortcode_button($atts) {
    return '<div class="button-box"><a href="' . $atts["href"] . '" target="_blank" class="button">' . $atts["text"] . '</a></div>';
}
add_shortcode('button', 'shortcode_button');

style.cssに追記

子テーマのstyle.cssの「下記ユーザーカスタマイズエリア」の下に以下のコードを追記します。backgroundの色はお好みで変えてください。

/*/////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
/////////////////////////////////////////////////*/

.button-box {
  margin: 2em 0;
}
.button {
  background: #f0b200;
  color: #fff !important;
  padding: .8em 2em;
  display: inline-block;
  border-radius: 10px;
  font-weight: bold;
  transition: opacity .3s ease;
}
.button:hover {
  border-bottom: 0 !important;
  opacity: .6;
}

WordPressにショートコードを貼る

[button href="https://example.com" text="リンクを開く"]

ショートコードを貼り付けると以下のようなボタンができます。

まとめ

以上のように簡単な記述の追加でボタン作成のショートコードを作ることができます。ショートコードに引数を追加すればtarget=”=blank”の設定を追加したりすることもできますし、style.cssを編集すれば色やhoverアクションなどを変更することができます。

自分のオリジナルボタンを作成したい方はぜひチャレンジしてみましょう。