プラグイン不要でWordPressの記事中にシンプル・フラットデザインの内部ブログカードを追加するカスタマイズ方法です。
当ブログと同じ見た目で良ければ、2回のコピペで完了します。
目次
functions.phpにコードを追加
以下のコードをテーマのfunctions.phpに追加します。
（functions.phpをいじるときは、必ずバックアップを取ってから行うか、ローカル環境でカスタマイズを行ってください。）
// 内部ブログカード
//120×80pxのサムネイルを作成
add_image_size('thumb120', 120, 80, true);
//サイトドメインを取得
function get_this_site_domain(){
//ドメイン情報を$results[1]に取得する
preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $results );
return $results[1];
}
//本文中のURLをブログカードタグに変更する
function url_to_blog_card($the_content) {
if ( is_singular() ) {//投稿ページもしくは固定ページのとき
//1行にURLのみが期待されている行（URL）を全て$mに取得
$res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/'.preg_quote(get_this_site_domain()).'\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m);
//マッチしたURL一つ一つをループしてカードを作成
foreach ($m[0] as $match) {
$url = strip_tags($match);//URL
$id = url_to_postid( $url );//IDを取得（URLから投稿ID変換）
if ( !$id ) continue;//IDを取得できない場合はループを飛ばす
$post = get_post($id);//IDから投稿情報の取得
$blogcard_title = $post->post_title;
$thumbnail = get_the_post_thumbnail($id, 'thumb120', array('style' => 'width:120px;height:80px;', 'class' => 'blog-card-thumb-image'));//サムネイルの取得（要120×80のサムネイル設定）
if ( !$thumbnail ) {//サムネイルが存在しない場合
$thumbnail = '<img src="'.get_template_directory_uri().'/images/no-image.gif" style="width:120px;height:80px;" />';
}
//取得した情報からブログカードのHTMLタグを作成
$tag = '<div class="blog-card"><a href="'.$url.'"target="_blank" class="blog-card-link"><div class="blog-card-thumbnail">'.$thumbnail.'</div><div class="blog-card-content"><p class="blog-card-title">'.$blogcard_title.'</p></div></a></div>';
//本文中のURLをブログカードタグで置換
$the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
}
}
return $the_content;//置換後のコンテンツを返す
}
add_filter('the_content','url_to_blog_card');//本文表示をフックこのコードはこちらの記事を参考にさせていただいています。
URLを記入するだけ！WordPressに内部ブログカードを実装するカスタマイズ方法
こちらの記事のコードだと、ブログカード全体がリンクにならなかったので、カード全体がリンクになるように出力するhtmlを少し変えています。
僕の場合は、抜粋文もいらないと思ったのでその部分は削除しています。
サムネイルサイズは120×80pxにしていますが、ここはお好みで。
cssで見た目を整える
当ブログと同じようなデザインにする場合のcssはこちら。
/************************************
** ブログカードのスタイル
************************************/
.blog-card{
margin:10px 0;
word-wrap:break-word;
max-width:100%;
width: 80%;
display: flex;
justify-content: flex-start;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
box-sizing: border-box;
height: 80px;
background: #f1f1f1;
align-items: center;
}
.blog-card:hover {
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.blog-card-link {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
text-decoration: none;
}
.blog-card-thumbnail{
min-width: 100px;
height: 80px;
width: 120px;
}
img.blog-card-thumb-image {
margin-bottom: 0;
margin-top: 0;
}
.blog-card-content{
width: calc(100% - 120px);
height: 80px;
position: relative;
}
p.blog-card-title{
margin: 0;
text-decoration:none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
line-height: 1.4;
color: #454545;
font-size: 1rem;
text-align: left;
position: absolute;
top: 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
padding: 0 5%;
max-width: 90%;
}
.blog-card-title a{
width: 100%;
height: 100%;
margin: 0 0 0 30%;
}
.blog-card-title a:hover {
text-decoration: underline;
}
@media (max-width: 599px) {
.blog-card {
width: 100%;
box-sizing: border-box;
}
.blog-card-content {
margin-right: 2%;
overflow: hidden;
}
p.blog-card-title {
font-size: .93rem;
}
}
@media (max-width: 375px) {
p.blog-card-title {
font-size: .84rem;
}
}
@media (max-width: 320px) {
p.blog-card-title {
font-size: .75rem;
top: 40%;
}
}そのままのときはフラットなデザイン、マウスホバー時は浮き上がって影がつくようになっています。
サンプルです。↓
ブログカードの使い方
このブログカードの良いところは、WordPressのビジュアルエディタにURLを貼り付けるだけでリンクになるところ。
注意点としては1行として貼り付ける必要があります。
次の文章が同じ<p>タグの中に入ってしまうと上手く機能しません。
URLを貼り付けて、Enterで改行すれば大丈夫です。
デメリットはテーマ変更をすると機能しなくなるという点と、feedlyではリンクではなくただのテキストになってしまう点ですね。
feedly問題は解決したらまた書きたいと思います。
サービスメニュー
Postscript執筆後記
最近は寝る前の読書にはまっています。先日届いたバルミューダのランタンを読書灯として使っているのですが、部屋を暗くしてこのランタンだけつけると、普通の部屋が一気にお洒落な空間に様変わりします。笑
Something New一日一新
menuでアヴァタール注文シティベーカリーのオレンジマーマレード
＼本を出版しました／
＼セルフマガジン無料送付／
