HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ワードプレスの投稿のテキストモードに文字色、背景色を選択するボタンを付ける

スポンサーリンク

投稿のテキストモードにボタンを追加する


投稿エディタにボタンを追加する。
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');
}



投稿画面のテキストモードにカラーピッカ―をつかった文字色、背景色設定のボタンの流れ


投稿画面のテキストモードにカラーピッカ―をつかった文字色、背景色設定のボタンの流れは、以下のようになります。

  1. ボタンの配置
  2. ボタンからモーダルウィンドウを呼び出す。
  3. モーダルウィンドウのサブミットアクション(ボタン)で文字列の加工をおこなう。
  4. 加工した文字列を投稿のテキストエリアへ吐き出す



ワードプレスの投稿のテキストモードに文字色、背景色を選択するボタンを付ける時の注意点


プラグインなので関数名のダブリには気を付けてください。
それで3時間ぐらいはまりましたwww

wp-colorpicker は、簡単につけられますけど、外すということができない。
なぜ外したかったかといえば、defaultColor が効かないから、外して再度設定すればいいかな?と思ったんだけど、だめだった。

どうしたら表示された時にデフォルトの色を変えられるでしょう?
未だに不明で前述のソースには、その残骸が残ってます。

display のモードが切替わった時、カラーのテキストエリアへ値を投げ込めばいいかなとかおもったけど、かなり時間を使ってしまっていたので、ここまでで公開。

文字色と背景色の起動時の色を保存して使いたかったんだけどね。
案外苦労しました。


プラグインにしてあるんだけど、クロームでしか動かしていなません。
そのためIEとかでの互換が撮れないと思いますのでソースは切り張りしてくださいw


部品としてみていただいき参考にしていただければ幸いです。



スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい

Javascript から CGIを呼び出すのに便利な XMLHttpRequest 覚書

Javascript から CGIを呼び出すのに便利な XMLHttpRequest 覚書 XMLHttpRequestは、Javascript から サーバー上のCGIを呼び出す時に便利なコマンドだ。XMLHttpRequestをざっくり書いておく。CGIへコマンドを送る(JavaScri

Unchecked runtime.lastError: The message port closed before a response was received.の解決策

Unchecked runtime.lastError: The message port closed before a response was received.の解決策 Unchecked runtime.lastError: The message port closed before a response was received.未チェックのruntime.la

ロボフォームのようなパスワードを保存する拡張機能

ロボフォームのようなパスワードを保存する拡張機能 ロボフォームのようなパスワードを保存するJavaScritpを書こうと思った。ロボフォームは、wwwサイトのログイン情報などを保存できるブラウザの拡張機能だ。ところが、バージョンが上がるたび使い勝手が

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横