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

WordPressを長期間使用している場合は、おそらくすでにいくつかのショートコードを使用しています。

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

[example shortcode]

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

このシリーズでは、簡単なショートコードから始めて、さらに複雑な（そしてさらに便利な）例に進みます。

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

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

便利な簡単なショートコードの例

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

WordPressビジュアルエディターでボックス、画像、テキストを作成してスタイルを設定する代わりに（これはせいぜい苦痛であり、おそらく不可能です）、単純なスニペットですべてを出力するためのショートコードを作成します！

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

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

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

add_shortcode( 'author_bio', 'create_author_bio' );

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

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

WordPressでレスポンシブなGoogleマップを追加する方法

どこに行っても、Googleマップが道を教えてくれます。 都市をナビゲートしている間、即座に道順を取得できることが不可欠になっています。 そして、最も人気のある地図ソリューションとして、広告...

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

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

add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );

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

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

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

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

add_shortcode( 'author_bio', 'create_author_bio' );

function create_author_bio(){
//Code goes here!
}

この関数は実際にはまだ何もしていないことに気付くかもしれません。 その中にあるのはコメントだけです。 次のステップでそれを処理します。 今のところ、ここには実際には2つの部分しかないことを指摘したいと思います。それは、ショートコードの登録と、それが使用されるたびに発生する関数です。 WordPress PHPは威圧的に見えるかもしれませんが、それは本当にとても簡単です！

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

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

あとは、関数に必要な処理を実行させるだけです。

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

私たちの目的では、これは単純なHTMLになります。 これは、カスタムクラスを使用して<aside>要素内に作成者の画像と略歴を追加するためのマークアップです（ただし、これはまだどこにも配置しないでください。現時点ではプレビューとして表示しています）。

<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>

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

さて、私たちがする必要があるのは、shortcodeの関数に上記のHTMLを返すようにすることだけです！

functions.php .phpファイルにはPHP関数のみが含まれている必要があるため（また、整理のため）、先ほど見たHTML要素間の改行とスペースを削除して文字列に入れました（一重引用符で囲みます）。 。 ただし、機能的には、上記で見たのと同じHTMLスニペットであり、最終的なPHPコードは次のようになります。

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>';

}

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

Genesisの子テーマの簡単なカスタマイズ

Webデザイナーとして、私たちは常により効率的に作業することを楽しみにしています。 ポートフォリオを再設計するという長い間延期されていたタスクを開始したとき、WordPressがどれほど好きで、どれだけ速いかを思い出しました...

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

ただし、これを最大限に活用するには、バイオボックスに特別なスタイリングを追加することをお勧めします…

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

ショートコードはスタイリングなしでは素晴らしいものではないので、追加しましょう！ 自分のサイトのフォント（上の画像のフォントはFanwood Text）と、すでに適用されているCSSルールによっては、値の一部を少し調整する必要がある場合があります。 または、別のことを試してみることもできます。

このCSSは、（子）テーマのstyle.cssファイルにコピーできます。または、WordPress 4.7以降を実行している場合は（そうする必要があります）、この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ブレークポイントを使用してレスポンシブデザインを作成する方法

Webサイトの成功は、ユーザーエクスペリエンスに大きく依存します。 最近では、ユーザーはさまざまなデバイスからWebサイトにアクセスしており、各デバイスで同等のユーザーエクスペリエンスを提供することは困難な場合があります。

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

create_author_bio関数に自分で名前を付けた方法を覚えていますか？ ええと、 create_author_bio; 関数に好きな名前を付けることも簡単にできます（ただし、関数名がその機能について少なくとも少しヒントを与えるのが最善です。そのため、 create_author_bioを選択しました）。

しかし、ここに問題があります。2つのPHP関数に同じ名前が付けられている場合、PHPはどちらの関数が正しいかわからないため、サイトの読み込みを妨げる致命的なエラーになります。 PHPは推測しないので、停止します。

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

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

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

if( !function_exists( 'create_author_bio' ) ){

//Our existing PHP goes here!

}

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

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

結論

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

このショートコードは、ページに何でも出力するように簡単に適合させることができます。 gif、HTMLおよび/またはJavaScriptのカスタムブロック、画像またはビデオ…あなたが望むものなら何でも！

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

良いニュース：ショートコードの基本についてのみ説明しましたが、ショートコードにはさらに多くの機能があります。 次の記事では、「ラッピング」ショートコード（テキストまたはコンテンツのブロックをラップして柔軟性を高めることができるショートコード）について説明します。