• aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. プログラミングの記事
  4. WordPress内でのショートコード使用方法メモ

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

  • 2016.04.15
  • プログラミング
  • WordPress
Updated: 2018.12.07
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の拡張子を除いた形で指定します。こうすることで外部ファイルの内容がページに出力されます。
XでシェアLINEで送るはてブに追加

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

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

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

keyword search

categories

  • WordPress(61)
  • JavaScript(49)
  • Vue.js(48)
  • CSS(46)
  • jQuery(34)
  • Nuxt.js(22)
  • Sass(21)
  • Gulp(17)
  • webpack(16)
  • PHP(14)
  • HTML(14)
  • GSAP(11)
  • React(10)
  • Vite(9)
  • Pug(9)
  • Laravel(8)
  • Cordova(8)
  • Linux(7)
  • Next.js(6)
  • Apache(5)
  • Shopify(4)
  • REST API(4)
  • Node.js(4)
  • Smarty(3)
  • Git(3)
  • JSON(3)
  • その他プログラミング(3)
  • Google Apps API(3)
  • Bootstrap(3)
  • 環境構築・システム(3)
  • TypeScript(2)
  • EJS(2)
  • RMS(2)
  • Docker(2)
  • Instagram API(2)
  • Excel VBA(2)
  • SVG(1)
  • Dart(1)
  • ECカートASP(1)
  • Markdown(1)
  • AMP(1)
  • Nginx(1)
  • XML(1)
  • shellscript(1)
  • Ruby(1)
  • MySQL(1)

recent articles

  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#6:PWA対応とビルド時のエラー
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#6:PWA対応とビルド時のエラー

    2024.12.25/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#5:アナリティクス・アドセンスの導入とサイトマップ作成
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#5:アナリティクス・アドセンスの導入とサイトマップ作成

    2024.08.26/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#4:静的・動的ルーティングとページ作成
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#4:静的・動的ルーティングとページ作成

    2024.07.31/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#3:メタ情報設定・ファイル最適化・ステート管理
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#3:メタ情報設定・ファイル最適化・ステート管理

    2024.06.30/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#2:コーディング環境の構築
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#2:コーディング環境の構築

    2024.05.29/Next.js
  • Next.jsとWordPressでヘッドレスCMSのサイトを作成する#1:インストール・導入
    read more

    Next.jsとWordPressでヘッドレスCMSのサイトを作成する#1:インストール・導入

    2024.04.30/Next.js
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト支援
  • クリエイティブ制作
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact