テーマでアバターとログインIDを表示する

XOOPS Themes and Templates Advent Calendar 2012
⇒　5日目の投稿 Suinさん:在来テーマのスタイルを利用したテンプレート
⇒　7日目の投稿 kilicaさん:デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能

今回のアドベントカレンダーの2回目のポストになります、竹原です。
師走とはよく言ったもので、こないだ4月になったばかりと思っていたらあっちゅう間に12月になってしまいましたし、なんでこんなに月日の経つのって早いんでしょうね。（歳だからってのは内緒だからね）
というわけで、今回もはりきっていっちゃいましょう！

最近のログイン可能なウェブサイトやウェブサービスでは、画面の右上などにログイン者名やアバターが表示されていることが多いと思います。

XOOPS Cubeでもテーマのちょっとしたカスタマイズで同じことが可能ですので、そのやり方を紹介したいと思います。

アバターとログイン者名を表示するコード

theme.html

<div class="management_bar">                                   # classを割当て
        <{if $xoops_isuser === true}>                          # ログインユーザか判定
                <span id="headerName">
                        <a href="<{$xoops_url}>/user.php">     # プロフィールへのリンク
                                <img src="<{$xoops_userid|xoops_user_avatarize}>" /> # アバターを表示
                                <{user_uname2name uname=$xoops_uname}>  # 本名があれば本名を表示、なければアカウント名を表示
                        </a>
                </span>
                <span id="headerLogOut">
                        <a href="<{$xoops_url}>/user.php?op=logout"><{$smarty.const._LOGOUT}></a>
                                                               # ログアウトリンク
                </span> 
        <{else}>                                               # ログインユーザでない場合
                <a href="<{$xoops_url}>/user.php"><{$smarty.const._LOGIN}></a> # ログインリンク
        <{/if}> 
        <{if $xoops_isadmin}>                                  # 管理者か判定
                <a href="<{$xoops_url}>/admin.php">ADMIN</a>   # 管理画面へのリンク
        <{/if}> 
</div>

style.css

.management_bar {
    position: relative;
    margin: 1px auto;
    max-width: 1024px;
    width: 100%;
    background: #000;
    padding: 1px 0 4px;
    color: #ff0000;
    text-align: right;
}
.management_bar a {
    color: #ff0000;
    text-decoration: none;
}
.management_bar a:hover {
    color: #ffb900;
}
.management_bar img {
    width: 1.2em;
    height: 1.2em;
    margin-top: 2px;
    vertical-align: text-bottom;
}
#headerLogOut {
    margin-left: 0.5em;
}

ログイン前の例

ログイン後の例