うーん、ちょっとなんていえばいいかわからないなあ…
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;を指定する。です。
文字がないのになぜ隙間ができるのかまではわかりませんでした。別に空白文字も見当たりませんでしたし。
コメント