cocoonのfunction.phpを追加してブログカードの表示順を変更してみる

スポンサーリンク

こちらの記事を参考にブログカードの表示順を変更してみることにしました。

目的は、ブログカードの下(blogcard-footer)になっているブログロゴを上に上げる、ということです。

今のブログ(Cocoonのもとのデザイン)がこんな感じです。

これを、はてなブログ風にしてみたいんですよね。

基本的な考え方はブログカードのHTMLを生成する関数の置き換えです。

if ( !function_exists( 'url_to_internal_blogcard_tag' ) ):
function url_to_internal_blogcard_tag($url){

この後に続きますが、子テーマのfunction.phpの中で、url_to_internal_blogcard_tag()という関数を変更しています。

元記事の「取得した情報からブログカードのHTMLタグを作成」以降の部分の<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-footer internal-blogcard-footer cf">'.
          $site_logo_tag.$date_tag.
        '</div>'.
        '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
        '<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
      '</div>'.
    '</div>'.
  '</a>';

こんな感じにできました。

あとは、抜粋(snippet)のフォントサイズなどCSSで編集すれば良さそうです。

コード全体は元記事をご参照ください。

スポンサーリンク

こちらもどうぞ

タイトルとURLをコピーしました