Pz-LinkCardプラグインにはinputタグが押せなくなるバグがある

Pz-LinkCardプラグインとは
inputタグが押せなくなるバグがある
バグの修正方法

Pz-LinkCardプラグインとは

Pz-LinkCardはリンクをカード形式で表示するWordPressプラグインです。

例えばショートコードで以下のコードを入力すると、以下のようなカード形式のサムネイル付きのリンクを生成できます。

［blogcard url="https://ja.wordpress.org/"］

WordPress.org 日本語

ブログから大規模サイトまで作れる CMS - WordPress.org 日本語

https://ja.wordpress.org

簡単に美しいサイト、ブログ、アプリを作成するのに使えるオープンソースソフトウェア。

inputタグが押せなくなるバグがある

Pz-LinkCardプラグインにはインストールするとWordPress内のinputタグが押せなくなるバグがあります。

例えばWordPressの管理画面は「投稿を検索」などのinputタグを使用したボタンがありますが、これらが押せなくなります。

原因はPz-LinkCardプラグインのJavaScriptでinputタグに「pointer-events: none」を追加する処理があるからです。

ボタン部分のHTMLをデベロッパーツールで確認すると、inputタグに「style="pointer-events: auto;"」が追加されていることが確認できます。

HTML

<input type="submit" id="search-submit" class="button" value="投稿を検索" style="pointer-events: auto;">

inputタグに「pointer-events: none」を追加する処理はadmin-settings.jsに書かれています。

admin-settings.js

(function($) {

	// $('#pz-lkc-overlay-proc').show();
	$('input').css('pointer-events', 'none');

	// 画面表示された時に実行
	$(window).load(function() {
		$('input').css('pointer-events', 'auto');
	
	// 中略
}) ( jQuery);

/wp-content/plugins/pz-linkcard/js/admin-settings.js

コード内には「$(window).load(function() {」のあとに「pointer-events: auto」に変える処理がありますが、正しくは「$(window).on('load', function() {」なので間違いです。

この間違いにより、「pointer-events: auto」に変える処理が実行されず、ボタンが押せなくなっています。

バグの修正方法

前述の通り、間違っている箇所を「$(window).on('load', function() {」に修正すれば直ります。

admin-settings.js

(function($) {

	// $('#pz-lkc-overlay-proc').show();
	$('input').css('pointer-events', 'none');

	// 画面表示された時に実行
	$(window).on('load', function() {
		$('input').css('pointer-events', 'auto');
	
	// 中略
}) ( jQuery);