MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

WordPressサイドバーに名刺風のプロフィールを表示する方法

カスタムHTMLなウィジェットでプロフィールを表示する人多いけど、WordPressって元々ユーザーごとにプロフィールあるの知ってた??(みんな知ってる

てなわけで、これを利用してサイドバーに名刺風のプロフィールを表示する方法を紹介しておきます。

※追記です。ウィジェット版作ってみました。多分こっちの方がいいです。

サイドバーにLINE風味なプロフィールウィジェットを追加する方法
サイドバーにLINE風味なプロフィールウィジェットを追加する方法
前回、名刺風のプロフィールをサイドバーに表示する記事を書いたんだけど。 この記事 WordPressサイドバーに名刺風のプロフィールを表示する方法 ただこの方法だとテンプレートを直接編集するかPHPウィジェットを使う方法なので、利便性とかセキュリティー的にどうなん??って感じ。 まぁ自分で言うのもアレだけど、ちょっと残念なわけです・・・。 んで、WordPressだったらウィジェットにしてしまうのが何かと利便性が高いので、今回はサイドバーに表示するLINE風味なプロフィールウィジェットを追加する方法です。 けんじ 最近ウィジェットばっかり作ってるなぁ.... functions.phpの編集 まず、管理メニューの「ユーザー」>「あなたのプロフィール」ってとこに項目を追加します。 ここのプロフィールね。 以下のソースコードをfunctions.phpに追記してください。 remove_filter('pre_user_description', 'wp_filter_kses'); function user_sns_meta($sns){ $sns['twitter'] = 'Twitter(twitter.com/以降)'; $sns['facebook'] = 'Facebook(facebook.com/以降)'; $sns['googleplus'] = 'Google+(plus.google.com/以降)'; $sns['instagram'] = 'Instagram(instagram.com/以降)'; return $sns; } add_filter('user_contactmethods', 'user_sns_meta', 10, 1); ※functions.php編集時のお願い。追記したら間違っていないか?表示されているか?チェックしてください。一個ずつ確認しておかないと万が一の時に直しにくくなるので。 こうなっていれば正解です。 基本的にプロフィール情報に何も記入が無ければ表示しません。SNSもfeedlyとかrssなもの以外は入力が無ければ非表示です。 逆に入力があれば「入力がある分だけ」表示されます。 アイコンフォント読み込み SNSのアイコンにはFontAwesomeとicomoonで作成したものを読み込んでいますので、以下をfunctions.phpに追記します。 FontAwesome・icomoonの読み込み //レンダリングブロックが気になるのでフッターで読み込む function add_footer_styles() { wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css'); wp_enqueue_style( 'icomoon-style', get_stylesheet_directory_uri() . '/fonts/icomoon/style.css' ); }; add_action( 'wp_footer', 'add_footer_styles' ); icomoonのアイコンは作るのが面倒なので、僕が作ったやつを使ってください。 アイコンのダウンロード そいで、子テーマのディレクトリに「fonts」という名前でフォルダを作りicomoonを入れてください。絶対に子テーマ > fonts > icomoonとしてください。 ウィジェットを作成する ウィジェットを作るのでfunctions.phpに追記してください。 /* プロフィールウィジェット---------------------------------------------*/class profile_widget extends WP_Widget {/*コンストラクタ*/function __construct() { parent::__construct( 'profile_widget', '*プロフィールウィジェット*', array( 'description' => 'プロフィールウィジェットを追加' ) ); }/*ウィジェット追加画面でのカスタマイズ欄の追加*/function form($instance) {?><p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label> <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>"></p><?php}/*カスタマイズ欄の入力内容が変更された場合の処理*/function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); return $instance;}/*ウィジェットのに出力される要素の設定*/function widget($args, $instance) { extract($args); echo $before_widget; if(!empty($instance['title'])) { $title = apply_filters('widget_title', $instance['title'] ); } if ($title) { echo $before_title . $title . $after_title; } else { echo ''; }?><div class="sns-widget"><div class="the_author"> <div class="the_author_img"><?php echo get_avatar( get_the_author_id(), 80 ); // プロフィール画像を表示(サイズ100px)?></div> <div class="the_author_right_section"> <div class="the_author_name"><?php the_author(); // 投稿者名を表示?></div> <div class="the_author_text"><?php the_author_meta('user_description'); // 投稿者のプロフィール情報を表示?></div> </div> <div class="clr"></div> <?php $twitter = get_the_author_meta('twitter'); $facebook = get_the_author_meta('facebook'); $googleplus = get_the_author_meta('googleplus'); $instagram = get_the_author_meta('instagram'); ?> <div id="writter-follow"> <?php if(!empty($twitter)) : ?> <span class="follow-button"> <a class="twitter" href="//twitter.com/<?php echo $twitter; ?>" target="_blank" title="Twitterをフォロー" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i></a> </span> <?php endif; ?> <?php if(!empty($facebook)) : ?> <span class="follow-button"> <a class="facebook" href="//www.facebook.com/<?php echo $facebook; ?>" target="_blank" title="Facebookをフォロー" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a> </span> <?php endif; ?> <?php if(!empty($googleplus)) : ?> <span class="follow-button"> <a class="googleplus" href="//plus.google.com/<?php echo $googleplus; ?>" target="_blank" title="Google+をフォロー" rel="nofollow"><i class="fa fa-google-plus" aria-hidden="true"></i></a> </span> <?php endif; ?> <?php if(!empty($instagram)) : ?> <span class="follow-button"> <a class="instagram" href="//www.instagram.com/<?php echo $instagram; ?>" target="_blank" title="Instagramをフォロー" rel="nofollow"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> <?php endif; ?><!-- feedlyは最初から表示 --> <span class="follow-button"> <a class="feedly" href="//feedly.com/i/subscription/feed/<?php echo esc_url( home_url() ) ; //home_url?>/feed/" target="_blank" title="feedlyで更新情報を購読" rel="nofollow"> <span class="icon-feedry"></span> </a> </span><!-- rssは最初から表示 --> <span class="follow-button"> <a class="rss" href="<?php echo esc_url( home_url() ) ; //home_url?>/feed/" target="_blank" title="rssで更新情報を購読" rel="nofollow"> <i class="fa fa-rss" aria-hidden="true"> </i> </a> </span> </div></div></div><?php echo $after_widget;}}register_widget('profile_widget'); これで「*プロフィールウィジェット*」が追加されていればOKです。 スタイルを整える 以下のコードをstyle.cssに追記してください。 /*プロフィール ウィジェット---------------------------------------------------*/.the_author { background-image: url(); border: solid 5px #eee; padding: 10px; margin: 0; background: #fff; box-sizing: border-box; background-repeat: no-repeat; background-size: 100% 170px;}.the_author_title { text-align: center; padding: 5px 0 !important; color: #fff;}.the_author_img { width: 80px; margin: 0 auto; padding-top: 90px;}img.avatar.avatar-80.photo { border-radius: 50%; background: #fff;}.the_author_right_section { margin: 0; padding: 0;}.the_author_name { font-weight: bold; text-align: center; padding: 10px 0;}.the_author_text { color: #666; font-size: 90%;}.widget #writter-follow { padding-top: 8px; text-align: center;}.widget #writter-follow { margin-left: 10px;}#writter-follow { clear: none; margin: 4px 0;}#writter-follow a { text-decoration: none;}.follow-button { display: inline; margin-right: 10px;}#writter-follow a.twitter { color: #00acee;}.writter-follow a.facebook { color: #3b5998;}.writter-follow a.googleplus { color: #db4a39;}.writter-follow a.instagram { color: #3f729b;}.writter-follow a.feedly { color: #25af01;}#writter-follow a.rss { color: #ff8300;} 背景の画像だけURLの指定をしてください。 .the_author { background-image: url(ここに画像のURLを入れる); 動作の確認 全部間違いなく出来ていたらこのようなプロフィールが表示されます。 作るまでは面倒だけど一度作ってしまえば楽ですね。 ぜひご活用ください。 それではまた。(`・ω・´)ゞ

 

仕上がりイメージ

仕上がりイメージはこんな感じですん。長々としてるよりスッキリして、ごっつええ感じ。

名刺風はスタイルの問題なので、あんじょうやってね。

さて、なんでまたプロフィールを作ろうかと思ったか、ですが

以前から、こちらのサイトを参考に「記事下にこの記事を書いた人」を使っていました。

そいで、今回はサイドバーに表示したくなったのでチョイとカスタマイズして書いています。老化した私の脳みそを鍛えるためのメモとでも言いましょうか。

ファイルの編集

で、今回編集するファイルは以下のファイル

  • functions.php
  • sidebar.php
  • style.css

この三つになります。

functions.phpの編集

とりあえずコピペ用のコードがこちらです。PHP苦手なので、、分かる人は適当に書き換えてください。

remove_filter('pre_user_description', 'wp_filter_kses');
function user_sns_meta($sns){
 $sns['twitter'] = 'Twitter(twitter.com/以降)';
 $sns['facebook'] = 'Facebook(facebook.com/以降)';
 $sns['googleplus'] = 'Google+(plus.google.com/以降)';
 $sns['instagram'] = 'Instagram(instagram.com/以降)';
 return $sns;
}
add_filter('user_contactmethods', 'user_sns_meta', 10, 1);

特に何のひねりもございません。ユーザープロフィールでHTMLを有効にした以外は参考と同じです。

※SNSのアイコンにFont-Awesomeを使っているので、読み込んでないテーマの場合は以下をfunctions.phpに追記して下さい。
//レンダリングブロックが気になるのでフッターで読み込む
function add_footer_styles() {
    wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css');
};
add_action( 'wp_footer', 'add_footer_styles' );

style.cssの編集

とりあえず、style.cssに以下の物を追記すると今回の名刺風のスタイルになります。

.the_author {
    border: solid 5px #eee;
    padding: 10px;
    margin: 0;
    background: #fff;
    box-sizing: border-box;
}
.the_author_title {
    padding: 5px 0 !important;
}
.the_author_img {
    width: 80px;
    float: left;
    margin-right: 10px;
}
img.avatar.avatar-80.photo {
    border: solid 1px #eee;
    border-radius: 50%;
}
.the_author_right_section {
    margin-left: 95px;
}
.the_author_name {
    font-weight: bold;
}
.the_author_text {
    color: #666;
    font-size: 75%;
}
.clr {
    display: block;
    clear: both;
}
#writter-follow {
    padding-top: 8px;
}
#writter-follow i {
    font-size: 18px;
}
.follow-button {
    display: inline;
    margin-left: 10px;
}

sidebar.phpの編集

記述量も少ないので今回はべた書きにします。

<div class="the_author">
        <h4 class="the_author_title">プロフィール</h4>
        <div class="the_author_img"><?php echo get_avatar( get_the_author_id(), 80 ); // プロフィール画像を表示(サイズ100px)?></div>
    <div class="the_author_right_section">
        <div class="the_author_name"><?php the_author(); // 投稿者名を表示?></div>
        <div class="the_author_text"><?php the_author_meta('user_description'); // 投稿者のプロフィール情報を表示?></div>
    </div>
    <div class="clr"></div>
    <?php
     $twitter = get_the_author_meta('twitter');
     $facebook = get_the_author_meta('facebook');
     $googleplus = get_the_author_meta('googleplus');
     $instagram = get_the_author_meta('instagram');
    ?>
    <div id="writter-follow">
     <?php if(!empty($twitter)) : ?>
     <span class="follow-button">
     <a class="twitter" href="//twitter.com/<?php echo $twitter; ?>" target="_blank" title="Twitterをフォロー" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i></a>
     </span>
     <?php endif; ?>

     <?php if(!empty($facebook)) : ?>
     <span class="follow-button">
     <a class="facebook" href="//www.facebook.com/<?php echo $facebook; ?>" target="_blank" title="Facebookをフォロー" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>
     </span>
     <?php endif; ?>
     
     <?php if(!empty($googleplus)) : ?>
     <span class="follow-button">
     <a class="googleplus" href="//plus.google.com/<?php echo $googleplus; ?>" target="_blank" title="Google+をフォロー" rel="nofollow"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
     </span>
     <?php endif; ?>

     <?php if(!empty($instagram)) : ?>
     <span class="follow-button">
     <a class="instagram" href="//www.instagram.com/<?php echo $instagram; ?>" target="_blank" title="Instagramをフォロー" rel="nofollow"><i class="fa fa-instagram" aria-hidden="true"></i></a>
     </span>
     <?php endif; ?>
    </div>
</div>

STINGER PLUSだと、この辺りね。要するに表示したいところに記述するだす。

※一応ですが、編集は親テーマの物をまるっとコピーして子テーマで編集する事をオススメします。親テーマをアップデートしたらなくなるので。

子テーマがない場合は以下を参考に作ってみてください。

WordPress推奨!!な子テーマの作り方をメモ
WordPress推奨!!な子テーマの作り方をメモ
子テーマの作り方とか今更すぎて地球が3000周ぐらい回ったけど、だんだんと低下してくる私の記憶力、、どげんかせんといかん!! とまぁ、自分でも忘れないように書いておこうと思う。いわゆる自分用のメモてきな感じです。なので親テーマの子供の作り方をナウいヤングな感じで紹介しておきます。 photo by Alexander Gounder 基本的な作り方 まず、最低限必要なファイルを作ります。 子テーマ名のフォルダーfunctions.phpstyle.css 実はたったこれだけです。(笑) あと、スクリーンショットは任意で有っても無くてもいいです。 functions.phpの作成 これが1番の('Д')キモ! …じゃなくて、、キモ(肝心)です。 よく前までは、子テーマのstyle.cssで@importで呼び出すなんてことをしてました。でもコレダメ!!ストラディバリウスぐらい古い。 んで、ナウいヤングはどうするかと言うとこうです。 <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } style.cssの作成 これがなくっちゃっスタイルも出来ませんってやつです。先頭にテーマ名を書くだけ。style.cssなんかはこれだけでいいんです /* Theme Name: テーマ名 Child Template: テーマ名 */ ようするに、twentyfifteenだとこうなりますね。 /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ 子テーマを仕上げる ほんでもって、先ほどのファイルをフォルダーに(functions.phpとstyle.cssの2点を)入れてZIP圧縮するだけです。 あ、テーマ名にはchild付けてくださいね。 はい!簡単に完成しました。あとは、外観のテーマからアップロードするのみ!! 子テーマに関しては、こちらの寝ログさんがお詳しいです。「WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など」参考になりました。 すげぇ短かったけど、自分用のメモ的なものなので、気にしないでください。

使い方の説明

管理メニューのユーザーからあなたのプロフィールでこんな項目が追加されてるので、必要分入力します。

※安心して下さい!!はいてますよ。SNSのアイコンは入力が無ければ表示されません。

動作の確認

冒頭の方にも載せましたが、コードの記述に間違いがなければこうなります。

LINE風のスタイル

※コメントをいただいたので、LINE風のスタイルを追記しておきます。急ぎで書いたので、少しCSS荒いです。

あと、背景の画像はbackground-image: url(背景画像のURLを記述してください。);の中に入れてください。

.the_author {
    border: solid 5px #eee;
    padding: 10px;
    margin: 0;
    background: #fff;
    box-sizing: border-box;
    background-image: url(背景画像のURLを記述してください。);
    background-repeat: no-repeat;
    background-size: 100% 170px;
}
.the_author_title {
    text-align: center;
    padding: 5px 0 !important;
    color: #fff;
}
.the_author_img {
    width: 80px;
    margin: 0 auto;
    padding-top: 90px;
}
img.avatar.avatar-80.photo {
    border-radius: 50%;
    background: #fff;
}
.the_author_right_section {
    margin: 0;
    padding: 0;
}
.the_author_name {
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}
.the_author_text {
    color: #666;
    font-size: 90%;
}
#writter-follow {
    padding-top: 8px;
    text-align: center;
}
.follow-button {
    display: inline;
    margin-left: 10px;
}

上記のCSSを記述したらこのようになります。プロフィールのフォントカラーは画像の色によりけりですが、変更する必要があるかも知れません。

ブログ書くの苦手な僕なので伝わってるかどうか心配…. 分からなかったらコメントください。

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメント一覧

4
  • はじめまして!けんじさん。CSSについてお尋ねします。スタイルはこちらの方で紹介されているLINEっぽいのを表示したいのですが、https://saruwakakun.com/sango/my-profile

    お暇な時でも大丈夫なので教えては頂けないでしょうか?ワードプレス初心者ですが宜しくお願い致します。

    • どうもはじめまして。コメントありがとうございます。

      その参考のURLはCSSがないんですね。少し検索してみたんですが、こちらが分かりやすかったです。

      一度試してみて下さい。

      僕もこういうプロフィールが出力できる機能を作ってみようと思います。

  • あの、うまく表現できなくてごめんなさい。こちらの名刺風のスタイルをLINE風にしたいと思っています。そこでけんじさんにCSSについて質問させて頂きました。

    迷惑をおかけして申し訳ございませんが、宜しくお願い致します。

    • そういうことだったんですね、失礼しました。

      とりあえず、急ぎで書いたので万能ではないですけども、、投稿に追記しておきました。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください