Simplicity2 のウィジェットに「固定ページパンくずリスト上」がないので javascript.js で対応してみた

2018/3/6 2018/3/8 開発全般

このブログはＳｉｍｐｌｉｃｉｔｙ２のテーマを使っています。

「投稿」「固定ページ」のどちらにもパンくずリストを表示しているのですが、パンくずリスト上にバナーを置こうとしたところ、固定ページのパンくずリスト上用のウィジェットがない！ということに気がついたので、対応してみました。

1 状況
2 対処方法１：親テーマのbreadcrumbs-page.phpを編集する
3 対処方法２：子テーマのfunction.jsにjQueryを追加する
- 3.1 修正サンプル

状況

WordPress のダッシュボードで、外観＞ウィジェットを開いてパンくずリスト上にウィジェットを追加しようとしたけれど、固定ページには「パンくずリスト上」の項目がなかった。

ちなみに、外観 > カスタマイズ＞レイアウト（投稿・固定ページ）の一番下にある「固定ページにパンくずリストを表示」にはチェック済み。

対処方法１：親テーマのbreadcrumbs-page.phpを編集する

外観 > テーマの編集 > 編集するテーマを選択で「Simplicity2」を選ぶ。”child”とついていないものを選ぶこと。
右のテーマファイルから、「breadcrumbs-page.php」を選択する。
<div id=”breadcrumb”・・・という要素が（たぶん3行目に）あるので、その上に追加したい内容を記載する。

<?php //固定ページ用のパンくずリスト ?>
<?php if ( is_page_breadcrumb_visible() && !is_front_page() ): //個別ページでパンくずリストを表示する場合?>
 ~~ ここに追加したい内容を書く　~~
<div id="breadcrumb" class="breadcrumb-page">
 <?php $count = 0;

ただし親テーマが更新されるとこのファイルは上書きされてしまうので、テーマを更新しない人にしかおすすめしません。

対処方法２：子テーマのfunction.jsにjQueryを追加する

外観 > テーマの編集 > 編集するテーマを選択で「Simplicity2 child」を選ぶ。
javascript.js を開いて、jQueryを追加する。

(function($){
 $(function(){
 $('#breadcrumb').before('追加したい内容をここに書く');
 });
 }
)(jQuery);

#breadcrumb という ID をもつ要素の上に、HTMLの要素を追加しています。

修正サンプル

このブログの、固定ページと投稿のパンくずリストの上に、続刊通知 for Kindleコミックのバナーを追加したときの例です。

id=custom_html-4などのdiv要素はHTMLウィジェットを追加したときに自動的に挿入されていたタグをそのまま使っています。

(function($){
$(function(){
$('#breadcrumb').before('<div id="custom_html-4" class="widget_text widget-over-breadcrumbs widget_custom_html"><div class="textwidget custom-html-widget"><p><a href="https://beelabo.com/zokkan" target="blank"><img src="https://beelabo.com/wp-content/uploads/zokkan_ads.jpg" style="width:100%;" alt="続刊通知 for Kindleコミック"></a><br></p></div></div>');
});
}
)(jQuery);

ものすごく簡単なことなんですが、ネットで調べても方法が見つからない＆私の備忘録として記録しておきます。