WordPressテーマ『tanzaku』にヘッダーバーを追加する方法

WordPress

2013年2月24日 05:37

CSS,PHP,tanzaku,WPプラグイン

ワードプレステーマの『tanzaku』にヘッドバーを追加する方法をご紹介します。

この記事は最終更新日から1年以上が経過しています。

サイドバーの追加方法

ヘッドバーを追加する場合、直接コードを書き込んでもいいのですが、それでは効率が悪すぎます。
検索ボックスだったり、カテゴリだったりはウィジェットであるものですから、それを利用しない手はありません。

当ブログの場合は、無駄にサイドバーを役割分担させてるので、一つサイドバーを追加する必要がありました。
なので、以下の手順でサイドバーを追加します。

/wp-content/themes/tanzaku/functions.php　
2行目付近

if ( function_exists('register_sidebar') ) {
	register_sidebars(2); //中身を3に変更
}

これで、管理画面のウィジェットの画面に「サイドバー3」というものが追加されました。

ウィジェットの中身を厳選

使いやすさを考えて、当ブログで欲しかったのは
・TOP　へのテキストボタン
・記事一覧　へのテキストボタン
・カテゴリ　のプルダウン選択枠
・タグ　のプルダウン選択枠
・検索BOX

以上の5点です。

というわけなので、以下の画像のように、まずはウィジェットを追加します。

ウィジェットの工夫と追加プラグイン

カスタムメニュー
さて、中についてですが、4点しか追加しておりません。

これは、カスタムメニューの中身が2点という事です。
メニューでカスタムメニューをつくり、それを表示させるという事ですね。

細かくは書きませんが、これを使えば、固定ページや注目カテゴリーなどを表示することができます。
見せ方は様々という事ですね。

My Category Order
こちらは有名なプラグインですね。
ダウンロード先を表示してもいいのですが、直接プラグインページの新規追加でインストールしましょう。
デスクトップにファイルが増えて仕方ないですから。

設定はShow As Dropdownにチェックを入れれば、セレクトボックスが表示されます。
それ以外はお好みでどうぞ。

Configurable Tag Cloud
タグクラウドでは、無駄に場所をとるばかりで邪魔だという事で、こちらもセレクトボックス化が必要でした。
そこで、探したところ出てきたのがこちらです。
リスト表示もできたり、使い道は色々とありそうなので、入れといても悪いものではなさそうです。

設定はCloud FormatをDropdawnを選ぶぐらいでしょうか。
それ以外はお好みでどうぞ。

検索BOX
こちらは元々備え付けでついているものを入れました。
もうちょっとデザインに手を加えてもいいのでしょうが、いずれやるでしょう。

PHPで表示し、CSSで成型

/wp-content/themes/tanzaku/header.php　
81行目付近

<noscript><p class="caution aligncenter">Enable Javascript to browse this site, please.</p></noscript>
//上の表示の下に追加
		<div id="top_menu">
		<?php get_sidebar(3); ?>
		</div>

/wp-content/themes/tanzaku/style.css　
好きな場所に以下を追加

#top_menu {
    background-color: #272727;
    height: 36px;
    width: 100%;
    z-index: 1;
	top: 0;
	left: 0;
	position: fixed;
}

#sidebar3 {
list-style: none outside none;
margin: 0 auto;
padding-left: 0;
width: 84%;
min-width: 960px;
}

#sidebar3 li.widget {
display: block;
overflow: hidden;
float: left;
margin: 0 20px 0 0;
padding: 5px 0 0;
border: 0;
}

#sidebar3 h2.widgettitle {
display: none;
}

#sidebar3 li.menu-item {
float: left;
list-style: none outside none;
padding-right: 30px;
}

基本的な表示はこれでいけると思います。
あとは微調整をするだけですね。