Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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;
}

ログイン前の例
ログイン前の例

ログイン後の例
ログイン後の例

nouphet
ブラウザテスト自動化サービス ShouldBee http://shouldbee.at ブログ: http://nouphet.blogspot.jp/
http://shouldbee.at
craftsman_software
「インフラの心配は、もうおしまい」 インフラ運用を自動化し、手作業を限りなくゼロにする会社
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away