WordPressテーマSANGOの質問

トップページ用固定ページで特定カテゴリーの日付とタイトルのみ一覧表示させたい

アバター
こびと

お世話になっております。
HTML、CSS、WPの勉強をしており、SANGOに行きつき購入させていただきました。

タイトル通りで、トップページに特定カテゴリー(今回はお知らせ)を日付とタイトルを一覧表示させたいです。
できれば、「一覧を見る」などのボタンもあれば助かります。
カード(アイキャッチ+タイトル)での一覧表示はこちらで勉強させていただき表示できたのですが、アイキャッチ画像は不要なのです。

よろしくお願いいたします。

トップページ用固定ページ(1カラム)のサンプルコード
コメントへの回答
サルワカくん
サルワカくん
2019/04/25

その場合、特定のカテゴリーの記事一覧を出力するショートコードを別に新しく作り「そのショートコードを使った場合には、サムネイルなしの横長カードを出力する」というようにするのが良いと思います。

具体的には以下のコードを子テーマのfunctions.phpに貼り付けると、[catpost]の複製版のショートコード[my-catpost]を使えるようになります。
このショートコードを使って記事一覧を出力すれば、サムネイルは表示されません。

/*********************
オリジナルのカードリンクを好きな数だけ出力するショートコードを作成
*********************/
add_shortcode('my-catpost', 'sng_output_original_cards_by');
function sng_output_original_cards_by($atts)
{
  $num = isset($atts['num']) ? esc_attr($atts['num']) : '4';
  $catid = isset($atts['catid']) ? explode(',', $atts['catid']) : null;
  $notin = isset($atts['notin']) ? explode(',', $atts['notin']) : null;
  $orderby = isset($atts['orderby']) ? $atts['orderby'] : 'date';
  $order = isset($atts['order']) ? ($atts['order']) : "DESC";

if ($catid) {
  $output_posts = get_posts(array(
  'category__in' => $catid,
  'numberposts' => $num,
  'orderby' => $orderby,
  'order' => $order
  ));
} else {
  $output_posts = get_posts(array(
  'category__not_in' => $notin,
  'numberposts' => $num,
  'orderby' => $orderby,
  'order' => $order
  ));
}
$output = "";
foreach ($output_posts as $post) {
  $output .= my_sng_longcard_link(array('id' => $post->ID));
}
return '<div class="catpost-cards flex flex-wrap space-between">'. $output .'</div>';
}

/*********************
1つのカードを出力する関数
*********************/
function my_sng_longcard_link($atts)
{
  $id = isset($atts['id']) ? esc_attr($atts['id']) : null;
  $output = '';
  if ($id) {
    $ids = (explode(',', $id));
  }
  if (!isset($ids)) return '関連記事のIDを正しく入力してください';

  $target = isset($atts['target']) ? ' target="_blank"' : "";

  foreach ($ids as $eachid) {
    $url = esc_url(get_permalink($eachid));
    $title = esc_attr(get_the_title($eachid));
    $time = get_the_time('Y.m.d', $eachid);
    $icon_name = get_option('use_fontawesome4') ? '<i class="fa fa-clock-o"></i>' : '<i class="fas fa-clock"></i>';
    if ($url && $title) {
      $output .= <<<EOF
<a class="c_linkto longc_linkto" href="{$url}"{$target}>
  <span class="longc_content c_linkto_text"><time class="longc_time dfont">{$icon_name} {$time}</time><span class="longc_title">{$title}</span></span>
</a>
EOF;
    } //endif
  } //endforeach
  return $output;
} //END my_sng_longcard_link

くわえて子テーマのstyle.cssもしくは外観⇒カスタマイズ⇒追加CSSに以下のようなCSSを貼り付けておくと良いかと思います。

.c_linkto.longc_linkto {
    display: block;
    box-shadow: none;
    border: solid 1px silver;
    margin: 10px 0;
}

「一覧を見る」のボタンは一覧ページへのリンクボタンを設置すれば良いかと思います。