【Cocoon】シンプルでクールな「ハミングバード風」ブログカードを実装してみよう!

Cocoonカスタマイズ

さっきはたのブログを運営されているはた(@hata_blog)さんがTwitterで、

とおっしゃっていたので、やっぱりブログカードは大切なんだなあ、とおもいました(小学生並みのなんたら)。

ところで、このブログで好評のCocoonブログカードカスタマイズ記事

【Cocoon】ブログカードに「続きを読む」を入れてクリック率上げよう大作戦!
2018/7/24更新 クールなカスタマイズはこちら↓ こんにちは。 最高の無料WordPressテーマ、Cocoon。最近はスキンも充実してきてついに本格リリースか!?と浮足立ってきている昨今である。 今回はそんなCocoonの...

CCC(記事本文がコピペされたらメール通知してくれるプラグイン)がビンビンに反応するほどたくさんの方にご愛用いただいているようなのですが、自分がこのデザインに飽きてきてしまったのです。

そういえば、Cocoon公式フォーラムにこんな質問が。

ブログカードのカスタマイズについて
いつもお世話になっております。   ブログカードのカスタマイズ相談なのですが、 添付画像の用に、ブログカードのタイトル横に 「関連」という、文字を目立つように入れたいのですが CSSのカスタマイズでできますか? 0908315C-6E48-4CB9-9B86-414E876DE2DC.png

上の質問ではWordPress用テーマ「ハミングバード」のブログカードを真似したいとのこと。

ほほう、ハミングバードですか……。

そういえばはたのブログもハミングバード。

いいよね、ハミングバードのブログカード……。

というわけで、ハミングバードのブログカードを参考にしつつちょっとアレンジも加えたカスタマイズを紹介していきます(前置きが長い)。

スポンサーリンク

ブログカードをシンプルにカスタマイズしてみよう

CSSサンプルコード

まずはCSSカスタマイズです。

下記コードをCocoon子テーマstyle.cssに追記しましょう!

※すでにブログカードをCSSカスタマイズしている人はいい感じに上書きしてくださいね。

.blogcard {
	padding: 1rem;
	color: #333;
	position: relative;
	border: none !important;
	box-shadow: 0px 0px 4px -1px rgba(0,0,0,1);
}

a.blogcard-wrap{
	font-weight: normal;
}
a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.05);
	transition: .3s;
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
	width: 22%;
}

.blogcard-title{
	margin-bottom: .5rem;
	line-height: 1.7;
}

.blogcard-title::before{
	content: '関連記事';
	display: inline-block;
	font-size: .7em;
	background-color: #333333;
	padding: .3em .5em;
	font-weight: bold;
	color: #fff;
	border-radius: 2px;
	vertical-align: middle;
	margin-right: .5rem;
}

.blogcard-snipet{
	display: none;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snipet{
		display: none;
	}
}

.blogcard-footer{
	clear: none;
}

.internal-blogcard-site{
	display: none;
}

.blogcard-date{
	float: none;
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: #999;
}

すると…?

Cocoonブログカードカスタマイズ後。日付が末尾に位置してしまっています。

なかなかいいのですが、日付が下に落ちてしまっていますね。

これを修正するには子テーマのfunctions.phpを修正します。

functions.phpをカスタマイズするよ。

Wordpressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

↑やっと使えた、Cocoonの注意文サンプルテンプレート。

子テーマのfunctions.phpに下記内容を追記していきます。

間違えると最悪サイトが真っ白になってFTPから修正するはめになりますのでくれぐれも自己責任でお願いします。

//内部URLからブログカードタグの取得
if ( !function_exists( 'url_to_internal_blogcard_tag' ) ):
function url_to_internal_blogcard_tag($url){
  if ( !$url ) return;
  $url = strip_tags($url);//URL
  $id = url_to_postid( $url );//IDを取得(URLから投稿ID変換)
  //内部ブログカード作成可能なURLかどうか
  if ( !is_internal_blogcard_url($url) ) return;
  //_v($url);

  $no_image = get_site_screenshot_url($url);
  $thumbnail = null;
  $date_tag = null;
  //投稿・固定ページの場合
  if ($id) {
    //global $post;
    $post_data = get_post($id);
    setup_postdata($post_data);
    $exce = $post_data->post_excerpt;

    $title = $post_data->post_title;//タイトルの取得

    // if (is_wpforo_plugin_page($url)) {
    //   $title = wp_get_document_title();
    // }

    //メタディスクリプションの取得
    $snipet = get_the_page_meta_description($id);
    // _v($id);
    // _v($snipet);
    //$snipet = get_the_snipet( get_the_content(), get_entry_card_excerpt_max_length() );
    //投稿管理画面の抜粋を取得
    if (!$snipet) {
      $snipet = $post_data->post_excerpt;
    }
    //記事本文の抜粋文を取得
    if (!$snipet) {
      $snipet = get_content_excerpt($post_data->post_content, get_entry_card_excerpt_max_length());
    }
    $snipet = preg_replace('/\n/', '', $snipet);

    //日付表示
    $date = null;
    $post_date = mysql2date(get_site_date_format(), $post_data->post_date);
    switch (get_internal_blogcard_date_type()) {
      case 'post_date':
        $date = $post_date;
        break;
      case 'up_date':
        $date = mysql2date(get_site_date_format(), $post_data->post_modified);
        if (!$date) {
          $date = $post_date;
        }
        break;
    }
    if (is_internal_blogcard_date_visible()) {
      $date = '<div class="blogcard-post-date internal-blogcard-post-date">'.$date.'</div>';//日付の取得
      $date_tag = '<div class="blogcard-date internal-blogcard-date">'.$date.'</div>';
    }


    //サムネイルの取得(要160×90のサムネイル設定)
    $thumbnail = get_the_post_thumbnail($id, get_internal_blogcard_thumbnail_size(), array('class' => 'blogcard-thumb-image internal-blogcard-thumb-image', 'alt' => ''));

  } elseif (is_home_url($url)){
    //トップページの場合
    $title = get_front_page_title_caption();
    $snipet = get_front_page_meta_description();
    $image = get_ogp_home_image_url();
    if (!empty($image)) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  } elseif ($cat = get_category_by_path($url, false)){
    //カテゴリページの場合
    $cat_id = $cat->cat_ID;
    //_v(get_category_meta($cat_id));
    $title = get_category_title($cat_id);
    $snipet = get_category_snipet($cat_id);
    $image = get_category_eye_catch($cat_id);
    //_v($image);
    if ($image) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
    // _v($cat);
    // $title = get_front_page_title_caption();
    // $snipet = get_front_page_meta_description();
    // $image = get_ogp_home_image_url();

  }
  //_v(get_category_by_path($url));

  //サムネイルが存在しない場合
  if ( !$thumbnail ) {
    $thumbnail = get_blogcard_thumbnail_image_tag($no_image);
  }

  //ブログカードのサムネイルを右側に
  $additional_class = get_additional_internal_blogcard_classes();

  //新しいタブで開く場合
  $target = is_internal_blogcard_target_blank() ? ' target="_blank"' : '';

  //ファビコン
  $favicon_tag =
  '<div class="blogcard-favicon internal-blogcard-favicon">'.
    '<img src="//www.google.com/s2/favicons?domain='.get_the_site_domain().'" class="blogcard-favicon-image internal-blogcard-favicon-image" alt="" width="16" height="16" />'.
  '</div>';

  //サイトロゴ
  $site_logo_tag = '<div class="blogcard-domain internal-blogcard-domain">'.get_the_site_domain().'</div>';
  $site_logo_tag = '<div class="blogcard-site internal-blogcard-site">'.$favicon_tag.$site_logo_tag.'</div>';

  //取得した情報からブログカードのHTMLタグを作成
  //_v($url);
  $tag =
  '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
    '<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
      '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
      '<div class="blogcard-content internal-blogcard-content">'.
        '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
        '<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
        '<div class="blogcard-footer internal-blogcard-footer cf">'.
          $site_logo_tag.$date_tag.
        '</div>'.
      '</div>'.
    '</div>'.
  '</a>';

  return $tag;
}
endif;

これを子テーマfunctions.phpに追記することで、いい感じに親テーマlib/blogcard-in.phpの中の関数を書き換えてうまいことしてくれるぞ!(適当)

ちなみに、外部ブログカードで同じことやろうとしたらうまく行かなかったのでこれでゆるしてくださいね。

ブログカードって大事だよ。

内部リンクをクリックされやすくすることは回遊率のアップにつながるし、回遊率のアップは多分Googleからも高評価されます。

そしてなによりおしゃれにすれば更新するモチベもアップしますよね。

今日もがんばってブログを更新していきましょう!

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。

コメント