WordPress Archive

このサイトは, wp.VICUNA(http://wp.vicuna.jp/)の,
WordPressテーマを使用させて頂いてるのですが、

wp.VICUNAの利点

• XHTML1.0 Strict DTD準拠
• シンプルなXHTML構造
• 表示が軽い
• SEOを高めるサイト内リンク構造
• 簡単にカスタマイズ可能な専用スキン
• 無料で個人・商用利用可能

デフォルトだと、ウィジェットに対応してないのが残念です。

wp.VICUNA Ext

http://ma38su.org/projects/vicuna-ext/

• スキンの切り替え
• 表記言語の切り替え
• Eye Catchの切り替え
• グローバルナビゲーションの表示切り替え
• 各ページ毎のレイアウト設定
• Widgetによるサイドバーのカスタマイズ

各種、拡張機能つきExtテーマがあるので、
ウィジェットなどを使用する際は、こちらを使う方が良いかもしれません。

wp.VICUNA のウィジェット対応

Extに変えるのが一番いいのでしょうが、
デザインを調整する手間を考えて、応急処置をしてみました。

■参考サイト

• Widgetizing Themes
  http://wpdocs.sourceforge.jp/Widgetizing_Themes
• ウィジェット領域を２つ以上つくる
  http://wpcms.jp/195/

functions.php

/**
 * Add Widget
 */
if ( function_exists('register_sidebar') )
    register_sidebars(2,array(
        'before_widget' => "",
		'after_widget' => "\n\t\t</dd>\n",
		'before_title' => "\t\t<dt>",
		'after_title' => "</dt>\n\t\t<dd>\n\t\t\t",
    ));

この場合、
3カラムレイアウトで、ウィジェット領域が、left, right ２領域、
<dt><dd>に対応。

sidbar.php

	<!-- Widget -->
		<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar(); ?>
	<!-- /Widget -->

サイドバー１

	<!-- Widget -->
		<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar(2); ?>
	<!-- /Widget -->

サイドバー２

プログラムのソースコード（HTML, JavaScript, PHP)など、
Webで表示するのは、エスケープ処理などあって、面倒でした。

よく、行番号と、カラー分けでコードを表示しているテック系の
サイトを見かけるので、ライブラリを探してみました。

コードをそのまま表示するためのライブラリ、「SyntaxHighlighter」.
このブログはWordPressベースなので、JSとWordPressプラグインと
２通りのやり方を試してみました。

方法 1.） JavaScript

• SyntaxHighlighter2.0
  http://alexgorbatchev.com/wiki/SyntaxHighlighte

preタグに記述する方法

<pre class="brush: html">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- ソースの中身 -->
</pre>

textareaタグに記述する方法

<textarea name="code" class="brush: html" cols="60" rows="10">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- /ソースの中身 -->
</textarea>

• 導入サンプルHTML
  http://splitchin.com/sample/javascript/syntaxhighlighter_2/test.html

方法 ２.）WordPress プラグイン

• プラグインダウンロード
  http://wordpress.org/extend/plugins/syntaxhighlighter/installation/

［code language=”"js"”］・・・［/code］のように書きます。（［　］は半角記号に）

<ul>
<li>test</li>
</ul>

対応言語

言語	エイリアス
C++	cpp, c, c++
C#	C#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt