WordPressにデフォルトでついているブログカードがダサすぎるので、 寝ログ さんで公開されている「URLを記入するだけ！WordPressに内部ブログカードを実装するカスタマイズ方法 」を真似て少しだけ改変してみようと思います。
基本的には改変するだけですので、元もコードなどは上記のリンクからご確認ください。
1，アイキャッチのサイズを変更する
初期の設定のままだと 横100px 縦100px なので、私のブログのアイキャッチとは形が違います。
なので、アイキャッチの画像サイズを変更してやりましょう。
改変するのは functions.php 37行目にある赤線の部分。
$thumbnail = get_the_post_thumbnail($id, 'thumb100', array('style' => 'width:100px;height:100px;', 'class' => 'blog-card-thumb-image'));
私のブログの場合だと一番小さいサイズのアイキャッチが 横300px 横186px という設定になっています。
画像サイズ medium（中サイズ） の設定がこれにあたるのです、縦横100pxだと表示がおかしくなってしまうのですね。
なので、以下のように改変します。
$thumbnail = get_the_post_thumbnail($id, 'medium', array('style' => 'width:auto;height:auto;', 'class' => 'blog-card-thumb-image'));
width と height の設定をオートにしているのは、画像につくクラスの blog-card-thumb-image を使ってCSSで設定するため。
これを使うことで、レスポンシブに対応した形になります。
2，スマホで抜粋表示を無くす
WordPressを使っている人で自作テーマだったり、既存のテーマを改変している人は ”is_mobile” でスマホのみ条件分岐させるように functions.php を改変していると思います。
//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
有名なこれですね。
これを入れていることを前提にして、この部分を改変します。
$excerpt = get_the_custom_excerpt($post->post_content, 90);//抜粋の取得
改変後はこちら！
if ( !is_mobile() ) {
$excerpt = get_the_custom_excerpt($post->post_content, 62);//抜粋の取得
}
これでPCやタブレットで表示した場合には抜粋が表示され、スマホで見た場合にはタイトルだけが表示されるようになります。
試しに貼り付けてみましょう！
こんな感じになりますね！
抜粋文字を62文字にしている意味は特にないので、好きな文字数に変えれば良いんじゃないでしょうか？
3,CSSでブログカードのデザインを変更する。
寝ログさん で公開されているものは float:left; を使った分割方法なのですが、個人的にはフレックスボックスのほうが好きなので変更します。
変更内容はこんな感じになります。
/************************************
** ブログカードのスタイル
************************************/
.blog-card{
padding:6px;
margin:5px auto;
border:1px solid #ddd;
word-wrap:break-word;
width:auto;
max-width:474px;
min-width:270px;
border-radius:5px;
display:flex;
flex-wrap:wrap;}
.blog-card-thumbnail{
flex-basis:32%;
height: auto;}
.blog-card-thumb-image{width:auto; height:auto; max-width:100%; max-height:100%;}
.blog-card-content{
flex-basis:66%;
line-height:120%;
margin-left:4px;}
.blog-card-title{
font-size:14px;}
.blog-card-title a{
font-weight:bold;
text-decoration:none;
color:#111;}
.blog-card-excerpt{
color:#333;
font-size:90%;}
.blog-card-footer{
font-size:70%;
color:#777;
text-align:right;
flex-basis:100%;}
.clear{
clear:both;}
これでアイキャッチ画像がレスポンシブに対応した状態になります。
まとめ
寝ログさんはWordPressの無料テーマとして有名な Simplicity を配布されていおられる方なので、WordPressの改変に関して役に立つ情報を多く掲載されております。
ですが、そのまま使ったのでは自分の思っているようにならない……なんてこともあると思いますので、テーマを改変したい人はHTML,CSS,PHPの勉強ぐらいはしてみてはどうでしょう？
コメント