0%

Programmingプログラミングナレッジ

Posted:2016.04.15

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

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 shortcodeFunc2( $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

 

ショートコードをテンプレートファイル(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の拡張子を除いた形で指定します。こうすることで外部ファイルの内容がページに出力されます。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】