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

WordPressでショートコードを作成する方法を学びたいですか？

WordPressでショートコードを作成する方法を学ぶことは、投稿やページをカスタマイズする効果的な方法です。ただし、プロセスに慣れていない場合は、Webサイトでそのような機能を使用する方法を理解するのが難しい場合があります。

そのため、開始に役立つガイドをまとめました。ショートコードがどのように機能し、どのように効果的に適用するかを確認することで、追加のプラグインを必要とせずに、好みに合わせてコンテンツのカスタマイズを開始できます。

この記事では、WordPressのショートコードとは何か、そしてなぜそれらの使用を検討するのかについて説明します。次に、独自の作成方法を説明します。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法

それから私たちがここにいる理由に戻りましょう。

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

WordPressのショートコードは、要素を投稿やページにすばやく埋め込むことができるショートカットとして機能します。これらは通常、角括弧で囲まれたXNUMX行のコードです。例えば：

[exemplecodehortcode]

このコードは、Webサイトのフロントエンドに事前に決定された機能を表示します。

WordPress 最初に導入されたショートコード のリリースで ショートコードAPI。これにより、ユーザーは投稿やページに魅力的な要素を簡単に追加できます。 GoogleマップまたはFacebookの「いいね」ボタン。

WordPressに存在します デフォルトt XNUMXつのショートコード :

キャプション：コンテンツの周りにキャプションをラップする
gallery ：画像ギャラリーを表示します
オーディオ：オーディオファイルを埋め込んで再生します
ビデオ ：ビデオファイルを埋め込んで再生します
プレイリスト ：オーディオまたはビデオファイルのコレクションを表示します
埋め込みます ：インライン要素をラップします

また、ショートコードフォーマットのXNUMXつの基本的なタイプに出くわします。 self-closing et enclosing.

ショートコード self-closing 自立することができ、終了タグは必要ありません。

一方、 enclosing 編集するコンテンツを囲み、タグを手動で閉じるように強制します。たとえば、タグの間にURLをラップすることで、YouTube動画を埋め込むことができます embed et /embed :

たとえば、これにより次の結果が作成されます。

いくつかの最高のWordPressプラグイン独自のショートコードが付属しています。例えば、 WPフォーム et お問い合わせフォーム7 すばやく埋め込むことができるショートコードがありますお問い合わせフォーム投稿またはページで。のようなプラグインを使用することもできます 最大ボタン数 ウェブサイトの好きな場所にボタンのショートコードを追加します。

なぜWordPressショートコードの使用を検討する必要があるのですか？

WordPressのショートコードを使用できる理由はたくさんあります。たとえば、HTMLで長いコードを学習して記述するよりも、簡単で高速です。さらに、コンテンツをクリーンでアクセスしやすい状態に保つのに役立ちます。

ショートコードを使用して、繰り返し使用する特定の機能を自動化できます。たとえば、ボタンを使用する場合 召喚状（CTA） 各記事で、専用のショートコードを用意しておくと、すばやく便利なソリューションになります。

言及されるべきである グーテンベルクエディター ショートコードの使用に依存して、同じように機能します。 WordPressユーザーは、ブロックを使用していくつかのインタラクティブ機能を追加できます。

このような方法は、UIに直接コンテンツを追加できるため、初心者にとってはるかに使いやすい方法です。ただし、WordPressブロックエディターの提供内容にはまだ制限があります。幸いなことに、それはブロックが付属しています ショート、ページにカスタムコンテンツを追加できます。

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

すでにコーディングの知識がある場合は、独自のカスタムショートコードを作成できます。これにより、Webサイトの外観と機能を完全に制御できます。

カスタムWordPressショートコードを作成する方法を見てみましょう。このチュートリアルでは、例としてソーシャルメディアリンクを記事に追加します。

ステップ1-新しいテーマファイルを作成する

始める前に、 WordPressウェブサイトを完全にバックアップする。また、ファイルの外部にカスタムショートコード用の別のファイルを作成する必要があります のfunctions.php あなたのワードプレスのテーマ. これにより、何か問題が発生した場合のフォールバックソリューションが提供されます。

クライアントを使用できます FTP（ファイル転送プロトコル） など FileZillaを Webサイトのテーマファイルにアクセスします。 Webサイトにログインしたら、に移動します wp-content>テーマ 現在のテーマフォルダを見つけます。この例では、これは フクロウプレス:

フォルダを開くワードプレスのテーマ、それを右クリックして押します 新しいファイルを作成.

WordPress でショートコードを作成する方法-4 » BlogPasCher

新しいファイルに名前を付けます custom-shortcodes.php クリック OK。次に、それを右クリックしてオプションを選択することで編集できます 表示/編集 :

これにより、デフォルトのテキストエディタでファイルが開きます。次に、次のコードブロックを追加する必要があります。

<?php ?>

これにより、新しいファイルが、WordPressが構築されているスクリプト言語であるPHPとして解釈されるようになります。

その後、変更を保存してファイルを閉じることができます。次のチェックボックスをオンにして、サーバーで更新され、Webサイトに適用されることを確認してください。

WordPress でショートコードを作成する方法-6 » BlogPasCher

次に、ファイルを開きます のfunctions.php 同じテーマフォルダにあり、ドキュメントの下部に次のコード行を追加します。

include('shortcodes-personnalises.php');

これにより、ファイルに加えた変更を含めるようにシステムに指示されます custom-shortcodes.php で のfunctions.php あなたがそれらを分離することを可能にしながら。準備ができたら、変更を保存してファイルを閉じます。

ステップ2-ショートコード関数を作成する

次に、ショートコード関数を作成して、何をするかを指示する必要があります。オプションをもう一度選択してください 表示/編集 あなたのファイルの custom-shortcodes.php。次のコードスニペットを使用して、関数をフックするアクションを追加します。

function subscribe_link(){
    return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
    }

次に、フックアクションがアクティブ化されたときに実行されるコールバック関数を追加する必要があります。上記のコードの直後に次のコード行を追加すると、関数がショートコードであることがWordPressに通知されます。

add_shortcode('sabonner', 'subscribe_link');

関数を使用してショートコードを作成する場合 add_shortcode、ショートコードタグを割り当てます。 ($tag) 「および対応する関数フック」 ($func) これは、ショートカットが使用されるたびに実行されます。

つまり、ショートコードタグが [subscribe] の場合、フック 'subscribe_link' 訪問者を指定されたURLにリダイレクトします。

したがって、ファイルで使用するコード全体 shortcodes-personnalises.php 次のようになります。

タグに名前を付けるときは、アンダースコアを使用できますが、小文字のみを使用する必要があることに注意してください。それも重要です ハイフンの使用は避けてください、他のショートコードと干渉する可能性があるため。

ステップ3–ウェブサイトにセルフクローズショートコードを追加する

これで、WordPressサイトで最初のコードを自己終了ショートコードとしてテストできます。 WordPressブロックエディターを使用して、[subscribe]タグを投稿に直接挿入できます。

これにより、Webサイトの訪問者に次のコンテンツが表示されます。

WordPress でショートコードを作成する方法-8 » BlogPasCher

このショートコードに満足している場合は、他に何もする必要はありません。ただし、カスタマイズする場合は、次の手順にスキップできます。

ステップ4-ショートコードにパラメータを追加する

あなたはショートコードを適応させることができます "申し込む" 他のソーシャルメディアリンクを表示するための追加機能。これを行うには、URLを変更するパラメーターを追加します。

以下のために 管理属性を追加する、ファイルを開く必要があります custom-shortcodes.php 次のコードを追加します。

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');

これにより、ショートコードタグのリンクをカスタマイズして、グーテンベルクエディターに追加できます。ファイル内の前のコードの上に貼り付けることができます カスタムショートコード.php。次のようになります。

追加する shortcode_atts（）関数 ユーザー属性をすべての既知の属性と組み合わせ、欠落しているデータはデフォルト値に置き換えられます。準備ができたら、変更を保存してファイルを閉じます。

ステップ5-設定をテストする

これで、WordPressブロックエディターで更新されたショートコードをテストできます。この例では、次のショートコードを使用してTwitterとFacebookのリンクをテストしています。

[サブスクライブリンク='https://www.facebook.com/live.blogpascher']Facebook [/ subscribe]

[サブスクライブリンク='https://twitter.com/BlogPasCher']Twitter [/ subscribe]

これにより、フロントエンドで次の結果が生成されます。

WordPress でショートコードを作成する方法-12 » BlogPasCher

この自動終了ショートコードは、訪問者にソーシャルプロファイルの直接URLを表示します。ただし、この機能を少し洗練されたものに見せたい場合があります。

たとえば、ユーザーがクリックしようとしているときに表示されるアンカーテキストを完全にカスタマイズできる添付バージョンを作成できます。次のステップでその方法を説明します。

ステップ6–同封のショートコードを作成する

囲んでいるショートコードは、前の自動クローズの例と同じようにフォーマットされます。ただし、関数の追加パラメーターが含まれます。

まず、追加する必要があります $content = null、この関数を囲んでいるショートコードとして識別します。次に、を追加できます do_shortcode ショートコードのコンテンツを検索するWordPressから。

ファイル内 custom-shortcodes.php、新しい囲みショートコードを追加します。

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);
    return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');

準備ができたら、ファイル custom-shortcodes.php 次のようになります。

前のコードには属性があります " スタイル " 追加。アンカーテキストを青色に変更します。完了したら、変更を保存することを忘れないでください。

ステップ7–ウェブサイトに同封のショートコードを追加する

これで、WordPressブロックエディターにショートコードを挿入して、最終結果を確認できます。

WordPress でショートコードを作成する方法-14 » BlogPasCher

お気づきのとおり、このラッパーショートコードを使用して、ソーシャルメディアページのURLと訪問者に表示されるアンカーテキストを簡単に変更できます。この場合、 " フェイスブック " et "ツイッター" :

三！これで、ページと投稿のサブスクリプションリンクのカスタムショートコードが作成されました。上記のすべての手順を変更して、WordPress機能を使用してあらゆる種類の異なる要素を作成できることに注意してください ショートコード.

ショートコードを使用すると、WordPressWebサイトに機能を追加するのがはるかに簡単になります。それらを使用して、既存のコンテンツをパーソナライズし、連絡先フォーム、画像ギャラリー、サブスクリプションリンクなどのインタラクティブ機能を追加できます。

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

この記事では、WordPressで独自のショートコードを作成する方法を学びました。ご不明な点やご提案がございましたら、内でお知らせください commentaires.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

一方で、 さまざまなソーシャルネットワークでこの記事を共有する.

...

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

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

なぜWordPressショートコードの使用を検討する必要があるのですか？

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

ステップ1-新しいテーマファイルを作成する

ステップ2-ショートコード関数を作成する

ステップ3–ウェブサイトにセルフクローズショートコードを追加する

ステップ4-ショートコードにパラメータを追加する

ステップ5-設定をテストする

ステップ6–同封のショートコードを作成する

ステップ7–ウェブサイトに同封のショートコードを追加する

その他の推奨リソース

まとめ

私はこれが好き：

類似したアイテム

コメントを投稿 Annulerラréponse

カテゴリー

ラチーム

ガイド

テーマ

プラグイン

資源

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

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

なぜWordPressショートコードの使用を検討する必要があるのですか？

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

ステップ1-新しいテーマファイルを作成する

ステップ2-ショートコード関数を作成する

ステップ3–ウェブサイトにセルフクローズショートコードを追加する

ステップ4-ショートコードにパラメータを追加する

ステップ5-設定をテストする

ステップ6–同封のショートコードを作成する

ステップ7–ウェブサイトに同封のショートコードを追加する

その他の推奨リソース

まとめ

この記事を共有する：

私はこれが好き ：

類似したアイテム

コメントを投稿 Annulerラréponse

カテゴリー

私はこれが好き：