WordPressでカスタムショートコードを作成するための完全なガイド
WordPressのショートコードは、1)あなたが 彼らはマクロのように動作し、ショートコードを挿入すると、コードのスニペットに置き換えられます。 それは何でもあり得る。
WordPressには、のような事前定義されたショートコードが付属しており、多くの人気のあるプラグインやテー また、あなたのWordPressのウェブサイト上の列を作成するようなことを行うには、独自のカスタムショートコードを作成することができます。
この記事では、独自のカスタムショートコードを作成して使用するプロセスを段階的に紹介します。 私たちは、新しいショートコードを作成するプロセス全体をご紹介し、ショートコードの属性と機能を変更し、制御する方法を紹介します。これは、ショートコードを作成する方法の詳細に入るより高度な投稿であることに注意してください。
コードでの作業は、あなたの技術的な専門知識を超えている、とあなただけのショートコードの作成と使用を開始するための最も簡単な方法をしたい場
あなた自身のショートコードを作成するとき、あなたがする必要がある二つのことがあります。
- ショートコードハンドラー関数を作成します。 ショートコード関数は、オプションのパラメータ(属性)を受け取り、結果を返す関数です。
- ショートコードハンドラー関数を登録します。 カスタムショートコードを登録するには、組み込みのWordPress
add_shortcut
関数を使用します。
カスタムショートコードのためのWordPressの準備
それは必須ではありませんが、それは独自のファイルにカスタムショートコードを維持することをお勧 または、テーマのfunctions.php
custom-shortcodes.php
functions.php
ファイルと同じフォルダ内に保存します。次に、新しく作成されたファイル内に次のコードブロックを追加します。
<?php ?>
次に、functions.php
ファイルを開き、次のコード行を追加します:p>
include('custom-shortcodes.php');
これで、カスタムショートコードの追加を開始する準備が整いました。
基本的なショートコード
この最初の例では、我々は下のインディーズアバター画像の日を挿入する基本的なWordPressのショートコードを作成するつもりです。
ショートコードの作成
最初のステップは、ショートコード関数を作成することです。 custom-shortcodes.php
dotiavatar_function
avatar-simple.png
add_shortcode
を使用してWordPressにショートコードを登録することです。 まだcustom-shortcodes.php
の中に、次のコード行を追加します:
add_shortcode('dotiavatar', 'dotiavatar_function');
add_shortcode
$tag
$func
dotiavatar
dotiavatar_function
です。
注:タグに名前を付けるときは、小文字のみを使用し、ハイフンは使用しないでください。
ショートコードを使用して
今、あなたはショートコードを作成し、登録していることを、それはそれを試してみる時間です! DOTIアバターを投稿コンテンツ内に表示したいときはいつでも、代わりにショートコードを使用できます。
パラメータ(属性)を持つショートコード
前の例では、物事を変える余地はあまりありませんでした。 たとえば、単一の画像をプッシュするのではなく、パラメータを使用して使用する画像を設定できるようにしたいとします。 いくつかの属性を追加することでこれを行うことができます($atts
custom-shortcodes.php
の中に、次のような別の関数を追加します。
function dotirating_function( $atts = array() ) { // set up default parameters extract(shortcode_atts(array( 'rating' => '5' ), $atts)); return "<img src=\"http://dayoftheindie.com/wp-content/uploads/$rating-star.png\" alt=\"doti-rating\" width=\"130\" height=\"188\" class=\"left-align\" />";}
上記の関数は単一のパラメータを受け入れます。rating
5
shortcode_atts
関数を使用して属性の配列をアンラップし、デフォルト値と関数に渡された可能性のある値を組み合わせます。
ショートコードを登録することを忘れないでください:
add_shortcode('dotirating', 'dotirating_function');
ショートコード関数を作成し、フックを追加すると、ショートコードを投稿コンテンただ、デフォルト値で行く:
そして、それはそれです! あなたは今、自己閉鎖WordPressのショートコードを作成する方法を知っています。 しかし、あなたが作成できる別の種類があります。
ショートコードを囲む
これまで、私たちは自己閉鎖ショートコードで作業してきました。 ショートコードを囲む:しかし、ショートコードの別のタイプがあります。
ショートコードを囲むと、Bbコードスタイルの形式を使用できます。 つまり、次のようなスタイルです。
content
囲まれたショートコードは、囲まれたコンテンツを操作する必要があるときに便利です。 たとえば、webサイトを使用する特定のスタイルのボタンがあるとします; HTMLコードを使用して、使用する必要があるたびにそのボタン/スタイルを生成することも、代わりにカスタム囲むショートコードを設定することもできます。
囲まれたショートコードを使用することで、コードではなくコンテンツに焦点を当てることができます。
ショートコードの作成
再び、custom-shortcodes.php
ファイル内に、次のコードブロックを追加します。
function dotifollow_function( $atts, $content = null ) { return '<a href="https://twitter.com/DayOfTheIndie" target="blank" class="doti-follow">' . $content . '</a>';}
上記のコードブロックでは、$content = null
は、この関数を囲むショートコードとして識別するために使用されます。 そして、その関数内では、HTMLコード内でコンテンツ($content
)をラップしています。これで、ショートコードを登録します。
add_shortcode('dotifollow', 'dotifollow_function');
それで終わりです! あなたのショートコードを使用する準備ができています。
ショートコードを使用する
囲まれたショートコードを使用することは、自己閉鎖のショートコードを使用することとあまり変わりません。 HTMLと同様に、開始文と終了文があることを確認するだけです。
Follow us on Twitter!
もちろん、これは単なる基本的な例です。 あなたは自己閉鎖ショートコードで行うように、また、囲むショートコードにパラメータを追加することができます。
内部custom-shortcodes.php
、もう一つの関数を追加します。
function dotibutton_function( $atts = array(), $content = null ) { // set up default parameters extract(shortcode_atts(array( 'link' => '#' ), $atts)); return '<a href="'. $link .'" target="blank" class="doti-button">' . $content . '</a>';}
そして、ショートコードを登録します。
add_shortcode('dotibutton', 'dotibutton_function');
この新しい関数は、次の構文を使用してボタンのリンクを設定しましょう。
add_shortcode('dotibutton', 'dotibutton_function');
この新しい関数は、次の構文を使用してボタンのリンクを設定します。
Shop Now!
ショートコードを囲むと、非常に少ないコードで多くのことを行うことができます。
ウィジェットについての言葉
デフォルトでは、ショートコードは投稿、ページ、またはカスタムポストタ ウィジェットのサポートを追加するには、functions.php
ファイルに次のコードを追加する必要があります。
add_filter( 'widget_text', 'shortcode_unautop' );add_filter( 'widget_text', 'do_shortcode' );
それを行うと、ウィジ
物事をラップする
独自のショートコードを追加することは、特にそれらがどのように実装されているかを理解したら、多くの労力を要しません。 詳細を知りたい場合は、WordPress codexをチェックしてください。
Leave a Reply