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

使い勝手を考えて、多少ブログをカスタマイズしました。

TOPページでは下部にあったり、記事ページでは中断に追いやられたりと、検索機能としていまいちだった部分を、今はやりのヘッドバーに移しました。

これはこれで使い勝手の面でどう転ぶかわかりませんが、見た目としてはそれほど悪くない。

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

サイドバーの追加方法

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

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

/wp-content/themes/tanzaku/functions.php 
2行目付近
if ( function_exists('register_sidebar') ) {
	register_sidebars(2); //中身を3に変更
}

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

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

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

以上の5点です。

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

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

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

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

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

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

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

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

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

検索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;
}

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

総括

当ブログテーマである「tanzaku」は、デフォルトでは上と下にウィジェットが表示されるようになっています。
しかし、そのウィジェットばかりが場所をとれば、記事が見えにくくなるという弊害がありました。

それを嫌に思って、最初は上には何も置いてなかったのですが、それはそれで使い勝手の方面で弊害があったのではないか、と思いなおしました。

そこで今回のカスタマイズだったわけですが、実際のところ、使い勝手は如何でしょうか。
判断を皆さんに委ね、以上にて失礼いたします。

Be the first to comment

Leave a Reply

Your email address will not be published.


*