WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) は便利だが、jquery mobileのバージョンをjQuery Mobile 1.1や、新しいjQuery Mobile 1.2にすると、カテゴリー表示にした場合にレイアウトに不具合が発生する。
症状としては、エラー等で表示されない訳ではなく、サブカテゴリまであるカテゴリの表示部分に余分なテキスト等が表示されてしまい、表示が崩れてしまう。
階層が浅いサイトならば問題なく使える場合もあるだろうが、現実的にはこの表示バグを修正した方が良いだろう。
修正するのは以下のファイル
plugins/wp-pda/jqmobile-theme/index.php
<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0'); $categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>
を
<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML; ?>
</ul>
</div>
<?php endif; ?>
のように修正。具体的には
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
の部分に「&depth=1」を入れて階層取得を１階層に制限するだけの話。
この１行を修正するだけで、表示バグは直る。