WordPress管理画面からヘッダー、背景、メニューを編集する方法

WordPress管理画面からヘッダー、背景、ナビゲーションメニューを編集する方法とそのカスタマイズについての記述です。WordPress3.0から対応している機能を使います。

カスタムメニューの設定

カスタムメニューの機能

トップのナビゲーションメニューを編集する際、今までは直接コードを編集したり プラグインを入れたりしていましたが、これからはプラグイン無しで管理画面から直接編集が可能です。

管理画面の「外観」→「メニュー」から ナビゲーションに表示させたいメニューを追加します。画面も直感的に操作できるので簡単です。

カスタマイズ

function.phpに以下のコードを記述します（WordPress3.0以上）。

register_nav_menus(array(
	'navigation' => 'ナビゲーションバー'
));

次にナビゲーションメニュー部分（header.phpなど）に以下のコードを挿入すればOKです。

<div id="nav">
  <?php wp_nav_menu(array('theme_location' => 'navigation')); ?>
</div>

また、メニューの名前を指定する場合は以下。

<?php wp_nav_menu( array('menu' => 'example-menu' )); ?>

カスタムヘッダーの設定

カスタムヘッダーの機能

HTML/CSSに慣れている方なら テーマを直接編集する方が自由が利いて便利だったりするのですが、誰でもヘッダーの変更を気軽に変更できる機能が「カスタムヘッダー」です。これもWordPress3.0以上の環境が必要です。

管理画面の「外観」→「ヘッダー」から 変更します。こちらも直感的な操作が可能です。function.phpであらかじめ設定したサイズにトリミングされます。

カスタマイズ

カスタムヘッダー未対応のテーマは functions.phpに以下のコードを記述します（WordPress3.0以上）。1000とか110とか書いてあるところは横幅/縦幅です。

add_custom_image_header('','admin_header_style');
function admin_header_style() {
?>
<style type="text/css">
#headimg	{width: 1000px!important}
</style>
<?php
}

define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/images/header.png');
define('HEADER_IMAGE_WIDTH',1000);
define('HEADER_IMAGE_HEIGHT',110);

次にヘッダー部分（header.phpなど）に以下のコードを挿入すれば完了です。

<?php if(get_header_image()): ?>
  <p id="image">
	<a href="<?php bloginfo('url'); ?>">
	<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />
	</a>
  </p>
<?php endif; ?>

カスタム背景の設定

カスタム背景の機能

背景に 画像やカラーを設定したり 繰り返し/スクロールの有無 の設定も出来ます。これもWordPress3.0以上。WordPress3.4以上。

管理画面の「外観」→「背景」から 変更します。

カスタマイズ

カスタム背景未対応のテーマは functions.phpに以下のコードを記述します（WordPress3.0以上WordPress3.4以上）。以上で完了です。

add_theme_support('custom-background');

これで管理画面から編集できる項目がさらに増え、より初心者層にも使いやすいWordPressになりそうです。