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

サイドバーに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-imageurl();
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-imageurl(ここに画像のURLを入れる);

動作の確認

全部間違いなく出来ていたらこのようなプロフィールが表示されます。

作るまでは面倒だけど一度作ってしまえば楽ですね。

ぜひご活用ください。

それではまた。(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

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

コメントを閉じる

コメントを残す

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


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