WordPress内でのショートコード使用方法メモ
最終更新日: Update!!
WordPressでは、よく使うテキストなどのパーツやプログラムなどをショートコードとして登録することができます。ショートコードとは [ ] で囲まれた関数のようなもので、短い記述で書くことができます。このショートコードは基本的に投稿エディタ内で使いますので、間接的にエディタ内でプログラムを実行ができることになります。
ショートコードを登録し、エディタ内で使用する
まずはfunctions.phpにショートコードを登録します。まずはショートコードの出力結果を返り値とする関数を定義し、add_shortcode関数でショートコード名と関数を紐付けします。 【PHP(functions.php)】function shortcodeFunc1() { return 'ショートコードで出力する内容'; } add_shortcode('shortcode_1', 'shortcodeFunc1'); // ('ショートコード名','ショートコード関数名')これで投稿エディタ内で設定したショートコード[shortcode_1]が使用できるようになります。 【投稿エリア内の入力/出力結果】
//入力 [shortcode_1] //出力 ショートコードで出力する内容
ショートコードをタグのように囲んで使えるようにする
【PHP(functions.php)】function shortcodeFunc2( $atts, $content = null ) { return '<div>' . $content . '</div>'; } add_shortcode('shortcode_2', 'shortcodeFunc2'); // ('ショートコード名','ショートコード関数名')$contentの部分がショートコードで囲まれる部分になります 【投稿エリア内の入力/出力結果】
//入力 [shortcode_2]ショートコードで囲まれる内容[/shortcode_2] //出力 <div>ショートコードで囲まれる内容</div>
引数を指定したショートコードを使う
【PHP(functions.php)】function shortcodeFunc3( $arg ) { extract ( shortcode_atts ( array ( 'argument1' => 'default1', // '引数名' => '引数が空の場合のデフォルト値' 'argument2' => 'default2', 'argument3' => 'default3', ), $arg ) ); return 'ショートコードの引数→' . $argument1 . $argument2 . $argument3; } add_shortcode('shortcode_3', 'shortcodeFunc3'); // ('ショートコード名','ショートコード関数名')【投稿エリア内の入力/出力結果】
//入力 [shortcode_3 argument1=あいうえお argument2=アイウエオ] //出力 ショートコードの引数→あいうえおアイウエオdefault3この引数を使ったショートコードは、下記のように属性と値を指定するHTMLの出力などに便利です。 【PHP(functions.php)】
function shortcodeFunc3( $arg ) { extract ( shortcode_atts ( array ( 'url' => '' ), $arg ) ); return '<a href="' . $url . '">' . $content . '</a>'; } add_shortcode('shortcode_3', 'shortcodeFunc3');【投稿エリア内の入力/出力結果】
//入力 [shortcode_3 url=http://example.com]リンクテキスト[/shortcode_3] //出力 <a href="http://example.com">リンクテキスト</a>
ショートコードをテンプレートファイル(PHPファイル)内で使用
ショートコードは通常エディタ内で使用しますが、PHPのテンプレートファイル内へ直接書き込む場合は次のように記述します。 【PHP(sample-template.php)】<?php echo do_shortcode('[shortcode_1]'); ?> // do_shortcode('[ショートコード名]')この記述方法は定番プラグイン「Contact Form 7」のフォームをテンプレートファイルに直接設置する場合によく使用されます。 【PHP(sample-template.php)】
<?php echo do_shortcode('[contact-form-7 id="0000" title="Contact form 1"]'); ?>
外部ファイルをショートコードで呼び出す
テンプレートファイルなどの外部ファイルを投稿エディタ内で呼び出したい時に使える方法です。まずは下記の関数をfunctions.phpに記述します。 【PHP(functions.php)】function IncludeShortCode($params = array()) { extract(shortcode_atts(array( 'file' => 'default' ), $params)); ob_start(); include(get_theme_root().'/'.get_template()."/まとめておくフォルダ名/$file.php"); return ob_get_clean(); } add_shortcode('shortcode_file', 'IncludeShortCode');ショートコード用の外部ファイルなどはテーマファイル内にフォルダを作成しまとめておくと管理が楽なので、上記コードもそれを前提にしています。 【投稿エリア内の入力】
//入力 [shortcode_file file='外部ファイル名']fileの値に呼び出す外部ファイル名を.phpの拡張子を除いた形で指定します。こうすることで外部ファイルの内容がページに出力されます。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories