WordPress オリジナルショートコードの作成方法

概要説明

プラグインを使って管理することが多いですがfunctions.phpに記述を加えることでショートコードを追加することが可能です。PHPからもショートコードは利用可能です。広告用のコード、ウィジェット、何回も使う記述はショートコード管理がおすすめです。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function my_short_code_name() {
// 処理内容をこちらに記述
}
add_shortcode('任意のショートコード名', 'my_short_code_name');
function my_short_code_name() { // 処理内容をこちらに記述 } add_shortcode('任意のショートコード名', 'my_short_code_name');
function my_short_code_name() {
    // 処理内容をこちらに記述
}
add_shortcode('任意のショートコード名', 'my_short_code_name');
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[任意のショートコード名]
[任意のショートコード名]
[任意のショートコード名]

使用時は上記の書式で使用します

例 ) Google AdSense呼び出し用ショートコード

functions.php
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*----------------------------------------------------
ショートコード : アドセンス表示
----------------------------------------------------*/
function my_short_code_adsense() {
$code = <<< EOF
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxx" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="xxx"
data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
echo $code;
}
add_shortcode('ad', 'my_short_code_adsense');
/*---------------------------------------------------- ショートコード : アドセンス表示 ----------------------------------------------------*/ function my_short_code_adsense() { $code = <<< EOF <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxx" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="xxx" data-ad-slot="xxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> EOF; echo $code; } add_shortcode('ad', 'my_short_code_adsense');
/*----------------------------------------------------
 ショートコード : アドセンス表示
----------------------------------------------------*/
function my_short_code_adsense() {
    $code = <<< EOF
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxx" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="xxx"
     data-ad-slot="xxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
    echo $code;
}
add_shortcode('ad', 'my_short_code_adsense');
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[ad] で使用可能
[ad] で使用可能
[ad] で使用可能

 

例 ) 投稿IDを渡してパーマリンクを表示

functions.php
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*----------------------------------------------------
ショートコード : パーマリンク取得 ( 引数 : id )
----------------------------------------------------*/
function my_short_code_get_permalink($atts) {
extract( shortcode_atts( array(
'id' => '',
), $atts ) );
return get_permalink( $atts['id'] );
}
add_shortcode('link', 'my_short_code_get_permalink');
/*---------------------------------------------------- ショートコード : パーマリンク取得 ( 引数 : id ) ----------------------------------------------------*/ function my_short_code_get_permalink($atts) { extract( shortcode_atts( array( 'id' => '', ), $atts ) ); return get_permalink( $atts['id'] ); } add_shortcode('link', 'my_short_code_get_permalink');
/*----------------------------------------------------
 ショートコード : パーマリンク取得 ( 引数 : id )
----------------------------------------------------*/
function my_short_code_get_permalink($atts) {
    extract( shortcode_atts( array(
        'id' => '',
    ), $atts ) );
    return get_permalink( $atts['id'] );
}
add_shortcode('link', 'my_short_code_get_permalink');
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[link id=投稿ID] で使用可能
// 結果 ) https://functions.fs-create.net/archives/92
[link id=投稿ID] で使用可能 // 結果 ) https://functions.fs-create.net/archives/92
[link id=投稿ID] で使用可能

// 結果 ) https://functions.fs-create.net/archives/92

例 ) パーマリンクを使用したaタグの取得

functions.php
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*----------------------------------------------------
ショートコード : タイトルリンクタグ取得 ( 引数 : id )
----------------------------------------------------*/
function my_short_code_get_post_link( $atts ) {
extract( shortcode_atts( array(
'id' => '',
), $atts ) );
return '<a href="'.get_permalink( $atts['id'] ).'">'.get_the_title( $atts['id'] ) . '</a>';
}
add_shortcode('linka', 'my_short_code_get_post_link');
/*---------------------------------------------------- ショートコード : タイトルリンクタグ取得 ( 引数 : id ) ----------------------------------------------------*/ function my_short_code_get_post_link( $atts ) { extract( shortcode_atts( array( 'id' => '', ), $atts ) ); return '<a href="'.get_permalink( $atts['id'] ).'">'.get_the_title( $atts['id'] ) . '</a>'; } add_shortcode('linka', 'my_short_code_get_post_link');
/*----------------------------------------------------
 ショートコード : タイトルリンクタグ取得 ( 引数 : id )
----------------------------------------------------*/
function my_short_code_get_post_link( $atts ) {
    extract( shortcode_atts( array(
        'id' => '',
    ), $atts ) );
    return '<a href="'.get_permalink( $atts['id'] ).'">'.get_the_title( $atts['id'] ) . '</a>';
}
add_shortcode('linka', 'my_short_code_get_post_link');
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[linka id=投稿ID] で使用可能
// 結果 )
[linka id=投稿ID] で使用可能 // 結果 )
[linka id=投稿ID] で使用可能

// 結果 )

オリジナルショートコードを作成

PHPからショートコードを使用する場合

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php echo do_shortcode('[ad]'); ?>
<?php echo do_shortcode('[link id="投稿ID"]'); ?>
<?php echo do_shortcode('[ad]'); ?> <?php echo do_shortcode('[link id="投稿ID"]'); ?>
<?php echo do_shortcode('[ad]'); ?>
<?php echo do_shortcode('[link id="投稿ID"]'); ?>

WordPress Developer Resources

関連機能

  1. WordPress 永続オブジェクトキャッシュAPC設定を設定して高速化 (エックスサーバー)

  2. RSSフィードにnoindexヘッダーを追加 ( Google Search Console 対策 )

  3. ファイル名表示機能風エリアを追加「Enlighter – Customizable Syntax Highlighter」プラグイン

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

「負けたことがある」というのが
いつか大きな財産になる

SLAM DUNK
by 堂本五郎

Profile

PAGE TOP
Amazon プライム対象