WordPressショートコード完全チュートリアル：作成、使用、カスタマイズ（ボタンとギャラリーの例付き）

ショートコードの使用(ショートコード）を使えば、フォーム、ギャラリー、ボタン、ダイナミックコンテンツなど、複雑な機能を簡単に埋め込むことができます。 HTMLそしてカスケーディングスタイルシート もしかしたら PHP コードです。そのため、ショートコードは初心者でも簡単に使える強力なツールとなっています。

本記事では、このようなアプリケーションを作成、使用する方法について詳しく説明します。ワードプレスのカスタマイズ ワークフローを合理化し、ウェブサイトのインタラクティブ性と機能性を向上させるショートコードです。

WordPressのショートコードとは何ですか？

ショートコードは角括弧 ([ ]の WordPress コンテンツを囲む短いコードスニペットです。特定機能の挿入.例

[ギャラリーID="1,2,3"].
[ギャラリーID="1,2,3"].
[ギャラリーID="1,2,3"].

このショートコードは、IDが1、2、3の画像を含むギャラリーをフロントエンドに表示するようWordPressに指示します。このショートコードは、コードの挿入プロセスを単純化することで、複雑な作業をシンプルかつ直感的にします。

ショートコードには多くの利点があります：

• シンプルさ複雑なHTMLやCSS、JavaScriptを書く必要はありません。
• お点前ショートコードは、ページ、投稿、ウィジェット、そしてカスタム投稿タイプでも使用できます。
• 再利用可能ショートコードを一度作成すれば、サイト内の異なる場所で何度も使用することができます。
• 管理が容易ショートコードを使用することで、複雑なコードを直接埋め込む必要がなく、ページや投稿をすっきりと整理することができます。

WordPressでショートコードを作成する方法

ステップ1: functions.phpファイルにアクセスします。

ショートコードを作成する最初のステップは、テーマの functions.php ファイルこのファイルはテーマにカスタム機能とコードを追加特定のコンテンツや機能を表示するカスタムショートコードを作成するなど、ウェブサイトにカスタム機能を追加したい場合は functions.php ファイルにコードを追加します。

以下の手順に従ってください：

1. WordPressのダッシュボードにログインします。
2. 切り替える 外観 > テーマエディタ.
3. 右側にある functions.php ドキュメンテーション

ステップ2：ショートコード機能の定義

ショートコードの中心は、あなたが作成するPHP関数です。以下は、ページに "Hello, World!" というメッセージを表示する簡単なショートコードの例です：

関数hello_world_shortcode() {<br>    Hello, World！<br>}<br>
関数hello_world_shortcode() {<br>    Hello, World！<br>}<br>
関数hello_world_shortcode() {
    Hello, World！
}

このコードでは、シンプルな PHP 関数を定義しています。 hello_world_shortcodeという文字列を返します。

ステップ3：ショートコードの登録

ショートコード機能を作成したら、次はWordPressに登録します。これは add_shortcode() 関数を使用してショートコードを登録し、名前と対応する関数を指定します。例

add_shortcode('hello_world', 'hello_world_shortcode')；<br>
add_shortcode('hello_world', 'hello_world_shortcode')；<br>
add_shortcode('hello_world', 'hello_world_shortcode')；

このコード行はショートコードを登録します。 [hello_world】。］ページや投稿に挿入されると、WordPressは hello_world_shortcode() 関数が返すものを表示します。

ステップ4：ショートコードのテスト

ショートコードの作成と登録が完了したら、テストすることができます。

以下は、プロセス全体をまとめる完全なコードです：

// ショートコード関数を定義します
関数 hello_world_shortcode() {
    return 'こんにちは、世界！
}
// ショートコードの登録
add_shortcode('hello_world', 'hello_world_shortcode')；
// ショートコード関数を定義します
関数 hello_world_shortcode() {
    return 'こんにちは、世界！
}

// ショートコードの登録
add_shortcode('hello_world', 'hello_world_shortcode')；
// ショートコード関数を定義します
関数 hello_world_shortcode() {
    return 'こんにちは、世界！
}

// ショートコードの登録
add_shortcode('hello_world', 'hello_world_shortcode')；

ページまたは投稿に挿入 [hello_world】。］次にフロントエンドのページを見てください。そこには "Hello, World!"と表示されているはずです。

にいない場合 functions.php ファイルが追加され、フロントエンドページに[hello_world】。］

カスタムショートコードの作成

例 1: ボタンのショートコードの作成

ボタンは、ウェブサイトのインタラクションの重要な部分であり、コールトゥアクション（CTA）やナビゲーションに使用することができます。短いコードでシンプルなカスタムボタンを作成することができます：

function custom_button_shortcode($atts) {.<br>    $atts = shortcode_atts()<br>        配列(<br>            'text' => 'Click Me'、<br>            'url' => '#'。<br>        ), $atts<br>    );<br><br>    return '<a href="/ja/' . esc_url($atts['url']) . '/" class="custom-button" style="padding: 10px 20px;background-color: #0073aa;color: white;text-decoration: none">' . esc_html($atts['text']) . '</a>';<br>}<br><br>add_shortcode('custom_button', 'custom_button_shortcode')；<br>
function custom_button_shortcode($atts) {.<br>    $atts = shortcode_atts()<br>        配列(<br>            'text' => 'Click Me'、<br>            'url' => '#'。<br>        ), $atts<br>    );<br><br>    return '<a href="/ja/' . esc_url($atts['url']) . '/" class="custom-button" style="padding: 10px 20px;background-color: #0073aa;color: white;text-decoration: none">' . esc_html($atts['text']) . '</a>';<br>}<br><br>add_shortcode('custom_button', 'custom_button_shortcode')；<br>
function custom_button_shortcode($atts) {.
    $atts = shortcode_atts()
        配列(
            'text' => 'Click Me'、
            'url' => '#'。
        ), $atts
    );

    return '' . esc_html($atts['text']) . '';
}

add_shortcode('custom_button', 'custom_button_shortcode')；

この例では、ショートコードが定義されています。 [カスタムボタン］これは2つの引数を取ります：テキスト(ボタンテキスト）と url(リンクアドレス）。

例えば、こんな使い方ができます：

[custom_button text="Learn More" url="https://example.com"]<br>
[custom_button text="Learn More" url="https://example.com"]<br>
[custom_button text="Learn More" url="https://example.com"]

これにより青ボタンをクリックすると、指定されたURLにジャンプします。

例2: ギャラリーショートコードの作成

を作成します。ギャラリーショートコードこれも非常に簡単です。画像を指定することで 身分証明書WordPressは自動的にギャラリーを生成します：

function custom_gallery_shortcode($atts) {.<br>    $atts = shortcode_atts()<br>        配列(<br>            'ids' => ''<br>        ), $atts<br>    );<br><br>    $ids = explode(',', $atts['ids'])；<br>    $output = '<div class="custom-gallery">'；<br><br>    foreach（$idとして$ids）{。<br>        $image = wp_get_attachment_image_src($id, 'medium')；<br>        $output .= '<img src="' . esc_url($image[0]) . '" class="gallery-image">'；<br>    }<br><br>    $output .= '</div>'；<br>    Return $output.<br>}<br><br>add_shortcode('custom_gallery','custom_gallery_shortcode')；<br>
function custom_gallery_shortcode($atts) {.<br>    $atts = shortcode_atts()<br>        配列(<br>            'ids' => ''<br>        ), $atts<br>    );<br><br>    $ids = explode(',', $atts['ids'])；<br>    $output = '<div class="custom-gallery">'；<br><br>    foreach（$idとして$ids）{。<br>        $image = wp_get_attachment_image_src($id, 'medium')；<br>        $output .= '<img src="' . esc_url($image[0]) . '" class="gallery-image">'；<br>    }<br><br>    $output .= '</div>'；<br>    Return $output.<br>}<br><br>add_shortcode('custom_gallery','custom_gallery_shortcode')；<br>
function custom_gallery_shortcode($atts) {.
    $atts = shortcode_atts()
        配列(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids'])；
    $output = '
'；

    foreach（$idとして$ids）{。
        $image = wp_get_attachment_image_src($id, 'medium')；
        $output .= ''；
    }

    $output .= '
'；
    Return $output.
}

add_shortcode('custom_gallery','custom_gallery_shortcode')；

を作成します。 [カスタムギャラリー］ を受け付けるショートコードです。 子供たち パラメータを使用すると、ギャラリーを生成するために複数のイメージIDを渡すことができます。例えば

[custom_gallery ids="1,2,3"]。<br>
[custom_gallery ids="1,2,3"]。<br>
[custom_gallery ids="1,2,3"]。

これにより、IDが1、2、3の画像がページに表示されます。

WordPressのページと投稿でショートコードを使う方法

方法1：クラシックエディタを使う

ワードプレスをお使いの場合 クラシックエディターショートコードをエディタのテキストボックスに直接挿入するだけです。

例

[custom_button text="Buy Now" url="https://yourlink.com"]<br>
[custom_button text="Buy Now" url="https://yourlink.com"]<br>
[custom_button text="Buy Now" url="https://yourlink.com"]

ページを更新または公開した後、ショートコードはフロントエンドで処理され、適切なコンテンツが表示されます。

方法2：Gutenbergブロックエディタを使う

ある グーテンベルク・エディター特別な"ショートコード"ブロックでショートコードを挿入します。手順は以下の通りです：

1. ページまたは投稿のエディタを開きます。
2. 打点 + ボタンをクリックして新しいブロックを追加します。
3. 検索と選択 ショートコード ブロック

4. ショートコードブロックにショートコードを入力してください：

[custom_button text="Sign Up" url="https://yourlink.com"]<br>
[custom_button text="Sign Up" url="https://yourlink.com"]<br>
[custom_button text="Sign Up" url="https://yourlink.com"]

その後、コンテンツを保存または更新すると、ショートコードはフロントエンドに出力を表示します。

方法3：ページエディタを使う

などの多くの一般的なページエディタがあります。 エレメンタ 歌で応える WPベーカリーには、ショートコードを挿入するためのウィジェットやモジュールが用意されています。ショートコードを適切なウィジェットに貼り付けるだけで、ビルダーはその効果をリアルタイムで表示します。

WordPressのウィジェットでショートコードを使う方法

のショートコードを使用することもできます。ウィジェットエリア(例サイドバーそしてフッター(など）。以下はその手順です：

1. ダッシュボードで 外観 > ウィジェット.
2. そうしれいかん テキストウィジェット ショートコードを表示したいウィジェットの領域にドラッグ＆ドロップします。

3. テキストエリアにショートコードを入力してください：

[custom_button text="お問い合わせ" url="https://yourlink.com"]<br>
[custom_button text="お問い合わせ" url="https://yourlink.com"]<br>
[custom_button text="お問い合わせ" url="https://yourlink.com"]

保存してサイトを表示すると、ショートコードがウィジェットエリアのボタンとして表示されます。

ショートコードジェネレーターでプロセスを簡素化

コードを書くことに慣れていないユーザーのためにショートコードジェネレーターは非常に便利なツールです。これらのツールを使えば、手動でコードを書かなくても、フォームを使って簡単にショートコードを生成することができます。人気のあるショートコードジェネレータプラグインには次のようなものがあります：

• 究極のショートコードスライダー、アコーディオン、その他多くの機能をサポートする、包括的なショートコードのライブラリが用意されています。
• MyThemeShop WPショートコードボタン、タブ、カラムなどのための使いやすいショートコードジェネレータを提供します。
• ショートコーダーカスタムショートコードの作成も可能です。

これらのプラグインを使用すると、ショートコードをすばやく生成してWordPressのコンテンツに挿入できるため、複雑なコードを書く手間が省けます。

概要

WordPress のショートコードは、たくさんのコードを書くことなく、ボタン、ギャラリー、動的コンテンツなどの複雑な機能をページ、投稿、ウィジェットに簡単に挿入するのに役立ちます。単純に [ショートコード］ の構文では、これらの機能をさまざまな場所で再利用して、ウェブサイトの効率性と保守性を向上させることができます。この記事では、WordPressのこれらの関数を再利用する方法について詳しく説明します。 functions.php ショートコードの作成とファイルへの登録、ボタンとギャラリーのショートコードの実践例。また、クラシックエディタ、Gutenbergブロックエディタ、ウィジェットでのショートコードの使い方も解説しているので、ワークフローの効率化に役立ちます。