プラグイン

【プラグイン】pz-linkcardのカスタマイズ方法

こんにちは!

今回は外部リンクをカード化するプラグインの『Pz-LinkCard』のカスタマイズ方法について書いてきます。

素のままでもいいですが、デザインがなんか一昔のサイトみたいと感じさせます。設定などをいじることができますが、コピペで使える追加CSSの解説をしていきます。

すごくシンプルのデザインとしています。
カスタマイズ方法は他にも紹介している方がいますが
ここまでシンプルなカスタマイズをしている方はいないのかなと思います。

過去にもカスタマイズを紹介していますが、プラグインを使わないやり方です。

【備忘録】WordPressのテーマ「JIN」のブログカードカスタマイズ-外部リンク-WordPressのひつじさんのテーマ「JIN」のブログカードの外部リンクカスタマイズについて備忘録です。標準のブログカードの使い勝手はいいですがちょっとデザインを変えたり、外部リンクのブログカード化のやり方について解説!...

デザインの見本

前準備

・Pz-LinkCardのインストール

インストール方法は割愛します。
新規プラグインから『Pz-LinkCard』してインストールしてください。

ちなみにバージョンはVer.2.4.4.4となります。

カスタマイズ

①設定を開き、外部リンクのサムネイルの大きさを
『小サイズ』から『大サイズ』もしくは『そのままのサイズ』にしてください。
理由は後ほど。

②プラグインエディターで『Pz-LinkCard』のpz-linkcard/pz-linkcard.phpを開く

③HTMLタグ生成の914行目〜918行目を下記をコピペして貼り付けてください。
HTMLタグ生成時に<div class=”lkc-box”>を新たに生成しています。
理由に付きましては後ほど。

	$tag	=	$html_wrap_op.$html_a_op_all.'<div class="lkc-card">'.$domain_info.'<div class="lkc-content">'.$html_a_op.$html_thumbnail.'<div class="lkc-box"><div class="lkc-title"><div class="lkc-title-text">'.$title.'</div>'.$html_a_cl.$html_sns_title.'</div>'.$html_url1.'<div class="lkc-excerpt">'.$excerpt.'</div>'.$html_moretag.'</div></div><div class="clear"></div></div>'.$html_a_cl_all.$html_wrap_cl;
				break;
			case	2:
				$tag	=	$html_wrap_op.$html_a_op_all.'<div class="lkc-card"><div class="lkc-content">'.$html_a_op.$html_thumbnail.'<div class="lkc-box"><div class="lkc-title"><div class="lkc-title-text">'.$title.'</div>'.$html_a_cl.$html_sns_title.'</div>'.$html_url1.'<div class="lkc-excerpt">'.$excerpt.'</div>'.$html_moretag.'</div></div>'.$domain_info.'<div class="clear"></div></div>'.$html_a_cl_all.$html_wrap_cl;
				break;

④外観→カスタマイズ→追加CSSに下記をコピペ。
特に調整などはないですが、検証ツールで確認しながらお好みでカスタマイズをするのもありです。

/************************************
** リンクカードカスタマイズ
************************************/

.lkc-external-wrap {
  max-width: 100%;
  box-shadow: 4px 4px 0px #666;
  transition: 0.3s;
}

.lkc-external-wrap:hover {
  box-shadow: none;
  transform: translateY(4px);
  transition: 0.3s;
}

.lkc-content {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 10px 0
}

.lkc-thumbnail {
  width: 50%;
  max-width: none;
  max-height: none;
  float: none;
}

.lkc-box {
  width: 100%;
}

.lkc-thumbnail-img {
  object-fit: contain;
  width: 100%;
  height: auto;
}

.lkc-url {
  display: none;
}

.lkc-excerpt {
  padding: 20px 0 0;
}

.lkc-share {
  display: none;
}


/*スマホサイズ*/

@media (max-width: 767px) {
  .lkc-card {
    margin: 0;
  }
  .lkc-content {
    flex-direction: column;
    align-items: baseline;
    padding: 0;
  }
  .lkc-thumbnail {
    width: 100%;
    margin: 0;
  }
  .lkc-excerpt {
    display: none;
  }
  .lkc-thumbnail-img {
    object-fit: cover;
    max-height: 250px;
  }
  .lkc-title-text {
    padding: 15px 13px;
  }
}

⑤PC表示、スマホ表示の確認。
問題がなければカスタマイズ完了です。

サイト情報が下部の方がいい方は設定から表示のサイト情報を下部にしてください。

各理由について

①の外部リンクのサムネイルの大きさを変更する理由は
小さいサイズだと画像が粗くなってしまうからです。
また、一度小さいサイズを取得してしまうと、後から設定を変えて
サムネイルを取得し直しても、小さいサイズになってしまうからです。

大きいサイズから小さいサイズに変えた場合は、なぜか小さいサイズが取得できます。
特にスマホ表示は画像をいっぱいに広げているので、画像が粗いと見栄えが悪くなります。

③のlkc-boxを追加する理由は
lkc-contentにflexを使った際に、サムネイル、タイトル、抜粋が親要素になってしまうため、タイトルと抜粋が思うように配置ができないため。

説明不足のため画像を参考にしてください。

まとめ

pz-linkcardのカスタマイズ方法でした。
コピペだけで簡単にできるのでぜひ試してみてください。

文字列置換プラグイン『Search Regex』で消してしまった記事を復元する方法文字列置換プラグイン『Search Regex』でバックアップもないので行の削除で記事を消してしまった!?でもエックスサーバーであればなんとかなります。『Search Regex』の特定の文字の消し方と復元方法について。...
【備忘録】WordPressのテーマ「JIN」のブログカードカスタマイズ-外部リンク-WordPressのひつじさんのテーマ「JIN」のブログカードの外部リンクカスタマイズについて備忘録です。標準のブログカードの使い勝手はいいですがちょっとデザインを変えたり、外部リンクのブログカード化のやり方について解説!...