ディレクトリ機能を使ったアーティクルでのカテゴリ表示方法について

  • このエントリーをはてなブックマークに追加
アーティクルでは必ずディレクトリ設定が必須ですが、ディレクトリ設定を使うことで投稿記事をカテゴリ分けすることが可能です。
カテゴリ分けしたディレクトリをアイコン等で出力する方法をご説明します。

新着情報にカテゴリをつけよう

ディレクトリ機能を使う事で、記事にカテゴリと紐付ける事ができます。

紐付ける事によって、全ての記事の他に、それぞれのカテゴリの記事一覧を表示したり、一覧にアイコンでわかりやすくすることも可能です。

 

例えば新着情報のディレクトリとして「news」を追加した場合、

「news」に追加する形で「お知らせ」「更新情報」等のディレクトリを追加してみましょう。

 

追加後は以下の用に表層に出力することが可能です。

アーティクルリストの場合(アイコン的に表示)

アーティクルリストにアイコン的に表示する際の記述例です。

 

[開始タグ]
<ul class="news_list">

[ループタグ]
<li class="clearfix">
<p class="news_date">[*date(@public_begin_datetime,'Y.m.d')*]</p>
<p class="news_category"><a href="[*directory(@directory)['url']*]" class="dir_[*@directory*]">[*directory(@directory)['name']*]</a></p>
<p class="news_title">[*@title*]</p>
</li>

[終了タグ]
</ul>

 

[*directory(@directory)['url']*]→ディレクトリのURL出力
[*@directory*]→ディレクトリのID出力。前に単語と組み合わせてディレクトリ別にclass付与できる
[*directory(@directory)['name']*]→ディレクトリ名出力

 

カテゴリ別一覧へのリンクが必要ない場合は<a>タグを削除しましょう。

ディレクトリ一覧パーツの場合

[開始タグ]
<ul class="ctgr_list clearfix"><li><a href="/hoge/" class="dir_all">すべての記事</a></li>

[ループタグ]
<li>
<a href="[*@directory:url*]" class="dir_[*@id*]">[*@name*]</a>
</li>

[終了タグ]
</ul>


[*@directory:url*]→ディレクトリURL出力
[*@id*]→ディレクトリのID出力。前に単語と組み合わせてディレクトリ別にclass付与できる
[*@name*]→ディレクトリ名出力

番外編

currentさせたい場合

<li class="[*ret(strlen(@directory:url==@url:url)?'current':'')*]">
<a href="[*@directory:url*]" class="dir_[*@id*]">[*@name*]</a>
</li>

 

[*ret(strlen(@directory:url==@url:url)?'current':'')*]→ディレクトリURLと閲覧ページが一致している場合current class付与します

ディレクトリごとの記事数を表示したい

([*article_count(@directory:id,'article','article','',array('articleのid.setting'),true)*])

articleのidはarticleを作成した際に管理画面で確認できます。

 

例)
([*article_count(@directory:id,'article','article','',array('1.setting'),true)*])

 

お知らせ(8)という感じで件数を表示できます。

トトロ/プロダクト部 フロントエンド・エンジニアチーム

ガーディアンでは生産スケジュールを管理しながら制作を行っています。

チャーハン大好き。

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

札幌セミナーWordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>