EC studio EC studio デザインブログ

以前にリクエストをいただいていたWordpressでの
投稿者別顔アイコン表示方法を紹介したいと思います。

顔アイコンを表示させると投稿者別の投稿がわかりやすくなり、
興味がある記事が探しやすくなったりします。ぜひお試しください。

アイコンに名前をつける

まずはアイコンを作成して、名前をつけます。
この名前をつける時ですが、ユーザー名(ログインID)をつけてください。
ユーザー名はWordpressの管理画面内の「ユーザー」から確認してください。

画像をフォルダにいれる

作成したアイコンを画像フォルダの中にいれます。
(このブログではテーマの中のimagesフォルダにいれています)

WordPressのテーマテンプレートにタグを入れる

顔アイコンを表示させたいテンプレートに
Wordpressのテンプレートタグを挿入します。

顔アイコンの切り替えはthe author loginというテンプレートタグを使用しています。
しかし、このタグはWordpress2.8では非推奨なので、
Wordpress2.8をご使用の場合はthe author metaを使うことをおすすめします。

このテンプレートタグは記事の投稿者のユーザー名(ログインID)を表示します。
投稿者ごとにユーザー名が変わるので、ユーザー名で名前をつけた画像アイコンを
投稿者ごとに切り替えることができます。

実際のタグ

HTML:
  1. <img src="http://designblog.ecstudio.jp/wp-content/themes/new_designblog/images/<?php the_author_login(); ?/>.jpg" alt="" />

imgタグのsrc 属性で指定したパスの中に<?php the_author_login(); ?>
というテンプレートタグが挿入されています。

このタグが投稿者ごとに変わるので画像パスが変更され、
投稿者別の顔アイコンを表示させることができます。

WordPressのテンプレートタグを使って、
よりWordpressを使いこなしましょう。


関連した記事:

■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」

日本でいちばん社員満足度が高い会社の非常識な働き方

この記事へのコメント (0)

コメントはまだありません。

コメントを投稿

HTML5+CSS3で作る 魅せるiPhoneサイト

デザイン部の谷がiPhoneサイト
制作の書籍を出版しました

取材に関するお問い合わせ


(担当:大崎)

投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ

BLOG オフィシャルブログ

社長ブログ
EC studio社長ブログ

ブログを読む

技術ブログ
技術部のブログ

ブログを読む

デザインブログ
デザイン部のブログ

ブログを読む

RECRUIT 採用情報

EC studio 採用情報の詳細はこちら

Copyright© EC studio, All Rights Reserved.