BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. WordPress・その他CMS
  5. カスタム投稿タイプの投稿データを取得、表示するショートコードの実装
by ウラカワ ウラカワ

カスタム投稿タイプの投稿データを取得、表示するショートコードの実装

カスタム投稿タイプの投稿データを取得、表示するショートコードの実装

こんにちは、ウラカワです。

今回はWordPressのショートコードに関するカスタマイズについてです。

WordPressにはショートコードという便利な機能が用意されています。

お問い合わせフォームを設置したことがあれば一度は目にしていると思いますが、
プラグインでよく使われています。

こういうやつですね!これの何が便利なのか?

サイトの運営を長く続けていると、どこかで改修する必要性が出てきます。

ですが、例え同じフォーマットのパーツであっても複数の記事内にソースコードを直接貼り付けてあると、それらの構造を簡単に変更することは出来ません。

そういった時にショートコードを活用すると、変更があった場合でも記事を弄らずショートコードの中身だけ変更すれば良いのでメンテナンスが楽になります。

  • 複数の記事に同じソースコードを埋め込みたい!
  • フォーマットの決まったパーツを内容だけ変えて各記事に埋め込みたい!

今回紹介する方法はこういった場合に適しています。

実装コード

解説・使い方

  • カスタム投稿タイプの登録
  • カスタムフィールドの登録
  • 管理画面の投稿一覧にショートコードを表示
  • 管理画面の投稿一覧、編集画面の余計な項目を非表示
  • ショートコードの登録

内容的にはカスタム投稿の登録だったり、カスタムフィールドの登録だったり、基本的なカスタマイズの組み合わせです。

問題はショートコードは通常wpautopのあとに展開されるということです。

なので、普通にショートコードを登録しただけでは埋め込んだ時に想定したソースコードにはならないことがあります。

その対策で書いたのが最後のフィルターです。

エディター内容の処理と一緒に実行してしまえ、という感じですね。

この方法自体はWordPress本体のEmbedショートコード実装方法と同じです。

で、今回の方法を実装すると管理画面の投稿一覧に以下のようなショートコードが表示されます。

使い方としてはこのショートコードを記事内に貼るだけ。

あとは内容をどうするかだけです。

エディター内容をそのまま引っ張ってくるのか、カスタムフィールドを用意して色々入力させたものを表示させるのか。

割と色々なものに対応出来ると思います。

最後に

今回ショートコードの実装方法をご紹介したわけですが、ショートコードは次期エディターのgutenbergでも使用可能です。

内容にもよりますが、gutenbergに独自ブロックを追加するよりも、今回のようなショートコードで対応する方法の方が良い場面も増えそうな気がしています。

ページの先頭に戻る