ヘッダー・フッターバー表示にはHeader and Footer Commander－wordpressプラグインを利用

2013/07/15 2014/11/22

wordpressプラグインのHeader and Footer Commanderは、
テーマのファイルを変更することなく、
wordpressサイトの最上部と最下部に対して、
ヘッダーバーとフッターバーを表示することができるプラグインです。

はじめに

皆さんはどのようなプラグインをいつも利用していますか？
今回<head>タグの中に対して、任意のコードを挿入する
プラグインをいろいろ試していて、
まったく意図していないプラグインに出逢ったので投稿します。

こうした検証をしていると名前だけで検索して、
入れてみたらあららーということも起こります。
あまり当てにしていないとはいえ、
作者のスクリーンショットを見ておくべきだなと反省する次第です。

環境

wordpress:3.5.1
利用テーマ:Twenty Twelve
Header and Footer Commander:1.3

使い方

プラグインインストール・有効化

このHeader and Footer Commanderというプラグインをインストールし有効化すると、
サイドバーの設定メニューに対して[Header and Footer Commander]の
メニューが表示されます。

Header and Footer Commanderサイドメニュー

設定

設定メニューから[Header and Footer Commander]を選択すると設定画面が表示されます。
設定はヘッダーバーに対する設定とフッターバーに対する設定のみです。

Header and Footer Commander設定

各設定の概要

各設定項目に対して、最上部に注意事項が表示されています。

Supports HTML tags such as the ( a, img, blockquote, code, em, ul ) etc… Quotes ( ” ) are not allowed and do not leave ( Background color ) field blank.

a, img, blockquote, code, em, ul などのタグが使えます
ダブルクォテーション(“)は使えません。
Background colorは必ず設定してください。

ちなみに(“)を使って、テキストタグの属性などを指定すると、
入力したテキストフィールドの値が・・・破壊されますｗ

例：<p id=footer >a</p>は可能ですが、
<p id=”footer” >a</p>のように設定すると以下のようになります。

ダブルクォート指定誤り例

設定例

実際に設定画面に設定を行うと以下のようになります。

設定例

Header Text/Footer Text

Header Text/Footer Textではヘッダーバー・フッターバーに表示する、
テキストを設定することができます。

ヘッターバー表示サンプルソース

<a href=#footer id=header >ページの最後へ</a>

1	<a href=#footer id=header >ページの最後へ</a>

フッターバー表示サンプルソース

<a href=#header  id=footer >ページの最初に戻る</a>

1	<a href=#header id=footer >ページの最初に戻る</a>

この辺りは、バーを使ってどういう表現をしたいかというところですね。
やりかた次第ではいろいろできるでしょうけど、
フィールドが１行表示なのであまりしんどいことはやりにくいですね。

Header Text・Footer Text指定

Background color(header/footer)

上はヘッダーバーの背景色、下はフッターバーの背景色の設定です。
フィールドにカーソルを当てると、カラーチャートが表示されます。
個人的にはカラーコードを直接貼り付ける方が楽かなと思います。

入力した色がフィールド色になるのは分かりやすいなと思います。
あまり見かけない設計ですが、この表現は自分もどこかで使いたいなと思います^^

Background color指定

Text color

上はヘッダーバーの文字色、下はフッターバーの文字色の設定です。
背景色と同じです。

Text color指定

Choose Image

上はヘッダーバーの背景画像、下はフッターバーの背景画像の設定です。
横の[Upload Image]のボタンは原因不明ですが動作しませんでした。
直接URLを指定することで、画像を設定することができます。

Choose Image指定

[rakuten]001:9784798031743[/rakuten]

Custom CSS

上記で設定したバーの出力に対してCSSで設定を行う形になります。
Header and Footer CommanderのHTML出力は、
divタグにheadertextクラス属性、footertextクラス属性が付与されて出力されます。

また、設定画面に設定したBackground colorとText colorは自動的に属性として出力されます。
出力されるクラス属性などに合わせてスタイルを指定できます。

Custom CSS指定

CSS設定例

div.headertext,
div.footertext{
background-repeat: no-repeat;
background-position: center center;
}

div.headertext,

div.footertext{

background-repeat: no-repeat;

background-position: center center;

}

ヘッダーバーのHTML出力例

ヘッダーバーのHTML出力の直後に、CSSソースが出力されます。
この点は、既にご利用されているCSSファイルなどから指定した方が、
<body>内がすっきりしていいのかなと個人的には思います。

<div class="headertext" align="center" style="background-image:url(http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/header-and-footer-com_header.png);background-color:#ffffe0;color:#800000;">
<a href=#footer id=header >ページの最後へ</a>
</div>
<style type="text/css">
div.headertext,
div.footertext{
background-repeat: no-repeat;
background-position: center center;
}
</style>

<a href=#footer id=header >ページの最後へ</a>

</div>

div.headertext,

div.footertext{

background-repeat: no-repeat;

background-position: center center;

}

</style>

フッターバーのHTML出力例

<div class="footertext" align="center" style="background-image:url(http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/header-and-footer-com_footer.png);background-color:#ee82ee;color:#4b0082;">
<a href=#header  id=footer >ページの最初に戻る</a>
</div>