Smart Custom Fields

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

この記事は最終更新から2年以上経過しており、内容が古い可能性があります

[mill]

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

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


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

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

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

同じテーマの記事
このページの目次
  1. 高さの変更方法
    1. 高さを変えるCSSの適用方法
      1. admin-style.cssの準備
      2. 置き換え用スタイルを作成
  2. もし上手く動かない時は?

高さの変更方法

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の準備

  1. 管理画面専用の admin-style.css という空のスタイルシートを作りアップロード。
    (/WPディレクトリ/wp-content/themes/利用中のテーマ/
    style.cssと同じ階層にアップロードしてください )
  2. スタイルシートを読み込ませる為に 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のバージョンなどでクラス名が変わっている可能性があるので

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

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

同じテーマの記事