タグ別アーカイブ: WordPress

iG:Syntax Hiliter プラグインと Footnotes プラグイン

WP-Dokuwiki をやめてしばらく WP 標準で書いてみようと思っている。WP-Dokuwiki で便利に思っていたのはソースコードのハイライトと脚注。これに代わるプラグインを探す。それぞれ数種類づつ見つかったが、ちょっとづつ試してみて iG:Syntax Hiliter プラグインと Footnotes プラグインを使うことにした。

iG:Syntax Hiliter プラグイン

現在のバージョン v3.5 は、添付のマニュアルを見ると 19 ほどの言語に対応しているとある。が、ふとサブディレクトリの GeSHi を最新版に入れ替えてみたらどうだろうと思い、やってみると特に問題はなさそうだ1)。これで 80 ほどの言語に対応する(ほとんどは一度も使わないだろう)。Bash や diff, LaTeX もいけそうだ。 いろいろ探しているうちに “iG:Syntax Hiliterの不具合(?)を直す” という記事を発見。ここでも何かの拍子に設定がリセットされてしまったことがあったので、これかと思い対策した。

Footnotes プラグイン

使い方は WP-Dokuwiki の脚注とほぼ同じで、簡単。ただ出力は、本文の最後に <br /> をつけてそのあとに番号付きリストを生成するようになっているらしい。するとなぜか自動で挿入される </p> がおかしくなり、HTML 的に間違ったことになる。それで
DIFF:
  1. --- footnotes.php.orig
  2. +++ footnotes.php
  3. @@ -98,14 +98,14 @@
  4.  
  5.         if ($footnotes){
  6.                 $counter = $start_number;
  7. -               if ($start_number != 0) $data = $data.'<br /><ol start="'. ($start_number + 1) .'" class="footnotes">';
  8. -               else $data = $data.'<br /><ol class="footnotes">';
  9. +               if ($start_number != 0) $data = $data.'<div><ol start="'. ($start_number + 1) .'" class="footnotes">';
  10. +               else $data = $data.'<div><ol class="footnotes">';
  11.  
  12.                 foreach($footnotes as $footnote){
  13.                         $counter++;
  14.                         $data = $data.'<li id="footnote-'.$counter.'-'.$post->ID.'">'.$footnote.'  '.$current_settings['pre_backlink'].'<a href="#footnote-link-'.$counter.'-'.$post->ID.'">'.$current_settings['backlink'].'</a>'.$current_settings['post_backlink'].'</li>';
  15.                 }
  16. -               $data = $data.'</ol>';
  17. +               $data = $data.'</ol></div>';
  18.         }
  19.      return $data;
  20.  }

と、<div> に入れることにした。 見栄えはスタイルシートで設定する。
  1. iG:Syntax Hiliter プラグインの syntax_hilite.phpswitch 文にいくつか case を書き足す必要があるかも。

テーマを作る (6)

残るこまごましたことについて。

ブロックの境界

本文や sidebar (という名の実質 bottombar)などで float で段組をしているため、それを解除する clear:both を入れる必要がある。といって次のブロックの先頭に入れるのも気持ちが悪い。そこでブロックの境界に <hr> を使い、これに clear:both をつけることにした。スタイルで
CSS:
  1. hr {
  2.     display: block;
  3.     clear: both;
  4.     height: 0;
  5.     border: none 0px; /* 完全に消すにはこれも必要。 */
  6.     visibility: hidden;
  7.  }

として見かけ上は消してしまう。 「スタイルシートを使用しない」状態で見ても(といってそんな人はいないと思うが)見通しがよくなった。

page.php

Template Hierarchy に詳しい説明がある。 個別記事(single)と静的ページ(page)はよく似ている(コメントを許すかどうかを除いて)と思うのだが、静的ページで page.php がない場合に single.php を探しに行くことはないというのは意外だった。ここではコメントつきページのテンプレートは single と同じとした。
PHP:
  1. <?php
  2. /*
  3. Template Name: Page with comments
  4. */
  5. ?>
  6. <?php include (TEMPLATEPATH . '/single.php'); ?>

テンプレートが増えるとややこしくなるので、コメントなしページのテンプレート page.php は作らず、index.php の中で is_page() でそれ用の処理をすることにした。

テーマを作る (5)

index.php, single.php

ようやく本文について。 個々の記事を、本文とコメントの2段組にした。そもそもこのアイデアを思いつき、そんなテーマを探してみたものの見つからなかったので今回自分で作ってみたのだった。 個別記事の表示(single.php)のときだけでなく、index.php でも各々の記事にトラックバックURLを表示するようにした。こうしているテーマも滅多にない。私の場合 more を使うことはあまりないので、トップページを見るだけで記事全文を見られることになる。わざわざ single に行かなくてもここにトラックバックURLを表示したほうが親切だろうと考えたのだ。 このトラックバックURLは実に長くなり、レイアウトで苦労する1)。そこで、よく他のサイトで見かけていたフォームの input に入れてある形を思い出した。入力させるところでもないのに何故こんな形にしているのだろうと不思議に思っていたが、ここにきて合点がいった。要するに幅を固定して表示できるのだ。さっそく真似ることにした。

comments.php

フォントは、他の部分では指定するとしても総称名までにしたが、コメントのところだけは遊び心で固有名を指定した。コメントとトラックバックは、順番は分けないが見かけが違うようにした。 Edit Commentsプラグインを使う。WordPress 2.1への対処法がコメントの 300 番にある。 もう一つ、Subscribe To Commentsプラグインを使うようにした。旧版(2.0.*)は設置がやや面倒だったが新版(2.1)は複数のファイルが一本化されて簡単になっていた。ところで設定で clear:both を制御できるはずなのだが毎回元に戻ってしまい、いまのこのテーマはコメントを含む記事の部分を2段組にしているので非常に具合が悪い。
PHP:
  1. if ( !$settings['clear_both'] ) {
  2.   $settings['clear_both'] = 'clear_both';
  3.   $update = true;
  4. }

の個所をコメントアウトして思いどおりになったのだが、他の人は困っていないのだろうか?2) メッセージは旧版とほとんど変わっていないのでSubscribe to Comments 日本語化より2.0.4版をいただいて流用する。
  1. テーマ作成中、MR Tech Link Wrapperなる長いURLを折り返して表示する拡張を入れた Firefox を使っていたので、ことの重大さに気づいていなかった。検証のため IE で見ると大変なことになっていた。
  2. と思ったらコメント1143番に同じ思いをしている人がいた。

日本語化に関するプラグイン

いずれもTech de Goより。簡にして要を得ている。 WordPressはなまじソースをいじれるので、ついそこに手を入れてしまうが、アップグレードなどがあるので管理が大変になる。そうか、このように前処理・後処理でできることもあるのだ。目から鱗。

テーマを作る (4)

footer.php

特に表示しなくてもいいのだろうが "Copyright © 年"を表示することにする。この年のところを、最も古い記事と最新の記事の日付を見て自動的に生成してくれるスクリプトをBoxy But Goldというテーマの中に見つけたので使うことにした。

sidebar.php

sidebarという名は踏襲するが見かけはbottomで、 3 段組とした。アーカイブの選択にはmonthchunksプラグインを使う。

Wiki方言に泣く

身内の連絡・記録用には MediaWiki が使われていて、その後に trac を使いはじめてみるとこちらは MoinMoin というのに似た書式で、ここ WordPress では WP-Dokuwikiプラグインで DokuWikiの書式。似て異なるため結局どれを使うときも書き方のページを横に出しておかなければ書けなくなってしまった。何だか余計に不便だ。 一年前に WordPress を使うことになり、Wiki書式のプラグインを探したらちょうど WP-Dokuwikiが元気そうだったので導入してみたのだが、そのとたんに作者の興味がほかに移ってしまったのか、ぱったり開発が止まってしまった。DokuWiki は他の2つの書式とも随分違っていて、だんだん嫌になってきた。 あらためてまた探してみると WP-MediaWikiプラグインを見つけた。 しかしこの手のものの欠点は、一度導入してそれで書き始めると、やめるわけにはいかなくなるということだ。今後 WP-Dokuwiki で書くことはないとしても、過去の記事をちゃんと整形されて見られるためにはこのプラグインをはずすわけにはいかない。 WP-MediaWikiプラグインはまだ不完全のようだし、しかも昨秋以降は更新がなさそうだし、これまた不安だ。WordPressユーザの数は相当多いだろうに Wiki 書式のプラグインがあまり流行っていないのは、そもそも必要とされていないということなのだろうか。 確かにこのくらいの文章を書くくらいなら、HTML だろうがどの Wiki だろうが、たいしたことはない。WP標準の、ちょっとHTML混じりで書いておくのが将来的にもいちばんいいのかもしれない。 WP-MediaWiki もちょっと見てみたけれど、当分は WP-Dokuwikiからも離れて、標準ちょっとHTML混じりで書くことにしてみよう。

テーマを作る (3)

header.php つづき

WordPress 2.1に附属のテーマ default からいただいてきて改造する。 まず、Another HTML-lintの忠告に従い、
HTML:
  1. <meta http-equiv="Content-Style-Type" content="text/css" />
  2. <meta http-equiv="Content-Script-Type" content="text/javascript" />

を加える。

linkrelプラグイン

WordPress 2.1 に移行してLink Relプラグイン動かなくなっていた。エラーを見るとSQLを組み立てられなくなっていたようだ。WP-PageNaviプラグイン 2.10を参考にして、preg_matchの部分を
PHP:
  1. if(!is_category()) {
  2.     preg_match('#FROMs(.*)sORDER BY#siU', $request, $matches);
  3. } else {
  4.     preg_match('#FROMs(.*)sGROUP BY#siU', $request, $matches);
  5. }

としたら動くようになった。 しかし、ときどきリンクを間違える。ID順にリンクするらしく、記事のあいだに(静的)ページを作ったりするとそちらにリンクを向けてしまう。 この際なので新たに作ることにした。([2009-06-15]新しいバージョンに置き換えた) 前半はWP-PageNaviプラグインからいただき、これは !is_single() なので、is_single() の場合は wp-includes/link-template.php より previous_post_link(), next_post_link() をいただいて <a href=... > ... のかわりに <link rel=... href=... /> を出力するようにした。
linkwidgets

linkwidgets

ところでこのサイトナビゲーションは流行らなくなっていくのだろうか。Mozillaの頃は<link rel=...> にも対応していたのだが、Firefoxになってからは削除されてしまった。そこでLink Widgetsという拡張機能を入れている。 なおこの絵のように、Status Buttonsという拡張機能で、ツールバーのボタンをステータスバーに持ってくることができる。

seoプラグイン

SEO Title Tagプラグインを入れるので
PHP:
  1. <title><?php if (function_exists('seo_title_tag')) { seo_title_tag(); } else { bloginfo('name'); wp_title();} ?></title>

と対応させておく。

テーマを作る (2)

header.php

まずは header.phpについて。 WordPress 2.1に附属のテーマ default からいただいてきて改造していたのだが、ページのソースを見ると
HTML:
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-UTF">

とある。ん? langの中身はこんな書き方できたっけ? header.php を見ると、2.1 で登場した language_attributes() がこれを出力している。新しいためか日本語での情報はほとんど見つからない。hiromasa さんの“WordPress 2.1 の新機能”では「WPLANG の _ より前の値が」出力されるとあるが実際には WPLANG の「_」を「-」に置き換えて出力されているようだ。WPLANG は wp-config.php の中で 2.0.7ME からの名残で ja_UTF となっていた。これまで WPLANG は言語ファイルの選択にしか用いられていなかったものが表に現れてきたということか。 元来、言語_地域という構造のはず(例えば fr_CA はカナダでのフランス語)で、それを流用して ME では ja_UTF として使ったのだろうか。厳密に言ってこれはどうなんだろう。一方でプラグインの言語ファイルでは ja_UTF という書式も随分広まっているようだ。

テーマを作る

WordPress 2.1 にしたことだし、ひとつ自分でテーマを作ってみるか、と思ってはじめてみた。作るといってもゼロから作るわけではなくて既存のものを換骨奪胎して組み上げていくに過ぎないのだが、そうやって人のものを見るのが何より勉強になる。できたものを見るとやっぱり自分にはセンスがないなと痛感するがそれはそれとして、この作業を通していろいろ解ったことがあったので書いておこうと思う。

IEで検証

ふだん使っているのは Debian GNU/Linux 上の Firefox1)である。検証に VMWare上の Windows XP の Internet Explorer を使う。IE7にバージョンアップし、別にスタンドアロン版の IE6を用意してこちらでも一応チェックするようにした。 それにしても IEの挙動には驚かされる。これまでにかかった時間の3分の2は IEで見たとき変なことになってしまうことへの対処ではないだろうか。IEというか Windowsのフォントの「汚さ」にも驚く。手をかければどうにかなるのだろうが普段使うわけでもないのでデフォルトのままだし(それに多くのライトユーザはそのままだろうし)、逆に手をかけないとどうにもならないので十分に手をかけている Linuxシステムを比較するのは公平でないのは承知のうえで、世の大部分の人がこの汚さであちこちのページを見ているのだと思ったら暗い気持ちになってきた。 こんな風に見えている例えば私はふだん使いのFirefoxのデフォルトを明朝体にしている。印刷された本を見てもわかるように、長い文章を読ませようとする場合は明朝体のほうが読みやすい。しかし Windowsにフォントを追加しない状態で、明朝体でwebを見ようという気にはとてもならない。Linuxを使ってみて UIが明朝で表示されることや Windowsでも Firefoxで明朝がデフォルトになっていることに強い違和感を訴える声を見かけていたが、なるほどこういうことだったのか。それらの人は既に、明朝体とは醜いもの、と思い込んでいるに違いない。確かにデフォルトの Windowsではそうだろう。これは何か明朝体を使わせないようにする陰謀ではないかと思えるほどだ。疑問に思うのなら試しにアンチエイリアスのかかる明朝体フォントを入れてしばらく使ってみればよい。それにIEのデフォルトの「中」のフォントの大きさも問題だ。これらのせいでやたら小さなサイズのゴシック体に固定したブログサイトだらけになっている訳だ。 - - - そのつもりはなかったが、だんだんひどい悪口になってきた。テーマを作る話はまた今度。
  1. Debianでの呼称は Iceweaselなのだが、それでは余所で通じないので Firefoxと呼ぶことにする

ビジュアルエディタのフォントの大きさ

以前の記事にコメントをいただいた。実のところ私自身はめったにビジュアルエディタを使っていないので放っていたのだが、これを機会にいまいちど調べてみた。

2.1の場合

既に WordPress 2.1 に移行してしまったので、まずはこちらから。 wp-includes/js/tinymce/tiny_mce_config.php で
PHP:
  1. $mce_css = get_option('siteurl') . '/wp-includes/js/tinymce/plugins/wordpress/wordpress.css';
  2.         ...
  3.   content_css : "<?php echo $mce_css; ?>",

のようになっている。 したがって wp-includes/js/tinymce/plugins/wordpress/wordpress.css の
CSS:
  1. body {
  2.         ...
  3.         font: 1em/1.3em Georgia, "Times New Roman", Times, serif;
  4.         ...
  5. }

を変更すればよい。

2.0の場合

某所でいまだ使っている 2.0.7ME でも見てみた。 config がよくわからないし、wp-includes/js/tinymce/plugins/wordpress/wordpress.css には関連する記述がない。 しかし theme を advanced という記述が見えるので、 wp-includes/js/tinymce/themes/advanced/css/editor_content.css が使われているようだ。この body のところの値を変更したら反映された。