2008年 12月 25日（木） [3:48]

【WordPress】投稿時のボタンをカスタマイズ

 『【WordPress】投稿時のボタンをカスタマイズ』をはてなブックマーク この記事をクリップ！ この記事をTwitterでつぶやく

EntryWordPressで記事を書く時、上部に色々ボタンが付いています。
ボタンを押せば、一発で該当するコードを書き込んでくれます。
しかし結構自分が使うコードが無く、単語登録とかして記述してたんですが、ちょっくらWordPressさんにやってもらおうとカスタマイズしてみました。


まず、『wp-includes/js/quicktags.js』を開きます。
36行目からのコードに注目。　（WordPress 2.7の場合）

36　edButtons[edButtons.length] =
37　new edButton('ed_strong'
38　,'b'
39　,'<strong>'
40　,'</strong>'
41　,'b'
42　);
これは『strong』タグの設定です。
36行目はお決まり文句なので無視。
37行目もほぼお決まりで、『ed_strong』の赤文字が各タグによって変わります。
38行目は実際投稿画面で表示するボタンの文字です。
39行目は始まりのタグ。
40行目は終わりのタグ。
単独タグの場合（brとかimgとか）は空白になるようです。
41行目はショートカットキーです。
私が使ってるFirefox3だと『Alt + Shift + ○』になります。

以上の基礎知識（勝手に私が解釈してるだけなので、間違っていたらすいません。）を頭に入れてカスタマイズ開始。

ここまで書いておいて何なんですが、あまりカスタマイズする項目がありません。ｗ
よく使うって言ったら、『pre & code』と『more』ぐらいです。
今まで『code』ボタンはあったのに『pre』はないって事で、この2つは組み合わせて使う機会が多いので、codeボタンに追加しました。
▼デフォルト状態
Entry 
118　edButtons[edButtons.length] =
119　new edButton('ed_code'
120　,'pre/code'
121　,'<pre><code>'
122　,'</code></pre>'
123　,'c'
124　);
120行目のボタン表示にpreを追加。
121・122行目にpreタグを追加。
123行目のショートカットキーはあんまり使わないんでそのまま。
▼出来上がり
Entry
これでヨシッ！
これで『pre/code』ボタンを押すだけで『<pre><code>～～～</code></pre>』を書いてくれます。

ついでに『more』にも。
頭に画像はCSSで『float: right;』付けてるんで、『more』で続きの文を表示した時画像の下に表示するように設定。
126　edButtons[edButtons.length] =
127　new edButton('ed_more'
128　,'more'
129　,'<!--more--><br class="clear" />'
130　,''
131　,'t'
132　,-1
133　);
これで『more』ボタンを押すと、以下のように『<!–more–><br class=”clear” />』を書いてくれます。
Entry
いや～、WordPressのカスタマイズは楽しいな～。
しかしこの設定、当たり前のようにWordPressのバージョンアップした時に、再度設定し直さなきゃいけません…。


関連する記事

Trackback URL

コメント　(2)

  1. しのむん より:
    2009年 3月 2日 pm 2:46

    AddQucktag っていうプラグインを使うといいんじゃないですかね。
    http://wordpress.org/extend/plugins/addquicktag/

    プラグインなのでWPをバージョンアップしてもやり直さなくていいですし。

  2. くーさん より:
    2009年 3月 4日 am 12:50

    しのむんさん、情報ありがとうございます。
    新しい記事にて紹介させて頂きました。

    http://kome-suki.net/archives/3792

コメントを書く

Name

E-Mail

Website address