ワードプレスの投稿のテキストモードに文字色、背景色を選択するボタンを付ける
投稿のテキストモードにボタンを追加する
投稿エディタにボタンを追加する。function add_my_quicktag() {?>
<script type="text/javascript">
// ボタンの追加
QTags.addButton('ID', '表示', コールバック関数);
function コールバック関数(f, g, fd){
//テキストエリアへの反映
}
</script>
}
テキストエリアへの反映(タグでくくる)場合
開始タグ、終了タグを設定して戻る。AddQuickTag のような単なるタグの挿入の場合は、これで済みます。
this.tagStart = '開始タグ';
this.tagEnd = '終了タグ';
QTags.TagButton.prototype.callback.call(this, f, g, fd);
テキストエリアへの反映(テキスト編集)場合
ちょいと小賢しいことをする場合は、直接選択開始位置、終了位置で文字列を分解して処理してあげればいい。 var textarea = document.getElementById("content");
var sentence = textarea.value;
var before= sentence.slice(0, textarea.selectionStart);
var after = sentence.slice(textarea.selectionEnd);
var text = sentence.slice(textarea.selectionStart, textarea.selectionEnd);
textarea.value = data;
追加するタグのパラメータをモーダルウィンドウを使って設定させる
追加するタグのパラメータをモーダルウィンドウを使って設定させる場合、QTag が呼び出された時点でモーダルウィンドウをアクティブにする。モーダルウィンドウの設定
モーダルウィンドウは、add_meta_box の post , page で呼び出したときにだけ admin_print_footer_scripts を使って QTag のモジュールを表示させるようにしないと投稿と関係のないところでボタンを貼り付けようとしてエラーになってしまうので注意が必要。add_action( 'admin_menu' , 'meta_box');
function meta_box()
{
add_meta_box(
'POST meta_append1',
'モーダルウィンド + add_my_quicktag 追加',
'meta_append', 'post', 'normal', 'high' ); // —-(1)
add_meta_box(
'meta_append2',
'PAGE モーダルウィンド + add_my_quicktag 追加',
'meta_append', 'page', 'normal', 'high' ); // —-(1)
}
// モーダルウィンドウ
function meta_append()
{
// QTag のモジュールを呼び出す。
add_action('admin_print_footer_scripts', 'add_my_quicktag');
?>
<!-- ここからモーダルウィンドウ -->
<div id="yaq-content">
<!-- モーダルウィンドウのコンテンツ開始 -->
<table>
<form name="yaqForm">
<tr>
<td colspan="2" align="center">
<input type="hidden" name="yaq_stat" id="yaq_stat">
<input type="hidden" name="yaq_type" id="yaq_type">
<input type-"text" name="yaq_color" id="yaq_color">
<div id="yaq-backgroundV">
<select name="yaq_fullhalf" id="yaq_fullhalf">
<option value="full">FULL</option>
<option value="half">HALF</option>
</select>
</div>
<div id="yaq-backgroundH">
<input type="hidden" name="yaq_fullhalf" id="yaq_fullhalf">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="yaq-cancel" id="yaq-cancel" value="キャンセル" OnClick="yaq_stat.value='C';">
</td>
<td align="center">
<input type="button" name="yaq-close" id="yaq-close" value=" 挿 入 " OnClick="yaq_stat.value='';">
</td>
</tr>
</form>
</table>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- ここまでモーダルウィンドウ -->
スポンサーリンク
モーダルウィンドウの送信を受け取る
前述の meta_append の続きとして以下を追加する。上とつながってるので注意
<script>
$( "#yaq_overlay,#yaq-close" ).unbind().click( function(){
//挿入テキスト(値取り出し)
var yaq_stat = $('#yaq_stat').val();
var yaq_fullhalf = $('#yaq_fullhalf').val();
var yaq_color = $('#yaq_color').val();
if( yaq_stat=='' ){
var textarea = document.getElementById("content");
var sentence = textarea.value;
var pos = textarea.selectionStart;
var before = sentence.substr(0, textarea.selectionStart);
var body = sentence.slice(textarea.selectionStart, textarea.selectionEnd);
var after = sentence.substr(textarea.selectionEnd);
var line;
//挿入テキスト(作成)
line = '';
if( yaq_type=='F' ){
line += '<span style="color:'+yaq_color+'">'+body+'</span>';
yaq_lastcolor_F = yaq_color;
}else{
if( yaq_fullhalf=='half' ){
// background: linear-gradient(transparent 60%, #fcc 0%);
line += '<span style="linear-gradient(transparent 60%, '+yaq_color+'0%)">'+body+'</span>';
}else{
line += '<span style="background-color:'+yaq_color+'">'+body+'</span>';
}
yaq_lastcolor_B = yaq_color;
}
//作成したテキストを挿入
sentence = before + line + after;
textarea.value = sentence;
if( yaq_type=='F' ){
$( "#yaq-backgroundH" ).fadeOut();
}else{
$( "#yaq-backgroundV" ).fadeOut();
}
}
//モーダルウィンドウをフェードアウト
$( "#yaq-content,#yaq-overlay" ).fadeOut( "slow" , function(){
$('#yaq-overlay').remove() ;
} ) ;
} ) ;
$( "#yaq-cancel" ).unbind().click( function(){
//モーダルウィンドウをフェードアウト
$( "#yaq-content,#yaq-overlay" ).fadeOut( "slow" , function(){
$('#yaq-overlay').remove() ;
} ) ;
} ) ;
//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
$( window ).resize( centeringModalSyncer_yaq ) ;
//センタリングを実行する関数
function centeringModalSyncer_yaq() {
//画面(ウィンドウ)の幅、高さを取得
var w = $( window ).width() ;
var h = $( window ).height() ;
// コンテンツ(#modal-content)の幅、高さを取得
// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
var cw = $( "#yaq-content" ).outerWidth();
var ch = $( "#yaq-content" ).outerHeight();
//センタリングを実行する
$( "#yaq-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
}
</script>
モーダルウィンドウ、カラーピッカ―のためのスタイル
これも上とつながっているので注意<style>
#yaq-content {
width: 50% ;
margin: 0 ;
padding: 10px 20px ;
border: 2px solid #aaa ;
background: #fff ;
position: fixed ;
display: none ;
z-index: 1002 ;
}
#yaq-overlay {
z-index: 1001 ;
display: none ;
position: fixed ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 120% ;
background-color: rgba( 0,0,0, 0.75 ) ;
}
#qt_content_yaqfclr{
font-weight:bold;
}
#qt_content_yaqbclr{
background-color:#f1f1c1;
}
#yaq-backgroundV{
display:none;
}
#yaq-backgroundH{
display:none;
}
.button-link-yaq {
color: #00f ;
text-decoration: underline ;
}
.button-link-yaq:hover {
cursor: pointer ;
color: #f00 ;
}
</style>
<?php
} // function meta_append() の終わり
?>
モーダルウィンドにカラーピッカーを貼り付ける準備
以下が wp-colorpicker の準備の基本形。// カラーピッカ―投入
add_action( 'admin_enqueue_scripts', 'yaq_admin_scripts' );
function yaq_admin_scripts() {
wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');
}
投稿画面のテキストモードにカラーピッカ―をつかった文字色、背景色設定のボタンの流れ
投稿画面のテキストモードにカラーピッカ―をつかった文字色、背景色設定のボタンの流れは、以下のようになります。- ボタンの配置
- ボタンからモーダルウィンドウを呼び出す。
- モーダルウィンドウのサブミットアクション（ボタン）で文字列の加工をおこなう。
- 加工した文字列を投稿のテキストエリアへ吐き出す
ワードプレスの投稿のテキストモードに文字色、背景色を選択するボタンを付ける時の注意点
プラグインなので関数名のダブリには気を付けてください。それで３時間ぐらいはまりましたｗｗｗ
wp-colorpicker は、簡単につけられますけど、外すということができない。
なぜ外したかったかといえば、defaultColor が効かないから、外して再度設定すればいいかな？と思ったんだけど、だめだった。
どうしたら表示された時にデフォルトの色を変えられるでしょう？
未だに不明で前述のソースには、その残骸が残ってます。
display のモードが切替わった時、カラーのテキストエリアへ値を投げ込めばいいかなとかおもったけど、かなり時間を使ってしまっていたので、ここまでで公開。
文字色と背景色の起動時の色を保存して使いたかったんだけどね。
案外苦労しました。
プラグインにしてあるんだけど、クロームでしか動かしていなません。
そのためIEとかでの互換が撮れないと思いますのでソースは切り張りしてくださいｗ
部品としてみていただいき参考にしていただければ幸いです。
スポンサーリンク