WordPressでショートコード(short code)を利用する方法を解説【無料申し込みCTAボタンのショートコードを作成】

最終更新日:

Word Pressでは、ショートコードという機能があります。今回作成したのは、ショートコードを利用したCTAボタンです。

簡単に説明すると、ワードプレスの編集画面で、1分で無料申し込みしてみると入力すると、以下のような申し込みボタンが自動生成できるような機能です。

ショートコードを利用するメリット

ショートコードを利用するメリットは、以下の通りです。

  • 複雑な処理を、記事編集画面でやろうとすると、<a href="https://hoge.com" target="_blank"> 1分で無料登録してみる</a>のように書かなくてはならないので、時間がかかる。一方ショートカードを利用すると、簡単にCTAボタンのスタイリングを適応できる
  • 外注する際に、HTMLを理解していない人にショートコードを利用してもらうことができる

 

ショートコードの実装方法

ショートコードの実装方法としては、以下の通りです。

  • functions.php にショートコードを実装する方法を記入
  • style.css にリンクのCSSを作成する

 

functions.php にショートコードを実装する方法を記入

functions.phpに以下のようにコードを実装します。

  1. 実行する処理の関数を記述
  2. ショートコードとして呼び出すときの名前と、関数名を指定するadd_shortcode関数を記述

という流れになります。

該当するfunctions.phpのソースコードがこちらです。

//CTAのショートコード
function cta_func( $atts) { //1
extract(shortcode_atts(array(
'url' => "未入力です",
'text' => "未入力です"
), $atts));
return "<a href='$url' class='cta' target="_blank">$text</a>";
}
add_shortcode('cta', 'cta_func'); //2

extract関数は、配列から変数を定義する関数です。サンプルコードはこちらとなります。

<?php

/* $var_array はwddx_deserializeから返された配列と仮定します */

$size "large";
$var_array = array("color" => "blue",
                   "size"  => "medium",
                   "shape" => "sphere");
extract($var_arrayEXTR_PREFIX_SAME"wddx");

echo "$color$size$shape$wddx_size\n";

?>

上の例の出力は以下となります。

blue, large, sphere, medium

≫extract

「shortcode_atts」はユーザーがショートコードで指定した属性($atts)を、予め定義した属性($defaults_array)と結合し、必要に応じてデフォルト値をセットするWordpressの関数です。

≫shortcode_atts()

add_shortcode関数で呼び出し名と実行関数を記述します。

add_shortcode('cta', 'cta_func');

CSSの指定

style.cssに以下のように指定します。

/* cta */
a.cta {
background-color: rgb(44, 182, 150);
font-weight: bold;
max-width: 100%;
display: block;
text-align: center;
padding: 20px;
border-radius: 10px;
color: #ffffff !important;
margin: 40px 20px;
}

a.cta:hover {
opacity: 0.5;
transition: 0.5s;
}

WordPressのエディタから呼び出し

最後にWordPressのエディタから呼び出します。

1分で無料申し込みしてみる

これで、add_short_codes関数で定義した呼び出し名から関数が実行されます。