プラグイン
WordPressで自動整形しない – Raw HTML capabilityプラグイン
Posted on 2009年02月17日 | 6 Comments|
制作中のページをごにょごにょしていたら、どうしても越えられない壁にぶつかった。
ブログパーツのような単一のJavaScriptは、ビジュアルエディタで書かなければ埋め込めたんだけど、JavaScriptと他いっぱい…っていうコードを埋め込もうとすると
「br /」とか「p」とかいうタグが勝手に挿入されてしまう。
そのお節介機能を「自動整形」というのだけど、そいつのせいでJavaScriptが動作しなくなっちゃったりするんだ。
で、WordPressの自動整形を止めるプラグインを探してみた。
まず試してみたのがRaw HTML capabilityプラグイン。
普通にインストールして有効化すると、投稿画面に Raw HTML のボックスが表示されるようになる。
Raw HTML
自動段落を無効にするとか、スマイリー使わないとかそういうオプション設定。
全部にチェックを入れて投稿してみたけど、自動的に「br」とか「p」とか挿入されて改行されちゃったんだよね。
あれ？おかしいなぁ。
部分的に自動整形を止めるには
＜!–start_raw–＞JavaScriptの中身 ＜!–end_raw–＞
（＜＞は半角）または
［raw］JavaScriptの中身［/raw］
（［］は半角）のようにタグを挿入する。
投稿してみたところ、JavaScriptはちゃんと表示された。
でも編集画面にはしっかり「br」とか「p」とか挿入されてるから、
保存した後にどこか修正してもう一度保存…とやると
普通に改行とか入っちゃってJavaScript壊れる。
自動挿入されちゃった「br」とかを手動でぽちぽち消してから投稿するべし。
っていう若干の不便さはあるものの、長い複数のJavaScript（とその他）を表示させるっていう目的は達成できたので、まぁいいんじゃないかな。
その”若干の不便さ”をなんとかしたいなーとか欲をかいて、
英語がよく分からないからとりあえず同じような機能がありそうなプラグインをいくつか試してみたんだけど…。
Disable wpautop → うまく動いてないっぽい。
PS Disable Auto Formatting → 改行を消さないようにはできたけど、改行を入れないようにはできなかった。
WP Unformatted → カスタムフィールドに出現せず。
という結果になったので、とりあえず修正するときに「br」とかをぽちぽち消す手間は省けないんだなと諦めることにする。
WordPressにプラグインをインストールしよう
Posted on 2009年02月10日 | 8 Comments|
WordPress 2.7になってプラグインのインストールはとても簡単になった。
ブラウザでアップロードができるのでFTPでアップロードする手間も省ける。
今日はプラグインの探し方とインストール方法を簡単に解説してみる。
クイックタグ（任意のタグを挿入するボタン）を追加する – AddQuicktag
Posted on 2009年02月5日 | 6 Comments|
WordPressの投稿画面で任意のタグをボタン１つで簡単に挿入したい。
wp-includesjsにあるquicktags.jsを編集するという手段もあるけど、
もっと簡単にできたらいいな。
そんな時に便利なプラグインが「AddQuicktag」だ。
インストールは簡単。
プラグインディレクトリに登録されているので、
「プラグイン」→「新規追加」からブラウザアップロードしてもいいし、
その機能が使えなくてもプラグインディレクトリにFTPでアップロードするだけ。
管理画面から有効化したら「設定」→「Add Quicktag」を開く。
AddQuicktag設定画面。クリックで拡大。
「クイックタグの追加と削除」のところ。
ラベル名はボタンに表示される名前なので長すぎず分かりやすいものを。
開始タグ、終了タグに使いたいタグを入力して「更新」を押して反映させる。
終了タグがないタグは、終了タグのところは入力しなくてもOK。
１行ずつ「更新」を押して追加していく。
（「更新」を押すと入力欄が１行増える）
「クイックタグの設定の出力」のところでは、多分追加した設定を保存できるのだと思う。
が、これはあたしの環境では動作しなかったので未確認。
「クイックタグの設定の読み込み」のところでは、上記出力で保存しておいたものをインポートできるのだろうと思う。
上記と同様に未確認。
「Uninstall option」のところは、AddQuicktagをアンインストールしたいときにポチっと押すと、全ての項目がクリアされる。
登録したボタンは投稿画面のHTMLタブの方（ビジュアルエディタではない）に追加される。
AddQuicktagでボタンが追加された
昨日導入した「iG:Syntax Hiliter」のタグをAddQuicktagで登録してみた。
quicktags.jsを編集するとかやらないで、初めからこれ使えばよかった…。
とっても簡単。とっても便利。
コードを見やすく表示させる – iG:Syntax Hiliter
Posted on 2009年02月4日 | 3 Comments|
WordPressでコードを見やすく表示させたい。
行番号が必要なときは番号も付けたいし、
ずらずら長いコードは色分け（ハイライト）して表示された方がいいし、
面倒なときは言語指定なしで簡単に表示させられたら便利だし、
プラグイン独自のタグを忘れちゃったりするからボタン一つで入力したいし、
複数行のコードは見やすく行ごとに色を変えて表示できたらいい。
というわがままを叶えてくれるプラグインを発見。
素敵なことに「MMRT daily life」さんのところで日本語版が配布されている。
説明に書いてあるようにダウンロードしたファイルをプラグインディレクトリにアップロードして有効化。
管理画面の設定から、どんな風に表示させるか設定できる。
- コードBOX内の”コード”を別ウィンドウで開くリンクをつける
- コードの原文の表示方法を新しいウインドウで開くか
- コード言語を表示させるか
- コード内のコメントを強調表示するか
- 行番号を表示するか
- 行番号の色を交互に変えるか
- 行番号の色を２つ。カラーピッカー付き。
という設定項目がある。
タグを手入力したくないあたしのような人のために、クイックタグも設定できる。
マニュアルは英語なので簡単に説明すると、
- wp-includesjsにあるquicktags.jsを開く。
- プラグインに付いていたMANUAL.htmlの「6. QUICKTAGS」の部分を開く。
- 「add the following lines」の下にあるボックス内のコードをコピー。
- quicktags.jsの136行目辺り（moreタグの設定が終わったところ）を探して、);の後に改行してペースト。
- 保存してアップロード。
これで投稿画面のボタン群にActionScript、 ASP、 C、 C++、 C#、 CSS、 DELPHI、 HTML、 JAVA、 JavaScript、 MySQL、 PERL、 PHP、 PYTHON、 RUBY、 SMARTY、 SQL、 Visual Basic、 VB.NET、 XML、CODEのボタンが追加される。
コード貼り付ける場所はmoreの後じゃなくても、自分の使いやすい場所でOK。
ボタンが出現しない場合は、ブラウザのキャッシュをクリアしてみると表示されるかも。
ボタンが表示されるのはビジュアルエディタの方じゃなくて、HTMLの方なので、HTMLのタブを選択すること。
quicktags.jsを書き換えるの怖いんだけど…って場合は、
クイックタグを追加できるプラグインを利用するという手段もある。
ビジュアルリッチエディタとの併用不可というのをどっかで見たので、あたしは試してない。
WordPressのアップデートでquicktags.jsも上書きされちゃうかも？という不安を解消するには、そういうプラグインを探してみてもいいと思うんだけど。
これでボタン１つでコードを表示させるタグを入れられるようになった訳だが、
このブログではコードBOXがはみ出して、サイドバーと重なっていたので、
ig_syntax_hilitecssにあるsyntax_hilite_css.cssでサイズを変更。
このブログのフォントが白いもんだから、文字色も追加。
※注意！
コードを記入した後、ビジュアルエディタに切り替えないこと。
ビジュアルエディタでコードの入った投稿を開いた瞬間に＜＞の中身が消えたり、<とかに変更されたりする。
記事をビジュアルエディタで書き上げた後に、HTMLに切り替えてコードをペーストしたら、そのまま投稿ボタンを押そう。
昨日PHP Hilight Stringプラグインを紹介したばかりだけど、
iG:Syntax Hiliter 日本語版を使うことにした。
また１つ導入しているプラグインが増えたわけだが、今度は何を入れようか？ｗ
コードを表示させる – PHP Hilight String
Posted on 2009年02月3日 | 4 Comments|
WordPressでPHPなどのコードを表示させたいときに、
＜＞を全角で書くなんていう手段でやっていたのだけど、
やっぱりコピペで使える状態で表示させたいなと。
そんなわけでコードを表示させられるプラグインを探してみた。
今回試したのはPHP Hilight Stringプラグイン。
（プラグインに表示されてる名前は「PHP Highligh String」、プラグインのホームページに書いてある名前は「PHP HilightString」。スペルが違うけども、どちらが正しいのかは不明。）
ダウンロードしたzipをそのままブラウザアップロードで
インストールまでやっちゃおうとしたんだけど失敗。
解凍してプラグインディレクトリにFTPでアップロードしたら大丈夫だった。
一緒に入っているhighlight.cssを開いて、使用中のテーマのstyle.cssにペースト。
これをやらないとスタイルが適用されないので注意。
ハイライトされる色はここを自由に変更できる。
［code lang=”言語”］表示したいコード［/code］
と記入することでコードが表示される。
（［］は半角で）
言語（phpなど）は必ず小文字で記入すること。
色分け可能な言語は
php,cpp,css,diff,dtd,javascript,mysql,perl,python,ruby,sql,xml,java
で、色分けが必要ないときは
［code］表示したいコード［/code］ （［］は半角で）
だけ記入すればOK。
行番号を付けたいときは、
［code lang=”言語” -数字］表示したいコード［/code］ （［］は半角で）
と、始めたい行番号を指定する。
０にすると行番号は表示されない。
今回このプラグインを選んだのは、アップロードして有効化するだけで使える簡単さと、スタイルを簡単にいじれるから。
コードを表示させられるようになった筈なので、早速少し前の記事を修正してみた。
（フィードに新しくない記事が配信されてるのはそのせい）
無事に半角＜＞も表示されて、コピペで使えるようになった。
ふと思ったのだけど、このプラグインでコードを表示させるように記事を書いたら
もう他のプラグインに乗り換えできないな。
プラグインを削除したら［code］［/code］の中身が消える予感…。
他のプラグインに合わせて全記事さらって［code］修正するのも大変だし。
でもまだ他のプラグインも気になってるから過去の記事を修正するのはやめておこう。
- 禁煙して124日経ったらしい 今でもたまに吸いたくなるよ 一本吸ったらもう戻れないんだろうね もう吸わないけどね 多分
- コーラを我慢しながらずっと猫吸ってる
- コーラ飲みたい でも毎日飲んじゃダメな気がする 今日は筋トレもしてないし やっぱ我慢かなぁ 飲みたいなぁ どうしようかなぁ
- なんかベタベタすると思ったら除湿機満水かぁ めんど…
敷地小さっ…；；
980 Beers Received
