プラグイン不要で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でアヴァタール注文
シティベーカリーのオレンジマーマレード
Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

『独立は最強の解決法』という理念のもと、長期的な視野と絶妙なバランス感覚で人生を楽しむことをサポートする、ひとりビジネス専門税理士・ライフコンサルタント。

簿記がわからなくても、一から経理ができるようにお伝えします。
遠方・オンライン・スポット対応可能です。
クラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援が得意。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。

詳しいプロフィールはこちら
税理士事務所のHPはこちら