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 ギャラリーを表示する。

まとめ

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

スポンサードリンク

関連コンテンツ

オススメ記事

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

【初心者向け】webpack入門。すぐに使える最も簡単な使い方

webpackは、複数のJavaScriptファイルをまとめてくれる、モジュールバンドラというものです。 今回は、webpack入門ということで、webpack5の使い方を紹介していきたいと思

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

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

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