お問い合わせ

SWELL不具合|highlighting code blockのcopyボタンが表示されない

  • URLをコピーしました!

SWELLのテーマ作者がリリースしているプラグインの1つに、highlighting code blockがあります。

このプラグインはprism.jsをブロックエディタで簡単に使えるようにしたプラグインでSWELL利用者以外にも人気があります。

SWELL利用者がソースコードを表示する時にはまず使っていると思われるプラグインです。

SWELLとhighlighting code block(以下HCBと略)の組み合わせでcopyボタンが表示されない不具合が発生したので、原因と対処方法についてこの記事でご紹介します。

目次

highlighting code blockのcopyボタンが表示されない

highlighting code blockには、ソースコードをコピーできるcopyボタンを表示させることができます。

右上のファイル名の横にあるアイコンがそれです。

ソースコードを表示します

自分のサイトでcopyボタンが表示されなくなってることに気が付きました。

wordpressのコアバージョンアップの影響かと思いましたが、原因は違いました。

ちなみに、SWELLの公式サイトでもHCBを使ってる記事でcopyボタンが表示されていないことは確認していますが、設定でOFFにしているのか不具合なのかはよくわかっていません。

犯人はSWELL設定のスクリプト遅延読み込み

SWELL設定のスクリプト遅延読み込みの設定に問題がありました。

SWELLのスクリプト遅延読み込みには、公式サイトへのリンクがあり、その記事を見ると作者が使っている設定が掲載されています。

それをそのままコピペしたことで、HCBのcopyボタンが表示されない現象が発生しました。

SWELL作者の推奨設定

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
gtag(,
clipboard.min.js,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
hcb_script.js,

HCBは、clipboard.min.js,を読み込みますので遅延読み込みすると不具合の原因になるようです。

HCBのcopyボタンが表示できる遅延読み込み設定

clipboard.min.js,を削除します。

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
gtag(,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
hcb_script.js,

なぜ、clipboard.min.jsが地雷なのか?

clipboard.min.jsを遅延読み込みすると、copyボタンが表示されない理由を調べてみました。

HCBプラグインのソースを見ると、以下のようになっています。

clipboard.min.jsを遅延読み込みすると、if (!window.ClipboardJS) return;という部分が成立してしまい、copyボタン表示部分が動かなくなります。

	// clipboard
	(function () {
		if (!window.ClipboardJS) return;

		let clipCt = 1;

		// hcb_wrap
		const hcbWraps = document.querySelectorAll('.hcb_wrap');
		// const hcbClips = document.querySelectorAll('.hcb-clipboard');
		for (let i = 0; i < hcbWraps.length; i++) {
			const elem = hcbWraps[i];
			const code = elem.querySelector('code');
			if (null === code) continue;

			// ボタン生成
			const button = document.createElement('button');
			button.classList.add('hcb-clipboard');
			button.setAttribute('data-clipboard-target', '[data-hcb-clip="' + clipCt + '"]');
			button.setAttribute('data-clipboard-action', 'copy');
			// button.innerHTML = `コピー`;
			elem.prepend(button);

			// codeタグにターゲット属性追加
			code.setAttribute('data-hcb-clip', clipCt);

			clipCt++;
		}
		const clipboard = new ClipboardJS('.hcb-clipboard');
		clipboard.on('success', function (e) {
			const btn = e.trigger;
			btn.classList.add('-done');
			setTimeout(() => {
				btn.classList.remove('-done');
			}, 5000);
		});
		// clipboard.on('error', function (e) {
		// 	alert(e);
		// });
	})();

まとめ

HCBプラグインはとても便利ですが、SWELLの推奨設定をコピペしてトラブルに巻き込まれるとは思いもしませんでした。

SWELLの高速化設定をいじり始めると結構謎のトラブルが増えてくるので、もし同じトラブルになった場合は思い出してみてください。

同じトラブルが公式のフォーラムで不具合報告されており、対処方法はhcb_script.jsclipboard.min.js, の削除となっていましたが、hcb_script.jsは削除しなくても大丈夫です。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次