WordPressを使ったサイトで、カスタム投稿タイプを利用してトップページに「お知らせ」「新着情報」「information」などのタイトル一覧を載せるケースは多い。
新しい記事の更新情報だったり、企業サイトだと展示会出展の情報など、トップページの記事タイトルをクリックすると記事が読めるので便利。
イベントや外部サイトについて書く場合、通常は詳細情報などを書いた記事の中にリンクを貼り、そこからジャンプするのが基本なのだが、特に説明は不要で指定のURLに飛んで欲しい時もある。
そんな時に便利なのがWordPressの無料プラグイン「VK Link Target Controller」
WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) を新しいjQuery Mobileで使用すると、カテゴリー表示にした場合にレイアウトに不具合が発生する。
前回のエントリ『Wordpress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法』では、カテゴリを呼び出す階層を制限することで表示不具合に対処したが、サブカテゴリに辿り着けないのは不便なため、別の修正方法をとることにした。
前回修正してしまっている場合も、
<?php if($detectedPage=='categories') :?> 〜 <?php endif; ?>
をそのまま入れ替えればいい。
修正するのは、前回と同じ以下のファイル
/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');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r|\t|> </", "", $categoriesHTML);
$categoriesHTML = str_replace("a> (",'a><span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")<ul class='children'>","</span><ul class='children'>",$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span></li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>
に変更する。
この修正を施すことにより、カテゴリリストをタップすると、サブカテゴリが存在する場合はサブカテゴリ一覧、無い場合は該当カテゴリのファイル一覧が表示される。
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」を入れて階層取得を１階層に制限するだけの話。
この１行を修正するだけで、表示バグは直る。
WordPressで写真付きの日記をアップしたりレビューを書いたりしている時、複数の画像を自由にレイアウトしたり表を作りたいと思うことがある。
WordPressでは所謂HTMLのテーブル（Table）タグでのレイアウトは考えていないから、デフォルトのエディターのままでは、テーブルを作るのはかなり面倒。HTMLのタグが分かる人なら、ビジュアル編集モードからHTML編集モードに切り替え<table><tr><td>と書いていけばいいが、HTMLが分からない人にとっては難しく、また、サイズの変更やセルの結合など面倒な事が多い。
テーブル作成系のプラグインは数種類あるが、一番のお薦めは「Editor Extender」。
Editor Extenderはテーブル作成のプラグインという訳ではなく、多くの機能を追加してくれる。
Editor Extenderのインストールは簡単。ダウンロードしたEditor Extenderをpluginsフォルダに入れ、プラグインの有効化をするだけでいい。
なお、多種の機能があるEditor Extenderだが、あまり使わないものもあるから、Editor Extenderの設定画面のチェックボックスで必要なものだけチェックすることをお薦めする。デジタルゲートがお薦めするのは「Style」と「Table」の２つ。
あとは編修画面に増えたメニューアイコンから使っていくだけだが、ブラウザによって多少違うから要注意。
IEでは、セルの結合に、マウスでのドラッグによるセルの複数選択ができない（ポップアップされるメニューから結合したい数を入力すれば可能）。
Lunascapeでは、レンダリングエンジンの選択にもよるが、メニューアイコンのツールチップが出ない。
お薦めなのはFireFox。Windows、Mac共、問題なく使える。
MacのSafari 1.x も表示されない。
最後に動作環境だが、WordPress2.6.xだとポップアップメニューが正しく表示されない。現行の2.7.1にアップデートすることをお薦めする。
ちなみに、WordPress muでは、設定メニューのチェックボックスが保存できないため使用できない。