ワードプレス、投稿画面にカスタムボックスを追加してみた。

いやはや・・
半日、いやー1日以上かかりました。

何をしていたかと言うと、吹き出しをプラグインを使わないで出来ないかなー？と考えていたんですが、ややこしくなってきたので結局プラグインに頼ることにしたんです。
クイックタグのプラグインを使わないでは前にやっていました。
だから追加するのは大丈夫なのですが、数が多くなっちゃうから「むー」という感じだったんです。

ちょっと手がかかるかも知れないけど自分なりにスッキリして吹き出しの表情も増やせたように思います。

解決策として、投稿するときに画像のファイル名が分かれば良いかなと考えました。
検索したら大抵のことは出来ちゃうんだからすごい。

今日こちらを参考に画像ファイルの一覧を表示させてみました。
表示させるのに管理画面にもスタイルシートを適応させたりと中々自分には高度なことをしたんじゃないかな？

管理画面にオリジナルスタイルシートを読み込ませる

function postbox_container_custom_wp_admin_style() {
    wp_enqueue_style( 'postbox_container-edit', get_stylesheet_directory_uri() . '/action-edit.css' );
}
add_action( 'admin_enqueue_scripts', 'postbox_container_custom_wp_admin_style' );

投稿画面に任意の表示エリアを追加

function postbox_container_box() {
  global $post;
?>
  <div class="postboxcontainer">
ここに投稿画面に表示させたい内容を書く
  </div>
  <?php
}

function postbox_container_box_hooks() {
    add_meta_box( 'postbox_container', 'Postbox Container', 'postbox_container_box', 'post', 'side', 'high' );
}

function postbox_container_box_init() {
    add_action( 'admin_menu', 'postbox_container_box_hooks' );
}
add_action( 'init', 'postbox_container_box_init' );

このままだと文字とバランスが悪かったのでスタイルシートで調整。
ここで管理画面にも自作スタイルシートを適応させないといけないわけです。

追加したスタイルが下になります。

投稿画面、スタイルで調整

#postbox_container .postboxcontainer {
	min-height: 42px;
	max-height: 200px;
	overflow: auto;
	padding: 0 .9em;
	border: 1px solid #ddd;
	background-color: #fdfdfd;
	overflow-x: hidden;
}
#postbox_container .postboxcontainer label {
	display: inline-block;
	word-wrap: break-word;
	white-space: nowrap;
	max-width: 110px;
}
#postbox_container .postboxcontainer input {
	vertical-align: middle;
	/* max-width: 100px; */
	width: 100px;
}
#postbox_container .postboxcontainer table {
	border-collapse: collapse;
	margin: 15px 0;
	/* max-width: 100%; */
	width: 100%;
}
#postbox_container .postboxcontainer th {
	border: solid 1px #ccc;
	background-color: #eee;
}
#postbox_container .postboxcontainer td {
	border: solid 1px #ccc;
	white-space: nowrap;
}
#postbox_container .postboxcontainer th,
#postbox_container .postboxcontainer td {
	padding: 3px 5px;
}

一応自分の描いた表示になったのでOK

そんで前にテキストエディタに追加したタグを利用して画像ファイル名だけはコピペして書けばテキストエディタを増やさなくても、それなりにアイコンを使えるんじゃないでしょうか？

とにかく今回のやってみたいこと完了！
説明不足とか意味わからないことしてるとかなしよ。
アイコン変えるのに意外と便利かも？

http://wpcj.net/1209

投稿画面に任意の表示エリアを追加