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

2010

11.18

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であらかじめ設定したサイズにトリミングされます。

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

カスタマイズ

カスタムヘッダー未対応のテーマは function.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以上。

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

カスタム背景の使い方

カスタマイズ

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

add_custom_background();

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

  • このエントリーをはてなブックマークに追加

関連記事

    • 岩井拓実
    • 2012年 2月17日

    お世話になります。
    岩井拓実と申します。

    私のブログ
    http://www.with-you.in
    のいちばん下の

    「Copyright (C) 2010 岩井拓也 All Rights Reserved.」
    を編集して
    「Copyright (C) 2010 実践アフィリエイター・健太 All Rights Reserved.」
    に変更したいです。

    どうすれば
    「Copyright (C) 2010 実践アフィリエイター・健太 All Rights Reserved.」
    にかえられるでしょうか?

    お手数おかけしますが、
    アドバイスよろしくお願いします。

  1. この記事へのトラックバックはありません。

過去アーカイブ