WordPressのレイアウト編集に必要な知識

2012/06/27

WordPress3.4にバージョンアップついでに、TwentyTenのテーマもバージョンアップ。
怖いものみたさに、バックアップも取らずにバージョンアップ!

さすがに、スタイルが全部崩れましたね〜
そこから元に戻すために、どこを修正したか覚え書き。

画面のレイアウト

  • 全体幅の調整
  • 「style.css」#wrapperのwidthで横幅が指定できるので修正。全体横幅を1110pxに。

  • サイドバーの横幅調整
  • 「style.css」#containerと#contentのmargin指定で、カラムごとの横幅が修正できるので、サイドバーがきちんと表示できるように調整。

  • メニューバーの横幅調整
  • 「style.css」#accessで横幅を修正。
    border-gradius指定で下部の角を丸めて、ヘッダー画像と一体化させる。

  • ヘッダー画像の大きさ調整
  • 「functions.php」’twentyten_header_image_width’でヘッダー画像の横幅をを調整。’twentyten_header_image_height’で縦幅を修正。
    この定数を修正しておくと、管理画面でヘッダー画像の切り取り修正等も自動でサイズ調整行なってくれる。
    「style.css」#branding imgで画像上下の仕切り線を削除。画像上部の角を丸める。メニューバーの下部角丸とあわせて一体感を出す。

日本語の修正

  • 「Continue Reading→」を「続きを読む→」に修正
  • 「lopp.php」から「continue〜」を検索し「続きを読む」に置換。

  • メニューバーの「ホーム」を「Home」に修正
  • メニューバーが強制的に「ホーム」と翻訳されるため、「ホーム」「About」と不釣り合いなメニューになってしまった。
    「Poedit」を使って、「ja.po」ファイルの「Home→ホーム」に置換しているのを「Home→Home」に修正。Poeditを使えば「.mo」ファイルがないフォルダで「.po」ファイルを修正すれば自動で「.mo」を作成してくれる。

使用ツールについて

  • FTPツール「FileZilla」
  • 最初は、FTPツール「FileZilla」を使って、ローカルで修正しては、FileZillaで転送を繰り返していたのだが、これでは非常に手間がかかる。

  • WordPressダッシュボード
  • 実は、WordPressの管理画面で必要なファイルの修正はできる。
    WordPressダッシュボード管理画面のココ!
    テーマの編集  自在Cafe com  WordPress 1
    「style.css」ファイルの修正などは、FTPツールを使わなくても管理画面で修正できる。これで作業効率アップ!

  • Web開発ツール「Coda2」
  • さらに作業効率の改善を目指して「Coda2」を導入!
    これを使えば、オフラインの手軽さでcssファイル等の修正ができる。修正したら「cmd+s」で保存するだけで、Webに反映される。
    高機能なツールなので色んな使い道がありそう。というかFTPツールとして使うのは贅沢かもしれない。しかし、ファイル編集も簡単にできるFTPツールというだけでも導入の価値あり!cssのコマンドも自動補完してくれるので、コマンドうろ覚えでも大丈夫。

    コンテンツの修正は「Marsedit」
    スタイル等の修正は「Coda2」
    という体制がベストかも。


    Coda 2 App
    カテゴリ: 開発ツール
    価格: ¥6,500(記事公開時)


    MarsEdit – the blog editor for WordPress and more. App
    カテゴリ: ソーシャルネットワーキング
    価格: ¥3,450(記事公開時)

※「Coda2」では、「.po」ファイルの修正も出来るが、「.mo」ファイルを自動生成してくれないようだ。ここあたりの対策は検討中。