テーマやデザインの選択と編集

見ての通り本サイトはTwentyTenを利用してるんで、必要な設定を辿ればすぐに似たようなサイトが出来上がるプリミティブなデザインとなっている。だからこそ、こうしてメモをまとめておけば、だれでも似たようなところまでは持って行けるはずと思っている。

ただ、最初は他のテーマを差し替えたりして遊んでいたような遠い記憶。


  1. フリーテーマに潜む危険性
  2. ブラウザキャッシュに残るCSSやjavascriptの対策
  3. TwentyTen
  4. TwentyEleven
  5. レイアウトや望ましい幅について

フリーテーマに潜む危険性

WordPressテーマを変更する際に最初に知っておかなければならない事がある。それは、公式サイトにアップロードされているテーマの中にも脆弱性を持ったテーマや、悪意を持って脆弱性を仕込んであるテーマが存在する可能性があるということだ。

WordPressのフリーテーマに仕込まれるRFI攻撃の足がかり」でも記載した通り、RFI攻撃に必要な外部phpインクルードの仕掛けを仕込んだテーマを配布していたり、あるいはテーマで利用しているJavascriptの中にも、エンコードして素で見えないように悪意あるコードを忍ばせている場合があることに、注意を払う必要がある。残念なことだ。

また、フリーのプラグインも同様の危険性や脆弱性を孕んでいる可能性も否定できず、確認はしていないが、「脆弱性が懸念されるWordPressプラグイン一覧」に記載したようなプラグインの有無を確認するようなアクセスを受けることもある。

ブラウザキャッシュに残るCSSやjavascriptの対策

WordPressに限った事じゃないんだが、*.cssとか*.jsとかは改版したら末尾に?YYYYMMDDなどを付けて、見ている人たちのブラウザに残っているキャッシュが使われないようにしないといけない。だが、下記のパスのstyle.cssは付いていないんで、

~/wordpress/wp-includes$ grep 2011 theme.php
        $stylesheet_uri = $stylesheet_dir_uri . ‘/style.css?20110913‘;

みたいに改版してる。

TwentyTen

普通のブログサイト並の機能になるよう、変更したファイルと内容は以下の通り。他の見た目の違いはプラグインによるものなので、稼働させているプラグインのページを参照のこと。

header.php
  • IE7互換表示のmetaタグを追加
  • Google+のプロフィールとの関係付けのためrel=”author”を追加
  • ヘッダー画像がデカいんで、header.phpの画像表示部分を変更
  • RSSフィード・Facebookページ・Google+ページ・Twitterのアイコンの埋め込み
loop.php

pagenaviプラグインにより過去ページやカテゴリー、タグのアーカイブ表示の際に、上下にページ番号が付加されるように<?php wp_pagenavi(); ?>を付加している。

loop-page.php, loop-single.php, footer.php

zenbackのコードをfooter.phpに、loop-*.phpのタイトルに精度向上タグを入れ、ボディはテーマではなくWordPress本体のほうで挿入している。(「WordPressでの正しいzenback精度向上タグ挿入位置」を参照のこと)

zenbackコードは最初はcomments.phpに挿入していたが、「WordPressに表示遅延させない為のzenbackコード挿入位置」で記載したような経緯で、footer.phpにコードを挿入してcomments.phpのdiv id名称を使って表示位置はcomments.phpに挿入したときと同じ場所に出現するようにしている。

Twitterをzenbackに頼らず自力で表示させる場合には、footer.phpに「記事についてツイートされた内容を記事に表示し返す方法」で記載したようなコードを埋め込む。

style.css

フォントの変更やH1~H4のタグの装飾。細かいことは、style.cssを見ればわかるが、その他で調整したのは以下。プラグインや一般利用されてるブログパーツのカスタマイズだ。

TwentyEleven

研究中。似たようにはできるんだけど、色々支障があるのと現状のテーマで満足してしまったので、移行は当分先のことになりそうだ。

レイアウトや望ましい幅について

TwentyTenまではサイドバーがデフォルト200pxだったんだが、昨今は300px幅が標準らしく、AdSenseとかブログガジェット的にサイドバーに300px取れるようにすべき・・・だが、さんざん、投稿を書き溜めてから幅を変えるのはキツイ。

投稿の際には、横幅を明確に指定したり幅一杯を使う画像の貼り方をしないように注意したほうが、後々、レイアウト変更で幅が変わっても対応できるということに気が付いたのは、700投稿くらい溜まった後だったのよさ。\(^o^)/オワタ

サイドバーが300px幅の出来合いのテーマをカスタマイズしたこともあった。「WordPressテーマのカスタマイズなんて骨折り損」でiFeatureテーマのカスタマイズを例に、出来合いのテーマをベースにカスタマイズする際の問題点とかを書いた。


    コメントを残す

    メールアドレスが公開されることはありません。