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

2017年7月25日 IT, ブログ

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

カスタムメニューの設定

カスタムメニューの機能

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

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

カスタマイズ

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

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

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

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

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

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

カスタムヘッダーの設定

カスタムヘッダーの機能

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

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

カスタマイズ

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

01 $args = array(
02  'default-image' => get_template_directory_uri() . '/images/header.png'
03  'width'                  => 1000,
04  'height'                 => 110,
05 );
06 add_theme_support( 'custom-header', $args );

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

1 <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>"
 width="<?php echo get_custom_header()->width; ?>" alt="" />