特定のカテゴリーで、表示はそのまま、リンクだけを外したい

[pocopoco]

お世話になります。

親カテゴリーが1つ、その下にぶらさがる子カテゴリーが３つあります。

本当は、子カテゴリーの3つのページが表示出来ればよくて、
親カテゴリーはいわば「タイトル」としての役割であればいいので、リンクは不要なのです。
しかし、カテゴリーを追加すると自動的にリンクがついてしまいます。
このリンクだけを外す方法はありませんでしょうか？

よくある「カテゴリー名を非表示にする」ではなくて、
「カテゴリー名を非リンクにする」にしたいのです。
どなたかお分かりになる方、なにとぞご教示ください。
よろしくお願いします。

[xxxpudding]

初めまして、先日似たような処理をしたので参考になれば幸いです。

親カテゴリー
┗子カテゴリー1
┗子カテゴリー2
┗子カテゴリー3

という構造で、子カテゴリーのみリンクが張られていればよいのですよね？

もし親カテゴリーの数が少ないのであれば、親カテゴリーは普通にhtmlで書いてしまい、
その下に親カテゴリーにぶら下がる子カテゴリーのみリスト表示するようにするのはどうでしょうか。

<dl>
<dt>親カテゴリー</dt>
<dd><?php wp_list_categories(child_of=「親カテゴリーID」&title_li&お好みの条件); ?></dd>
</dl>

こんな感じでどうでしょう。

ちょくちょく親カテゴリーが増減する場合や、親カテゴリーがたくさんある場合は、親カテゴリー名を自動で取得する仕組みがないとメンテナンスが面倒なので、まず最上位のカテゴリー名とIDを取得し、foreachで回して各親にぶら下がる子カテゴリーを表示するというのはどうでしょうか。

<dl>
<?php $categories = get_categories( 'parent=0&hide_empty=0' );
foreach($categories as $category):
$catName = $category->name;
$catID = $category->cat_ID;
echo '<dt>'.$catName.'</dt>';
echo '<dd>'.wp_list_categories("child_of={$catID}&title_li").'</dd>';
endforeach;
?>
</dl>

不要な親カテゴリーはget_categoriesのパラメータにexcludeでidを指定してあげてください。

[nobita]

こんにちは

テーマのつくりにもよりますが、

親カテゴリーはいわば「タイトル」としての役割であればいいので、リンクは不要なのです。
しかし、カテゴリーを追加すると自動的にリンクがついてしまいます。
このリンクだけを外す方法はありませんでしょうか？

CSSだけでできますよ、pointer-events がミソです

.categories > ul > .cat-item > a{
    color:red;
    pointer-events: none;
    cursor: default;
    text-decoration:none;
}

補足
twentyeleven なんかだと　categoriesはidになっているので

#categories-2 > ul > .cat-item > a{

な感じに、調整してくださいね

[pocopoco]

xxxpudding様、お返事ありがとうございます。

親カテゴリは幾つかあり下記のようになっています。

親カテゴリーA
┃　┗子カテゴリーA1
┃　┗子カテゴリーA2
┃　┗子カテゴリーA3
┣親カテゴリーB
┣親カテゴリーC

今は子カテゴリそれぞれに投稿した記事が、親カテゴリーAにA1・A2・A3の記事がいっぺんに入っている状態です。
ちなみに、子カテゴリーは親Aにしかありません。

上記の<dl>～</dl>をsidebar.phpに入れたところ、親カテゴリーが非リンクで子カテゴリにリンクが付きました！
ただし、他の親カテゴリーのリンクも切れてしまいます・・・

そこで、最後の一文の「不要な親カテゴリーはget_categoriesのパラメータにexcludeでidを指定してあげてください。 」という指定が必要なのだと思うのですが、どのように書けば良いのでしょうか？

申し訳ありませんが、再度ご教示いただきたく宜しくお願いいたします。

[pocopoco]

nobita様、お返事ありがとうございます。

CSSで出来るとは！！早速ためしてみたのですが、リンクは切れないままでした。

補足でいただいた「twentyeleven なんかだと　categoriesはidになっているので」
というところ

私が使っているテンプレはtwentyelevenでは無いのですが、categoriesがidになっているか、なっていないか、はどこで確認すれば分かるのでしょうか？

お手数ですが、再度ご教示いただきたく宜しくお願いいたします。

[nobita]

カテゴリを表示している部分のhtmlソースを確認します。
Twentyeleven の場合以下のような構造になっています

<aside id="categories-2" class="widget widget_categories">
	<h3 class="widget-title">Categories</h3>
	<ul>
		<li class="cat-item cat-item-4">
<a href="http://example.com/local-wp/?cat=4" title="">
aciform</a>
			<ul class="children">
<li class="cat-item cat-item-42">
		<a href="http://example.com/local-wp/?cat=42" title="">
		sub
	</a>
	<ul class="children">
		<li class="cat-item cat-item-108">
<a href="http://example.com/local-wp/?cat=108" title="">
mago</a>
		</li>
	</ul>
</li>
			</ul>
		</li>
		<li class="cat-item cat-item-5">
<a href="http://example.com/local-wp/?cat=5" title="">antiquarianism</a>
			<ul class="children">
<li class="cat-item cat-item-109">
		<a href="http://example.com/local-wp/?cat=109" title="">kokko</a>
</li>
			</ul>
		</li>
	</ul>
</aside>

Twentyeleven の style.cssに以下のコードを追加

#categories-2 > ul > .cat-item > a{
	color:red;
	pointer-events: none;
    cursor: default;
    text-decoration:none;
}

categories-2の部分は、異なる可能性があるので、ソースを確認してください。

ソースは、使っているブラウザのソースの表示方法を調べてください。

一度、Twentyelevenに切り替えて試してみて、うまくいくようなら、ご自分のテーマに沿ったスタイルルールに変更すればいいです。

[pocopoco]

nobita様、早々にお返事ありがとうございます。

ソースを確認したところ、

<li id=”widget_categories” class=”widget png_scale”><h2 class=”blocktitle”><span>事業所のご案内</span></h2>

となっていたので、コードは下記のようにしてIDも追加ました。

#widget_categories > ul > .cat-item-8 > a{
color:red;
pointer-events: none;
cursor: default;
text-decoration:none;
}

非リンクにしたいところが赤くなりはしたのですが、リンクは切れませんでした。。
おしいところまで来たのですが、あと何が足りないのでしょうか。
ブラウザとかバージョンが関係しているのでしょうか？？

[xxxpudding]

親カテゴリーB、Cにも子カテゴリーがあるものとして考えておりました；

子カテゴリーが存在する場合は子カテゴリーにリンクを張り、子カテゴリーが無い場合は、親カテゴリーに、自身のカテゴリーページにリンクを張るように修正してみました。

<dl>
<?php $categories = get_categories( 'parent=0&hide_empty=0' );
$childrenFlg = false;
foreach($categories as $category):
$catName = $category->name;
$catID = $category->cat_ID;
$catUrl = get_category_link($catID);

if(get_category_children($catID)){ //子カテゴリーの有無をチェック
	$childrenFlg = true;
}else{
	$childrenFlg = false;
}

if($childrenFlg == false){ //子カテゴリーが無い場合は親カテゴリーページにリンク
echo '<dt><a href="'.$catUrl.'">'.$catName.'</a></dt>';
echo '<dd>'.wp_list_categories("child_of={$catID}&title_li&show_option_none=").'</dd>';
}else{ //子カテゴリーがある場合は親カテゴリーにリンクを張らず、子カテゴリーをリスト表示
echo '<dt>'.$catName.'</dt>';
echo '<dd>'.wp_list_categories("child_of={$catID}&title_li").'</dd>';
}
endforeach;
?>
</dl>

また、「不要な親カテゴリーはget_categoriesのパラメータにexcludeでidを指定してあげてください。 」というのは、このメニュー一覧に掲載したくないカテゴリーを指定して除外するので、リンクを張らなくなるのではなく、リストから消えてしまいます。

例えば、

日本料理（親カテゴリー）
　┗デザート
　┗主食
　┗おかず

フランス料理（親カテゴリー）
　┗デザート
　┗主食
　┗おかず

中華料理（親カテゴリー）
　┗デザート
　┗主食
　┗おかず

私のブログ（親カテゴリー）
　┗仕事
　┗趣味
　┗恋愛

といった感じで、最上位のカテゴリー構成がされている場合「私のブログ」は他のお料理コンテンツと一緒に掲載するのは変な感じがしますよね。
こういう時はget_categoriesのパラメータexcludeに「私のブログ」カテゴリーのidを指定してあげると除外する事ができます。
「私のブログ」のカテゴリーIDが7だとして具体的に書くと、上記コードの2行目、
<?php $categories = get_categories( ‘parent=0&hide_empty=0’ );
を、
<?php $categories = get_categories( ‘parent=0&hide_empty=0&exclude=7’ );
というように&exclude=7を追加します。

[nobita]

IE対応していないみたいですね、

ブラウザ対応
http://caniuse.com/#search=pointer-events

IEに対応するためのスクリプト書いてみました。

CSSはやめて、javascriptで対応してみました。

functions.php の最初の<?phpの直前に貼り付けてみてください

<?php
wp_enqueue_script('jquery');

add_action('wp_footer','my_ie_helper_script');

function my_ie_helper_script(){
?>
  <script type="text/javascript">
  jQuery(function() {
		jQuery('#categories-2 > ul > .cat-item > a[href^=http]').removeAttr("href").css({'color':'red',	'pointer-events': 'none','cursor': 'default','text-decoration':'none'});
  });
</script>
  });
</script>
<?php
}
?>

[pocopoco]

[pocopoco]

xxxpudding様、お返事ありがとうございます。
料理のカテゴリー説明、とても分かりやすいです！
パラメータexcludeのところも、わかりやすくて本当に助かります。

こちらのコードをsidebar.phpに入れてみる前にお聞きしたいのですが、
もともと入っているコードが<ul>～</ul>となっています。
下記が現在のコードです。

これをxxxpudding様のおっしゃる<dl>に書き換えるには、
単純に<ul>と<dl>を変えれば良いのでしょうか？
初歩的な質問で申し訳ございません。。。

<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li class="widget png_scale" id="categories_id">
<h2 class="blocktitle"><span>Categories</span></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&hide_empty=0&exclude=,2&title_li='); ?>
</ul>
</li>
<li class="widget png_scale" id="text_id">
<h2 class="blocktitle">Archive</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li>

<li class="widget png_scale" id="meta">
<h2 class="blocktitle">Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li class="rss"><?php $t_feedburnerurl = t_get_option('t_feedburnerurl'); if ($t_feedburnerurl == '') {?>
	<a href="<?php bloginfo('rss2_url'); ?>">Read in RSS</a>
	<?php } else { ?>
	<a href="<?php echo $t_feedburnerurl ?>">Read in RSS</a>
	<?php } ?>

</li>
<?php if(t_get_option('t_twitterurl') != '') { ?>
<li class="twitter"><a href="<?php echo t_get_option('t_twitterurl');?>" title="Twitter profile">Twitter</a></li>
<?php } ?>
<?php wp_meta(); ?>
</ul>
</li>  <?php endif; ?>
</ul>

[pocopoco]

nobita様、お返事ありがとうございます。
IE用のスクリプト書いていただきありがとうございます。

ご教示いただいたコード内の下記の部分だけを書き換えてアップしてみました。

jQuery('#categories-2 > ul > .cat-item >

これを、使っているテンプレに合わせて　↓　に変更

jQuery('#widget_categories > ul > .cat-item-8 >

すると、親カテゴリのリンクは見事切れました。しかし・・・
他の親カテゴリのリンクが全部切れてしまいました。
でも、子カテゴリのリンクは生きているんです！
どうにか「ID8」の親カテゴリだけリンク切れれば成功なのですが。。

[nobita]

親のリンクは、すべてなのかと思っていました

<?php
wp_enqueue_script('jquery');

add_action('wp_footer','my_ie_helper_script');

function my_ie_helper_script(){
?>
<script type="text/javascript">
  jQuery(function() {
		jQuery('#categories-2 > ul > .cat-item:first-child > a[href^=http]').removeAttr("href").css({'color':'red',	'pointer-events': 'none','cursor': 'default','text-decoration':'none'});
  });
</script>
<?php
}
?>

でどうでしょう

'#categories-2 > ul > .cat-item-8 > a[href^=http]'

でも、特定の親だけ、リンクを停止できるんですけどね

[xxxpudding]

<dl>から<ul>に変更したコードをアップしますね。
（吐き出したhtmlのマークアップが一部おかしかったのでその部分も修正しました；）

単純に<ul>と<dl>を変えれば良いのでしょうか？

入れ替えるコードは以下の部分です。

<ul>
<?php wp_list_categories('orderby=name&show_count=1&hide_empty=0&exclude=,2&title_li='); ?>
</ul>

以下のコードにごっそり入れ替えます。

<ul class="category">
<?php $categories = get_categories( 'parent=0&hide_empty=0' );
$childrenFlg = false;
foreach($categories as $category):
$catName = $category->name;
$catID = $category->cat_ID;
$catUrl = get_category_link($catID);

if(get_category_children($catID)){ //子カテゴリーの有無をチェック
	$childrenFlg = true;
}else{
	$childrenFlg = false;
}

if($childrenFlg == false){ //子カテゴリーが無い場合は親カテゴリーページにリンク
echo '<li class="cat-item"><a href="'.$catUrl.'">'.$catName.'</a></li>';
echo wp_list_categories("child_of={$catID}&title_li&show_option_none=");
}else{ //子カテゴリーがある場合は親カテゴリーにリンクを張らず、子カテゴリーをリスト表示
echo '<li class="cat-item">'.$catName.'</li>';
echo wp_list_categories("child_of={$catID}&title_li");
}
endforeach;
?>
</ul>

以下のCSSで見た目を整えます（プロパティには仮の文字色が入ってます）

ul.category .cat-item { /*親カテゴリーの名前（非リンク）*/
	color:#66FF00;
}
ul.category .cat-item a{ /*親カテゴリーの名前（リンク）*/
	color:#0000FF;
}
ul.category .children .cat-item a{ /*子カテゴリーの名前（リンク）*/
	color:#FF9933;
}

[pocopoco]

nobita様、おはようございます、お返事ありがとうございます。

再度いただいたコードをfunction.phpに貼り付けてみたところ、
ダッシュボードの画面が真っ白になってしまいました（>_<；）
ftpで元に戻せるので大丈夫だったのですが、コードを貼り付ける際に、
もともとあるコードを消さないといけなかったでしょうか？

[pocopoco]

xxxpudding様、おはようございます。お返事ありがとうございます。

ごっそり入れ替えコード、どうもありがとうございます。
さっそくごっそり入れ替えてみました。親と子のリンクが希望通りバッチリです！！
ありがとうございます。

ただ、表示が下記のように親と子が同じ位置なってしまうので、
出来れば子リンクというのが分かるようにインデントを付けたいのですが、
スタイルシートでインデントやマージン設定をしても効かないのです。
なぜでしょうか？

◇現状の表示

┣親カテゴリーA
┣子カテゴリーA1
┣子カテゴリーA2
┣子カテゴリーA3
┣親カテゴリーB
┣親カテゴリーC

◇希望する表示

親カテゴリーA
┃　┗子カテゴリーA1
┃　┗子カテゴリーA2
┃　┗子カテゴリーA3
┣親カテゴリーB
┣親カテゴリーC