ワードプレス(WP)ではじめてのテーマカスタマイズ

happy当ブログも開設から1年を過ぎ、いよいよ重い腰を上げてデザインをリニューアルすることに。今まではデフォルトの”Twenty Ten”を簡単に触っただけでした。

そんなことよりコンテンツ!と言いたい所ですが、まだまだ力のあるコンテンツを出せない今日このごろ。

ワードプレスの右も左も分からない状態からブログを始め、必要な時に、その場しのぎで手を加えてきました。そのおかげか少しはテンプレートなどのシステム構成も見えてきました。

ウチもそろそろデザインを変えたいなとお考えの方に、今回のリニューアルで感じたポイントを。

スポンサーリンク

 

リニューアルのきっかけ

この1年は記事や読者が増える度に様々なプラグインや広告を導入してきました。

人気記事を表示する・Popular Posts
関連記事を表示する・YARPP
広告・Google Adsense
・楽天モーションウィジェット
ページングナビ・WP-PageNavi

しかし導入タイミングがバラバラなのでデザインに一貫性がでません。 導入時に一応は格好をつけますが、どうしてもツギハギな感じがして気に入りませんでした。

特に修正したかったのは、背景が白一色で眩しい点と固定ヘッダーの導入。

リニューアル間近の状態。白い領域が眩しい印象。

リニューアル直前の状態。背景すべて真っ白なので眩しい印象。

背景色はCSSでいつでも簡単に変更できますが、白以外にすると画像が切り抜きに見えなくなります。なのでメインコンテンツのバックはどうしても白。サイドバーなどの周りの明るさを抑える必要があります。

redesign_1

例えば下の記事では、バックが白のおかげで対象の魚が引き立ちページが締まっています。

もうひとつの固定ヘッダーは、最近レスポンシブ化のお陰か徐々に浸透してきていますし、常に読者の目に入る領域は何かと便利です。

 

テーマ作成って大変そう・・・と重い腰

レンサバにアップしてあるWPですが、今まではチマチマと修正するだけだったので、本番環境のテーマを直接修正してました。プロならダメ!絶対。

本腰入れてリニューアルとなるとテーマを新しく作る?って事?

「ワードプレス テーマ 作成」なんかでググると素晴らしい解説が沢山見つかるけど、「何だか大変そうだな」と躊躇してました。

それで最終的にどれくらい大変だったか?って事なんですが、テーマの作成って思ったよりも簡単でした。単純に今使ってる”Twenty Ten”フォルダをコピーするだけで新しいテーマとして認識してくれる。もし何か失敗しても、元のテーマに戻せばいいだけ。

redesign_2

テーマってデータベースに特別な登録が必要と思ってましたが、単純にフォルダを認識してるだけだったんですね。

 

絶対必要なローカル環境

新しいテーマはコピーで作れる事が分かったので、そこからカスタマイズすれば良さそうです。今回の修正は大規模なので、レンサバではなくローカルで作業する必要があります。

うちはXAMPPなんですが、とりあえずレンサバのファイルとDBを全てローカルにぶち込みました。あとはwp-config.phpをローカルDBへの接続情報に変更すればOKなはずですが、なぜか本番アドレスにリダイレクトされる。

しかし本家のフォーラムに解決策を発見。この例ではMAMPですが一緒です。

WordPress › フォーラム » MAMPを使用したローカル編集環境

アクセスURLと管理画面で設定したブログURLが異なる場合、後者のURLにリダイレクトされるとのこと。DBを直接編集かと思いましたが、DBを書き換えなくても wp-config.php に下を追加すればOK。

define (WP_SITEURL, 'ローカルURL');

との事でしたが、これだけではダメのようで、WP_SITEURLとWP_HOMEの2つを設定する必要がありました。

define ('WP_HOME', 'ローカルURL');

これでローカル環境でWPを表示することが出来ました。

 

テンプレート&CSSの修正

chromeここまで来れば、後はコピーした”Twenty Ten”をガシガシ修正していきます。私はChromeのデベロッパーツールを使ってHTMLやCSSの確認をしています。”Twenty Ten”のHTMLは構成がしっかりしているので、テンプレートよりもCSS修正が多くなりました。

ぷらすぶろぐのコンセプトは、あくまで記事が主役。額縁みたいに、どんなジャンルの記事ともマッチするような。そんな事を意識しながらデザインを組みました。

細い所はjQueryで処理した部分もあります。たとえば”Popular Posts”で投稿日を表示すると”posted on”という文字列が表示されますが、プラグイン本体を改造するとアップデート時に再改造が面倒になるのでjQueryで消去したり、

jQuery('.popular-posts .wpp-date').each(function(){
    jQuery(this).html( jQuery(this).html().replace('posted on ','') );
});

固定ヘッダーを採用した事によりiframeがz-indexを無視する問題には、

Youtube・ニコ動・楽天モーションウィジェットのiframeがz-indexを無視するのを回避 – ぷらすぶろぐ

この記事で解決法を示していますが、当ブログはyoutube動画が殆どなので、 下のjQueryでiframeのsrcに自動的に”wmode=transparent”を追加しました。

jQuery("iframe[src*='youtube.com']").each(function(){
    jQuery(this).attr('src',jQuery(this).attr('src')+'?wmode=transparent');
});

 

デザインを進める上で

他にもデザインを進める上でいくつか問題が発生しました。

たとえば楽天モーションウィジェットが勝手に挿入しているimg要素の為に、フッターに謎の空きが発生する問題はこちらで解決。

ページに勝手に挿入される"ad.yieldmanager.com"を削除する : たき備忘録

他に、画像へのhover時にopacityで透明にしていますが、 Firefoxで画像が消える問題が発生。これは背景色を設定していなかった為でした。

Firefox 10 opacityをアニメーションで変化させると背景が黒くなる|京都 WEB制作 株式会社エニシスアソシエイツ

ここまでくるとワードプレス固有の問題というより、HTMLやCSSの問題に直面する事が多くなるので、ググれば解決する場合がほとんどです。

今回リニューアルする前は、テーマの作成ってPHPで構成されたテンプレートをガリガリと修正するイメージでしたが、基本となるテーマと構成がほぼ一緒ならば、ほとんどCSSの修正だけでリニューアルが可能でした。ワードプレスって凄いですね。

 

 

スポンサーリンク