コード表示・自動整形
WordPressで自動整形しない – WP-UnFormating
Posted on 2009年02月19日 | 2 Comments|
先日紹介したRaw HTMLプラグインと同じような機能の
WordPressの自動整形を止めるプラグインを発見したので入れてみた。
これはとても単純なプラグインで、オプション設定なども一切ない。
インストールもWordPress 2.7から実装の自動インストールでOK。
使い方は、自動整形してほしくない部分を
［unformat］［/unfotmat］ （［］は半角）
で囲むだけ。
AddQuicktagプラグインに登録しておけば便利。
先日からなにをごにょごにょしたかったのかというと、
Google Friend Connectのために専用ページ（上のメニューから飛べるページ）を作ろうとしていたのだ。
で、JavaScriptとかdivとかたんまり入ったコードを記入する必要があった。
WordPressの自動整形機能でbrとかが入っちゃうと壊れてしまう。
WP-UnFormatingプラグインで自動整形を止めることができたので、
そのページは公開することができたのだが、
このプラグインも先日のRaw HTMLプラグイン同様、
再編集する際には手動でbrやpタグを除去しなければならない。
そこんとこがなんとかなったらなぁ…。
という理想は未だ実現できるプラグインが見つからない。
まぁ、それでも目的のGFCのコードを埋め込むってことができたのだから、
とりあえずはよしとしよう。
ちなみにRaw HTMLとWP-UnFormatingとどちらも同じ事ができるのだが、
WP-UnFormatingの方は国産で、日本語で説明を読むことができるので、
こちらを使うことにした。
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」とかをぽちぽち消す手間は省けないんだなと諦めることにする。
コードを見やすく表示させる – 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日経ったらしい 今でもたまに吸いたくなるよ 一本吸ったらもう戻れないんだろうね もう吸わないけどね 多分
- コーラを我慢しながらずっと猫吸ってる
- コーラ飲みたい でも毎日飲んじゃダメな気がする 今日は筋トレもしてないし やっぱ我慢かなぁ 飲みたいなぁ どうしようかなぁ
- なんかベタベタすると思ったら除湿機満水かぁ めんど…
敷地小さっ…；；
990 Beers Received
