Pz-LinkCardでデフォルトのサムネイル画像を表示する方法

ワードプレスのプラグイン「Pz-LinkCard」を利用していてカテゴリーページでサムネイル画像が取得できない場合に、代わりにデフォルトのサムネイル画像を表示したい、そんなときに使えるJavaScriptコードをご紹介します。

「Pz-LinkCard」では現状デフォルトのサムネイル画像を設定する機能はありませんので、ちょっと強引な手法にはなりますがよければ試してみてください。

直前あたり(footer.php)にこのコードを設置しておけば、リンクカードのうちサムネイル画像が表示されていないものを検出して自動的にデフォルト画像を付与します。


<script>
const pzlck1 = document.querySelectorAll(".lkc-content");
for (let i = 0; i < pzlck1.length; i++) {
  let pzlck2 = pzlck1.item(i).children[0].className;
  if(pzlck2 != 'lkc-thumbnail'){
    pzlck3 = pzlck1.item(i);
    pzlck4 = document.createElement('figure');
    pzlck4.className = "lkc-thumbnail";
    pzlck4.innerHTML = "<img decoding=\"async\" class=\"lkc-thumbnail-img\" src=\"画像URL\" alt=\"\">";
    pzlck3.prepend(pzlck4);
  }
}
</script>

該当するのは投稿ページだけになると思いますので、他ページで負荷がかからないように投稿ページ判定で表示分けをするとよいでしょう。

投稿者プロフィール

たーさん代表者
東海大学工学部を卒業後、東芝情報システム株式会社(旧グループ会社含む)に入社。半導体(SRAM)の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。

その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。

開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。

現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。

見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。