カスタムフィールド

はじめに

カスタムフィールドを使うと、ユーザーがコンテンツデータベースにフィールドを追加できます。カスタムフィールドは、コンテンツの作成や編集するときに管理パネルのインターフェイスに表示されます。

簡単な例

subtitleという名前のカスタムフィールドを追加します。以下に移動します。

管理パネル > サイドバー > 設定 > 全般 > カスタムフィールド

以下のJSONテキストをテキストエリアに追加して「保存」ボタンをクリックします。

{
    "subtitle": {
        "type": "string",
        "placeholder": "ページのサブタイトル"
    }
}

次に新しいページを作ります。以下に移動します。

管理者パネル > サイドバー > 新規コンテンツ

デフォルトでは、カスタムフィールドはページのオプションに表示されます。以下に移動します。

オプション > カスタム

「ページのサブタイトル」を入力するフィールドがあるので、フィールドにテキストを入力します。「オプション」ボタンをもう一度クリックしてメニューを非表示にしてタイトルとコンテンツを入力します。「保存」ボタンをクリックして新しいページを作成します。

新しいページにはsubtitleというカスタムフィールドがあり、値はテーマから表示できます。たとえば、このようにです。

<?php
    echo "ページのタイトルは" . $page->title();
    echo "ページのサブタイトルは" . $page->custom('subtitle');
?>

構造

構造体は、JSON形式で定義され、以下のキーをサポートします。

type（必須）: カスタムフィールドのタイプ。サポートされる値(文字列, ブール値)。
label（オプション）: カスタムフィールドのラベル。
tip（オプション）: ユーザーがカスタムフィールドを説明するための簡単なテキスト。
default（オプション）: カスタムフィールドのデフォルト値。
placeholder（オプション）: フィールド内の簡単なテキスト。
position（オプション）: エディター内の位置。サポートされる値（top, bottom）デフォルト値は空でエディター > オプション > カスタムにあるフィールドが適用されます。

カスタムフィールドの追加

カスタムフィールドを追加するには、次の場所に移動します。

管理パネル > サイドバー > 設定 > 全般 > カスタムフィールド

カスタムフィールドを定義するには、JSON構造の設定が必要です。以下の例をご覧ください。

カスタムフィールドをstring、キー名をyoutubeとしています

{
    "youtube": {
        "type": "string",
        "label": "YouTube",
        "tip": "YouTube URLを書きます。"
    }
}

カスタムフィールドをboolean、キー名をinStockとしています。

{
    "inStock": {
        "type": "bool",
        "label": "In Stock",
        "tip": "在庫がある場合はこのフィールドを選択します。"
    }
}

タイプが異なる2つのカスタムフィールド。

{
    "product": {
        "type": "string",
        "label": "Product",
        "tip": "製品名を入力します。"
    },
    "inStock": {
        "type": "bool",
        "label": "In Stock",
        "tip": "在庫がある場合はこのフィールドを選択します。"
    }
}

異なるタイプと異なるエディターの位置を持った3つのカスタムフィールド

{
    "product": {
        "type": "string",
        "placeholder": "Product name",
        "position": "top"
    },
    "inStock": {
        "type": "bool",
        "tip": "在庫がある場合はこのフィールドを選択。",
        "position": "top"
    },
    "imageURL": {
        "type": "string",
        "placeholder": "Image URL",
        "position": "bottom"
    }
}

カスタムフィールドの取得

クラスページには、フィールドの値を返すcustom()メソッドがあります。

以下の例では、上のyoutubeフィールドの値を表示しています。

<?php
    echo $page->custom('youtube');
?>

上の例からinStockフィールドのブール値をチェックします。

<?php
    if ($page->custom('inStock')) {
        echo "在庫があります";
    } else {
        echo "在庫はありません";
    }
?>

カスタムフィールドの削除

カスタムフィールドを削除するには、エントリーをJSON構造体から削除するだけです。この場合、カスタムフィールドはデータベースから完全に削除されませんが無効になります。

すべてのカスタムフィールドを削除したい場合は、次のようにテキストエリアに空のJSONを設定してください。

{}

Custom fields parserプラグイン

このプラグインを使うと、追加のソースコード用にページコンテンツの解析ができます。

YouTubeの動画と埋め込みコードを例に説明します。

youtubeという名前のカスタムフィールドを追加します。以下に移動します。

管理パネル > サイドバー > 設定 > 全般 > カスタムフィールド

テキストエリアに以下のJSONテキストを追加し、「保存」ボタンをクリックします。

{
    "youtube": {
        "type": "string",
        "placeholder": "Write a YouTube video embed link",
        "label": "YouTube"
    }
}

Custom fields parserプラグインを有効化します。

管理パネル > サイドバー > プラグイン > Custom fields parser > 有効化

プラグインの設定を編集します。カスタムフィールドyoutube用のテキストエリアがあることがわかります。カスタムフィールドに以下のiframeを追加します。

<iframe width="560" height="315" src="{{ value }}" frameborder="0" allow="autoplay" allowfullscreen></iframe>

変数{{value}}には、ページで定義されたカスタムフィールドの値が含まれています。

新しいページを作成し、カスタムフィールドyoutubeにYouTubeのリンクを書き込みます。

管理パネル > サイドバー > 新規コンテンツ > オプション > カスタム > YouTube

以下のYouTubeの埋め込みリンクを追加します。

https://www.youtube.com/embed/dQw4w9WgXcQ

これで、ページコンテンツ内にYouTube埋め込みビデオを設定できるようになりました。

こんにちは、初めてのYouTube動画です。

{{ youtube }}

ごあいさつ

新しいページにアクセスして、埋め込みビデオがページ内でどのように表示されるかを確認できます。これで、新しいページを作成して別のYouTubeリンクを設定しても解析によって動画埋め込みコードが表示されるようになります。

このプラグインは、埋め込みビデオがある各ページのコードの変更を回避できます。

Collaborate with us and edit this page