パンくずリストの設置方法

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
サイト内にパンくずリストを設置したいと思っています。
しかし、XXXXX>YYYYY>PPPPPPのようにはならず。
・Home
>
・XXXXX

のように箇条書き表示されてしまっています。

参考にした記事はこちらです。
https://original-game.com/wordpress-make-a-breadcrumb/

コード

function mytheme_breadcrumb() {
	//HOME>と表示
	$sep = '>';
	echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
	echo $sep;
 
	//投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
	$cats = '';
	$cat_id = '';
	if ( is_single() ) {
		$cats = get_the_category();
		if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
	}
	else if ( is_category() ) {
		$cats = get_queried_object();
		$cat_id = $cats->parent;
	}
	$cat_list = array();
	while ($cat_id != 0){
		$cat = get_category( $cat_id );
		$cat_link = get_category_link( $cat_id );
		array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
		$cat_id = $cat->parent;
	}
	foreach($cat_list as $value){
		echo '<li>'.$value.'</li>';
		echo $sep;
	}
 
	//現在のページ名を表示
	if ( is_singular() ) {
		if ( is_attachment() ) {
			previous_post_link( '<li>%link</li>' );
			echo $sep;
		}
		the_title( '<li>', '</li>' );
	}
	else if( is_archive() ) the_archive_title( '<li>', '</li>' );
	else if( is_search() ) echo '<li>検索 : '.get_search_query().'</li>';
	else if( is_404() ) echo '<li>ページが見つかりません</li>';
}

アドバイスいただけますと幸いです。
よろしくお願い致します。

kei344

2019/02/11 08:30

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、参考にされた記事などもURLとともに質問文に追記してください。

22kk

2019/02/11 08:46

kei344様上記ありがとうございました！先ほど修正させていただきました。引き続きよろしくお願いします。

kei344

2019/02/11 08:48

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

22kk

2019/02/11 08:50

ありがとうございます！今一度やって見ました！

行動規範の内容に同意します

回答2件

ベストアンサー

CSSでどうにかしましょう

liをdisplay:inline-block;にするか
ulをdisplay:flex;にするか好きなやり方で

そして、ulの直下に$sepを出力するのはなしで
セパレータはcssでli::afterとかで入れる方がオススメ

デザイン調整の時にPHPのコードを
いじらなくちゃいけなくなるのは後々面倒です

テキストだけの簡単なパンくずでいいんだってなら
ul要素使うことないです、ulはdivに、liはspanに

投稿2019/02/11 08:48

KazuhiroHatano

総合スコア7804

22kk

2019/02/11 08:57

Kazuhiroさんご回答ありがとうございます！！実はコードいじるのがほぼ初めてでして、、、、いただいたご回答だと、 phpには記載つつ、CSSを修正するということですよね？かつ、テキストだけのパンくずであれば、（それでいいと思っています） phpの方のulはdivに、 liはspanに全て置き換えちゃおう！ということでしょうか・・・？質問が多く申し訳ございません。。。