Wordpressテーマを「Hueman」に変えたあとのToDoリストを公開

やわなべです。

思うところあって「やわなべ.net」のWordPressのテーマ(デザイン)を変えました。

…今「どうでもええわ」という声が聞こえた気がしますが誰ですか? 続けますよ。

スポンサーリンク

何に変えたか

これまで使ってたのは有償のBlogPressというテーマでした。「1ピクセルにまでこだわった」(うろ覚え)という宣伝文句に恥じないきれいなテーマでしたし、お金出して買ったものなんで長く使うつもりでしたが、8ヶ月目にして無償の「Hueman」に変えました。


Hueman – AlxMedia

作者はスウェーデンのAlexander Agnarsonさん。なかなかのイケメンですね。それはともかく。

なぜ変えたか

一番の契機は先日書いたこれですね。

ブログデザインをスマホ対応しただけで満足していいのだろうか

BlogPressもレスポンシブでスマホ対応としては問題なかったんですが、スマホでみた場合に、ロゴ画像がブログタイトルのテキスト表示だけにったり、アイキャッチ画像でファーストビューが占められるなど、スマホ向けの表示にもう少し工夫を凝らしたかったってのが大きいです。

Huemanは、そうしたスマホでの表示が自分好みなだけでなく、画像や、投稿タイトルの文字サイズなんかもビューワの横幅に合わせて伸縮してくれるところが気に入りました。

で、何が言いたいの? 自慢?

違いますよ。テーマ変えるのって結構大変なんですよー、って話ですよ。最近のテーマはデザインだけじゃなく、プラグインで実現するような追加機能もデザインの一部として実装しているわけで、別のテーマに変えるってことは、今まで使ってた機能が使えるのか、使えないならどうやって代替するのかを個別に考えないといけない。そういうのを、リストアップしてても、いくつか漏れが出てくるわけです。

テストサイトで確認 → 一括更新ってのができない

実際の作業としては手元のMacにWordpress動かす環境を用意して「やわなべ.net」のデータをインポートし、新しいテーマで動くよう調整してたんですよ。CSSやPHPの変更だったら、動作確認したものをFTPでガバッとあげてからテーマ変えればいいんですけど、サイドバーのウィジェットの定義とかは、テーマを変えたあとで、管理画面から設定しないといけないんで、アンパンマンみたく「ほら、やわなべ.net、新しい顔よーっ!」とすぐに切り替えるわけにいかない。

アクセスの多いサイトなんかだったら事前にアナウンスの上、来訪者にメンテナンス画面を見せつつ、裏で入れ替え作業をするんでしょうが、そこまで大層なサイトじゃないってことで、アクセスの少ない平日早朝にやってしまえと思って敢行したんですが、月曜朝から盛大にトラブりまして、1日の予定が完全に狂ってしまいました。トラブルの原因はHuemanのバージョンで、管理画面からダウンロードできるものと、作者のサイトで公開されてるもののバージョンが異なってたのが原因でした。みんなも気をつけようね!

というわけで、残作業のToDoを公開!

とりあえず、こんなエントリー書いてるくらいなんで、今現在はなんとかお見せできる状態までこぎつけたんですが、事前の検証でも気づかなかった不具合も出てきてToDoがたまっております。

惰性で「根性の運用で対応する」とかにならないよう、そのToDoをここに晒しておいて、対応したものから順次消していくことにします。Huemanテーマを導入検討中の方、導入済みの方のカスタマイズ計画に参考になれば幸いです。以下、順序は私の考える優先度の高い順です。

1. タブレットビューのサイドバー表示を何とかしたい

Huemonは見てる方のブラウザの横幅に応じて、大きく「PC表示」「タブレット表示」「モバイル表示」の3つが変わる仕様になっています。なにが違うかというとサイドバー。PC表示での2列表示と、モバイル表示の場合にサイドバーをコンテンツ下に表示するのはいいんですが、その間のサイズの場合、サイドメニューが隠れて右上のメニューボタンを押してようやく見えるようになる。来訪者がメニューを押してくれたらいいけど、押さないとモバイル表示よりも表示される情報が少なくなるという事態に。特にブログの購読を促すパーツとか、プロフィールとかせっかく用意した個性アピールのところがここにあるんで困る。

さらに、モバイル表示とタブレット表示の境界が横幅320pxらしく、自分のXperia Z UltraでもiPhone6でもNexus6などの最新Androidでも軒並みタブレット扱いになるってところが辛い。なんとかしたい

2. 記事詳細画面上のカテゴリ表示を何とかしたい

この記事の一番上診てもらうと「ブログ運営」とか出てると思いますがこれ、エントリーのカテゴリーです。カテゴリーを示してるってのがよくわからないってのがひとつと、カテゴリを階層化してるときに、上の階層のカテゴリ名が表示されない。パンくず的に「カテゴリ > 階層1 > 階層2」みたいに表示して欲しいのに。なんとかしたい。

3. 関連記事のチョイスにも上位カテゴリが考慮されてないのを何とかしたい

2と重なりますが、どうもHuemanは多階層のカテゴリってのを考慮してないみたいで、個別記事の下に「今見てる記事と同じカテゴリの記事を関連記事として表示」と指定しても、全く同じ階層のエントリーしか表示してくれない。同じ階層にはひとつしかない場合にも親カテゴリから表示とかしてくれない。その結果出てくる関連記事がとても少なくなってる。なんとかしたい。

4. Twitter/Feedlyへのブログ購読への動線が弱いのを何とかしたい

以前はエントリー下に、自分のツィッターフォローのボタンと、Feedly購読ボタンを立てに並べて配置してたんですが、今回のはサイドバーの一番上とフッター部分にアイコンのみでシンプルに表示できるようになりました。が、少々スッキリしすぎてて、購読アピールとしては弱いかなと。バイラルサイトみたく、フッターに帯状に「Twitter」「Feedly」のボタンが大きく並ぶような形にしようか思案中。何とかしたい。

何とかした。Huemanには記事下に、投稿者情報を表示するblockを出すところがあったんで、そこにTwitter / Feedlyの購読ボタンをうるさくない程度に配置しました。

5. 記事更新日が表示されなくなったのを何とかしたい

個別記事ページのタイトル下、記事の公開日は出るのですが、修正や追記をした時に横に最終更新日が出てたのが、今のテーマでは出ない。なんとかしたい。

6. contactForm7が不要なところでもjavascriptをロードしてる。なんとかしたい

これはHuemanテーマに関係無いですが、問い合わせの1ページでしか使ってないプラグイン「contactform7」で使うcssやjavascriptを全ページでロードしてる。必要なところだけでjavascriptをロードするようにしたい。なんとかしたい

(4.22追記)
なんとかした。が、1行だけだけど、プラグインのソースコードに直接書き換えるという対応をしてしまったんで、今後プラグインのアップデートのたびに対応しないといけない。

7. おすすめ記事の表示ができなくなったのを何とかしたい

以前のテーマではカスタムフィールドで、個別記事に「おすすめフラグ」みたいなのをつけられて、それがついてるものをサイドバーに表示とかできてたんですが、テーマ独自のカスタムフィールドなんで、現テーマでの記事リスト機能では参照されない。代わりにHuemanのメニューウィジェットでは「最新記事」「特定カテゴリ記事」「特定タグ記事」「ランダム表示」が選べて、「おすすめ」の代わりに「ランダム」をとりあえず表示してみたんだけど、意外と面白くてこれでいいかなとか思ってる。けど何とかしたい。

8. サイドバー、引用部分の文字色が少し薄い、読みにくいのを何とかしたい

サイドバーとか、引用とか、属性表記に使われてる文字色が薄い。読みにくいだけじゃなくて、こじゃれ感が、サイトキャラにあってない気がするんで、何とかしたい。

(4.22追記)引用文、記事一覧の本文抜粋のところはちょっと濃くしました。

9. 従来h3, h4で表現していたエントリー内の小見出しを1レベル上げてh2,h3にしたい

これはそのまんまです。けど対応しようとすると、これまでの全記事を書き換えないといけないんで、かなり大変そう。でも何とかしたい。

10. ソーシャルボタンに「はてブ」が追加できないのを何とかしたい

Huemanにもソーシャルシェアを促すボタンバーが用意されてたんですが、配置位置が好みじゃなかったんで「Simple Share Buttons Adder」ってプラグインを入れたんですが、選択できるシェア先に「はてブ」がない。これは…ええと、もういいや。