OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

WordPress内でのショートコード使用方法メモ

最終更新日:2018.12.7 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の拡張子を除いた形で指定します。こうすることで外部ファイルの内容がページに出力されます。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram