技術系ブログだと、デモやサンプルを表示するのにcodepanなどのHTMLやCSSと実際の表示を別々に表示できるサービスを利用しますが、どうにか自力で作成できないかなっと思ったので、カスタムポストとメタボックスを利用したWPプラグインで再現してみました。

0からつくるWPプラグイン

ディレクトリ構成

プラグインフォルダ

プラグインファイル

スクリプト

CSS

カスタムポストタイプ

まずは開発環境で専用のカスタムポストタイプを作ります。CPT UIを利用して作成します。開発環境でプラグインを利用して作成することで余計なプラグインを本番にアップする事を防ぎます。

CPT UI

作成したポストタイプをエクスポートし、プラグインの.phpに貼り付けます。プラグインを有効にすればカスタムポストが追加されているのが確認できます。

プラグインの作法としてのアンインストール

プラグインを作る際には飛ぶ鳥跡を濁さずが大切です。アンインストール.phpには投稿した記事をエクスポートして、DBから削除するよう心掛ましょう。

クラス化で周りに迷惑かけないようにする

関数名を直接ファイルに記載すると、他のプラグインとぶつかったりします。関数はそのプラグイン内で利用するように内包クラス化しましょう。

カスタムメタボックス

新規作成した記事に、カスタムメタボックスを表示します。

先ほど利用したプラグインファイルに、メタボックス追加のプラグインを記載します。

JSやCSSなど言語を複数追加する場合は、単純に言語入力欄を繰り返しフールドを作ったり、といくつか方法があります。

メタボックスカスタムフィールドの追加する4つの方法。

今回は本文にHTML,メタボックスにCSSをいれますのでCSS用の入力欄を追加します。

メタボックス、カスタムメタボックスの追加

今回はテキストエディタのnameを配列にしてjsとCSSを配列にします

カスタムメタ値をポストメタに追加

ポストにカスタムメタの値を登録

カスタムポスト用シングルページをつくる

表示用のテンプレを作ります。サイト全体の評価を下げないようにヘッダーにはノンインデックスを追加します。配列で追加されたメタ値をループでとりだします。

ショートコード

カスタムポストで投稿した内容をアイフレームで表示します。id属性にはカスタムポストのスラッグを利用します。