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

ワードプレスの AddQuckTag のように 編集ボタンをつける

スポンサーリンク

ワードプレスの プラグイン AddQuckTag は、めちゃめちゃ便利ですよね?

自分でタグセットを登録できるため、効率よく投稿作業ができます。

ですが、AddQuickTag は、2つほどのボタンを除いて(HTML Entities , Decode HTML)、あくまでも静的なタグの埋め込みです。


投稿作業中、タグを埋め込むのに最も手間がかかるとおもっているのがリストです。

例えば、

・list1
string1
・list2
string1
・list3
string1

これをこんな感じにタグをいれたい。
<ul style="">
<li><b>list1</b>
<div style="margin-left:20px;">string1
</div></li>
<li><b>list2</b>
<div style="margin-left:20px;">string1
</div></li>
<li><b>list3</b>
<div style="margin-left:20px;">string1
</div></li>
</ul>


表示
  • list1
    string1
  • list2
    string1
  • list3
    string1

これをボタン一つでできたら楽ですよね?


list を自動的に成形する


function.php に入れるか、プラグインに加工してしまいます。

list を自動的に成形するプログラム
function add_my_quicktag() {?>
<script type="text/javascript">
//ボタンを追加する シンボル:lib 表示:(li)
QTags.addButton('lib', '(li)', lifunction);
// 追加したボタンのコールバック
function lifunction(f, g, fd){
// 投稿エリア(textarea)のオブジェクトを取り込む
var textarea = document.getElementById("content"); 
// 投稿エリアの値を取り込む
var sentence = textarea.value;
// 範囲選択になっているか
if(textarea.selectionStart!=textarea.selectionEnd){
// 選択開始位置までの文字列
var before= sentence.slice(0, textarea.selectionStart);
// 選択終了位置以降の文字列
var after = sentence.slice(textarea.selectionEnd);
// 選択範囲内の文字列
var text = sentence.slice(textarea.selectionStart, textarea.selectionEnd);
buff = '';
block = '';
lines = text.split(/\n/);
if(lines.length>0){
lines.forEach(function(line){
topchr = line.substring(0,1);
if( topchr=='・' ){
if(block!=''){
buff += '<div style="margin-left:20px;">'+block+'</div></li>'+"\n";
}
buff += '<li><b>'+line.substring(1)+'</b>'+"\n";
block = '';
}else{
if(buff!=''){
block += line+"\n";
}
}
});
if(block!=''){
buff += '<div style="margin-left:20px;">'+block+'</div></li>'+"\n";
block = '';
}
if(buff!=''){
buff = '<ul style="">'+"\n"+buff+'</ul>'+"\n";
}
data = before + buff + after;
textarea.value = data;
}
}
}
</script>
?>
add_action('admin_print_footer_scripts', 'add_my_quicktag');



カーソルの位置の前後を調べてタグならば、対応するタグまで文字列を選択する


なければなくても問題のない処理なんですが、文章が長くなった時、投稿をスクロールさせて対応するブロックまでを探すのは案外ストレスです。

そこで、カーソルの次の文字列がタグなら、それに対応するエンドタグまでの文字列を選択します。
同様に、カーソルの次の文字列がタグでなく、カーソルの前にエンドタグを見つけた場合対応するタグまで選択します。

<ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>|

/ul タグの後ろにカーソルを置いてボタンを押したら ul までの範囲を選択。

<ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>
|

また、

|<blockquote><ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>
</blockquote>

blockquoteの前にカーソルを置いてボタンを押したら /blockquote までを選択

|<blockquote><ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>
</blockquote>


これも案外便利です。インストール方法は前述のとおり、functon.php にいれてもいいし、プラグインにしてもOK.

function add_my_quicktag() {?>
<script type="text/javascript">
//ボタンを追加する シンボル:lib 表示:(li)
QTags.addButton('rng', '>|<', rangefunction);
function rangefunction(f, g, fd){
rangefunction_set();
}
function rangefunction(){
var textarea = document.getElementById("content");
var sentence = textarea.value;
if(textarea.selectionStart==textarea.selectionEnd){
// Advance
if( sentence.substr(textarea.selectionStart,1)=='<' ){
spp = sentence.indexOf( ' ', textarea.selectionStart+1 );
edp = sentence.indexOf( '>', textarea.selectionStart+1 );
if( spp!=-1 && edp!=-1 ){
if(spp>edp){
spp = edp;
}
tagmrk = sentence.substr(textarea.selectionStart+1,spp-1-textarea.selectionStart);
srctag = '</' + tagmrk + '>';
//alert('tag='+tagmrk+' src='+srctag+' spp='+spp);
edp = sentence.indexOf( srctag, spp);
if( edp!=-1 ){
//textarea.selectionEnd = edp+srctag.length;
spp = textarea.selectionStart;
edp = eval(edp)+eval(srctag.length);
textarea.focus();
textarea.selectionEnd = edp;
//textarea.setSelectionRange(spp, edp);
alert('spp='+spp+' edp='+edp+' str='+sentence.slice(spp,edp) );
}
}
//Recession
}else if( sentence.substr(textarea.selectionStart-1,1)=='>' ){
snp = '';
edp = textarea.selectionStart;
for(spp=textarea.selectionStart-1;spp>=0;spp--){
if( sentence.substr( spp, 2 )=='</' ){
tagmrk = sentence.slice( spp+2 , edp-1 );
srctag = '<'+tagmrk;
srclen = srctag.length;
//alert('tagmrk='+tagmrk+' srctag='+srctag+' srclen='+srclen+' spp='+spp);
for(spp--;spp>=0;spp--){
if( sentence.substr( spp, srclen )==srctag ){
textarea.focus();
textarea.selectionStart = spp;
textarea.selectionEnd = edp;
return;
}
}
}
}
}
}
}
</script>
?>
add_action('admin_print_footer_scripts', 'add_my_quicktag');




スポンサーリンク

関連記事

スポンサーリンク

よく使うタグ

・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 を横