【WP】Smart Custom Fields [関連する投稿][関連するカテゴリー] の枠の高さを変える

こんにちは！日々Wordpressと格闘している Millmiです^^

Smart Custom Fields の[関連する投稿] [関連するカテゴリー] は、height 160px の固定。投稿数が多かったり、選択数を多くすると、かなり見辛い><。

今回は、[関連～] の投稿画面での枠の高さを変えてしまうという、かなりディープなカスタマイズです^^w

▲画像は「関連するカテゴリー」ですが「関連する投稿」も同じです

あまり使われていないっぽい[関連する投稿]、
実は、変更の多いLPゃSPでは結構使えたりするんです^^;

必要とする人はあまりいないかな~??という気もしますが、、
私自身、何度か枠を広げる必要があったので、忘備録代わりに書いておきます。

高さの変更方法

admin-style.cssを作り、対応するclassにスタイルを当てて高さを変更します。

投稿画面のソース (不要部分は割愛)

<table class="smart-cf-field-type-taxonomy smart-cf-layout-type-default"><tr>
<th>カテゴリー(term)</th> 
<td> 
	<div class="smart-cf-relation-left" ～～ > 
		<div class="smart-cf-relation-children-select"> 
			<ul><li>呼び出される既存データ</li></ul> 
		</div> 
	</div> 
	<div class="smart-cf-relation-right"> 
		<ul><li>選択したデータ</li></ul> 
	</div> 
</td> 
</tr></tabl>

(smart-custom-fields4.1.2。バージョンによって異なる可能性があります)

高さを変えるCSSの適用方法

admin-style.cssの準備

管理画面専用の admin-style.css という空のスタイルシートを作りアップロード。
(/WPディレクトリ/wp-content/themes/利用中のテーマ/
style.cssと同じ階層にアップロードしてください )
スタイルシートを読み込ませる為に functions.pxp に以下のコードを記載

function mytheme_admin_enqueue() { 
	wp_enqueue_style( 'my_admin_style', get_stylesheet_directory_uri() . '/admin-style.css' ); 
} 
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );

置き換え用スタイルを作成

admin-style.cssに以下のスタイルを記載すれば完了^^ (高さは自由に変更してください)

.smart-cf-meta-box-table .smart-cf-relation-left, 
.smart-cf-meta-box-table .smart-cf-relation-right, 
.smart-cf-meta-box-table .smart-cf-relation-left .smart-cf-relation-children-select { 
	height: 300px !important; }

SCF のスタイルシートが後になる場合に備え !import しておきます。

▼ スタイルが適用されると ▼

ゆったりしました～ ^^v

もし上手く動かない時は?

まずはadmin-style.cssのアップロード先、functions.pxp に記載したurlやコードを確認。
↑ このミスが一番多かったり^^;;

SCFのバージョンなどでクラス名が変わっている可能性があるので

Smart Custom Fieldsを載せている投稿ページのソースを見て、クラス名を確認
Smart Custom Fields の editor.css でソースに書かれているcssを探す

などをお試しくださいね。