WordPress のダッシュボードからテーマを選択していたら、突然ブログのトップページが真っ白になってしまいました。管理画面の URL を直接タイプしたところ（ブログのトップページの URL の末尾に /wp-admin を追加する）、ダッシュボードには入ることができましたので、他のテーマに変更してみました。変更はうまくいったのですが、トップページは相変わらず真っ白のまま。おかしいなと思って、もう一度テーマの選択画面を表示させてみると、先ほど選んだテーマとは別のテーマが勝手に選択されています。どうやら何かのバグのようです。
念のためもう一度、別のテーマファイルを「使用する」ことにしました。今回も変更はすんなり受け入れられたのですが、相変わらずトップページは真っ白のままです。再々度テーマの選択画面に戻ると、やはり別のテーマが勝手に選択されています。先ほどは気が付きませんでしたが、エラーメッセージも表示されています。
現在のテーマは壊れています。デフォルトのテーマに戻します。
なるほど、確かに WordPress が勝手に選択したテーマは、デフォルトのテーマです。しかし、ブログのトップページに戻ってみても、画面はやはり真っ白のまま。どこかのキャッシュにバグが蓄積しているようです。普段まったく使用していない Safari や Internet Explorer 8 から同様の操作を行ってもバグが解消されないので、原因はサーバーに設置されている WordPress そのものにありそうです。
WordPress.org のフォーラムに書き込まれた過去の記事や、インターネット上でのトラブルの報告事例を一通り読んでみましたが、僕と同様のケースは解決が困難で、結局再インストールするしかなかった、という事例ばかりが見つかりました。しかし、キャッシュのクリアのために再インストールまではしたくないので、いろいろと試してみることにしました。開発者に問い合わせて、キャッシュのありかがわかればそれを削除することもできるかと思いますが、なんとなくひらめきで、「『テーマファイルが故障している事をメモしてある何か』が消えないのではないか」と思いました。
そういうわけで、あえて壊したテーマ（style.css が無いなど）を用意してテーマの選択画面を表示させてみました。すると「壊れているテーマ」という項目が、画面の下部にリスト形式で表示されています。これで、先ほど想像した「テーマファイルが故障している事をメモしてある何か」が正しく書き換えられたと信じて、もう一度、テーマファイルを選択しなおしてみました。するとどうでしょう、無事にトップページの表示が復活したではありませんか。
というわけで、どういうわけでか、WordPress は時たま、「テーマファイルが故障している事をメモしてある何か」を壊してしまうことがあるようです。その場合は、わざと壊したテーマを用意することによって、回復することができるようです。同様の症状にお悩みの方がいらっしゃいましたら、このエントリーが助けになれば幸いです。
WordPress 2.6 のテーマに wp.Vicuna Ext. ver.1.58 を使用するときに、僕が Vicuna に対して行った変更をまとめておきます。
page.php の 27 行目に以下の 1 行を割り込ませました。
[source language="php"] ', ' | ', ' '); endif; [/source]
以下のセクションを 2-singleUtilities.css へ追加しました。
[source language="css"]
/*---------------
WordPress 2.6
-----------------*/
/* Caption
======= */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright,
div.alignright {
float: right;
clear: right;
margin: 10px 28px 0px 1em;
}
.alignleft,
div.alignleft {
float: left;
clear: left;
margin: 10px 1em 0px 28px;
}
div.wp-caption {
border: 1px solid #ddd;
background-color: #f3f3f3;
padding: 4px 0px 4px 4px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
p.wp-caption-text {
text-align: center !important;
font-size: 11px;
line-height: 17px;
padding: 4px 4px 0px;
margin: 0px;
}
/* h3 属性と caption との間の margin が大きくなり過ぎてしまう問題を回避 */
h3 {
margin-bottom: 0px !important;
}
div.gallery {
width: 600px;
}
dl.gallery-item {
margin: 0px;
border-left: 0px !important;
width: 200px !important;
}
[/source]
SyntaxHighlighter のために、<pre> のスタイルを削除する
下の表のとおりにセレクタをコメントアウトします。
| コメントアウト（行数） | ||
| 開始 | 終了 | |
| 1-element.css | 154 | 160 |
| /module/mod_subSkin/1-subSkin.css | 570 | 584 |
[source language="css"]
/*---------------
Shinsuke.com
-----------------*/
/* テキスト両端揃え */
div.textBody p {
text-align: justify;
}
/* Fuzzy Recent Updates で出力される日付のフォントのサイズ */
div.tile_body .date {
font-size: 85%;
}
/* rootpage.php で追加される目次関連 */
div.pagelist {
font-size: 85%;
margin: 0px 30px 0px 1em;
border: 1px solid #ddd;
background-color: #f3f3f3;
padding: 4px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 310;
float: right;
}
div.pagelist h4 {
font-size: 118%;
text-align: center;
margin: 0.4em 0px 0px 0px;
}
div.pagelist ul {
margin: 0px;
list-style-position: outside;
}
div.pagelist li {
margin: 0.4em 0.4em 0.4em 18px;
}
/* 見出しに clear 属性を付加 */
h2,
h3,
h4 {
clear: both;
}
/* が縦に隣接してしまった時に使用するスペーサー */
div.spacer {
margin-top: 1em !important;
}
/* が h3 に隣接してしまった時に使用するボトムスペーサー */
div.spacebottom {
margin-bottom: 1em !important;
}
/* Page Menu (2008-11-28)
~~~~~~~~~~~~~~~~~~~~~~
ウィジェットに表示しているページのメニュー用のプロパティ */
span.pagemenu {
font-weight: bold;
font-size: 150%;
}
.pagemenu a {
text-decoration: none;
}
.pagemenu img {
margin: 4px 8px 4px 4px;
border: none !important;
vertical-align: middle;
}
[/source]
Shinsuke.com では WordPress のテーマに wp.Vicuna Ext. を使用しています。これは wu さん作の CMS ツール用のテーマ「Vicuna」の WordPress 版「wp.Vicuna」を、ma38su さんがカスタマイズ性を向上させるために拡張したものです。
このセクションでは、私の使用した各バージョンと、その時私が行った変更作業についてまとめました。同じような問題に遭遇した方の助けになれば幸いです。
このブログのテーマには、wu さん原作・ma38su さん拡張による「wp.Vicuna Ext.」を使用しています。デザイン自体がすっきりしていて好みであることはもちろんなのですが、原作の wu さんは web デザインに関する著述をされるほど XHTML 等の書法に精通されており、他のテーマにありがちなトラブル（文字のサイズを変えるとはみ出す、ブラウザごとにデザインが異なる等々）がうまく治められています。また、wu さんは wakoku 時代の僕のあこがれでもあります。何の話かわかりませんね（笑）。
ほぼリリース状態のまま使っていますが、不満な点があったので直しました。それはサイドバーのリスト表示に使用されている div#utilities ul 属性の list-style-position プロパティが inside になっていたところ。この状態だと下のスクリーンショットのように、マーカーがリスト内に埋まってしまいます。
これを outside に直しました。3-context.css ファイルの 349 行目に目的の記述がありました。
list-style-position: inside;
この行を、
list-style-position: outside;
に直します。すると、以下のようになります。
マーカーがリストの左側に移動して、見やすくなりました。ところが、勢いあまって第一階層のマーカーが本文の下にもぐりこんでしまっています。ですので li 属性の margin を大きくしてやります。同じく 3-context.css ファイル中の 353 行目にある、
margin: 0.4em 0 0.4em 5px;
の 5px を 18px に変更して、
margin: 0.4em 0 0.4em 18px;
とすると、リストのインデントはそのままに、マーカーの位置が元に戻ります。
僕は神経質な人間で（分かっているなら治せ）、テキストの両端がそろっていないと気に入らないのです。そこで、メインの記事中の p 属性の text-align プロパティの値を justify に変更しました。やはり 3-context.css の中の 68 行目の空白に、以下の一行を挿入しました。
div#content p { text-align: justify; }
これで、本文の両端がそろうようになります。2 枚のスクリーンショットを見比べてください。右が justify に設定したもの、左が何もしていないものです。
All in One SEO Pack の Meta タグと内容がかぶってしまい、肝心なページ別の description が表示されないので、21～23 行目にあった
を削除しました。
Vicuna に対する変更とはちょっと違いますが、TinyMCE Advanced のスタイルシート（/wp-content/plugins/tinymce-advanced/css/tadv-mce.css）に
.img_L {
margin-right: 1em!important;
margin-top: 1em!important;
float: left;
}
.img_R {
margin-left: 1em!important;
margin-top: 1em!important;
float: right;
}
を追加しました。これでビジュアルエディタで上記のクラスが反映されるようになります。
Wikipedia のように、画像のサムネイルの周囲をブロックで囲み、その中に写真の説明を加えたいと思い、div.thumb クラスを追加しました。どの CSS に追加するべきか少々悩みましたが、最終的には
style-smartCanvas/module/mod_subSkin/1-subSkin.css
の末尾に追加することにしました。追加したスタイルは以下の通りです。
[source language=css]
/* 2008-07-03 by Kudo Shinsuke (http://www.shinsuke.com) */
/* ===================================================== */
div#main div.thumb {
/* display: table;*/
font-size: 85%;
padding: 8px;
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid #e5e5e5;
background-color: #f5f5f5;
}
div#main div.right {
margin-left: 30px;
margin-right: 30px;
float: right;
clear: right;
}
div#main div.left {
margin-left: 30px;
margin-right: 30px;
float: left;
clear: left;
}
div#main div.w300 {
width: 306px;
}
div.thumb span.num {
margin-right: 1em;
font-weight: bold;
}
div.thumb img{
margin-bottom: 8px
}
[/source]
僕は XREA の net2ftp を使って css ファイルを編集していますが、今回の編集を行ったところ、css ファイルの冒頭にある
@charset "utf-8";
が
?@charset "utf-8";
に書き変わってしまいました。おかげでレイアウトが崩れてしまったのですが、当初はなにが起こったのかすらさっぱり見当がつかず四苦八苦しました。原因は net2ftp のログオン画面にある「FTP mode」が「Binary」になっていたためのようです。このログオン画面は XREA の管理画面からは表示されません。各 XREA サーバーの http://www.sXXX.xrea.com/ftp/index.php にあるようですので、探してみてください。
SyntaxHighlighter Plus を使用するため、CSS から <pre> のスタイルを削除しました。すべての文書から <pre> タグを外すと、SyntaxHighlighter の使用をやめた時にやっかいです。それに <pre> タグを外すと、WordPress がソースコードを書き直してしまうため、実際のところはずすにはずせません。
変更箇所は以下の通りです。
pre, をコメントアウト
pre の規則集合をコメントアウト pre の規則集合をコメントアウト 以下を 1-subSkin.css に追加。
[source language=css]
/* WordPress 2.6 Captions for vicuna smart-canvas */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright,
div.alignright {
float: right;
margin: 0px 28px 0px 1em;
}
.alignleft,
div.alignleft {
float: left;
margin: 0px 1em 0px 28px;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding: 4px 4px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */
[/source]