WordPressテーマSANGOの質問

横長タイプのカードの画像を正方形にしたい

アバター
nomi

いつもお世話になっております。
「ホームに固定ページを使用する」を参考にさせていただきました。
どうしても解決できない部分があったので2点質問させてください。

1.PC用に[card]、モバイル用に[card2]を使用しています。[card2]横長カードの画像を長方形ではなく新着記事一覧と同じ正方形にすることはできますでしょうか?
([catpost]を使用すると関連記事に使用しているカスタマイズが反映されてしまったので[card2]を使用しました。)

2.固定ページの新着記事にも「カテゴリーラベル(PC表示のとき)」や「NEW」のマークを表示することは可能でしょうか?

ショートコードで日付を表示できるようになりとても嬉しいです。
お忙しいところ申し訳ございませんがよろしくお願い申し上げます。

SANGOで固定ページをホーム固定する方法まとめ
コメントへの回答
サルワカくん
サルワカくん
2019/07/09

お世話になっています。
card2に関しては、リンクを取得する段階で横長の画像を取得しているので、恐縮ながら変えるのが難しいです・・・。
object-fitというCSSプロパティを使えばできなくはないのですが、CSSが複雑になり、後から苦労する可能性があります。

kanrenショートコードをカスタマイズしているということですが、kanrenショートコードのコピーを作って、別にカスタマイズするのが良い気がします。


// 関連記事ショートコードのコピー(kanren2)
add_shortcode('kanren2','my_entry_link');
function my_entry_link($atts)
{
  $output = '';
  $ids = isset($atts['id']) ? explode(',', $atts['id']) : null;
  if(!$ids) return "";
  $target = isset($atts['target']) ? ' target="_blank"' : "";
  $is_date = isset($atts['is_date']) && $atts['is_date'];

  foreach ($ids as $eachid) {
    list($url, $title, $img, $date) = sng_get_entry_link_data($eachid, 'thumb-160', $is_date);
    if ($url && $title) {
      $output .= <<<EOF
<a class="my-linkto linkto table" href="{$url}"{$target}><span class="tbcell tbimg">{$img}</span><span class="tbcell tbtext">{$date}{$title}</span></a>
EOF;
    }
  } // endforeach
  return $output;
}
// END 関連記事ショートコードのコピー

これで[kanren2]というショートコードが使えるようになります。
このショートコードで挿入したリンクには.my-linktoというクラスが含まれています。

つまり、以下のようにCSSを指定すれば、このショートコードに対してのみCSSが適用されるようになります。
.my-linkto {
/* ここにCSS */
}

あるいは、カスタマイズのために追加済みのCSSが以下のようにあるとしたら・・・

.linkto {
  ~
}

以下のように書き換えれば、kanren2にはCSSが適用されなくなります。

.linkto:not(.my-linkto) {
  ~
}

2つめに関しては現状ではちょっと難しいです。アップデートでの対応を検討します。

よろしくお願いします。

アバター
nomi
2019/07/09

お世話になっております。
ご返信いただき誠にありがとうございます。助かります。
2つめの件、承知いたしました。ご無理言いまして申し訳ございません。

失礼ながら追加で教えていただきたいことがございまして。。
1つめに関して[kanren2]のショートコードを使えるようになったのですが、
[kanren2 id=”投稿ID”]だと追加済みのCSSが適用されないものの、
[catpost catid="ID" num="○" type="kanren2" is_date="1"]にすると追加済みのCSSが適用されてしまう状況です。
解決方法はございますでしょうか?
お忙しいところ申し訳ございませんがよろしくお願い申し上げます。

サルワカくん
サルワカくん
2019/07/10

以下のコードをfunctions.phpに追記する感じですかね・・・。
[my-catpost]というショートコードを使えば、上述のkanren2のカードが呼び出されると思います。

/*********************
オリジナルのカードリンクを好きな数だけ出力するショートコードを作成
*********************/
add_shortcode('my-catpost', 'sng_output_original_cards_by');
function sng_output_original_cards_by($atts) {
  list($num, $orderby, $order, $type, $is_date) = sng_get_cat_tag_post_data($atts);

  $catid = isset($atts['catid']) ? explode(',', $atts['catid']) : null;
  $notin = isset($atts['notin']) ? explode(',', $atts['notin']) : null;
  if($catid && isset($atts['include_children'])) {
    foreach ($catid as $parent_id) {
      $child_ids = get_term_children($parent_id, 'category');
      $catid = array_merge($catid, $child_ids);
    }
  }

  if ($catid) {
    $array_posts = get_posts(array(
      'category__in' => $catid,
      'numberposts' => $num,
      'orderby' => $orderby,
      'order' => $order
    ));
  } else {
    $array_posts = get_posts(array(
      'category__not_in' => $notin,
      'numberposts' => $num,
      'orderby' => $orderby,
      'order' => $order
    ));
  }
  
  $output = "";
  foreach ($array_posts as $post) {
    $output .= my_entry_link(array('id' => $post->ID, 'is_date' => $is_date));
  }
  return $output;
}
アバター
nomi
2019/07/10

お忙しいところ早々にご返信いただきありがとうございます。
教えていただいた方法で無事表示することができました。
自分ではどうにもならなかったので本当に助かりました。
ありがとうございます!