WordPress 初心者にも分かるデフォルトテーマ twentyten の functions.php を解体して学ぶ基本設定編

WordPress の次世代デフォルトテーマを網羅するために解体しました。

ビジュアルエディタに StyleSheet を設定する

ビジュアルエディター内に editor-style.css が適用されます。

1

add_editor_style();

投稿サムネイルを有効にする

投稿サムネイルを有効にするかどうかの設定ができます。

1

add_theme_support('post-thumbnails');

もし有効にする場合は以下のようにサムネイルのサイズを設定しておきましょう。第三引数に true を設定すると 50*50 で画像を切り抜きます。false で画像をうまい具合にリサイズします。デフォルトは false です。

1

set_post_thumbnail_size(50, 50, true);

サムネイルは以下のように記事内で表示します。

1
2
3
4
5
6
7

<?php
if(has_post_thumbnail()) {
	the_post_thumbnail();
} else {
	echo 'サムネイルは設定されていないよ';
}
?>

以下の記事が参考になります。
WordPress 2.9 の新機能の投稿サムネイル画像の使い方 | わーどぷれすっ！

head に RSS への link を追加する

直接書かなくても自動的に head に RSS へのリンクを挿入する。

1

add_theme_support('automatic-feed-links');

多言語に対応をする

以下のコードで多言語に対応をします。言語ファイルは自分で作る必要がある気がします。

1
2
3
4
5

load_theme_textdomain('twentyten', TEMPLATEPATH . '/languages');
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if(is_readable($locale_file))
	require_once($locale_file);

管理画面からカスタマイズできるメニューを作る

テーマファイルを直接弄ってメニューを作っても良いですが、管理画面からドラックアンドドロップでメニューをコントロールできます。初心者などにサイトを提供するためには便利ですね。

使い方はちょっとだけ複雑です。簡単にここで説明します。

テーマファイルの設定

テーマファイルのメニューを表示したい場所に以下のようにコードを入れます。

1

<?php wp_nav_menu(Array('container_class' => 'menu-header', 'theme_location' => 'primary')); ?>

さらにフッターにもメニューを表示したい場合は以下のように theme_location に違う名前を入れてコードを書きます。theme_location が目印になります。

1

<?php wp_nav_menu(Array('container_class' => 'menu-header', 'theme_location' => 'secondary')); ?>

functions.php の設定

以下のように、テーマに設定したメニューを表示する場所の説明を、管理画面に流してやります。といっても各場所についての説明を書く感じですね。具体的に書いてあげれば初心者にも分かりやすいでしょう。

1
2
3
4
5
6

register_nav_menus(
	Array(
		'primary' => __('ここはヘッダメニューのところだよ', 'twentyten'),
		'secondary' => __('ここはフッタメニューのところだよ', 'twentyten')
	)
);

管理画面からメニューを作ります

ダッシュボードの外観の中にメニューという項目が出現します。全てはここからコントロールできます。カテゴリへのリンクやページの階層設定、外部リンクなどもここで設定できますのでとても便利ですよ。

背景色や背景画像を管理画面から設定する

管理画面から設定できるようにします。仕組みとしてはここで設定をすると WordPress の head 内に直接 CSS で背景などを設定します。

1

add_custom_background();

以下のページが詳しく解説しています。
WordPress 3.0でテーマに背景を設定する機能を追加する方法 | WordPress カスタマイズ | Lovelog+*

WordPress のヘッダ画像などを管理画面から変更する

107~127行目のコードはヘッダ画像を管理画面からコントロールできるようにするコードです。あまりにも複雑なのである程度コードを整理すると以下のような感じになりますね。define いっぱいで怖いです。

ヘッダ画像機能のセッティング

1
2
3
4
5

define('HEADER_TEXTCOLOR', '');
define('HEADER_IMAGE', '%s/images/headers/path.jpg');
define('HEADER_IMAGE_WIDTH', 940);
define('HEADER_IMAGE_HEIGHT', 198);
define('NO_HEADER_TEXT', true);

各定数については以下の表を参考にしてください。

HEADER_TEXTCOLOR ここでカラーコードを設定しておくと管理画面での文字入れの時にデフォルトで設定されます。管理画面からの変更は結果的には可能です。
HEADER_IMAGE テーマを有効化した時にデフォルトで表示される画像です。%s の部分は自動的にテーマファイルまでのパスに置き換えられます。
HEADER_IMAGE_WIDTH と HEADER_IMAGE_HEIGHT 横幅と縦幅です。ここにいれた数値にヘッダ画像を加工してくれます。
NO_HEADER_TEXT テキストをヘッダに表示しないかの設定をできます。何も設定しなければテキストは表示されますが、テキストを表示したくなければ true を設定したまま書いてください。false を設定すればテキストを表示することができます。

ヘッダ画像に対して何かスタイルを実行したい場合

以下のコードを使えばヘッダにスタイルシートを追加することができます。

1

add_custom_image_header( 'example_header_style', 'example_admin_header_style' );

それに合わせて関数を準備します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function example_admin_header_style() {
?>
	<style type="text/css">
		#headimg {
			border-bottom: 1px solid #000;
			border-top: 4px solid #000;
		}
		#headimg #name { }
		#headimg #desc { }
	</style>
<?php
}
function example_header_style() {
	// 同じような感じでなんとか書く
}

ヘッダ画像のバリエーションを設定する

管理画面から設定できるヘッダ画像を設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

register_default_headers(
	Array(
		'サンプル画像1' => Array(
			'url' => '%s/common/img/header_01.jpg',
			'thumbnail_url' => '%s/common/img/header_01_thumbnail.jpg',
			'description' => 'サンプル画像1'
		),
		'サンプル画像2' => Array(
			'url' => '%s/common/img/header_02.jpg',
			'thumbnail_url' => '%s/common/img/header_02_thumbnail.jpg',
			'description' => 'サンプル画像2'
		)
	)
);

以下のページが大変参考になりました。
WordPress3.0のカスタムヘッダーを使う | webOpixel

基本設定編はこれで終わり

以上で基本設定は終わりです。以上のコードは全て関数の中にくるんでフックで実行します。

1
2
3
4
5

function example_after_setup_theme()
{
	// ここに実行したいコードを書く
}
add_action('after_setup_theme', 'example_after_setup_theme');

関連記事

コメント

コメントは受け付けていません。