WordPressショートコードを理解する

WordPress をある程度の期間使用している場合は、すでにいくつかのショートコードを使用している可能性があります。

ショートコードは便利な小さなスニペットで、他の方法では不可能な特別な機能をコンテンツに挿入できます。 例として、多くの画像ギャラリーとスライダー プラグインが提供するショートコードをコンテンツの好きな場所に挿入するだけで、適切な画像をそこに表示させることができます。 ショートコードは通常、次のようになります。

[example shortcode]

言い換えれば、ショートコードは、テキスト内のどこに配置されていても、何か特別なことが起こります。
ただし、事前定義されたショートコードに限定されるわけではありません。 カスタムショートコードを定義して、好きなことをすることができます! それらは、単純なもの、複雑なもの、またはその中間のものにすることができます。

このシリーズでは、単純なショートコードから始めて、より複雑な (さらに便利な!) 例に進んでいきます。

注:ここでは主に PHP、特にテーマの functions.php ファイルで作業します。 子テーマ (または、更新によって変更が上書きされることを恐れずに編集できるカスタム/スターター テーマ) を使用していない場合は、開始する前に子テーマを作成することをお勧めします。

また、この記事を読むのに PHP の知識は必要ありませんが、少なくとも基本を知っていると役に立ちます。 ここに含まれるコードは非常に単純で、できるだけ簡単にコピーしてカスタマイズできるようにしています。 コードの各部分については順次説明していきますが、WordPress テーマの PHP をまったく使用したことがない場合は、 functions.phpファイルに少し不適切なコードがあると、サイトが壊れる可能性があることに注意してください。

便利でシンプルなショートコードの例

次のように、特別な著者情報セクションを投稿に挿入するショートコードが必要だとしましょう。

WordPress ビジュアル エディターでボックス、画像、テキストを作成してスタイリングする代わりに、ショートコードを作成して、単純なスニペットですべてを出力します。

(補足: WordPress には作成者プロファイルを操作するためのより優れた方法がありますが、特定のコンテンツ ブロックをページに配置するためにショートコードを使用することがいかに簡単かをうまく示しているため、この例に固執します。)

ステップ 1: テーマの functions.php ファイルにショートコードを追加する

add_shortcode関数を使用してショートコードに名前を付け、ショートコードが使用されたときに WordPress が何をすべきかを伝えます。 次の行をテーマのfunctions.phpファイルに追加します。

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

functions.php内のどこでも問題ありませんが、競合を避けるために、最後に配置することをお勧めします。 (ただし、ファイルが ?> 終了タグで終了する場合は、その後ではなく、その直前に配置する必要があります。)

先に進む前に、ここで実際に何が起こっているのかを理解するために、この行を少し分解してみましょう。 かっこ内の 2 つのテキスト、つまり「引数」は特別なものではありません。 それらはただの名前です。 それぞれの意味を見てみましょう。

1. 最初の引数: この場合はauthor_bio – WordPress にショートコードの実際の名前を伝えます。 これは、ユーザーがショートコードを使用するために括弧内に入力できるテキストになります。 したがって、このコードをそのまま使用すると、 [author_bio]著者のバイオ ボックスをトリガーするショートコードになります。
   このテキストは何でもかまいませんが、一意になるようにすることが常に最善です。 そうすれば、ショートコード名が、インストールされている別のプラグインまたはテーマの他の誰かのものと競合するリスクを冒すことはありません.
2. 2 番目の引数: この場合はcreate_author_bio – このショートコードが使用されるたびに実行する必要がある実際の PHP 関数を WordPress に指示します。 次のステップでその関数を作成します。 現時点では、WordPress にその名前を知らせるだけです。 (競合を避けるために、この名前も一意である必要があります。)

それが役立つ場合は、次のようなコードを考えることができます。

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

より詳細な情報に興味がある場合は、 add_shortcode Codex エントリをチェックしてください。

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

次に、名前を付けた関数を実際に作成する必要があります。

最後のステップで WordPress に関数の名前が create_author_bio であることを伝えたので、新しい関数を追加すると、コードは次のようになります。

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

この関数は実際にはまだ何もしていないことに気付くかもしれません。 その中にあるのはコメントだけです。 次のステップでそれを処理します。 ここでは、ショートコードの登録と、ショートコードが使用されるたびに発生する機能の 2 つしかないことを指摘しておきます。 WordPress PHP は難しそうに見えるかもしれませんが、実際にはとてもシンプルです。

補足: create_author_bio関数がadd_shortcode関数の後か前にあるかは問題ではありません。 この場合、順序は重要ではありません。

ステップ 3: 関数に何かをさせる

あとは、関数を目的どおりに実行させるだけです。

このような関数は何でも実行できますが、最終的には 1 つの値 (テキストの文字列や数値など)を返す必要があります。 その値は任意の長さや複雑さである可能性がありますが、関数が返すものは何でも、ショートコードが使用される場所に表示されます。

この目的のために、これは単純な HTML にすぎません。 カスタム クラスを使用して<aside>要素内に著者の画像と略歴を追加するためのマークアップを次に示します (ただし、これはまだどこにも配置しないでください。現時点ではプレビューとして見ているだけです)。

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

最終的に、最初の行でその author-bio-box クラスを使用して、CSS で略歴をスタイルします。 (複数の作成者によって書かれたコンテンツに複数の作成者ショートコードを追加したい場合に備えて、ID の代わりにクラスを使用します。) しかし、これはページに入れたいものであれば何でもかまいません!

あとは、ショートコードの関数が上記の HTML を返すようにするだけです。

functions.phpファイルには PHP 関数のみを含める必要があるため (および整頓のために)、先ほど見た HTML 要素間の改行とスペースを削除し、それらを文字列 (単一引用符の内側) に入れました。 . しかし、機能的には、先ほど見た HTML スニペットと同じであり、最終的な PHP コードは次のようになります。

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

これで PHP は完成です。 上記の最終コードを含むfunctions.phpファイルを保存したら、作成者は任意のページまたは投稿で[author_bio]と入力するだけで、上記の HTML がショートコードの場所に表示されます。

さらに、本当に素晴らしいことは、バイオを更新する必要がある場合でも、表示されるすべての場所を編集する必要がないということです! 代わりに、 functions.phpファイルのコードを編集するだけで、どこでも一度に更新されます。 いいですね。

ただし、これを最大限に活用するには、バイオ ボックスに特別なスタイルを追加する必要があります。

ステップ 4: CSS を追加する

ショートコードはスタイリングなしではうまくいかないので、追加しましょう! 独自のサイトのフォント (上の画像のフォントは Fanwood Text) や、既に適用されている CSS ルールによっては、一部の値を少し調整する必要がある場合があります。 または、何か違うことを試してみたいと思うかもしれません！

この CSS は、(子) テーマのstyle.cssファイルにコピーできます。または、WordPress 4.7 以降を実行している場合 (そうあるべきです!)、この CSS を [カスタマイズ] の [追加の CSS] ボックスに貼り付けることができます。画面：

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

今、物事はずっと良く見えるはずです。 しかし、自由に CSS をいじって、作成者ボックスを自分のものにし、サイトでくつろげるようにしてください!

推奨: 関数を「プラグ可能」にする

これはショートコードに固有のものではなく、コードが機能するために厳密に必要というわけでもありませんが、これはベスト プラクティスであり、言及するのに適した時期です。

まず、PHP がどのように機能するかについて少し背景を説明します。

create_author_bio関数に自分で名前を付ける方法を覚えていますか? create_author_bio; 関数に好きな名前を付けるのと同じくらい簡単にできます (ただし、関数名が、それが何をするかについて少なくとも少しのヒントを与えるのが最善です。それが、 create_author_bio選択した理由です)。

しかし、問題は次のとおりです。2つの PHP 関数に同じ名前を付けると、サイトの読み込みを妨げる致命的なエラーが発生します。これは、 PHP がどちらの関数が正しいか判断できないためです。 PHP は推測しないので、ただ停止します。

心配する必要があるのはコードだけではありません。 WordPress サイトは、インストールされているプラ​​グインとテーマに応じて、数十、場合によっては数百もの異なる開発者のコ​​ードを使用する場合があります。 同じ関数名を 2 回使用すると、すべてが壊れます。

それは悪いことであり、明らかに、決して起こらないようにしたい.

関数を「プラグ可能」にすることでそれを行うことができます。 つまり、同じ名前の別の関数が既に存在する場合、WordPress に関数を作成しないように指示します。 エレガントにシンプルです。 この簡単な条件ステートメント内に既存のコードをラップするだけです。

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

その条件付き if 式は、 create_author_bioという名前の関数がまだ存在しないことを確認するだけです。 これまでに使用したすべての PHP コードは、そのステートメント内の{ }中括弧の間に移動するだけです。

ただし、関数にはできるだけ一意の名前を付けるのが最善です。 関数をプラグ可能にすると、致命的なエラーが回避されるだけです。 したがって、名前の競合があった場合、ショートコードは機能しませんが、少なくともサイトは稼働しており、他に何も壊れていません.

結論

それでおしまい！ カスタム著者略歴ショートコードの作成を楽しんでいただけたでしょうか! フォローしている場合は、ページまたは投稿の任意の場所に[author_bio]と入力するだけで、コードが表示されます。

このショートコードは、ページに何でも出力するように簡単に変更できます。 gif、HTML や JavaScript のカスタム ブロック、画像や動画など、なんでも構いません。

ただし、この例は、単一の静的な値をページのどこかに出力する必要がある場合には便利ですが、あまり柔軟ではありません。 毎回まったく同じものが返されますが、それよりも適応性が高いショートコードが必要になることがよくあります。

良いニュース: ショートコードの基本のみを取り上げましたが、ショートコードにはさらに多くの機能があります。