WordPressでショートコードを自作する【Gutenberg対応】こんにちは!フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。検索結果ページ+404ページを作る10thステップであるこの記事では、自作ショートコードでボタン作成していきます。『8.サイドバーの作成』時に、人気記事や新着記事を表示するためショートコードを使いました。リファレンス通りに記述すればすぐショートコードが使えたと思いますが、それはプラグインの設定ファイルにショートコード用の記述があったからです。今回は、自作でショートコード用の記述を作るところからやってみましょう。functions.phpにショートコード用のPHPを記述し、お問い合わせなどへの遷移を促すボタンを作っていきます。header_end='</h3>’]のように[]で囲まれたコードを記述したと思います。これがショートコードなんですが、設定なしに[]で囲んだコードを書いても当然ショートコードとして認識されません。WordPressに「これはショートコードだ」と認識してもらうため、まずfucntions.phpに設定用の記述を追加します。このショートコードの設定の理解は難しいので、使い方についてWordPress公式リファレンスをしっかり読んでくださいね。);これでという名前でショートコードが利用できるよう設定ができました。引数として、ボタンのリンク先とボタンテキストを受け取るようにしています。エディタでショートコードを利用する【Gutenberg版】それでは、追加したショートコードを実際にエディタで使っていきましょう!以前はショートコード表示用にAddQuicktagというプラグインを使ってショートコード登録する方法がメジャーでしたが、2018年にWordPressの標準エディタがGutenbergという新エディタに変わり、プラグインを使う必要が無くなりました。Gutenbergでのショートコード利用について書かれた記事が少ないんですが、これからは確実にGutenbergが標準エディタとして浸透していきますので、Gutenbergでショートコードを使う方法について解説していきます。開くと『ショートコード』というボタンがあるので、こちらをクリックします。クリックすると、ショートコード入力欄が表示されるはずです。このショートコード入力欄にショートコードを入力して使うんですが、Gutenbergには標準でブロックを再利用する機能がついています。この機能を使って、問い合わせボタン用ショートコードを使い回せるように登録しましょう!link=””のURLは、固定ページでお問い合わせページを作り、そのリンクに設定すればOKです。入力できたら、ブロック左上の詳細ボタンをクリックし、再利用ブロックに追加します。登録ブロック名を入力する欄が表示されるので、『問い合わせボタン』とでも名前をつけておきましょう。これでボタンの再利用登録もできました👍まずはこの状態で更新して、正しくボタンが表示されているか、クリックすると設定したリンクにちゃんと飛ぶか確認してみてください。ボタンを押してみてください。先ほど登録した『問い合わせボタン』が表示されるはずです。『問い合わせボタン』をクリックすると、ショートコードが追加されます。自作ショートコードを追加する手順は、上記の流れになります。コンテンツの最下部に問い合わせボタンを追加するエディタからショートコードを表示する流れは上記の通りです。次に、クライアントから「ブログ(投稿)の最下部には必ず問い合わせボタンを入れるようにしたい」と言われた場合を想定して、全ての投稿コンテンツの終わりに問い合わせボタンを表示させてください。(実際にそういう要望もあります)東京フリーランスでも、『30DAYSトライアル』カテゴリーの記事では文章の最後にサポートボタンが表示されるように設定してあります。(サポートよろしくお願いします🙇‍♂️)ヒントは「ショートコードをテンプレートに直接記入する」です。コードをハイライト表示できるようにする【上級者向け】このデイトラ記事の中でも使っている『highlight.js』を導入し、ソースコードを綺麗にハイライトできるようにしてください。jsの導入が完了したら、さらにHTML・CSS・PHPの3言語をショートコードで追加できるようにしてみましょう❗️もちろん、使い回せるように再利用登録までしてくださいね。highlight.jsの追加方法や各コード用のcssは、はにわまんさんのこちらの記事を参考にどうぞ。難易度は高いですが、ぜひ挑戦してみてください!それでは、お疲れ様でした。いう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。投稿一覧おしゃべり好きな28歳Webエンジニア。立命法→大手で営業職→1年で退社→未経験でIT系に転職→2年修行→フリーランスエンジニアになり4年目です。PHP・Laravel・WordPressが専門。2019.06.20こんにちは!フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。2019.06.27こんにちは!フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。2019.06.22こんにちは!フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。USイメージキャラクター『Freena』フリーランスの羅針盤となるメディアサイト『東京フリーランス』。フリーランスの皆さんに役立つコンテンツを配信しています。