サポート » プラグイン » 複数の入力フィールドのグループ化について

  • heysister721

    (@heysister721)


    advanced custom field Proを使用しています。

    入力フィールドを追加していく段階で、グループ化する方法を教えてください。
    繰り返しフィールドで、似たようなことはできるのですが、複数行に渡る入力は必要ないので、見た目だけ「H(  ) × W(   ) × D(   )」のような入力がしたいのです。

    単純にテキストフィールドで作ってしまうと、
    サイズ( 幅 )[ ]
    サイズ(高 さ)[ ]
    サイズ(奥 行)[ ]
    みたいにはできるのですが、UI的には使いづらいと感じています。

    良き方法がありましたら教えてください。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    あんまりいい方法ではないのですが、プラグインに頼らず入力欄を自作するのも面倒なので、JS(jQuery)を使って無理矢理に見た目を変えたことはあります。

    具体的に何をやったかというと、

    jQuery(function($){
    	$('ACFが出力する要素').replaceWith(
    			function(){
    					return $('<div class="cf_inline">').append($(this).contents());
    			}
    	);
    });

    みたいな感じで、ACFが出力する入力フィールドのHTMLの要素を、適当なdiv要素に無理矢理置き換えるJSを作成

    
    .cf_inline{
    	display: inline;
    }
    

    みたいな感じのCSSファイルを作成(CSSは自由に編集してください)

    作成したJS,CSSを、wp_enqueue_style, wp_enqueue_scripts関数を使って出力(管理画面でだけ適用すればいいのでadmin_enqueue_scriptsあたりにフック)

    とにかくjQueryのreplaceWithでがんばるという、かなり無理矢理な方法ですが、HTMLとCSSが書ければ、なんとなく横並びな感じにはできるのではないかなーと。(ちゃんとした人が見たら怒られそうな力技。。。)

    もっとキレイにやりたいのであればACFを使わず入力欄を自作すべきだと思いますが、プラグインの恩恵を受けつつ入力欄を好きにしたいなら、このくらいの泥臭さは我慢しないといけないような気がしました。

    Pineapplen

    (@pineapplen)

    Pro版でも動くかどうかわかりませんが、項目を横並びに設定できるプラグインがあります。
    「Advanced Custom Fields: Multiple Fields per row」
    https://ja.wordpress.org/plugins/advanced-custom-fields-row-field/

    ちょっと癖があるというか、うまく設定できないときがあるので
    mypacecreatorさんのおっしゃってる方法の方が確実ですけど…

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「複数の入力フィールドのグループ化について」には新たに返信することはできません。