●回答

サイトマップのツリー表示はテーマLuxeritasの独自機能のようです。

https://thk.kanzae.net/wp/point/t295/

Cocoonはツリー表示しません。

https://wp-cocoon.com/sitemap-shortcode/

●プラグイン

PS Auto Sitemapのスタイル「ドキュメントツリー」が似た感じかと思います。
現在、プラグインはダウンロード停止となっています。

https://fujimotoyousuke.com/ps-auto-sitemap_wordpress/

●補足

カテゴリーをツリー表示し、各投稿を表示させる独自のショートコードとCSSで実現可能です。
ツリー表示するにあたり、投稿に複数カテゴリーを設定した場合の考慮が必要です。

サイトマップ自体、余り閲覧されなず、わざわざツリー表示する必要はないと思います。

@chu-ya 

回答ありがとうございます。やはりルクセリタスの機能だったんですね…。

現在、縦軸で上から下に年代が下る年表のようなものをサイトのメインに据えたいと思っており、
ツリー構造のサイトマップが一番それに近かったので、もしCSSなどで実現できればそうしたいと思っています。

浅学で申し訳ないのですが、投稿していただいた画像のようなツリーは
どのようなコードで描かれているのでしょうか。

浅学で申し訳ないのですが、投稿していただいた画像のようなツリーは
どのようなコードで描かれているのでしょうか。

以下が参考になりませんか？

https://www.will3in.co.jp/frontend-blog/article/expression-sitemap-tree-with-css-only/

@chu-ya 

ご教示ありがとうございます。
確かに上記HTMLとCSSを設定すると、罫線を使ったサイトツリーのようにはなりましたが、
こちらは投稿が増えたときに自動更新される機能はないですよね？

もしそうであれば、毎回手動で増やすとなると手間になってしまうので、
自動更新される方を優先し罫線デザインは諦めようと思いますが、
上記はお間違い無いでしょうか。

投稿者:: @xxxciho

↑

こちらは投稿が増えたときに自動更新される機能はないですよね？

本件はコピペで実現でできる内容ではありません。

ご自身で、ツリー表示するCSSとHTMLを参考に、ショートコードを作成すれば、自動化できると言うことです。

Cocoonのsitemapショートコードで十分だと思いますが？

●答え

ショートコードsitemap_treeでツリー表示します。自己責任で願います。

functions.phpに追加。

// サイトマップをツリー形式で表示するショートコード
add_shortcode('sitemap_tree', function() {
  $output = '<ul class="my-hierarchy">';

  // 固定ページのツリー表示
  $output .= '<li><strong>固定ページ</strong><ul>';
  $pages = get_pages(['sort_column' => 'menu_order']);
  $output .= sitemap_tree_render_pages($pages);
  $output .= '</ul></li>';

  // 投稿のカテゴリーと投稿のツリー表示
  $output .= '<li><strong>投稿</strong><ul>';
  $output .= sitemap_tree_render_categories(0);
  $output .= '</ul></li>';

  $output .= '</ul>';

  return $output;
});


// 固定ページを階層構造で再帰的に表示
function sitemap_tree_render_pages($pages, $parent_id = 0) {
  $output = '';
  foreach ($pages as $page) {
    if ($page->post_parent == $parent_id) {
      $output .= '<li><a href="' . get_permalink($page) . '">' . esc_html($page->post_title) . '</a>';
      $children = sitemap_tree_render_pages($pages, $page->ID);
      if ($children) {
        $output .= '<ul>' . $children . '</ul>';
      }
      $output .= '</li>';
    }
  }
  return $output;
}

// カテゴリーと投稿を階層構造で再帰的に表示
function sitemap_tree_render_categories($parent_id) {
  $output = '';
  $categories = get_categories([
    'parent' => $parent_id,
    'hide_empty' => false
  ]);

  foreach ($categories as $category) {
    $output .= '<li>' . esc_html($category->name);
    
    // 投稿を取得
    $posts = get_posts([
      'category' => $category->term_id,
      'numberposts' => -1
    ]);

    // 投稿または子カテゴリーがあればリスト表示
    if (!empty($posts) || has_child_category($category->term_id)) {
      $output .= '<ul>';

      // 投稿をリスト化
      foreach ($posts as $post) {
        $output .= '<li><a href="' . get_permalink($post) . '">' . esc_html($post->post_title) . '</a></li>';
      }

      // 子カテゴリーを再帰的に処理
      $output .= sitemap_tree_render_categories($category->term_id);

      $output .= '</ul>';
    }

    $output .= '</li>';
  }

  return $output;
}

// 指定カテゴリーに子カテゴリーが存在するかチェック
function has_child_category($term_id) {
  $children = get_categories([
    'parent' => $term_id,
    'hide_empty' => false
  ]);
  return !empty($children);
}

style.cssに追加。

.article .my-hierarchy {
  background-color: #000;
  color: #eaeaea;
  font-family: 'Menlo', 'Consolas', 'monaco', 'monospace', 'ＭＳ ゴシック', sans-serif;
  padding: 15px;
  overflow-x: auto;
  white-space: nowrap;
}

.article .my-hierarchy::-webkit-scrollbar {
  height: 10px;
}

.article .my-hierarchy::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.article .my-hierarchy li {
  list-style: none;
  margin: 0;
  padding-left: 1em;
  position: relative;
}

.article .my-hierarchy ul {
  margin: 0;
  padding-left: 1em;
}

.article .my-hierarchy ul li:before {
  background-color: #fff;
  content: '';
  height: 1px;
  left: -0.5em;
  margin: auto;
  position: absolute;
  top: 0.75em;
  width: 1em;
}

.article .my-hierarchy ul li:after {
  background-color: #fff;
  bottom: 0;
  content: '';
  height: 100%;
  left: -0.5em;
  position: absolute;
  top: 0;
  width: 1px;
}

.article .my-hierarchy ul li:last-child:after {
  height: 0.75em;
}

@chu-ya 
とてもわかりやすい解説ありがとうございました。
無事導入することができました。