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

PHPがウィジェットで使えるWordPressプラグインがヤバい!!です。

こんなプラグインあったの!?もっと早く教えてよぉ~眼鏡市場さん。

全米が泣くぐらいグレートなプラグインだわ\(^_^)/ステキ!

 

ていうのはね、以前にユーザープロフィールをサイドバーに表示する方法を書いたのです。

WordPressサイドバーに名刺風のプロフィールを表示する方法
WordPressサイドバーに名刺風のプロフィールを表示する方法
カスタムHTMLなウィジェットでプロフィールを表示する人多いけど、WordPressって元々ユーザーごとにプロフィールあるの知ってた??(みんな知ってる てなわけで、これを利用してサイドバーに名刺風のプロフィールを表示する方法を紹介しておきます。 ※追記です。ウィジェット版作ってみました。多分こっちの方がいいです。 仕上がりイメージ 仕上がりイメージはこんな感じですん。長々としてるよりスッキリして、ごっつええ感じ。 名刺風はスタイルの問題なので、あんじょうやってね。 さて、なんでまたプロフィールを作ろうかと思ったか、ですが 以前から、こちらのサイトを参考に「記事下にこの記事を書いた人」を使っていました。 そいで、今回はサイドバーに表示したくなったのでチョイとカスタマイズして書いています。老化した私の脳みそを鍛えるためのメモとでも言いましょうか。 ファイルの編集 で、今回編集するファイルは以下のファイル 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だと、この辺りね。要するに表示したいところに記述するだす。 ※一応ですが、編集は親テーマの物をまるっとコピーして子テーマで編集する事をオススメします。親テーマをアップデートしたらなくなるので。 子テーマがない場合は以下を参考に作ってみてください。 使い方の説明 管理メニューのユーザーからあなたのプロフィールでこんな項目が追加されてるので、必要分入力します。 ※安心して下さい!!はいてますよ。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を記述したらこのようになります。プロフィールのフォントカラーは画像の色によりけりですが、変更する必要があるかも知れません。 ブログ書くの苦手な僕なので伝わってるかどうか心配.... 分からなかったらコメントください。

 

そいで、ウィジェットにしてしまおうとfunctions.phpをいじってたのですが、コレが結構めんどくさいんですよね。

なのでめんどくさがりのケンちゃんは考えました。


けんじ

そうだ!!ショートコードで呼び出そう。

でもその後すぐに、php使えるプラグインあるよって教えてもらったんです。(早く教えてほしかった。

そろそろ本題に入りますw

プラグインのインストール

もうこれは、毎度おなじみのパターンなのでサクッとカリッと割愛させていただきます。

プラグイン名「PHP Code Widget」で検索してインストールしてください。

 

んで、プラグインを有効化すると外観のウィジェットに「PHPコード」が追加されています。それを使います。

使い方は簡単で、そのまま打ち込むべし!!

です。

ここでお開きはあまりにも早いので、とりあえず冒頭の方でも私がほざいてたプロフィールを表示してみます。

サイドバーにプロフィールを表示する

HTMLでやればいいかも知れませんが、ユーザー設定のプロフィールがせっかく有るので、それを表示した方が賢明かなと思います。

とりあえず、ソースはこちらに載っているので割愛させていただきます。

WordPressサイドバーに名刺風のプロフィールを表示する方法
WordPressサイドバーに名刺風のプロフィールを表示する方法
カスタムHTMLなウィジェットでプロフィールを表示する人多いけど、WordPressって元々ユーザーごとにプロフィールあるの知ってた??(みんな知ってる てなわけで、これを利用してサイドバーに名刺風のプロフィールを表示する方法を紹介しておきます。 ※追記です。ウィジェット版作ってみました。多分こっちの方がいいです。 仕上がりイメージ 仕上がりイメージはこんな感じですん。長々としてるよりスッキリして、ごっつええ感じ。 名刺風はスタイルの問題なので、あんじょうやってね。 さて、なんでまたプロフィールを作ろうかと思ったか、ですが 以前から、こちらのサイトを参考に「記事下にこの記事を書いた人」を使っていました。 そいで、今回はサイドバーに表示したくなったのでチョイとカスタマイズして書いています。老化した私の脳みそを鍛えるためのメモとでも言いましょうか。 ファイルの編集 で、今回編集するファイルは以下のファイル 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だと、この辺りね。要するに表示したいところに記述するだす。 ※一応ですが、編集は親テーマの物をまるっとコピーして子テーマで編集する事をオススメします。親テーマをアップデートしたらなくなるので。 子テーマがない場合は以下を参考に作ってみてください。 使い方の説明 管理メニューのユーザーからあなたのプロフィールでこんな項目が追加されてるので、必要分入力します。 ※安心して下さい!!はいてますよ。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を記述したらこのようになります。プロフィールのフォントカラーは画像の色によりけりですが、変更する必要があるかも知れません。 ブログ書くの苦手な僕なので伝わってるかどうか心配.... 分からなかったらコメントください。

 

まず、外観のウィジェットを開き、ナウいウィジェットのPHPコードをサイドバーにパイルダーオン(設置)します。

これでホントにそのまま書いちゃってオッケーです。書きます。

 

当然ですがこうなります。画像使いまわしで、さーせん\(^_^)/

これだと好きな場所に表示できるので便利です。

 

スマホとパソコンで違う表示にしたい場合の条件分岐なんかも、こんな感じで書いてやれば余裕ですね。

<?php if ( wp_is_mobile() ) : ?>
// スマホで表示させたい内容
<?php else: ?>
// PCで表示させたい内容
<?php endif; ?>
あと、アドセンスのポリシー違反にかかりそうな記事の時に条件分岐使えますね。カテゴリー別にするにはイイ感じ。やった!!ワイン以外のおしゃけも、みんな大好き喫煙系の記事なんかが書き放題でやんす。

条件分岐タグはWordPress Codexに載っているので参考にしてみてね。

こちらからは以上でございやす。(^ω^)ノシ

スポンサーリンク

この記事をかいた人

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

コメントを閉じる

コメントを残す

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


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