カテゴリーをツリーのアコーディオン化と記事数表記

ひとまず、サンプル作ったので、ここからどうすればよいかを具体的に書いてください。

サンプル: カテゴリを開閉できるようにする | codepen

なんかこんなサンプル前にも書いたような記憶もあるんですが（笑）

とりあえず実装した内容は、子カテゴリメニューを開閉できるようにした。
あわせて、矢印がアニメーションで動くようにした。
子カテゴリの合計数を親の数字横に入れた。

「子カテゴリの合計数を親の数字横に入れた」についてと、問題点を一つ。
子カテゴリと親の合計は表示することができますが、それが何の数字かがわかりにくいと思うので現在は親のカテゴリの合計数に+表記してあります。

次に問題点ですが、サンプルのようにすると親カテゴリが開閉スイッチになるのでリンクを無効にせざるを得ません。サンプルで矢印部分は擬似要素beforeで書いてあるわけですが、ここを擬似要素ではなく何かしらの要素を挿入して、それをスイッチにすることで親カテゴリのリンクも使えるようになります。

> [開いている時]Aカテゴリ名(以下カテゴリー内の総記事数表記・
> 親カテゴリ全般のタイトル・記事は無し)
> [閉じてる時]Aカテゴリ名(以下カテゴリ内の総記事数表記)

ということですが、ここをサンプル(あるいは実際のサイトのカテゴリ部分)を例にして具体的に書いてもらえますか？

> 現在無理矢理ですが、外観→メニュー→カテゴリーで

親記事
├ 子記事
└ 子記事

> としていますが、親記事もカテゴリの一つとして空にして
> 子記事のみに記事を分類しています。

これは通常のカテゴリ表示の状態で親カテゴリ部分を子カテゴリ部分に入れることはできます。が入れるとなると、親カテゴリ部分をどのように表記するかが問題となるので、そこをどうするかと、現在されているように、空カテゴリを親にしている場合は、どのように表示にしているかを書いてください。

回答ありがとうございます。
説明が上手く伝わらなかったようなので再度申し訳ありません。
検索してきた他人様サイトなので勝手にURL貼ってすみません。
http://tarikihongan.blog15.fc2.com/category8-1.html#121
こちらのサイトの「カテゴリをツリー化する方法」のような

アフィリエイト
├ アフィリエイトで成功するために(4)
├ アフィリエイトで効果的な広告の張り方(1)
├ Google AdSenseについて(2)
└アフィリエイトで陥りがちな失敗(2)

このような感じの子記事1階層にしたいと思っています。

例えば、

アフィリエイト←タイトル扱い
├ アフィリエイトで成功するために(4)←記事数表記あり
├ アフィリエイトで効果的な広告の張り方(1)←記事数表記あり
├ Google AdSenseについて(2)←記事数表記あり
└ アフィリエイトで陥りがちな失敗(2)←記事数表記あり
インテリア←タイトル扱い
├ イス(4)←記事数表記あり
├ テーブル(1)←記事数表記あり
├ カーテン(2)←記事数表記あり
└ 食器(2)←記事数表記あり

として、アコーディオンを閉じた時には

アフィリエイト←タイトルのみ
インテリア←タイトルのみ

という感じです。

パソコンからと携帯からのどちらからでも操作しやすいと思われる
アコーディオンの形式がよいのですが、ホバータイプクリックタイプなど
どれが最適なのかわかりませんので特に希望はありません。

空カテゴリを親にしている方法だと、
親カテゴリ　http://・・・・・/category/インテリア
子カテゴリ　http://・・・・・/category/インテリア/イス

となり、例えば子カテゴリに1記事もない場合は
/no-category/と表記されてしまいます。

プラグインの「jQuery Vertical Accordion Menu」も試してみましたが
/no-category/は変わりませんでした。

純粋に、親カテゴリ表記の部分は子記事の分類のみの為のタイトル用で
記事総数は表示しない

インテリア←タイトル扱い
├ イス(4)←記事数表記あり
├ テーブル(1)←記事数表記あり
├ カーテン(2)←記事数表記あり
└ 食器(2)←記事数表記あり

もしくは、子記事の記事総数の表示と各子記事部分はそれぞれの記事数表記

インテリア(9)←タイトル扱いもしくは、子記事のリスト表示と子記事の総数
├ イス(4)←記事数表記あり
├ テーブル(1)←記事数表記あり
├ カーテン(2)←記事数表記あり
└ 食器(2)←記事数表記あり

のようにできればと思っています。

空カテゴリを親にしている方法で記事数表記にすると、

アフィリエイト(0)
├ アフィリエイトで成功するために(4)
├ アフィリエイトで効果的な広告の張り方(1)
├ Google AdSenseについて(2)
└ アフィリエイトで陥りがちな失敗(2)
インテリア(0)
├ イス(4)
├ テーブル(1)
├ カーテン(2)
└ 食器(2)

となり、アコーディオンを閉じた時に

アフィリエイト(0)
インテリア(0)

となってしまいます。

イスの記事の投稿したい場合
投稿時のカテゴリーをチェックする欄で
カテゴリー一覧から「インテリア」「イス」にチェックを入れれば良いだけでしょうか？
その場合、グーグルに重複と注意されたりしますでしょうか？

現在、simplicity2.3.1とsimplicity2-child20161002aを利用させて頂いています。

技術はありませんので、外観→テーマの編集から何に追加と記述してある通りに追記するか
プラグインの「Simple Custom CSS」に追加記述か
ウィジェットのテキストにコピペくらいしかできません。

細部まで書き換える技術がないと無理でしょうか？

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

サンプル: 限定的な仕様で実現してみたサンプル | codepen

カテゴリウィジェットのタイトルを展開スイッチにして開くようにしました。
2つ目のカテゴリのように子カテゴリがあると表示がおかしくなります。つまり、全てが親カテゴリで

アフィリエイト(0)
├ アフィリエイトで成功するために(4)
├ アフィリエイトで効果的な広告の張り方(1)
├ Google AdSenseについて(2)
└ アフィリエイトで陥りがちな失敗(2)

このようになっていれば動作すると言うことです。もしここに、

アフィリエイト(0)
├ アフィリエイトで成功するために(4)
│　└ 何かしらの子カテゴリ
├ アフィリエイトで効果的な広告の張り方(1)
├ Google AdSenseについて(2)
└ アフィリエイトで陥りがちな失敗(2)

とある場合は正しく動作しません。表示はできると思いますが、子カテゴリが消えるか、合計件数がおかしくなるかと思います。

例えばいくつかカテゴリがサイドバーにあるとしましょう。その中で、サンプルのように動作させるためには、適用するカテゴリがどこであるかを指定する必要があります。ウィジェットを利用されていると思うので、そのウィジェットがどこかをjQuery側で指定する必要があると言うわけです。

<sidebar>
  <widget 何かしら>
  <widget categories> //1
  <widget categories> //2
  <widget 何かしら>
  <widget categories> //3
</sidebar>

このようになっていた場合、1と2はサンプルのような表示、3は通常のカテゴリ表示をするとした場合に、jQueryの冒頭にある部分を以下のように書き換えます。
var sideCat = $("#sidebar").find(".widget_categories:not(':last')");
そうすると、1と2だけサンプルの表示が適用されるようになります。

とまぁウィジェットを使うと結構面倒くさいんです。で、どうせウィジェットを使うのであればSimplicityはショートコードをデフォルトで展開できるので、テキストウィジェットに以下のように書けば任意のカテゴリが表示される仕組みを書きます。

—- ここから本番 —-

[acocat cat="カテゴリID" (title="任意" class="任意" lt="任意")]

この場合、catにはカテゴリidを,区切りで書きます。例えば、
[acocat cat="4,8"]

こうすれば、カテゴリIDが4と8のリストができるようにしてあります。titleとclassは任意ですが、titleは指定がない場合「カテゴリー」と表示され、classは指定がない場合、.accordion_catと言うのがつきます。
テキストウィジェットなので、展開されるhtmlは以下のようになります。
※以下はオプションのltが入っている場合。入ってない場合は普通のリストです。

<aside id="text-x" class="widget widget_text">
  <div class="textwidget">
    <div class="accordion_cat">
      <h3 class="widget_title">ショートコードのタイトルの部分</h3>
      <div class="switch">
        <input>
        <label>ここに任意のタイトル</label>
        <ul>
          <li>
            <a href="アドレス">カテゴリタイトル</a><span class="count">(カテゴリ数)</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

まぁ.wrapperは必要ないんですが、ひとまず。
で、今回の要望では、

アフィリエイト(0) ← これ!!
├ アフィリエイトで成功するために(4)
├ アフィリエイトで効果的な広告の張り方(1)
├ Google AdSenseについて(2)
└ アフィリエイトで陥りがちな失敗(2)

の「これ!!」が必要なわけです。サンプルでは、無理やりウィジェットタイトルを流用しましたが、このショートコードでは、オプションでlt=”かてごりん”と入れたとすると、

[acocat lt="かてごりん"]
↑　は　↓

かてごりん
├ アフィリエイトで成功するために(4)
├ アフィリエイトで効果的な広告の張り方(1)
├ Google AdSenseについて(2)
└ アフィリエイトで陥りがちな失敗(2)

と入ります。ただし、ただのli(<li class="switch">かてごりん</li>と出力します)なので、cssでの装飾が必要です。ulでネストしても良かったんですけど、構造が複雑になると色々と面倒くさいので。liでやろうと思いましたが処理大半をcssでやる方が軽いだろうと言うことで、inputとlabelに変更しました。

これでひとまずhtmlに必要なものが用意できたので、それ用のcssとjQueryを書きます。

■ショートコード用 子テーマfunctions.phpに追記

function getCategory_to_shortcode($opt) {
	
	extract(shortcode_atts(array(
        'class' => '',
        'title' => '',
        'cat'	=> '',
        'lt'	=> ''
    ), $opt));
    
    $title = (!empty($title)) ? $title : __( 'Categories' );
    $show_category_id = (!empty($cat)) ? $cat : "0,1,2,3";
    $class = (!empty($class)) ? $class : "accordion_cat";
    
    $args = array(
    	'orderby'		=> "name",
		'exclude'		=> '',
		'include'		=> $show_category_id,
		'parent'		=> 0,
		'pad_counts'	=> 1 
	);
	$categories = get_categories($args);
	$r = mt_rand(1,100);
    $out = "";
    $out .= "<div class='".$class."'>";
    $out .= "<h3 class='widget_title'>".$title."</h3>";
		if (!empty($lt)) {
			$out .= "<div class='switch'>"
				. "<input id='switch_".$r."' type='checkbox'>"
				. "<label for='switch_".$r."'>".$lt."</label>";
		}
			$out .= "<ul>";
			foreach($categories as $category) {
				$out .= "<li>"
					."<a href='".get_category_link( $category->term_id )."'>".$category->name."</a>"
					."<span class='count'>(".$category->count.")</span>"
					."</li>";
			}
			$out .= "</ul>";
		if (!empty($lt)) {
			$out .= "</div>";
		}
	$out .= "</div>";
	
	return $out;
}
add_shortcode('acocat', 'getCategory_to_shortcode');

これを仮に出力したものが以下のサンプルです。cssとjQueryはサンプルにあります。
サンプル: 先頭のラベルをクリックしたら次のulが表示される | codepen

こうなるだろうとhtmlを予測してcodepenに書いているので実際どうなるかは試していませんが、おそらくうまく行くんじゃなかろうかと思います。

cssはscssで書いてあります。css欄の下向き三角からview compiledを押すとcssに変換されるのでそれを子テーマstyle.cssに書きます。リサイズには対応してません。対応してないのでスマホではもしかするとはみ出してしまうかも知れませんが多分大丈夫だろうと思います。

※ 見直してないので不要な部分があるかも知れません。

こんなんでどうでしょうか？

わいひら様。hidekichi様。

ありがとうございました。
今のところどちらも動作確認できました。
どちらも別々のサイトで利用させて頂きます！

技術が無いのに要望を叶えて下さり
コピペだけでできるようまでして頂き感謝しております。
ありがとうございますした。