2回連続でWordPressのカスタマイズのお話です。
今回はサイト内リンクを画像付きで綺麗に貼ることができる「ブログカード」を導入しましたので備忘録がてら書いています。
こちらを実装したことによって下記のように綺麗にサイト内リンクを貼ることができるので、他のページも見てもらいやすくなるかなと。
結構このカスタマイズ備忘録シリーズが増えたのですが後々見返すことができて大助かりのパターンも多いので重宝しています。
では早速見ていきましょう。
サイト内リンクをブログカード風にして見やすくPVアップを目指す。
まぁカスタマイズ！と偉そうに書きましたがほとんど先輩方のコードを丸々使わせていただいています。
こちらのサイトのコードを利用させてもらいました。ありがとうございます。
・URLを記入するだけ！Wordpressに内部ブログカードを実装するカスタマイズ方法
phpの知識はさっぱりですが書いてあることはなんとなく理解できるのでちょっとしたカスタマイズなら意外となんとかなったりします。
こちらに書いてあることをやれば、本文中にURLを入れ込めば下記のような表示がされるようになりました。
ちなみに、URLベタ打ちでもいいらしいのですが、URLでリンクを貼る形で自分は入れ込んでいます。
もし、表示がうまく行かなかった場合でも最低リンクは残りますしね。
自分のサイト向けに変更した点は下記の点です。
//取得した情報からブログカードのHTMLタグを作成 $tag = '
<div class="blog-card">
<div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link">'.$thumbnail.'</a></div>
<div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link">'.$title.'</a></div>
<div class="smanone"><div class="blog-card-excerpt">'.$excerpt.'</div></div></div>
<div class="blog-card-footer clear"><span class="blog-card-date">'.$date.'</span></div></div>';
「.$excerpt.」の部分が本文からの抜粋に当たる部分です。
PCなどの横幅が広い時には綺麗に収まるのですが、画面の小さなスマホでの表示の際に収まりが悪いということで、stinger5に元々あるスマホ表示の際に非表示になる「smanone」というクラスを追加して見ました。
これにより、スマホ表示の際はサムネイル＋タイトルの表示になりスマホでの視認性が改善できたと思います。このブログの70%がスマホからアクセスですのでより見やすくするための工夫はどんどんしないとね。
PCの際の表示はこんな感じで
スマホの時はこんな感じになります。抜粋の文字を削ったので下に間延びしてしまうことがなくなりました。
実際にウィンドウのサイズを変更するか、スマホで見てもらうとどんなふうに変化するかが見れますのでやってみてください。
CSSでのデザイン調整は少しだけして下記のようにしました。カードのサイズ・リンクカラー等をちょろっとだけ変更ですね。
/************************************
** ブログカードのスタイル
************************************/
.blog-card{
padding:12px;
margin:0 auto 10px auto;
border:1px solid #ddd;
word-wrap:break-word;
max-width:90%;
border-radius:5px;
}
.blog-card-title a{
font-weight:bold;
}あとはそのまんま使わせてもらっている形ですね。
まとめ
WordPressのいいところは使っている人がかなり多く、カスタマイズの記事を書いてくれる先輩方が多いため自分のようなチョットかじった程度の輩でも色々なことができるのが魅力ですね。
最近はサムネイルの画像とかも少し綺麗に作れるようになってきたのでこれで少しでもPVが上がるといいなぁと思いつつ導入しています。
一時期落ち着いていた、カスタマイズ熱もまた上がってきたので色々といじってみてまた書きたいと思います。
てな感じで
