旅と気ままなフォーラム

Re: 再考-picoモジュールで記事の先頭にメニューを設置したい。

このトピックの投稿一覧へ

Re: 再考-picoモジュールで記事の先頭にメニューを設置したい。

msg# 1.2

depth:: 1

前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2023/2/25 5:02

タツ

投稿数: 2447

この度、phpのバージョンアップを機にpicoモジュールで記事の先頭のメニューを再考しました。この記事のように先頭にメニューを表示するとメニューが多い場合は記事が下の方に表示され見にくいのでアコーディオンメニューにして記事ができるだけすぐに見えるようにしてみました。

前回のように新しくテンプレートを作成するのではなく既存のテンプレートを編集することにしました。

■編集するテンプレートは以下の2つです。
・モジュール名_block_subcategories.html(サブカテゴリー一覧ブロックのテンプレートです)
→メニューとして利用

<{* Dev-Mode Toggle *}>
<{if $xoops_isadmin}><div class="ui-dev-mode"><{$smarty.template}></div><{/if}>

<div class="acd-menu">
<label class="acd-label" for="Panel-subcategories">カテゴリ一覧</label>
<input type="checkbox" id="Panel-subcategories" class="on-off"/>
<ul>
<{foreach item=category from=$block.categories}>

<li>
<a href="<{$block.mod_url}>/<{$category.link}>">
<{$category.title}>
</a>
</li>
<{/foreach}>
</ul>

</div>

・モジュール名__block_menu(メニューブロックのテンプレートです)
→カテゴリメニューとして利用

<{* Dev-Mode Toggle *}>
<{if $xoops_isadmin}><div class="ui-dev-mode"><{$smarty.template}></div><{/if}>

<{foreach item=category from=$block.categories}>

<{if $category.id == $smarty.get.cat_id }>

<{foreach key=key item=content from=$category.contents}>

<{if $block.mod_url|cat:"/"|cat:$content.link == 'http://localhost'|cat:$smarty.server.REQUEST_URI}>

<div class="acd-menu">
<label class="acd-label" for="Panel1">カテゴリ内メニュー</label>
<input type="checkbox" id="Panel1" class="on-off"/>
<ul><{foreach item=content from=$category.contents}>
<{if $smarty.server.QUERY_STRING == 'content_id='|cat:$content.id}>
<li style="background:#ffffcc;"><{$content.subject}></li>
<{else}>
<li><a href="<{$block.mod_url}>/<{$content.link}>" title="<{$block.lang_lastupdated}>:<{$content.created_time_formatted}>"><{$content.subject}></a></li>
<{/if}>
<{/foreach}>
</ul>

</div>
<{/if}>
<{/foreach}>
<{/if}>
<{/foreach}>
<hr>

■編集後、利用しているthemeのcssにアコーディオンメニューが利用できるようにコードを追加します。

/* --------- acordion menuの為のcss ---------- */
.acd-menu {
height: auto;
width: auto;
margin: auto;
padding: auto;
background: #eee;
}

.acd-label {
background: #333;
color: #fff;
font-weight:600;
text-align:center;
padding: 10px;
display: block;
margin: 0;
border: 1px solid #fff;
cursor: pointer;
}

.acd-label:hover {
background: #ff0000;
}

input[type="checkbox"].on-off{
display: none;
}

.acd-menu ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin:auto;
padding: 1rem;
list-style: none;
}

.acd-menu li {
padding: .3rem;

}

input[type="checkbox"].on-off + ul{
display: none;
}

input[type="checkbox"].on-off:checked + ul{
display: block;
}

■ALTSYSブロック管理にて設定
ブロック管理にて記事の上の場所に2つのブロックを配置し、タイトル名はそのままだとダブって表示されるのでタイトルの後に「none」を入れて元のタイトルは表示しないようにします。

今のところpicoモジュールを利用しているものについて全部（ソロツーリングを楽しもう！、バイクメンテとD.I.Y、世界一周の旅を楽しもう！、趣味を楽しもう）に反映しています。ただし、この方法では子カテゴリまでは反映できますが、その下のカテゴリには反映されません。また、同様の方法でgnavi(ソロツーリングと旅の地図、世界の旅と地図、明石駅前観光と全国宿特集)にも反映しました。

投票数:7 平均点:7.14

投稿ツリー

picoモジュールで記事の先頭にメニューを設置したい。 (タツ, 2019/7/26 11:23)
- Re: picoモジュールで記事の先頭にメニューを設置したい。 (タツ, 2019/8/12 16:21)
- Re: 再考-picoモジュールで記事の先頭にメニューを設置したい。 (タツ, 2023/2/25 5:02)

今日 :	173
昨日 :	285
総計 :	1754351

ソロツーリングと気ままな旅