e-Commerceプラグインを有効にしただけで、ダッシュボードのXML系表示が悉くFatal Errorに陥ります。メモリが足りないというエラーです。 Continue Reading

画像表示プラグインは様々あって、どれにしようか迷ってしまいます。まず最初にすることは、自分はどんな風に画像を見せたいか？をよく考えてみること。 Continue Reading

WordPressの宿命とも言えるコメントSPAM攻撃。恥ずかしながら、目一杯食らってしまいました
１ヶ月近くここを放置してたのが悪いっちゃ悪いのですが、ここまで酷いとは思いも寄りませんでした。どうりで、AkismetのようなコメントSPAM避けプラグインが最初から配備されているわけですね。 Continue Reading

WordPressの買い物カゴプラグインの代表格である【WP e-Commerce】が、日本語サイト上でどれくらい使えるか？の実験をやってみます。
日本産の買い物カゴを使えば楽なんだけど、オープンソースでいいのがあるのかなぁ・・・
と探してみるテもあるけど、こういったクセのあるプラグインのカスタマイズに挑んでみたいという好奇心も若干あり。
とりあえずサンプルを設置してみましたよ。サンプル
（サイトメニューの実験室からも行けます。） Continue Reading

プログラマのブログだったら、プログラムコードを紹介するのが筋。
でも、ただテキストでコードを記述するのも芸が無いって感じです。
そこで格好良く表示するプラグイン”Syntax Highlighter Evolved”を設置。
前からあった”Syntax Highlighter”との大きな違いは、色のテーマが管理画面で簡単に変更できるというところ。ブログのテーマカラーに合わせやすいですね。

表示はこんな感じです。
PHPの場合

<?php
  $c = new abc();
  abc::b();
  $f = new def();
?>

HTMLの場合

<div>HTMLコード</div>
<span>こんな感じで表示なのだ</span>
<a href="http://hoge.html">hogeへのリンク</a>

CSSの場合

#item{
	float:right;
	position: absolute;
	background-image:url(img/close.gif);
	background-repeat: no-repeat;
}

何だか派手に色づけされてますが(笑)、この点はちゃんとカスタマイズできますのでご安心を。
では作り方から。

材料

• SyntaxHighlighter Evolvedプラグイン一式だけ

作り方

• <WordPressディレクトリ>/wp-content/plugins/以下に、ダウンロードしたプラグインを解凍して、そのままフォルダごとアップ。または、WPのダッシュボードから直接インストール。
• ダッシュボードでプラグインを有効にする。
• ダッシュボードの設定→SyntaxHighlighterのところを開いてみると、設定画面が。


Color Themeの選択で、色々な背景色・文字色を変えることができます。
設定画面の下の方にプレビューが表示されますので、色々と試してみて下さい。

• [言語の種類] ここにコードを書く [/言語の種類]
  という記法で一瞬にしてコードが格好良く表示されます。
  例えば・・・(便宜上、[ ]は全角にしています)　
  　［php］phpコード［/php］
  　［c］C言語のコード［/c］
  という風に記述します。言語の種類やオプションは、以下の表を参照です。

言語一覧

言語	記法（[ ]内に書く文字）
ActionScript3	as3, actionscript3
Bash/shell	bash, shell
C#	c-sharp, csharp
C++	cpp, c
CSS	css
Delphi	delphi, pas, pascal
Diff	diff, patch
Groovy	groovy
JavaScript	js, jscript, javascript
Java	java
JavaFX	jfx, javafx
Perl	perl, pl
PHP	php
Plain Tex	t plain, text
PowerShell	ps, powershell
Python	py, python
Ruby	rails, ror, ruby
Scala	scala
SQL	sql
Visual Basic	vb, vbnet
XML	xml, xhtml, xslt, html, xhtml

オプション値一覧
[ ]の中に言語と一緒に書けるオプション値。表示を簡略化したり行番号を表示/非表示できたりします。
例えば、［html gutter=”false”］HTMLコード［/html］で、行番号が表示されなくなります。
設定画面でデフォルト値を予めセットできるものもありますので、自分のブログと良く相談してみましょう。　

オプション名	デフォルト値	説明
autolinks	true	httpで始まるURLが自動リンクされる。
classname	”	CSSで独自に設定したclassを指定する。
collapse	false	ソースを最初から表示。”true”にすると”show source”というリンクだけ表示される。
firstline	1	行番号の開始番号を指定。
gutter	true	行番号を表示。”false”で非表示。
highlight	null	行をハイライトする。複数行の場合は1,2,3とカンマで区切って指定。
htmlscript	false	HTMLやXML内にスクリプト言語がある場合は”true”に。
light	false	“true”にすると、右端にあるツールバーと行番号が非表示。
smarttabs	true	タブの位置を自動で揃えてくれる。
padlinenumbers	false	行番号のスペースを詰めない。”true”で詰める。
tabsize	4	タブ1個のサイズ。設定画面でセットした値になる。
toolbar	true	右端に出るツールバーを表示。”false”で非表示。
wraplines	true	長い行を自動で折り返し。

<div>
HTMLコード
</div>
<span>
なぜこんな感じで表示されるのだ
</span>

そこで、作者のサイトを見まくったところ、こんな質問が・・・

The code is not showing normaly to my website. It splits into rows in a strange way.
Just take a look at this thread:
Any idea wheres the problem?

一言でいうと、「ちゃんと表示されないやん！」という内容。
それに対する作者の回答はこちら。

It’s your theme. Remove any CSS from your theme’s stylesheet that affects “pre” or “code”.

CSSの中で、”pre”,”code”を定義してるとダメよ～とのことです。

テーマ用のCSSを見たら、”pre”も”code”もしっかり定義してあるしやっぱり！
えぇい！思い切ってなくてしてしまえ！と削除したら（無謀）、今みたいにちゃんと出ます。
ご参考まで（危険なので真似しないでね）