WordPressのショートコードを自作するための基礎知識

有名なプラグインとしてUltimate Shortcodeがあるが、欲しいショートコードがUltimate Shortcodeにない場合がある。オリジナルのショートコードの作成方法をまとめた。

WordPressのショートコードとは

ショートコードとは、記事装飾のためのWordPressの機能。

 

本来であれば記事を装飾するには、HTMLとCSSで書く必要があるが、頻繁に使う場合、いちいちHTMLとCSSでテキストを装飾しなければならない。よく使うパターンであれば、あらかじめショートコードを作成しておくことで、いちいちHTMLとCSSでテキストを装飾しなくてすむ。

 

ショートコード作成の基本1:シンプルにテキストやコードを出力する

シンプルにテキストやコードを出力するための文法([ショートコード]という形で記入)。

基本文法

function.php


add_shortcode('ショートコード名', 'ショートコードを実行する関数名');
function ショートコードを実行する関数名() {
return 'テキストを表示する';
}

WordPressの編集画面にて[ショートコード名]と書くだけで、「テキストを表示する」と出力される。

 

使い方の例

例えば、装飾したTwitterリンクを作成する場合

function.php


//装飾したtwitterリンクの作成
add_shortcode('twitter-link', 'makeTwitterDecoration');
function makeTwitterDecoration() {
return '<div class="article-to-sns article-to-twitter">
<div><i class="fab fa-twitter"></i></div>
<p><a href="twitter.com/uotomiz">@uotomiz</a></p>
</div>';
}

 

WordPressの編集画面にて[twitter-link]と書くだけで、下記のhtmlコードが出力される。

 

<div class="article-to-sns article-to-twitter">
<div><i class="fab fa-twitter"></i></div>
<p><a href="twitter.com/uotomiz">@uotomiz</a></p>
</div>

 

出力されるHTMLを元に、CSSを指定する。

 

style.css


.article-to-sns { margin: 5px 0; font-family: futura-pt, futura, sans-serif; background: #333333; font-weight: bold; font-size: 16px; width: 250px; text-align: center; display: flex; }

.article-to-sns div { background: #1da1f2; width: 53px; height: 53px; color: #fff; }

.article-to-sns div i { display: block; padding: 15px 0; color: #fff; font-size: 28px; }

.article-to-sns p { text-align: left; margin-left: 15px; display: block; width: 100%; flex-basis: auto; }

.article-to-sns p a { display: block; padding: 15px 0; color: #fff; width: 100%; }

 

WordPressの編集画面にて[twitter-link]と書くだけで、実際のサイト画面には次のように表示される。

 

@uotomiz

 

ショートコード作成の基本2:テキストをショートコードのタグ囲む

テキストをショートコードのタグ囲むための文法([ショートコード]サンプルテキスト[/ショートコード]という形で記入)。

 

基本文法

function.php


add_shortcode('ショートコード名', 'ショートコードを実行する関数名');
function ショートコードを実行する関数名( $atts, $content = null ) {
return '<div>' . $content . '</div>';
}

WordPressの編集画面にて[ショートコード名]サンプルテキスト[/ショートコード名]と書くだけで、「<div>サンプルテキスト</div>」と出力される。

 

使い方の例

例えば、テキストを装飾したい場合

function.php


add_shortcode('text-decoration', 'makeTextDecoration');
function makeTextDecoration( $atts, $content = null ) {
return '<div class="deco">' . $content . '</div>';
}

 

WordPressの編集画面にて[text-decoration]装飾されたテキスト[/text-decoration]と書くだけで、下記のhtmlコードが出力される。

 

<div class="deco">装飾されたテキスト</div>

 

出力されるHTMLを元に、CSSを指定する。

 

style.css

.box { border: solid 2px gray; padding: 15px; margin: 10px 0; }

 

WordPressの編集画面にて[text-decoration]装飾されたテキスト[/text-decoration]と書くだけで、実際のサイト画面には次のように表示される。

 

装飾されたテキスト

 

 

ショートコード作成の基本3:タグ内に変数を記入する

タグ内に変数を記入する([ショートコード 変数名=”変数に入れる値”]という形で記入)。

 

基本文法

function.php


add_shortcode('ショートコード名', 'ショートコードを実行する関数名');
function ショートコードを実行する関数名2( $atts) {
extract(shortcode_atts(array(
'変数'=>"",
),$atts));
return '<div>'.$変数1'.'</div>';
}

WordPressの編集画面にて[ショートコード名 変数=”サンプルテキスト”]と書くだけで、「<div>サンプルテキスト</div>」と出力される。

 

使い方の例

function.php


add_shortcode('link-decoration', 'linkDecoration');
function linkDecoratione( $atts) {
extract(shortcode_atts(array(
'url'=>"",
),$atts));

return '<a class="link" href="'.$url.'">'.$url.'</a>';
}

 

WordPressの編集画面にて[link-decoration url=”example.com”]と書くだけで、下記のhtmlコードが出力される。

<a class="link" href="example.com">example.com</a>

 

出力されるHTMLを元に、CSSを指定する。

 

style.css

a.link { font-size: 12px; background: #393939; color: #fff; padding: 0 5px; display: inline-block; border-radius: 5px; }

 

WordPressの編集画面にて[link-decoration url=”example.com”]と書くだけで、実際のサイト画面には次のように表示される。

 

example.com

 

終わりに

ショートコードを用いることで、ブログカードを作ったりできる。

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO