FIT社の新テーマ：GOLD MEDIAでカテゴリ表示に件数が表示されない問題を修正する方法：要function.php追記・カスタムCSS追記
#GOLDMEDIA ＃GOLDBLOG #カテゴリの件数が表示されない #暫定対応 #VSCode機能拡張改造 #VSCode機能拡張 #テーマ改造
こんにちは、如月翔也（@showya_kiss）です。
今回の記事は「FIT社のテーマ・GOLD BLOG及びGOLD THEMEを使うとカテゴリウィジェットに記事件数が表示されなくなる問題を暫定的に解決する方法」についての記事です。
今までこの「Devil!Daredevil!!」は短文でテック系のテストと雑記を書くブログと位置づけていたんですが、もっと総合的に成功失敗を問わずトラブルシュートや技術解説を真面目にやっていくサイトに方向転換しようかと思っています。
今回はニッチな話なんですが、WordPressでFIT社のテーマ「GOLD BLOG」または「GOLD THEME」を使用した場合、ウィジェットの「カテゴリ」で「件数を表示」を指定しても件数が表示されない（CSSで見えなくなっているのではなくソースレベルでそもそも表示されていない）問題が発生しており、緊急的にそれに対応する方法についてガイドします。
目次
Outline
発生している問題
FIT社の販売するテーマ「GOLD BLOG」または「GOLD THEME」をテーマとして適用すると、ウィジェットの「カテゴリ」の設定で「件数」を表示にチェックを入れてもカテゴリの件数が表示されないという問題。
問題の切り分け
テーマを変更した場合この問題は発生しない事と、「GOLD BLOG」のテーマのバージョンが低い場合発生せず、そして「GOLD BLOG」のバージョンをアップした所問題が発生したため、原因はテーマであると絞り込める。
また「GOLD THEME」は「GOLD BLOG」からの流用部分がかなり多いため、最新のGOLD BLOGから流用した部分に問題が潜んでいるためGOLD THEMEでも問題が発生していると推測される。
対応
本来はテーマの修正で対応すべき点だが、GOLD BLOGもGOLD THEMEもAJAXで動的に書き換えしている部分が多く、コンソールから拾った情報すら直接的に扱えないため、テーマを修正するのではなく、暫定的に「カテゴリ」ウィジェットを再定義し、それにCSSを適用する事で確実に件数表示ができるようにする。
副次的なメリットとして、純正のカテゴリウィジェットはカテゴリの件数が1000件を超えると数字にカンマが入るためテーマによる修飾が付与されない（0−9の正規表現で修飾しているためカンマが入る事で修飾が付与されなくなる）問題があるが、再定義した「カテゴリ」ウィジェットは1000件を超えてもカンマを入れないので修飾が確実に反映される。
実際の修正方法
修正箇所は2箇所ある。
- 子テーマファイルのfunctions.phpに「カテゴリ」用のコードを追加
- 子テーマのカスタマイズの「追加CSS」に「カテゴリ」用のCSSを追加
実際に書き込む内容は以下
子テーマファイルのfunctions.phpに追加するコード
子テーマファイルのfunctions.phpには以下コードを追加する。
// 確実に正確な件数を取得（最小修正：'cat' を使用、TTL指定を正しく）
function get_all_category_counts_reliable() {
$cache_key = 'reliable_category_counts';
$cached_counts = wp_cache_get($cache_key); // デフォルトグループ
if ($cached_counts !== false) {
return $cached_counts;
}
$all_categories = get_categories(array('hide_empty' => false));
$counts = array();
foreach ($all_categories as $category) {
$posts = get_posts(array(
'cat' => $category->term_id, // 'category' ではなく 'cat'
'post_status' => 'publish',
'post_type' => 'post',
'numberposts' => -1,
'fields' => 'ids',
));
$counts[$category->term_id] = count($posts);
}
// 第3引数=group（空でOK）、第4引数=TTL（秒）
wp_cache_set($cache_key, $counts, '', 1800); // 30分キャッシュ
return $counts;
}
// メイン関数（フラットなLI列＋子に > 表示）
function create_simple_hierarchical_category_list($output, $args) {
// カテゴリ以外は触らない（安全対策）
if (isset($args['taxonomy']) && $args['taxonomy'] !== 'category') {
return $output;
}
// 括弧検出による早期returnは廃止（カテゴリ名に ( があっても上書きする）
$category_counts = get_all_category_counts_reliable();
// 全カテゴリ取得（名前順）
$all_categories = get_categories(array(
'hide_empty' => false,
'orderby' => 'name',
'order' => 'ASC',
));
// 親/子に分類（出力はあくまでフラット）
$parent_categories = array();
$child_categories = array();
foreach ($all_categories as $category) {
if ($category->parent == 0) {
$parent_categories[] = $category;
} else {
if (!isset($child_categories[$category->parent])) {
$child_categories[$category->parent] = array();
}
$child_categories[$category->parent][] = $category;
}
}
$new_output = '';
// 親カテゴリ
foreach ($parent_categories as $parent_cat) {
$parent_count = isset($category_counts[$parent_cat->term_id]) ? $category_counts[$parent_cat->term_id] : 0;
$new_output .= '<li class="cat-item cat-item-parent cat-item-' . (int)$parent_cat->term_id . '">';
$new_output .= '<a href="' . esc_url(get_category_link($parent_cat->term_id)) . '">' . esc_html($parent_cat->name) . '</a>';
$new_output .= ' <span class="cat-count parent-count">(' . (int)$parent_count . ')</span>';
$new_output .= '</li>';
// 子カテゴリ（親の直後に並べる）
if (isset($child_categories[$parent_cat->term_id])) {
foreach ($child_categories[$parent_cat->term_id] as $child_cat) {
$child_count = isset($category_counts[$child_cat->term_id]) ? $category_counts[$child_cat->term_id] : 0;
$new_output .= '<li class="cat-item cat-item-child cat-item-' . (int)$child_cat->term_id . '">';
$new_output .= '<span class="child-arrow">></span>';
$new_output .= '<a href="' . esc_url(get_category_link($child_cat->term_id)) . '">' . esc_html($child_cat->name) . '</a>';
$new_output .= ' <span class="cat-count child-count">(' . (int)$child_count . ')</span>';
$new_output .= '</li>';
}
}
}
return $new_output; // ULラッパーはテーマ/ウィジェット側の既存マークアップをそのまま利用
}
// キャッシュクリア（PHP8+でも安全：引数なし登録）
function clear_reliable_category_cache() {
wp_cache_delete('reliable_category_counts');
}
add_action('save_post', 'clear_reliable_category_cache', 10, 0);
add_action('delete_post', 'clear_reliable_category_cache', 10, 0);
add_action('wp_trash_post', 'clear_reliable_category_cache', 10, 0);
add_action('untrash_post', 'clear_reliable_category_cache', 10, 0);
// フィルター適用（既存と同じ）
add_filter('wp_list_categories', 'create_simple_hierarchical_category_list', 999, 2);
これを追加して保存する。
子テーマファイルの追加CSSの追加内容
子テーマファイルのテーマのカスタマイズの最下段に追加CSSがあるので、そこを開いて以下を追加する。
/* カテゴリーウィジェット全体の基本設定 */
.widget_categories,
.widget-is-widget_categories {
width: 100% !important;
font-size: 1em !important; /* フォントサイズを通常に戻す */
}
.widget_categories ul,
.widget-is-widget_categories ul,
.widget-is-widget_categories .widget_list {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 基本的なカテゴリーアイテム */
.widget_categories .cat-item,
.widget-is-widget_categories .cat-item {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin: 0 0 4px 0 !important;
box-sizing: border-box !important;
white-space: nowrap !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
overflow: hidden !important; /* はみ出し防止 */
}
/* 親カテゴリのスタイル（濃い色） */
.widget_categories .cat-item-parent,
.widget-is-widget_categories .cat-item-parent {
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
color: white !important;
padding: 12px 15px !important; /* パディング調整 */
font-weight: bold !important;
border: 2px solid #357abd !important;
}
.widget_categories .cat-item-parent:hover,
.widget-is-widget_categories .cat-item-parent:hover {
background: linear-gradient(135deg, #357abd 0%, #2968a3 100%) !important;
transform: translateY(-1px) !important;
box-shadow: 0 3px 6px rgba(0,0,0,0.2) !important;
}
.widget_categories .cat-item-parent a,
.widget-is-widget_categories .cat-item-parent a {
color: white !important;
text-decoration: none !important;
flex: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-right: 8px !important;
}
/* 子カテゴリのスタイル（薄い色） */
.widget_categories .cat-item-child,
.widget-is-widget_categories .cat-item-child {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
color: #1976d2 !important;
padding: 10px 12px 10px 20px !important; /* パディング調整 */
font-weight: normal !important;
border: 2px solid #bbdefb !important;
margin-left: 15px !important;
}
.widget_categories .cat-item-child:hover,
.widget-is-widget_categories .cat-item-child:hover {
background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%) !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}
.widget_categories .cat-item-child a,
.widget-is-widget_categories .cat-item-child a {
color: #1976d2 !important;
text-decoration: none !important;
flex: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-right: 8px !important;
}
/* 子カテゴリの矢印マーク */
.widget_categories .child-arrow,
.widget-is-widget_categories .child-arrow {
color: #1976d2 !important;
font-weight: bold !important;
margin-right: 8px !important;
font-size: 1em !important;
flex-shrink: 0 !important;
}
/* 件数表示のスタイル（はみ出し防止） */
.widget_categories .cat-count,
.widget-is-widget_categories .cat-count {
flex-shrink: 0 !important;
font-size: 0.75em !important; /* 小さめに調整 */
padding: 3px 6px !important; /* パディング調整 */
border-radius: 10px !important;
font-weight: bold !important;
margin-left: 8px !important;
min-width: 30px !important; /* 最小幅を設定 */
text-align: center !important;
white-space: nowrap !important;
}
/* 親カテゴリの件数 */
.widget_categories .parent-count,
.widget-is-widget_categories .parent-count {
background: rgba(255,255,255,0.3) !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.5) !important;
}
/* 子カテゴリの件数 */
.widget_categories .child-count,
.widget-is-widget_categories .child-count {
background: rgba(25,118,210,0.2) !important;
color: #1976d2 !important;
border: 1px solid rgba(25,118,210,0.3) !important;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.widget_categories .cat-item-parent,
.widget-is-widget_categories .cat-item-parent {
padding: 10px 12px !important;
}
.widget_categories .cat-item-child,
.widget-is-widget_categories .cat-item-child {
padding: 8px 10px 8px 15px !important;
margin-left: 10px !important;
}
.widget_categories .cat-count,
.widget-is-widget_categories .cat-count {
font-size: 0.7em !important;
padding: 2px 4px !important;
min-width: 25px !important;
}
}
CSSなので色などは自由に追加して良い。これは追加したら画面左上やや右にある「公開」を選ぶ。
「公開」を選んで画面が書き換わったら、カテゴリ表示が階層型・親階層は濃い青・子階層は薄い青で、カテゴリに件数が表示されているのが確認できる。
これは暫定対応なので
テーマによってウィジェットの機能が書き換えられて損なわれるのは本来の動作として異常なので、サポートサイトにて問題として報告はもうあげている。
これはあくまで暫定対応であり、本来であれば何のテーマを使ってもウィジェットで「カテゴリ」の「件数を表示」にチェックを入れれば件数が表示されるのが正しい動作のため、すでに修正を求めている。
が、正直自分たちでウィジェットの動作くらい確認もせずにバージョンアップし、確認もせずに「SEO能力の高い新テーマ」として販売しているので開発としてはかなり不適切なプロセスを踏んでいると思われ、かなり信用を落としているので、僕は直っても今の改造版カテゴリウィジェットを使い続けるかもしれない。
当面の問題解決はしたので
当面の問題解決はしたので、他にこのDevil!daredevil!!でいくつか重要な部分をテストしたあと、他に「なおせない」致命的な問題がなければ翔也ガジェットブログにもこのテーマを適用していく予定。
しかしこんなの一部のGeekにしか直せないし、前のmeta descriptionを実装する時もコンソールから得られたカスタムフィールド名で送っても受け付けず、functions.phpで受け取る設定を作らなければならないような複雑な作りをしているので、問題が起きた時の自己解決はかなり難しく、僕も今回はClaude Proの助けを借りないと面倒くさかったので、もちろん簡単に作って構造がバレて複製モドキを作られても困るのは理解するが、なら直さなければならないような不完全なものを作るな、としか言いようがない。本来単純に作って確実に動作するのを確認してから難読化すべきなのだから、それを怠ったと疑われる結果になっているのは非常に会社としてのヘルスが良くないと思われる。
テーマは情報商売なのだから不完全であった時点で金銭的価値が消滅するので、本来であればユーザーが自分で直している時点で払っただけの金銭的価値を受け取れていないという事なので、FITさんにはその点はちゃんと自覚して頂きたい。
あとGOLD BLOGを買わせてから1年くらいでGOLD THEMEを買わせているので、毎年これをやるつもりならもっと誠実なテーマを買うか、なんなら結局毎回テーマ解析をする羽目になっているため必要な内容はほぼ網羅できているので自分でテーマ組んでしまおうかとも思っている。
この記事を書いた人 Wrote this article
devildaredevil 男性
ガジェットとAppleとTRPGが大好きな中年男です。文章をとにかく書くのが好きなので毎日のように色々なブログで文章を打ちまくっています。もし何か心に引っかかるものがあれば私のTwitterをフォローして頂けると更新情報が流れます。
関連記事 Related articles