こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。
この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。
前回の記事はこちら↓
10thステップであるこの記事では、自作ショートコードでボタン作成していきます。
0. 目標物の確認
『8.サイドバーの作成』時に、人気記事や新着記事を表示するためショートコードを使いました。
リファレンス通りに記述すればすぐショートコードが使えたと思いますが、それはプラグインの設定ファイルにショートコード用の記述があったからです。
今回は、自作でショートコード用の記述を作るところからやってみましょう。
functions.phpにショートコード用のPHPを記述し、お問い合わせなどへの遷移を促すボタンを作っていきます。
1. functions.phpにショートコード用のPHPを記述する
人気記事をショートコードで表示させる際、
[wpp header=’Popular Posts’ header_start='<h3 class=”title”>’ header_end='</h3>’]
のように[]で囲まれたコードを記述したと思います。
これがショートコードなんですが、設定なしに[]で囲んだコードを書いても当然ショートコードとして認識されません。
WordPressに「これはショートコードだ」と認識してもらうため、まずfucntions.phpに設定用の記述を追加します。
特にこのショートコードの設定の理解は難しいので、使い方についてWordPress公式リファレンスをしっかり読んでくださいね。
コピー
/**
* ボタンのショートコード
*
* @param array $atts ショートコードの引数.
* @param string $content ショートコードのコンテンツ.
* @return string ボタンのHTMLタグ.
* @codex https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_shortcode
*/
function my_shortcode( $atts, $content = '' ) {
return '<div class="entry-btn"><a class="btn" href="' . $atts['link'] . '">' . $content . '</a></div><!-- /entry-btn -->';
}
add_shortcode( 'btn', 'my_shortcode' );
これで
という名前でショートコードが利用できるよう設定ができました。引数として、ボタンのリンク先とボタンテキストを受け取るようにしています。
それでは、早速このコードをエディタで使ってみましょう！
2. エディタでショートコードを利用する【Gutenberg版】
それでは、追加したショートコードを実際にエディタで使っていきましょう！
以前はショートコード表示用にAddQuicktagというプラグインを使ってショートコード登録する方法がメジャーでしたが、2018年にWordPressの標準エディタがGutenbergという新エディタに変わり、プラグインを使う必要が無くなりました。
まだGutenbergでのショートコード利用について書かれた記事が少ないんですが、これからは確実にGutenbergが標準エディタとして浸透していきますので、Gutenbergでショートコードを使う方法について解説していきます。
『ブロック追加 > ウィジェット』 を開くと『ショートコード』というボタンがあるので、こちらをクリックします。
クリックすると、ショートコード入力欄が表示されるはずです。
このショートコード入力欄にショートコードを入力して使うんですが、Gutenbergには標準でブロックを再利用する機能がついています。
この機能を使って、問い合わせボタン用ショートコードを使い回せるように登録しましょう！
link=””のURLは、固定ページでお問い合わせページを作り、そのリンクに設定すればOKです。
入力できたら、ブロック左上の詳細ボタンをクリックし、再利用ブロックに追加します。
登録ブロック名を入力する欄が表示されるので、『問い合わせボタン』とでも名前をつけておきましょう。
これでボタンの再利用登録もできました👍
まずはこの状態で更新して、正しくボタンが表示されているか、クリックすると設定したリンクにちゃんと飛ぶか確認してみてください。
ちゃんと設定したリンクに飛んでればOKです❗️
ボタンの追加が確認できたら、管理画面に戻って「新規追加」からボタンの再利用ができるか試してみましょう！
ブロック追加の一番下、『再利用可能』ボタンを押してみてください。
先ほど登録した『問い合わせボタン』が表示されるはずです。
『問い合わせボタン』をクリックすると、ショートコードが追加されます。
これで問い合わせボタンを記事のどこにでも表示できるようになりましたね👍
自作ショートコードを追加する手順は、上記の流れになります。
メディアやブログでよく使われる吹き出しなどもショートコード登録しておくと時短になるので、使い回すコードは積極的にショートコード化していきましょう❗️
演習課題１. コンテンツの最下部に問い合わせボタンを追加する
エディタからショートコードを表示する流れは上記の通りです。
次に、クライアントから「ブログ（投稿）の最下部には必ず問い合わせボタンを入れるようにしたい」と言われた場合を想定して、全ての投稿コンテンツの終わりに問い合わせボタンを表示させてください。（実際にそういう要望もあります）
ヒントは「ショートコードをテンプレートに直接記入する」です。
どのテンプレートに、どのように記述すればいいかは、これまでの演習を復習しながら＋ググりながらやってみてください😀
演習課題2. コードをハイライト表示できるようにする【上級者向け】
このデイトラ記事の中でも使っている『highlight.js』を導入し、ソースコードを綺麗にハイライトできるようにしてください。
jsの導入が完了したら、さらにHTML・CSS・PHPの3言語をショートコードで追加できるようにしてみましょう❗️
もちろん、使い回せるように再利用登録までしてくださいね。
highlight.jsの追加方法や各コード用のcssは、はにわまんさんのこちらの記事を参考にどうぞ。
どのコードをショートコードにるのか、どの部分を引数にするのか、この演習の理解度が問われますね😎
少し難易度は高いですが、ぜひ挑戦してみてください！
それでは、お疲れ様でした。
