WordPressでショートコードを作成する方法

ショートコードとは何か?
WordPressの記事や固定ページの編集画面では、普通に文章を書いていくか、HTMLとして入力するかしかできません。
普通に文章だけ書くのであればそれで問題ありませんが、もし記事や固定ページ内で、関連記事を出したり、お問い合わせフォームを出したり、PHPの処理も関わってくるものを間に挟みたい時があります。
そんな時に使えるのがショートコードというブラケット([])で囲まれた文字列です。
ショートコードを予め設定しておいて、編集画面で入力 → 保存すると、プレビュー時にはそのショートコードが展開され、HTMLとなった状態で表示されます。
また、PHPの処理を行わなくても、よく使う定型文などをショートコードに設定しておけば、それで済むようになりますし、後から定型文を修正すれば全てのページで定型文が一括で変わる。なんてこともできます。
ショートコードの作り方
今回はとりあえず、ショートコードで定型文を呼び出してみましょう。
functions.phpにadd_shortcode('ショートコード名', '呼び出す関数名');を追加するだけです(変更する前に、必ずバックアップを取っておきましょう)。
function shortcord_sample() {
return 'これはショートコードで定型文を呼び出すサンプルです';
}
add_shortcode('sample', 'shortcord_sample');コードを追加したら、保存して投稿の編集画面へアクセスして[sample]と入力して保存します。

プレビューを表示すると、ちゃんと「これはショートコードで定型文を呼び出すサンプルです」という文章が表示されているはずです。
add_shortcode('ショートコード名', '呼び出す関数名');の「ショートコード名」の方がブラケットで囲むテキスト、「呼び出す関数名」の方はfunctionの後に設定する関数名と一致させる必要があります。
関数内はreturnを使ってテキストを返しているだけです。
functions.php内は、PHPが使えるので、ここで色々と処理をして、最終的にreturnで値だけ返して上げて、それを表示する。というのがショートコードの仕組みになります。
引数を渡す
今のままだと、同じ定型文が出てくるだけですが、引数を渡すことで、別の定型文を出せたりもします。
function shortcord_sample($num) {
if ($num = 1) {
return '引数に1が設定されています';
}
return 'これはショートコードで定型文を呼び出すサンプルです';
}
add_shortcode('sample', 'shortcord_sample');
あとは編集画面で[sample 1]と入力してプレビューすると「引数に1が設定されています」と表示され、[sample 2]や[sample]と入力すると「これはショートコードで定型文を呼び出すサンプルです」と表示されます。
ショートコードで囲む
文字を囲んで、その囲んだテキストに対して何か行う。みたいな事をしたいときもあります。
そんな時は下記のようなコードを書いてあげます。
function shortcord_sample($num ,$content) {
return '<div class="sample">'.$content.'</div>';
}
add_shortcode('sample', 'shortcord_sample');文字を囲みたい時は2つ引数を設定して、2つ目の引数が囲まれた文字列になります。

あとは編集画面に移動して「[sample]ショートコードで囲む[/sample]」と入力してプレビューします。この時、HTML同様に閉じタグには「/(スラッシュ)」が必要なので忘れないように気をつけましょう。
すると、ちゃんと<div class="sample">ショートコードで囲む</div>というHTMLが生成されているはずです。



Visual Studio Codeのエクスプローラー上でファイル・フォルダの複製ができるようになる拡張機能「Duplicate action」
Vue CLIのtitleタグやmetaタグの設定方法
HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
HTML・CSSでWebサイト制作を行う際に必要なツール
Visual Studio Codeを使ったコード整形方法(Fomatter)
Visual Studio CodeをMarkdownエディターとして使用する
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定