D3Blog + wizmobile テンプレート編集

最新配信
RSS
RDF
ATOM

ブログ - D3Blog + wizmobile テンプレート編集

D3Blog + wizmobile テンプレート編集

カテゴリ :: Customize/Hackメモ » wizmobile

執筆 :: masa 2008/6/27

D3Blog [1.02.xx] を携帯表示にあうようにカスタマイズしてみる。

■方針
全体に表示を簡素化してスリムにする。特に行を減らす方向で...

■やりたいこと
(1) 編集系の画面が xoopsdhtmlarea を使っていて重いので単なる textarea にする。
(2) RSSの配信メニューやカテゴリの表示がリスト表示になっていて、行を稼いでいるので、それをなんとかする。

(追記)
関連データが
http://archives.masa-lab.net/modules/d3downloads/index.php?page=singlefile&cid=2&lid=3
にあります。

_
■事前確認と準備
携帯用のテンプレート編集は、テーマ下テンプレートを使って行う。
d3blog のソーステンプレートは xoops_trust_path/modules/d3blog/templates にある。
ここからテンプレートを html/themes/{モバイルテンプレート名}/templates/d3blog/ の下にコピーしてくる。

■投稿画面のスリム化
現在のwizmobile [0.22] はページ分割がうまくいかない場合もあり、画面データサイズは極力少なくしたほうが良い。
また、携帯では javascript などが使えない場合が多いので、xoopsdhtmlarea や fckeditor はあまり必要がない。
基本的に入力部分は textarea に変更して行く。

テンプレートは main_submit.html


<div class="control">
<{if $moduleConfig.wysiwyg_editor && $currentUser.user_perm.allow_html}>
(..中略..)
</div>
</div>

これをすべて↓に差し替える


<div class="control">
<textarea id="contents" name="contents" rows="5"><{$entry.contents4edit}></textarea>
</div>

うん。とてもシンプルになった。

■閲覧画面のカテゴリ表示をスリム化
テンプレートは main_details.html
カテゴリ表示は <ul><li>を使っているので
・カテゴリトップ
・不具合情報
・その他
・前へ
・次へ
となっていて、行を使いすぎてしまう。
<ul><li></li></ul>をはずして、代わりに間に >(>) をはさむ。
元のコード


<div id="d3blogCommonNavi">
     <ul class="d3blogCatNavi">
(..中略..)
    </ul>
</div>

これを次のように変更する。


<div id="d3blogCommonNavi">
<{* category *}>
<a href="<{$mod_url}>/index.php" title="<{$smarty.const._MD_D3BLOG_LANG_READ_CATEGORY_OF|replace:'%s':$smarty.const._MD_D3BLOG_LANG_D3BLOG_MAIN}>">
<{$smarty.const._MD_D3BLOG_LANG_D3BLOG_MAIN}>
</a>
<{foreach item=cat from=$entry.categorypath name=catloop}>
	&gt;&nbsp;
	<a href="<{$cat.url}>" title="<{$smarty.const._MD_D3BLOG_LANG_READ_CATEGORY_OF|replace:'%s':$cat.name}>">
	<{$cat.name}>
	</a>
<{/foreach}>
<br />
<{* prev|next *}>
	<{if $backandforth.prev_entry}>
	<a href="<{$backandforth.prev_entry.url}>" title="<{$smarty.const._MD_D3BLOG_LANG_GO_BACK_TO_PREV_ENTRY|replace:"%s":$backandforth.prev_entry.title}>">
	<{$smarty.const._MD_D3BLOG_LANG_PREVIOUS}>
	</a>
	<{else}>
	<{$smarty.const._MD_D3BLOG_LANG_PREVIOUS}>
	<{/if}>
	|<{if $backandforth.next_entry}>
	<a href="<{$backandforth.next_entry.url}>" title="<{$smarty.const._MD_D3BLOG_LANG_GO_TO_NEXT_ENTRY|replace:"%s":$backandforth.next_entry.title}>">
	<{$smarty.const._MD_D3BLOG_LANG_NEXT}>
	</a>
	<{else}>
	<{$smarty.const._MD_D3BLOG_LANG_NEXT}>
	<{/if}>
</div>
<hr />

これで次のようになる。

カテゴリトップ > 不具合情報 > その他
前へ | 次へ

■閲覧画面のスリム化
標準のカテゴリ名と執筆者の表示部分
カテゴリ：
不具合情報その他
執筆：
masa 2008-5-23 11:52


<dl class="d3blogEntryCategory"><dt><{$smarty.const._MD_D3BLOG_LANG_CATEGORY}>&nbsp;:&nbsp;</dt>
<dd><{foreach item=path name=catpathloop from=$entry.categorypath}>
...(中略)...
<{else}><{$entry.blogger.uname}><{/if}></a>&nbsp;<span class="d3blogEntryCreated"><{$entry.published|format_timestamp:"m"}></span></dd>
</dl>

これを<dl><dd>をやめて、


<{$smarty.const._MD_D3BLOG_LANG_CATEGORY}>:&nbsp;
<{foreach item=path name=catpathloop from=$entry.categorypath}>
<a href="<{$path.url}>" title="<{$smarty.const._MD_D3BLOG_LANG_READ_CATEGORY_OF|replace:'%s':$path.name}>"><{$path.name}></a><{if !$smarty.foreach.catpathloop.last}>&nbsp;&raquo;<{/if}>	
<{/foreach}><br />
<{$smarty.const._MD_D3BLOG_LANG_BLOGGER_NAME}>&nbsp;:&nbsp;
<a href="<{$xoops_url}>/userinfo.php?uid=<{$entry.uid}>" title="<{$smarty.const._MD_D3BLOG_LANG_SEE_BLOGGER_PROFILE|replace:'%s':$entry.blogger.uname}>">
<{$entry.blogger.uname}></a>&nbsp;(<span class="d3blogEntryCreated"><{$entry.published|format_timestamp:"s"}></span>)

これで次のような表示になった。

カテゴリ：不具合情報その他
執筆 : masa (2008-5-23)

■閲覧画面本文下メニューの並列化
標準では次のようになっている。
・masaさんのブログを読む
・コメント(3)
・トラックバック(0)
・閲覧(102)
これも <ul><li> なので、<ul><li></li></ul> をはずして、代わりに間に | をはさむ。
また、本文とメニューの間に区切り線を入れる。
これで次のような表示なる(コード省略)。

masaさんのブログを読む | コメント
(3) | 閲覧(102)

■コメント投稿画面のスリム化
テンプレートは inc_comment_form.html
xoopsdhtmlarea を textarea に変更し、その他のコントロール類もはずす。

コードは省略...

■RSS配信メニューを並列化する
テンプレートは inc_header.html
標準では<ul><li>を使っているので、
・RSS
・RDF
・ATOM
のように表示されてしまうので、<ul><li> を取る。


<{if $moduleConfig.show_feeder_link and $feeder}>
        <{$feeder.what_feeder.lang}><{$smarty.const._MD_D3BLOG_LANG_LATEST_ENTRY_FEED}>:
        <a href="<{$feeder.rss}><{$feeder.what_feeder.uri}>" title="<{$smarty.const._MD_D3BLOG_LANG_RDF_GUIDE|replace:'%s':'RSS'}>">RSS</a>|
        <a href="<{$feeder.rdf}><{$feeder.what_feeder.uri}>" title="<{$smarty.const._MD_D3BLOG_LANG_RDF_GUIDE|replace:'%s':'RDF'}>">RDF</a>|
        <a href="<{$feeder.atom}><{$feeder.what_feeder.uri}>" title="<{$smarty.const._MD_D3BLOG_LANG_RDF_GUIDE|replace:'%s':'ATOM'}>">ATOM</a>
<br />
<{/if}>
<h2 id="d3blogHeader"><{$myname}> - <{$page_subtitle}></h2>

これでOK

トラックバック (0)
閲覧 (11775)