【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アクションなどを変更することができます。
自分のオリジナルボタンを作成したい方はぜひチャレンジしてみましょう。
-
前の記事
【LION BLOG】Google Analyticsを設定する方法 2019.09.22
-
次の記事
【情報収集】最新のWEBサービスやアプリを発見できるサイト 2019.10.16