Wonderful! WordPress

カスタムフィールドのクイック編集への入力フォームの表示

この記事は公開または最後に更新されてから2494日が経過しています。情報が古くなっている可能性があるのでご注意下さい。

『カスタムフィールドの投稿入力フォームへの表示』『カスタムフィールドの投稿一覧への表示』はできました。
残すところはと、クイック編集においてカスタムフィールドのデータの更新が出来るようになることです。

クイック編集フォームに新たな項目を加えるにはアクションフック "quick_edit_custom_box" を使用するとのこと。
あとの感じは『カスタムフィールドの投稿入力フォームへの表示』の時とだいたい似たようなものですが・・・。
カスタムフィールドの情報は『カスタムフィールドの投稿入力フォームへの表示』のところで既に $meta_cr配列にして作成してあるのでそれを使用します。以下です。

<?php
/*$meta_cf[custom field name] = array(
					0:form input name,
					1:保存データ形式('array':配列、'single':テキスト),
					2:Lavel 表示用 title,
					3:注釈文,
					4:input size,
					5:textareaの場合はtx,
					6:投稿種類(post=""(空) or カスタム投稿="diys"),
				);*/
$meta_cf['firstID'] = array( 'cffirstID', 'single', 'First ID', '初アップの時 0 、既存の場合は初アップ時のpost ID', '25', '', '' );
$meta_cf['jpn'] = array( 'cfjpn', 'single', 'Japanese', '', '35', '', '' );
$meta_cf['rmn'] = array( 'cfrmn', 'single', 'Romanized', '', '35', '', '' );
$meta_cf['egn'] = array( 'cfegn', 'single', 'English', '', '35', '', '' );
$meta_cf['bon'] = array( 'cfbon', 'single', 'Binomial', '', '35', '', '' );
$meta_cf['take'] = array( 'cftake', 'single', '撮影日時', '', '25', '', '' );
$meta_cf['bcg'] = array( 'cfbcg', 'single', 'background image', '', '25', '', '' );
$meta_cf['fee'] = array( 'cffee', 'single', '餌付け状態', '1:餌付けされた野鳥<br>2:餌場に来ていた野鳥<br>3:人に育てられた鳥', '20', '', '' );
$meta_cf['enc'] = array( 'cfenc', 'single', '初見時状況', '0:否MFでの偶然の出会い<br>1:MFでの偶然の出会い<br>2:net等で情報を得て自力での出会い<br>3:MFで情報を得て自力での出会い<br>4:否MFで情報を得て自力での出会い<br>5:MFで情報を得て先客が発見<br>6:否MFで情報を得て先客が発見<br>7:net等で情報を得て先客が発見<br>8:先に情報があり自力で発見<br>9:先に情報があり先客が発見またはポイントが明確', '20', '', '' );
$meta_cf['up'] = array( 'cfup', 'single', 'Latest update', '', '25', '', 'diys' );
$meta_cf['desc'] = array( 'cfdesc', 'single', 'seo describe', '', '70', 'tx', 'diys' );
$meta_cf['sky'] = array( 'cfsky', 'single', 'seo keywords', '', '70', '', 'diys' );
?>
PHP
CopyExpand

そして、html 出力関数。
5行目から10行目の "nonce" に関しては既に書いていますからそちらをご覧ください。→『カスタムフィールドの投稿入力フォームへの表示』nonceに関して
が、しかし・・・。
実はこれによって出力されるhtml のフォームには、既存のデータがあったとしてもそれが表示されておらずフィールドは空のままになっています。と、いうのもアクションフック "quick_edit_custom_box" においてはパラメータで投稿の ID が渡されず、グローバル変数の $post も使用できず、投稿のID を取得する方法が私にはわかりませんでした。
ネットで調べるとjquery で代入するとか、やっているのはあるのですが意味がよくわからない。

<?php
function display_cf_form_quickedit( $column_name, $post_type ) {
	global $meta_cf;

	if ( $column_name === 'customfield' ) {
		static $print_nonce = TRUE;
		if ( $print_nonce ) {
			$print_nonce = FALSE;
			//CSRF対策の設定(フォームにhiddenフィールドとして追加するためのnonceを「'my_nonce」として設定)
			wp_nonce_field( wp_create_nonce(__FILE__), 'my_nonce' );	
		}
?>
		<div id="custom_info" style="clear:both;">
			<p>Custom Field data</p>
			<table class="cstflddl">
<?php
			$ptype = $post_type;
			if ( $ptype === 'post' ) {
				$ptype = '';
			}

			foreach ( $meta_cf as $key => $val ) {
				if ( $ptype === $val[6] ) {//post typeにより出力するフィールドをかえる
					echo '<tr><td><label for="'.$val[0].'">'.$val[2].'</label></td>';
					if ( $val[5] === 'tx' ) {
						echo '<td><textarea name="'.$val[0].'" rows="4" cols="'.$val[4].'"></textarea></td>';
					} else {
						echo '<td><input type="text" name="'.$val[0].'" value=""  size="'.$val[4].'"></td>';
					}
					echo '<td><input type="checkbox" name="cb'.$val[0].'"> :  check delete data</td></tr>'."\n";
					if ( $val[3] !== '' ) {
						echo '<tr><td></td><td colspan="2" style="color:#808080">'.$val[3].'</td></tr>'."\n";
					}
				}
			}
?>
			</table>
		</div>
<?php
	}
}
add_action( 'quick_edit_custom_box', 'display_cf_form_quickedit', 10, 2 );
?>
PHP
CopyExpand

と思っていたら、ちゃんとwordpress のcodex にしっかり出ていました。なんのこっちゃ!
書いてあるのはjquery ファイルのfooter での読み込み方法と実際にデータを挿入するためのjquery のコード。
まずは読み込み用のphp。jquery のファイル"cf_edit.js"はテーマのフォルダと同じところにアップしてあります。codex では特定の投稿の種類(post とかカスタム投稿とか)でだけ読み込む方法になっています。

<?php
add_action( 'admin_footer-edit.php', 'cf_admin_edit_foot' );
// load scripts in the footer 
function cf_admin_edit_foot() {
	echo '<script type="text/javascript" src="'.get_stylesheet_directory_uri().'/cf_edit.js"></script>';
}
?>
PHP
CopyExpand

そして、jquery ファイルの中身。

(function( $ ) {
	// we create a copy of the WP inline edit post function
	var $wp_inline_edit = inlineEditPost.edit;
	// and then we overwrite the function with our own code
	inlineEditPost.edit = function( id ) {
		// "call" the original WP edit function
		// we don't want to leave WordPress hanging
		$wp_inline_edit.apply( this, arguments );

		// now we take care of our business

		// get the post ID
		var $post_id = 0;
		if ( typeof( id ) == 'object' )
			$post_id = parseInt( this.getId( id ) );

		if ( $post_id > 0 ) {
			// define the edit row
			var $edit_row = $( '#edit-' + $post_id );
			var $post_row = $( '#post-' + $post_id );
			//↑ここまでcodex そのまま全く同じ

			// get the data、↓ここから独自
			//下記の"column-customfield"の"customfield"が独自で設定したcolumn_name
			var $cf_data = $( '.column-customfield p', $post_row ).html();

			var $targetary = $cf_data.split( "<br>" );
			$targetary.pop();
			//$cfary = { "カスタムフィールド ラベル表示用タイトル":"form input name指定文字列" }
			var $cfary = { "First ID":"cffirstId","Japanese":"cfjpn","Romanized":"cfrmn","English":"cfegn","Binomial":"cfbon","撮影日時":"cftake","background image":"cfbcg","餌付け状態":"cffee","初見時状況":"cfenc","Latest update":"cfup","seo describe":"cfdesc","seo keywords":"cfsky" };

			for ( var i in $targetary ) {
				var $idary = $targetary[ i ].split( " : " );
				$( ':input[name = "' + $cfary[ $idary[0]] + '" ]', $edit_row ).val( $idary[1] );
			}
		}
	};
})( jQuery );
JavaScript
CopyExpand

23行目の"get the data" 以降が独自のコード。そこまではcodex にあったものをそっくりそのまま引用して使ってます。
"get the data" の文も変数名が違うだけで同じように見えますが、".column-customfield p" の最後の"p" が余計にくっついてます。
実際の取得する対象となっているここのサイトのこの部分のhtml はというと、

<td class="customfield column-customfield">
	<p style="color:#008080;">First ID : 2530<br>撮影日時 : 2014/10/25<br></p>
</td>
HTML
CopyExpand

となっていて、取得した変数の中身が、
<p style="color:#008080;">First ID : 2530<br>撮影日時 : 2014/10/25<br></p>
というように"p" タグまで含まれてしまうことの対処。
そしてそれによって得られたカスタムフィールドのデータは、書き出す時にまとめてしまっているので、
First ID : 0<br>Japanese : エナガ<br>English : Long-tailed Tit<br>Binomial : Aegithalos caudatus trivirgatus<br>撮影日時 : 2011/05/01<br>Romanized : Enaga<br>background image : tit-rub<br>初見時状況 : 1<br> と、"<br>" で区切った"カスタムフィールド名 : 値" の形になっています。

まずはこれをsplit()により"<br>"で個々のカスタムフィールドごとに分けて配列にし、その個々に分けられたカスタムフィールドの文字列をふたたびsplit() によりフィールド名と値に分け、あらかじめ作成しておいたカスタムフィールド ラベル用タイトルとそのinput要素のnameに指定した文字列との連想配列を使ってinput要素のnameを取得し、そのinput要素のvalue に代入しています。

データ更新用の関数は『カスタムフィールドの投稿入力フォームへの表示』入力した値の保存関数で作成したものを兼用しています。 カスタムフィールドのデータを削除する時は"checkbox" をチェックした時とし、空のデータ送信時に関しては何もせず、無視するという事にしています。

こんなぐあい!
quick editor

Leave a Reply!

JavaScript is necessary to send a comment.
You can edit and delete your comment if you input a edit key.
Edit key is necessary for attesting you when you edit and delete it.
The tag of HTML cannot be used in comment.
When you comment for the first time, it is displayed after the approval of the administrator.
Because I cannot speak English so much, it takes time to answer.
Required fields are marked *.

※Please enter more than 5 characters only alphabets.
※Edit or delete are possible for 2000 days after approval.

*

♠Simplistic Comment User Editable v4.0

♠When visitors leave comments on the site this site collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.
♠This site does not use cookie when visitors leave comments and commenter edit comment.
♠This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comments feed

Trackback URL : https://strix.main.jp/wp-trackback.php?p=48278

Sanbanse Funabashi
2010.10.24 sunrise

Top

スクロールさせるか画像をクリックすると元に戻ります。