ヘッダーバー上段にショートコード展開 + HTML追加・Swellカスタマイズ

目次

さいしょに

仕事でWordpressテーマ「Swell」を使いはじめ、だいぶカスタマイズに慣れてきました。

その中で、今後も言語が増えていくことを想定した多言語グローバルサイトを作成するためにプラグイン「Bogo」を利用して、日本語・英語コンテンツを作成していました。

何のサイトかは、探してみてください。笑

Bogo設置(Before)

言語切り替えボタンは、ヘッダーグローバルメニューの右に配置していました。ですが、レスポンシブでスマートフォンになると・・・

言語を切り替えるためには、メニューを開くハメに。確かに、訪問者の方々の手間が、ワンステップ増えてしまうんですよね。

対策方法

グローバルサイトでもあったので、言語ボタンを常にコンテンツ最上部に出す、ということになりました。浮かぶ方法は以下3つでした。

  1. お知らせバーの上部に設置
  2. ヘッダーバーに設置
  3. body直後(ヘッダーバー上部)にコンテナ追加、設置

というわけで色々試してみました。

お知らせバーの上部に設置

Swellで用意されているフック「swell_infobar_data」を利用すると、お知らせバーの上部にさらにコンテンツを設置することが出来ます。方法は以下です。

Swell子テーマ「functions.php」にフックを設定、add_filterで以下のように設定します。

function bogo_body_top(){
	?>
	<div class="bogo_body_top" >
	<div class="bogo-language-switcher"><?php echo do_shortcode("[bogo]"); ?></div>
	</div>
<?php
}
add_filter( 'swell_infobar_data', 'bogo_body_top' );

Bogoのショートコードが展開され、表示されます。あとはCSSで体裁を整えると以下のようになります。

うーん・・・。

お知らせバーの上にさらに・・・。というのは冗長ですね・・・。お知らせバーをCSSで擬似要素化したり、透明化したり・・・等考えてみましたが、メンテナンスコストが高そうなのでやめました。

お知らせバーに、任意のHTMLやショートコード、任意のボタンを複数設置できると楽だったのかもしれません。

ヘッダーバーに設置

この、最上部の青い部分の真ん中に、と思って探してみました。

子テーマに手を加えればできそうでした。

ただし、ヘッダーバーはスマートフォンでは表示されない、というそもそもの前提があったので、こちらもメンテナンスコストが高いと判断し、検討しないことにしました。

body直後(ヘッダーバー上部)にコンテナ追加、設置

Swellカスタマイザー「高度な設定」

最後に、body直後にHTMLを出力することにしてみました。

Swellのカスタマイザーの項目「高度な設定」に機能として存在していたので、最初からこれで良かったな・・・。

と思ったのですが、画面を確認しても出力されませんでした。あれ?と思ってHTMLソースを見てみると・・・

ショートコードが展開されていない・・・。

どうやら、Swellのカスタマイザーの項目「高度な設定」ではショートコードを入力しても、展開されないようです。これは困った。

Swellカスタマイザー「高度な設定」

ショートコードを利用したHTMLを出力したい場合には、やはり子テーマのfunctions.phpでやってしまうのが一番手っ取り早く、安心ということに気が付きました。Wordpressに存在するフック「wp_body_open」で以下のようにadd_actionを追加しました。

add_action( 'wp_body_open', function() {
	?>
	<div class="bogo_body_top" >
	<div class="bogo-language-switcher"><?php echo do_shortcode("[bogo]"); ?></div>
	</div>
<?php
});

これが一番簡単でしたね・・・。

少しCSSを調整後、ヘッダーバーの上部に出すと以下のようになります。

スマートフォン等レスポンシブでも最上位は維持されます。ヘッダーバーよりも上部に追加する方法としてはこれがベストですね。

上記のBogoに対する設定詳細は以下の記事でご覧ください。

さいごに

WordPressデザインテンプレート「Swell」のおかげで、デザインの工数がだいぶ減らすことができました。

一方で、Swellのカスタマイズ事例としては、コードレベルの情報が少ないようにも感じられましたので、微力ですが事例は残していきたいと思います。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次
閉じる