WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

公開 :

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。
改めまして、@It_is_Rです。

特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、今回はこのショートコードについて、詳しく解説していきたいと思います。

ショートコードの基本

では、基本的なショートコードを実際に作ってみましょう。
以下のソースをfunctions.phpに記入してください。

functions.php

function shortcode_func() {
  return "はじめてのショートコード";
}
add_shortcode('sample', 'shortcode_func');

記事の投稿ページで、次のコードを入力します。

記事の投稿ページ

[sample]

実行結果

はじめてのショートコード

すると、実際の記事には「はじめてのショートコード」と表示されます。
この様に、短いコードで様々な機能を追加できる様になるわけです。

これを応用して、様々な機能を作っていきます。

ショートコードで引数を使う

ショートコードは引数を使うことで力を発揮します。

functions.php

function shortcode_func($arg) {
  extract(shortcode_atts(array(
      'num' => '0'
  ), $arg));
  return "数値は{$num}です。";
}
add_shortcode('sample', 'shortcode_func');

記事の投稿ページ

[sample]
[sample num=10]

実行結果

数値は0です。
数値は10です。

3行目の’num’ => ‘0’で、初期値を0としておきます。
すると、引数がなかった場合でも、0という数値が表示される様になります。

引数が複数の場合

また、複数の引数を渡すことも可能です。

functions.php

function shortcode_func($arg) {
  extract(shortcode_atts(array(
      'num' => '0',
      'num2' => '0',
      'num3' => '0'
  ), $arg));
  return "数値は{$num}と{$num2}と{$num3}です。";
}
add_shortcode('sample', 'shortcode_func');

記事の投稿ページ

[sample num=10 num2=15 num3=20]

実行結果

数値は10と15と20です。

コンテンツを囲むタイプのショートコード(囲み型ショートコード)

HTMLなどの様な形の、コンテンツを囲むタイプのショートコードをつくることもできます。

functions.php

function shortcode_func($arg, $content="") {
  return "入力されたテキストは{$content}です。";
}
add_shortcode('sample', 'shortcode_func');

記事の投稿ページ

[sample]サンプル[/sample]

実行結果

入力されたテキストはサンプルです。

この様にコンテンツを囲む形のものも、かなり便利な使い方ができると思いますので、覚えておくといいと思います。

テーマ(テンプレート)内でショートコードを使う

記事の投稿ページからだけでなく、テンプレートのphpファイルでショートコードを使うこともできます。
しかし、ちょっとしたやり方があります。

コンテンツを囲まないタイプ(自己完結型ショートコード)の場合。

<?php echo do_shortcode('[sample]'); ?>

コンテンツを囲むタイプ(囲み型ショートコード)の場合。

<?php
  $text = 'サンプル';
  echo do_shortcode('[sample]'.$text.'[/sample]');
?>

ウィジェット内でショートコードを使う

ウィジェット内でショートコードを使うには、次のコードが必要な様です。
ただ、私の環境では、このコードを追加しなくても、ウィジェットでショートコードを使うことができました。(なんでだろ。

もしもウィジェット内でショートコードが使えない場合は、次のコードをfunctions.phpに追加してみてください。

functions.php

add_filter('widget_text', 'do_shortcode');

WordPressデフォルトのショートコード

WordPressにはデフォルトのショートコードがあります。
今回、使い方は解説しませんが、参考にしてみてください。

caption イメージにキャプションを付ける。
audio オーディオの埋め込みと再生。
video 動画の埋め込みと再生。
playlist プレイリストを表示する。
embed 埋め込みを囲む。最大サイズを指定する。
gallery ギャラリーを表示する。

まとめ

ショートコードはアイデア次第で様々な機能を追加することができます。
ぜひ面白いアイデアを形にしてみてください。

スポンサードリンク

おすすめの記事♪

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

[email protected]_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

Blenderで3D美少女キャラの作り方。その6(耳を作る。)

[email protected]_is_Rです。 もちろん記事書きながら今から作っていきます。 今回は耳を作っていきます。 耳は髪の毛でどうせ隠れてしまうかもしれませんが、とりあえず。 こ

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

[email protected]_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

Blenderで3D美少女キャラの作り方。その7(横顔を綺麗にする)

[email protected]_is_Rです。 この記事は次回書こうと思っている後ろ髪の作り方に繋げる為の記事みたいなものです。 なので、同じ様に作っていきたい人のみ読んでいただ

イラスト描いてみた。「向日葵と女子高生」

まだ本気出してないんじゃない。本気出したけど[email protected]_is_Rです。 努力すればいいってもんじゃないですね。生まれ持ったものがある。 関係ない話はいいとして、今回も前回に引き

Medibang Paint

MediBang Paint Proの使い方。4コマ漫画を描く8つの手順。

[email protected]_is_Rです。 さて、最近は本当にMediBang Paint Proが流行っているから凄いなと思っています。 そこで、今回はMediBang

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

blender

Blenderで3D美少女キャラの作り方。その4(前髪と横髪を描く。)

Blenderでの3Dキャラ制作の記事、長い期間放置して[email protected]_is_Rです。 前回までのキャラ作成は、顔ができたところまででした。 今回は。髪の毛を作っていきます。 さて、Bl

少し早いですが、夏をイメージした曲を作りました。

暑い夏は嫌いですが、寒い冬も嫌いです。春も鼻[email protected]_is_Rです。 そんなこんなで、少し早いですが、夏の一曲制作しました。 夏といえばやっぱり海! てなわけで、海をイメ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

[email protected][email protected]ゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ


コメントをどうぞ!

メールアドレスが公開されることはありません。




Games