本ページはプロモーションが含まれています

HTMLを書かずに一発呼び出し！CSSボタンをWordPressのショートコードにする方法

公開日

前回の記事では、クリック率を上げる「おしゃれなCSSボタンの作り方」をご紹介しました。しかし、実際にブログを書くたびに毎回 <a href="..." class="kz-btn">ボタン</a> とHTMLを手打ちするのは少し面倒ですよね。

WordPressには、そんな面倒な作業を解消する「ショートコード」という素晴らしい機能があります。

今回は、長くて複雑なHTMLタグを [kz_btn url="リンク先"]テキスト[/kz_btn] という短いコードだけで一発で呼び出せるようにする、実務直結のカスタマイズ方法を解説します！

💡 ショートコード化するメリット
  • 圧倒的な時短： ブログ執筆のスピードが格段に上がります。
  • ミスを防ぐ： クラス名の打ち間違いや閉じタグ忘れがなくなります。
  • 一括管理： 後からHTML構造を変えたくなった時、一箇所直すだけで全記事に反映されます。

functions.phpにコードを追加する

ショートコードを作成するには、WordPressのテーマファイルである functions.php に少しだけPHPのコードを追記します。

⚠️ 超重要：必ずバックアップを取ること！

functions.php はWordPressの心臓部です。全角スペースが1つ混じったり、カンマが抜き落ちたりするだけで画面が真っ白になり、サイトにアクセスできなくなる（エラーで落ちる）危険があります。

編集する前は、必ずFTPソフトやサーバーのファイルマネージャーから functions.php のバックアップを手元にダウンロードしておいてください。（※前々回ご紹介した「Local」のテスト環境で先に試すのが最も安全です！）

追加するPHPコード

WordPressの「外観」＞「テーマファイルエディター」から functions.php を開き、ファイルの一番下に以下のコードをそのままコピペして保存してください。

/* =========================================
   自作ボタンのショートコード化 [kz_btn]
========================================= */
function kazoolog_button_shortcode( $atts, $content = null ) {
    // 属性の初期値を設定
    $atts = shortcode_atts(
        array(
            'url'    => '#',      // デフォルトのリンク先
            'class'  => 'kz-btn-float', // デフォルトのボタンデザインクラス
            'target' => '',       // 別タブで開くかどうか
        ), 
        $atts, 
        'kz_btn'
    );

    // 別タブで開く場合の処理 (_blank)
    $target_attr = '';
    if ( $atts['target'] === '_blank' ) {
        $target_attr = ' target="_blank" rel="noopener noreferrer"';
    }

    // 出力するHTMLを組み立てる
    $html = '<a href="' . esc_url( $atts['url'] ) . '" class="kz-btn ' . esc_attr( $atts['class'] ) . '"' . $target_attr . '>';
    $html .= do_shortcode( $content ); // ボタンのテキスト部分
    $html .= '</a>';

    return $html;
}
add_shortcode( 'kz_btn', 'kazoolog_button_shortcode' );

ショートコードの使い方

コードの追加が成功したら、あとは実際の投稿画面（ブロックエディターまたはクラシックエディター）で使うだけです。

基本の使い方

投稿画面に、以下のように括弧 [ ] で囲んで入力します。

[kz_btn url="https://kazoolog.com/"]ここをクリック！[/kz_btn]

[kz_btn url=”https://kazoolog.com/”]ここをクリック！[/kz_btn]

別タブで開きたい場合

target="_blank" を追加するだけで、リンク先を新しいタブで開くことができます。アフィリエイトリンクや外部サイトへの誘導に便利です。

[kz_btn url="https://example.com" target="_blank"]外部サイトへ飛ぶ[/kz_btn]

ボタンのデザイン（クラス）を変えたい場合

前回の記事で作った別のクラス名（例：ぽちっと沈むボタン kz-btn-push）を指定したい場合は、class="..." を追加します。

[kz_btn url="https://kazoolog.com/" class="kz-btn-push"]ぽちっと沈むボタン[/kz_btn]

まとめ：一度設定すればずっとラクできる！

functions.php のカスタマイズは少し緊張しますが、一度このショートコードを作ってしまえば、今後のブログ執筆が圧倒的に快適になります。

Web制作の実務でも「クライアントが簡単に更新できるようにしてほしい」という要望に応えるための必須スキルですので、ぜひご自身のサイトで取り入れてみてください！

一覧へ!