1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

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

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

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

目次
  1. ショートコードの基本
  2. ショートコードで引数を使う
  3. コンテンツを囲むタイプのショートコード(囲み型ショートコード)
  4. テーマ(テンプレート)内でショートコードを使う
  5. ウィジェット内でショートコードを使う
  6. WordPressデフォルトのショートコード
  7. まとめ

ショートコードの基本

では、基本的なショートコードを実際に作ってみましょう。
以下のソースを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 ギャラリーを表示する。

まとめ

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

スポンサードリンク

関連コンテンツ

オススメ記事

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。 そこで今回は、JavaScriptにおける変数の使

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です