SOY CMSのアーカイブ(カテゴリー)ページのリンクにclass="current"を付与する機能

機能の改善・追加に関するリクエストはこちらにお願いします。

SOY CMSのアーカイブ(カテゴリー)ページのリンクにclass="current"を付与する機能

投稿記事by polka on 2016年7月15日(金) 11:31

いつもありがとうございます。


表題通りなのですが、
アーカイブ(カテゴリー)ページに、カテゴリーリンクを並べた際、
今見ているページへのリンクに、
他のリンクとは違うスタイル(class)をつける機会が多くあります。


例えば
red, blue, yellowと3つのカテゴリーがあるとして、
カテゴリーのナビゲーション部分を次のようにしている場合、

<ul class="menubar">
<li><a href="/category/red/">カテゴリー「赤」</a>
<li><a href="/category/blue/">カテゴリー「青」</a>
<li><a href="/category/yellow/">カテゴリー「黄」</a>
</ul>

今、/category/red/(カテゴリー「赤」) を見ている場合、

<ul class="menubar">
<li><a href="/category/red/" class="current">カテゴリー「赤」</a>
<li><a href="/category/blue/">カテゴリー「青」</a>
<li><a href="/category/yellow/">カテゴリー「黄」</a>
</ul>

といった感じです。



現在は次のようなjQueryを使って、同じ事を実現しているのですが、
$(function(){
var theURL = document.URL;

$("ul.menubar li").each(function(){
if($("a",this).attr("href").indexOf(theURL) != -1){
$(this).addClass("current");
}
});
});


カテゴリーリンクを出力する、
b_block:id="category" や cms:id="category_list" と
関連する機能としてあったら便利なのでは、と思います。


ご検討よろしく御願い致します。
polka
 
記事: 197
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F

Re: SOY CMSのアーカイブ(カテゴリー)ページのリンクにclass="current"を付与する機能

投稿記事by inunosinsi on 2016年7月17日(日) 05:52

コード: 全て選択
<li><a href="/category/red/" class="current">カテゴリー「赤」</a>

SOY Shopではある程度自由さを制限しているので、class="current"を決め打ちで入れていますが、SOY CMSの方では自由さを優先したいので、上記のような自動生成はよろしくないです。

そこで下記の様なタグを作成してみました。

コード: 全て選択
<!-- b_block:id="category" カテゴリーリスト出力 -->
<!-- cms:id="is_current_category" -->
<li><a href="#" title="" cms:id="category_link" class="current"><!-- cms:id="category_name" -->ダミーカテゴリー<!-- /cms:id="category_name" --></a> (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->) </li>
<!-- /cms:id="is_current_category" -->
<!-- cms:id="no_current_category" -->
<li><a href="#" title="" cms:id="category_link*"><!-- cms:id="category_name*" -->ダミーカテゴリー<!-- /cms:id="category_name*" --></a> (<!-- cms:id="entry_count*" -->00<!-- /cms:id="entry_count*" -->) </li>
<!-- /cms:id="no_current_category" -->
<!-- /b_block:id="category" カテゴリーリストここまで -->


ブログのカテゴリページで現在表示しているカテゴリの場合は、<!-- cms:id="is_current_category" -->で囲った箇所が表示され、
それ以外のカテゴリを<!-- cms:id="no_current_category" -->で囲った箇所で表示します。

これで、テンプレートで使用しているHTMLをSOY CMSを介さず表示しても違和感なく表示されつつ、classの指定も自由に行えます。

cms:id="no_current_category"内のタグでは必ず*をつけることを忘れないでください。
添付ファイル
common.zip
(5.05 KiB)
大阪でフリーのプログラマをしています。
以前はSOY CMSの開発元で働いていました。

SOY ShopのプラグインやSOY Appの開発のサポートをしています。
http://saitodev.co/soycms(SOY CMSのマニュアルを作成しています)

最近はSOY Shopを業務アプリとして使用できないか?と模索しています。
SOY Shopで管理画面のみ使用モードを追加しました - saitodev.co

株式会社京都農販(SOY Shopのサイト)
株式会社コトブキ園(SOY Shop)
inunosinsi
 
記事: 814
登録日時: 2008年6月12日(木) 20:48

Re: SOY CMSのアーカイブ(カテゴリー)ページのリンクにclass="current"を付与する機能

投稿記事by polka on 2016年7月17日(日) 09:56

inunosinsi 様

いつもお世話になっております。

cms:id="is_current_category"
cms:id="no_current_category"
いいですね!

早速使ってみました。うまく動作しています。
jQueryを使うと、ちょっとイレギュラーな感じがあったので
すっきりしました。ありがとうございます!


【2017.04.03加筆】
たまたまかもしれないのですが、

リンク参照先の最後に「/」をつけてある場合、
例:href="/category/hoge/"
リンク先のカテゴリページで
cms:id="is_current_category"で出力させたい部分が出力されず、

リンク参照先の最後に「/」がない場合、
例:href="/category/hoge"
リンク先のカテゴリページで
cms:id="is_current_category"で出力させたい部分が出力されました。
polka
 
記事: 197
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F

Re: SOY CMSのアーカイブ(カテゴリー)ページのリンクにclass="current"を付与する機能

投稿記事by inunosinsi on 2017年4月03日(月) 17:30

今回のご連絡の件でコードレベルで確認致しましたが、
ご指摘の通り、スラッシュの有無で挙動が変わる可能性がありました。
※末尾のスラッシュの位置も含めて現在のカテゴリの判定を行っていました。

修正しましたので、修正ファイルをお渡しします。
添付ファイル
common.zip
(14.75 KiB)
大阪でフリーのプログラマをしています。
以前はSOY CMSの開発元で働いていました。

SOY ShopのプラグインやSOY Appの開発のサポートをしています。
http://saitodev.co/soycms(SOY CMSのマニュアルを作成しています)

最近はSOY Shopを業務アプリとして使用できないか?と模索しています。
SOY Shopで管理画面のみ使用モードを追加しました - saitodev.co

株式会社京都農販(SOY Shopのサイト)
株式会社コトブキ園(SOY Shop)
inunosinsi
 
記事: 814
登録日時: 2008年6月12日(木) 20:48

Re: SOY CMSのアーカイブ(カテゴリー)ページのリンクにclass="current"を付与する機能

投稿記事by polka on 2017年4月04日(火) 09:22

inunosinsi さんが書きました:今回のご連絡の件でコードレベルで確認致しましたが、
ご指摘の通り、スラッシュの有無で挙動が変わる可能性がありました。
※末尾のスラッシュの位置も含めて現在のカテゴリの判定を行っていました。

修正しましたので、修正ファイルをお渡しします。


ご対応ありがとうございます!
polka
 
記事: 197
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F


Return to 機能の改善・追加リクエスト

オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[2人]