WordPressを使っていて、リンクカードを使いたいな〜でもプラグイン(たとえばPz-LinkCardとか)はなるべく使いたくないな〜って時が来たとします。というか来ました。そんな時期が誰しも訪れるはずです。というわけで、プラグイン無しでリンクカードを設置するまでのお話をはじめます。
なんでプラグイン使わないの？
便利だし、自分で書いたり調べたりする工数を考えればプラグインを使用したほうがコスパとロストが少ないと思いますが、できるだけ頼らずにやってみようというだけの話です。
そこまで使わないCSSを読み込んでいたり、表示速度に関わってくる場合もあるので、減らせるものは減らしていった方が吉ということですね。
リンクカードってなに
URLを入力すると、アイキャッチとタイトルを取得してくるというものです。普通にテキストでいれるよりもきっと見やすいと思うのです。
実際にコードを書いていく
変更するのは、テーマ内のfunctions.phpとcssです。
ここがちょっとデメリットになるかもですが、現在使用中のテーマに記述するので、テーマを変えたいな〜って思ったときにもう一回書かなくちゃいけない手間がありますね。
そういうことを考えるとプラグインの方が楽って場合もあるかもしれません。
functions.php / CSS
/*-------------------------
ブログカード
-------------------------*/
.blog-card {
background-color: #f4f4f4;
border-radius: 5px;
border: 1px solid rgba(102, 186, 183, 1);
margin: 30px;
}
.blog-card a {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
padding: 10px;
border: none;
transition: 0.5s ease;
}
.blog-card-thum {
width: 140px;
height: 80px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-right: 10px;
}
.blog-card-content {
width: calc(100% - 210px);
}
.blog-card__ttl {
font-weight: bold;
font-size: 18px;
}
@media screen and (min-width: 768px) {
.blog-card a:hover {
border-bottom: none;
opacity: 0.6;
}
}
/*============================ #SP ============================*/
@media screen and (max-width: 767px) {
/* ---------------------------------------------------------------- SP ---- */
/*============================ #blog-card ============================*/
.blog-card {
border-radius: 3px;
margin: 30px 0;
}
.blog-card a {
padding: 5px;
}
.blog-card-thum {
width: 120px;
height: 80px;
margin-right: 10px;
}
.blog-card-content {
width: calc(100% - 130px);
}
.blog-card__ttl {
font-size: 15px;
}
}//---------------------------------------//
// 内部リンクショートコード
//---------------------------------------//
function nlink_scode($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));
$id = url_to_postid($url);//URLから投稿IDを取得
$no_image = 'https://tako3.photo/common/img/ogp.png';//アイキャッチ画像がない場合の画像を指定
if(empty($title)){
$title = esc_html(get_the_title($id));
}
if(has_post_thumbnail($id)) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id));
$img_tag = $img[0];
}else{
$img_tag = $no_image;
}
$nlink = '';
$nlink .='
<div class="blog-card">
<a href="'. $url .'">
<div class="blog-card-thum" style="background-image:url('.$img[0].')"></div>
<div class="blog-card-content">
<p class="blog-card__ttl">'. $title .' </p>
</div>
</a>
</div>';
return $nlink;
}
add_shortcode("nlink", "nlink_scode");そして記事ページでショートコードを書く
ショートコードは、
[nlink url=""]これです。
あとは、AddQuickTagに登録するなどして、利用すればOKです。
こちらの記事を参考にさせてもらいました。
【WordPress】コピペで実装ブログカードの作り方【プラグインなし】
今回、コードの埋め込みに際して、いろいろとそれこそプラグインを探していたのだけど、結局Gistを使用しました。変に重たくもならないし、編集がgithub画面でできるから便利かな。コピペする方も楽な気がする。