• 解決済 qwe0001

    (@qwe0001)


    Gutenbergエディタで、投稿画面の右側に任意の日時入力欄(先行公開日時欄)を表示させたいと思っています。

    アドバンスドカスタムフィールドを使えば、右サイドバーの一番下に表示できることは知っていますが、私の上司はこだわりが強く、ディスカッションや投稿者の並びの下、欲を言えば公開日時のすぐ下に表示することを強く希望しています😭😭😭

    どうすれば実現できますか? 公開日時フィールドと同じUIで表示できるのが理想ですが、単なるテキストフィールドでも構いません。

    functions.phpやjsファイルに何かを記述することで、右サイドバーに任意の入力欄を表示する方法が知りたいです。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • モデレーター Yukinobu Asakawa

    (@yukinobu)

    WordPress の管理画面のカスタマイズになると思います。
    カスタマイズするためのコードのアドバイスをこのフォーラムで行うことは難しいのですが、その前に….
    共有してくださった画像を拝見すると入力欄を表示するだけでなく、「先行公開日時欄」に入力した値で、WordPress標準とは異なる処理をすることが求められているようにお見受けします。
    ご希望通りの仕様を満たすアドバイスは難しいかもしれませんが、もう少し情報を共有いただくと、他の手段だったり、何か有益ななアドバイスができるかもしれません。

    トピック投稿者 qwe0001

    (@qwe0001)

    @yukinobu

    ご返信ありがとうございます。

    私が知りたいのは、任意の入力欄を右サイドバーのステータス領域に追加する方法です。

    先行公開日時欄に入力した値をフロントで処理する部分の実装は済んでおりますので、その部分は考えてなくて構いません。

    Advanced Custom Fields のフィールドグループ機能を使い、表示位置を「サイド」にすれば、ステータス領域の下部に任意の入力欄を表示することは可能です(スクリーンショット左側の状態)

    ですが、私の上司、ひいてはクライアント様が公開日時欄と先行公開日時欄は並んで表示するべきと言って譲らず、ステータス領域に差し込みたいとのことです(スクリーンショット右側の状態)

    何らかのプラグインを用いて同等のことが実現できるのであればそれでも構いません。

    お知恵をお貸しください。よろしくお願いいたします🙇

    モデレーター Yukinobu Asakawa

    (@yukinobu)

    ご確認ありがとうございます。
    それでは、「任意の入力欄を右サイドバーのステータス領域に追加する方法のみ」を確認しました。

    手元の検証環境で調べながら試してみたら、とりあえずできましたが、私は普段はこのようなカスタマイズせず、標準機能でしか使っていません。

    ですので、このカスタマイズの方法は検証が不十分です。その点はご理解の上でお試しください。

    ご希望の位置に指定された位置にACFの日付フィールドを表示するには、Dashboard widgets APIの「メタボックス(Meta Box)」を使用すると、実現できると思います。

    必ずバックアップを行った上でカスタマイズを行ってください。

    Dashboard widgets API
    https://developer.wordpress.org/apis/dashboard-widgets/


    // カスタムメタボックスを登録
    function add_custom_date_meta_box() {
    add_meta_box(
    'custom_date_meta_box', // メタボックスID
    '先行公開日時欄', // メタボックスのタイトル
    'custom_date_meta_box_callback', // コールバック関数
    'post', // 投稿タイプ(必要に応じて変更可能)
    'side', // 表示位置(右サイドに表示)
    'high' // 表示優先度
    );
    }
    add_action('add_meta_boxes', 'add_custom_date_meta_box');

    // メタボックスの内容を出力
    function custom_date_meta_box_callback($post) {
    // ACFのフィールドから日付を取得
    $custom_date = get_field('custom_date', $post->ID);

    if ($custom_date) {
    // 日付をフォーマットして表示
    $formatted_date = date_i18n('Y年m月d日', strtotime($custom_date));
    echo '<p>選択された日付: <strong>' . esc_html($formatted_date) . '</strong></p>';
    } else {
    echo '<p>日付が設定されていません。</p>';
    }
    }

    1.add_meta_box 関数
    この関数を使って投稿編集画面にカスタムメタボックスを追加します。
    第5引数に ‘side’ を指定することで、右側のエリアに表示されます。

    2.コールバック関数
    custom_date_meta_box_callback 関数で、表示内容を定義します。ここでは、ACFの get_field を使って日付フィールドの値を取得し、フォーマットして表示しています。

    上記のコードをfunctions.phpに追加しますが、そのままテーマのfunctions.phpに貼り付けてしまうと、テーマのアップデートで上書きされますので、子テーマを作成するなり、プラグイン「Code Snippets」を使うなどの工夫をしてください。

    なお、繰り返しますが必ずバックアップを行った上でカスタマイズを行ってください。

    モデレーター Yukinobu Asakawa

    (@yukinobu)

    ごめんなさい。
    上記のカスタマイズまではすでに@qwe0001 さんが実現できていたのですかね。

    理解が悪くてすみません
    公開日時のすぐ下には表示させるカスタマイズは現時点ではわかりかねます。試してみないとわかりません。

    お役に立てずすみません。

    こんにちは。

    ブロックエディターは一つのReactアプリであるため、PHPのフックのような概念は通用しません。任意の箇所に何らかのReact要素を注入できるかどうかは、そこに「スロット」が用意されているかどうかによります(SlotFills Reference)。

    ちょうどそのあたりに「PluginPostStatusInfo」というスロットが用意されていますので、それを利用すれば、独自のReact要素を注入する事はできます(PluginPostStatusInfo README)。

    このスロットを使用せず、バニラJSで何とかする方法もあると思いますが、かなり大変です。

    ただし、実装にあたってはReactやGutenbergのデータAPIの知識などが必要になります。

    もしここまでの内容の意味自体が分からない場合は、無理せずACFやメタボックスを素直に使う事をお勧めします。

    トピック投稿者 qwe0001

    (@qwe0001)

    @wildworks@yukinobu

    ご返信ありがとうございます。ピンポイントなリファレンスの共有ありがとうございます。

    当方、ReactJSの開発経験はなく、ChatGPTなどを用いて試行錯誤してみましたが、思うようにはいきませんでした。仮に入力項目を表示できたとして、DBへのデータ保存、サーバーサイドバリデーションをどう実装するのかという問題もありますし、自前で実装するには課題が山積していますので、ACFを使う方法で再度、説得することにします。

    本件は解決済みとしてクローズいたします。皆様大変貴重なご意見ありがとうございました。

    なお、ACFを使った方法は @yukinobu 様の提案している functions.php に書く方法でも出来ますが、以下の方法であれば、ノーコードで実装可能です。

    管理画面左サイドバー > ACF > フィールドグループ > 新規追加

    設定 > プレゼンテーション > 位置: サイド を選択

    モデレーター Yukinobu Asakawa

    (@yukinobu)

    お役に立てずすみません

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。