頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

環境

使い方

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

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

01_Header and Footer Commanderサイドメニュー

Header and Footer Commanderサイドメニュー

リンクシェア アフィリエイト紹介プログラム

設定

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

02_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は必ず設定してください。

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

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

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

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

設定例

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

04_設定例

設定例

Header Text/Footer Text

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

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

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

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

05_Header Text・Footer Text指定

Header Text・Footer Text指定

Background color(header/footer)

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

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

06_Background color指定

Background color指定

Text color

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

07_Text color指定

Text color指定

Choose Image

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

08_Choose Image指定

Choose Image指定

[rakuten]001:9784798031743[/rakuten]

Custom CSS

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

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

09_Custom CSS指定

Custom CSS指定

 

CSS設定例

ヘッダーバーのHTML出力例

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

フッターバーのHTML出力例

設定の保存

Check to Enable Both Optionsにチェックを入れ
[設定を保存]をクリックして設定は完了です。

10_有効化と保存

有効化と保存

ブラウザ表示確認

実際に表示を行うと設定どおりに表示されます。
例ではCSS側で背景画像を繰り返さないように設定しています。
特に指定がない場合は、繰り返し表示になります。

11_画面表示確認

画面表示確認

総括

多少、作りが荒っぽい感じがするプラグインではありますが、
一度設定を行ってしまえばそう変更を行うような設計要素でもないと思いますので、
手軽にヘッダーバーなどを追加できるのは便利だと思います。

タグとCSSでできることは普通に利用ができそうなので、
使い方は貴方次第といったプラグインだと思います。

 

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - WordPress, プラグイン , , , , ,

  関連記事