Twenty Tenでヘッダーのイメージサイズを変更したい、というお問い合わせをいただきましたので、こちらでちょっと書いてみたいと思います。

今まではCSSでするTwenty Tenのカスタマイズについて色々考えてきました。CSSだけでも本当にいろんなことが出来ますね。ただ、本格的に色々やってみよう、と思い始めると、CSSだけではなくテーマのファイルも変更していかなくてはならなくなってきます。

本当はテーマの構造から説明していこうと思っていたのですが、いきなりここから始めちゃいますね。

Twenty Tenのテーマのフォルダの中をみてみよう

さて、まずはTwenty Tenのテーマのフォルダの中を見てください。ずら〜っとファイルが並んでいますね。***.phpなどど、phpという名前がついたファイルがたくさんあります。WordPressは基本的にPHPという言葉を使って書かれているので、テーマのファイルもPHPになります。

つまり….PHPを避けて通ることが出来ない….

そして、WordPressの中で決められた、WordPressのための言葉、テンプレートタグ、というものがあります。テーマはこのテンプレートタグとPHPの組み合わせで出来ているんです。

HTMLやらCSSやらでも大変なのに、まだまだあるの？って感じですよね。私も初めてWordPressのテーマの中身を見たとき「何だこの宇宙語は？」って思いました。でも、じっくり勉強していくと、やがて「となりの星の言葉」くらいになり「外国語くらい」になり。。「まぁ、ちょっと何言ってるかわかるようになってきたかも」、と少しづつわかるようになってきました。私も本当にまだまだですが、みなさんもぜひ、挑戦してみてくださいね。

では、今回必要なファイルをちょっと開いてみましょう。

テーマに色々な機能を追加する、functions.php

Twenty Tenのフォルダの中を見ると、「functions.php」というファイルがあると思います。これを開いてみましょう。

なにやら難しそうなことがズラズラと書いてありますね。そ〜〜っと閉じたりせずに、少し下の方へいってみましょう。114行目当たりに

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

と書いてある所があります。英語を読んでみると、「カスタムヘッダーの高さと幅をして指定してますよ」という感じのことが書いてあります。
そして、940とか198とかいう数字がありますね。これが管理画面で見る

デフォルト画像の代わりにサイトの一番上に表示させるカスタムなヘッダー画像をアップロードできます。
画像の大きさを940 × 198ピクセルにするとそのままの大きさで表示されます。

の数字です。

そう、こんなふうに「functions.php」では、テーマに様々な機能を付け加えている、プラグインみたいなファイルなんです。みなさんのよく使うカスタムメニューやウィジェットなども、ここで指定してあるんですよ。興味のある方は、どこに指定されているか、探してみてくださいね。

さぁ、ヘッダーのイメージを指定しているところがわかりました。これを変更すればバッチリですね…

いいえ！ちょっと待ってください！

「functions.php」も上書きされちゃう

前に「まずは子テーマをつくる準備から」で子テーマを作るおはなしをしました。子テーマを作る理由は、直にTwenty Tenを変更していくと、何かあったときに戻せなくなってしまうこと、また、WordPressをバージョンアップするときに、テーマも上書きされてしまうことがあるためです。

テーマが上書きされる、ということは「functions.php」も上書きされてしまうということです。それでは困るので、子テーマを作り、そこに「functions.php」という名前のPHPファイルを作りましょう。

ヘッダーのイメージのサイズ変更のコードを書く

<?php

add_filter('twentyten_header_image_width', 'my_header_width');

function my_header_width($size){
    return 1000;
}

?>

「functions.php」に上のコードを書きます。「functions.php」の書き方の注意については、「functions.phpを編集したら、サイトが真っ白になっちゃったときに試してみてね」を見てくださいね。

すでに「functions.php」がある人は、元々ある

<?php

......
?>

の中に入れてしまうといいと思います。

上のコードの意味は、「twentyten_header_image_width」という設定の言葉を自分の作った「my_header_width」という言葉に取り替えますよ、そそして「my_header_width」は「1000（px) 」にしますよ、って感じです。「twentyten_header_image_width」は先程見たtwentytenの「functions.php」に書かれていたものですね。

width（幅）をheight（高さ）に変えれば高さを変える事ができます。

管理画面に行くと、ヘッダーのサイズが変わっていると思います。変えたサイズのファイルをアップロードして、ヘッダー画像を取り替えましょう。

それだけじゃダメよ！

さぁ、できた！と思って、確認すると…

ヘッダー画像だけがびょ〜〜ンと長くなっていませんか？

これはTwenty Tenのコンテンツの幅を変更していないからです。CSSで、ヘッダー画像のはばに合わせて、全体幅、コンテンツ幅、サイドバーの幅など調整しましょう。

「Twenty Ten テーマ　全体のレイアウトのカスタマイズ」、「Twenty Tenのレイアウトを変える(2)〜コンテンツ幅の調整」などにも説明してるので、そちらもどうぞ。

ちょっとした機能を追加できたり、変更できたり、テーマを変更できたりするようになると、カスタマイズの幅が格段に広がると思います。ぜひ、ちょっとしたことから挑戦してみてください。

では、楽しいカスタマイズを…