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

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

カスタムメニューの設定

カスタムメニューの機能

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

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

カスタムメニューの使い方

カスタマイズ

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

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

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

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

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

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

カスタムヘッダーの設定

カスタムヘッダーの機能

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

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

カスタムヘッダーの使い方

カスタマイズ

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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など）に以下のコードを挿入すれば完了です。

1
2
3
4
5
6
7
<?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以上）。以上で完了です。

1
add_theme_support('custom-background');

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