当ブログは、以前から一部、スマホに対応していたのですが、 中途半端な状態だったので時代の流れにも逆らえず、今回、完全にスマホ対応することにしました。
「MH Magazine lite」というマガジンスタイルのWordPressのテーマがレスポンシブ対応していて便利そうだったのでこちらを導入することに。
テーマの乗り換えは比較的スムーズにいくはずでしたが。。
ブログの記事数増加で処理の負荷を減らすためにブログシステムをMovable TypeからWordPressに乗り換えたのが2014年7月。約4年半ぶりにWordPressのシステムと格闘したので完全に移行するのに三日ほどかかりました。
その中で一つぐらい有益な情報を掲載しておきます。
「MH Magazine lite」に限らずよくあることですが、カテゴリリストを表示するときに記事数も表示すると記事数だけ改行されて表示されることが多いです。その対策で以下のコードがよく出回っています。
add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
$output = preg_replace('/<\/a>\s*((\d+))/',' ($1)',$output);
return $output;
}
このコードでカテゴリ名と記事数が一行で表示されて一件落着と思いきや。。「グルメ・食べ歩き」のカテゴリーだけが二行のままです。四桁以上になるとカンマが入るのでその処理が必要なようです。
そのカンマ処理をしたのがこちらのコードになります。
add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
$output = preg_replace('/<\/a>\s((\b\d{1,3}(,\d{3})\b))/',' ($1)',$output);
return $output;
}
解決できました。
その後もちょこちょこと躓きながら、なんとか移行完了です。
「MH Magazine lite」は、 レスポンシブ対応されているので、基本はお任せですが、表だけは一部、対応が必要でした。表の中の文字の繋がり（例えば「・」という文字などがある場合）で改行位置が変わったりするのでそのあたりの内容の調整とどうしても横長で見せないといけない表の「世界TOP100コース巡り」の各コースの情報の表や 「世界のベスト500ホール」の表などは横スクロールさせる以下のコードで囲みました。
<div style="overflow-x:auto;">
ここに元々の表のテーブル情報
</div>
そうすることによって縦長の画面では横スクロール。横長の画面ではレスポンシブルで表示というように対応することが可能に。
イメージとしてはこういう状態になっています。
これからも見やすいゴルフ・食べ歩き情報サイトとして運営していきたいと思っておりますのでよろしくお願いいたします。
コメント