【Cocoon】インデックスのエントリーカードの記事一覧をaタグでラップするのをやめてそれぞれの要素をaタグでラップする

うーん、ちょっとなんていえばいいかわからないなあ…

スポンサーリンク

Cocoonデフォルトのエントリーカード

Cocoonの記事一覧は次のような構造になっています。

<a>
画像
タイトル
スニペット
メタ情報
</a>

記事一覧の記事をカードとして扱うのですが、このカード全体をaタグでラップしているのでなーーーーーーーーーーーーんだか気になります。

スポンサーリンク

entry-card.phpのカスタマイズに挑戦

ftpソフトを使ってentry-card.phpをコピーしてください

/wp-content/themes/cocoon-master/tmp/entry-card.php

↓子テーマにコピーします。tmpディレクトリがないので作ってください

/wp-content/themes/cocoon-child-master/tmp/entry-card.php

entry-card.phpをカスタマイズします。

挑戦した記録

不可能ではないです。一応このサイトでやってみたのですが、なんとかそれぞれの要素をaタグでラップさせることができました。ですが正直やめておいたほうがいいです。コンテンツ全体をaタグでラップするのにも利点はあります。むやみにカスタマイズするのはやめておいたほうがいいです。

ただCocoonデフォルトのエントリーカードはひとつだけ問題があります。それはカテゴリータグがリンクになっていないことです。

このコードでカテゴリーを取得できます

<?php
$categories = get_the_category();
if ($categories)
{
    foreach ($categories as $category)
    {
        echo '<a href="' . esc_url(get_category_link($category->term_id)) . '" class="cat-label-link">' . esc_html($category->name) . '</a>';
    }
}
?>

entry-card.phpはテンプレートですが実際にはループ内ですので記事のカテゴリーが取得できます。

あれだったらa-wrapのままでカテゴリーだけリンクしたほうがいいかもしれません。

こちらの記事も参考にしてください

はまったところ

imgタグをaタグでラップしたときに、a要素の下に隙間ができました。これはpaddingでもmarginでもなかったのでなんなのかまったくわかりませんでした。

結局解決方法はわかったのですが、それはaタグにfont-size: 0;を指定する。です。

文字がないのになぜ隙間ができるのかまではわかりませんでした。別に空白文字も見当たりませんでしたし。

コメント

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