ワードプレスで自己紹介を表示させる方法

2017年9月25日

パソコン

※HTMLもcssもわからない素人が書いている記事です。自分用のメモ書きのようなものなので備忘録として残しています。

※コピペではできません。

ワードプレスでサイドバーや個別記事の下に自己紹介を表示させる方法は、プラグインを利用したり、ウィジェットのテキストエリアを利用する方法があります。

今まではプラグインの「Simple Author Box」を利用していたのですが、ブログをAMP対応したところAMPのページでは自己紹介が表示されなくなってしまいました。

同じようなプラグインでAMPにも対応している「AMP Author Box」を入れてみたのですが、このブログで利用しているSimplicity2.0のAMPには表示されませんでした。

わたしがしたいこと

  • 自己紹介の欄をワードプレスに表示させたい
  • 個別記事は記事下に、それ以外のページはサイドバーのトップに
  • AMPでも自己紹介欄を表示させたい

ということで自分でやってみることにしました。

目指すできあがりはこんな感じ。

プロフィール

ワードプレスのユーザー一覧を拡張してTwitterやFacebookの欄を追加する

ワードプレスのユーザープロフィールの欄にTwitterやFacebookの欄を追加します。

user_contactmethodsフックにて、デフォルトの配列をフィルタリングする処理を追加する方法

らしいのですがなんのことだかさっぱり。

とりあえずネットにあったソースをfunction.phpにコピペします。

function.phpに下記を追加します。

/* プロフィール画面に入力欄追加 */
function my_new_contactmethods( $contactmethods ) {
/* ツイッター */
$contactmethods['twitter'] = 'Twitter';
/* facebook */
$contactmethods['facebook'] = 'Facebook';
/* Google+ */
$contactmethods['g_plus'] = 'Google+';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

するとワードプレスの管理画面の「ユーザー」→「あなたのプロフィール」→「連絡先情報」のところにTwitterやFacebookの入力項目ができました。

function

ここに入力するのはSNSのURLの独自の部分です。

twitter.com/XXXXXXX
TwitterページURLのXXXXXXX部分を入力します。

facebook.com/XXXXXXX
FacebookページURLのXXXXXXX部分を入力します。

plus.google.com/XXXXXXX
Google+ページURLのXXXXXXX部分を入力します。

テンプレートファイルを作る

表示させたい場所は個別記事の下の部分とサイドバーなのですが、個別記事のときはサイドバーには表示させないように条件分岐をしたいので、自己紹介用のソースはテンプレートファイルを別に作って、それを個別記事やサイドバーへ表示させたいと思います。

適当な名前でいいのですが、今回は普通のページ用の「introduction-page.php」とAMP用の「introduction-amp.php」の2種類を作ってそれぞれ読み込ませます。

普通のページ用のテンプレートファイルを作る

サンプル introduction-page.php

<div>
<aside id="introduction">
<h2>About Author</h2>
<p>
<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
</p>
<h3>Written by <?php the_author_link(); /* ニックネーム */ ?><?php the_author(); ?></a></h3>
<p>
<?php the_author_meta('description'); /* 自己紹介 */ ?>
</p>
<div><a href="<?php the_author_meta('user_url'); /* Webサイト */ ?>"><?php the_author_meta('user_url');?></a></div>
<ul>
<li><i class="fa fa-twitter" aria-hidden="true"></i> <a href="https://twitter.com/<?php the_author_meta('twitter'); /* Twitter */ ?>" target="_blank">Twitter</a></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i> <a href="https://www.facebook.com/<?php the_author_meta('facebook'); /* Facebook */ ?>" target="_blank">Facebook</a></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i> <a href="https://plus.google.com/<?php the_author_meta('g_plus'); /* Google+ */ ?>" target="_blank">Google+</a></li>
</ul>
</aside>
</div>

HTML5がよくわからないのですが、テーマのサイドバーや記事下のコメント欄などを見ると<aside>になっていたので<aside>を入れました。

テーマがFont Awesomeに対応していたのでtwitterなどの表記の前にロゴを追加。

<i class="fa fa-twitter" aria-hidden="true"></i>

AMP用のテンプレートファイルを作る

サンプル introduction-amp.php

<div>
<h2>About Author</h2>
<p>
<amp-img alt="profile" src="https://secure.gravatar.com/avatar/15dcc5454b94f35d72538006783f44b0?s=80&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/15dcc5454b94f35d72538006783f44b0?s=160&amp;d=mm&amp;r=g 2x" height="80" width="80"></amp-img>
</a>
</p>
<h3>Written by <?php the_author_link(); /* ニックネーム */ ?><?php the_author(); ?></a></h3>
<p>
<?php the_author_meta('description'); /* 自己紹介 */ ?>
</p>
<ul class="remove-bottom">
<li><a href="https://twitter.com/<?php the_author_meta('twitter'); /* Twitter */ ?>" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/<?php the_author_meta('facebook'); /* Facebook */ ?>" target="_blank">Facebook</a></li>
<li><a href="https://plus.google.com/<?php the_author_meta('g_plus'); /* Google+ */ ?>" target="_blank">Google+</a></li>
</ul>
</div>

AMPだと画像を表示させるのに<amp-img>を使うので変更しなければいけませんが、get_avatarだとimgになってしまいます。

avatarのURLだけ取り出すのが難しそうだったので直打ちしました。

挿入したい箇所に呼び出す記述を書く

個別記事とサイドバーへ呼び出す記述を書きます。テンプレートファイルはget_template_partで呼び出せるので

Simplicity2.0の子テーマ single-page.php

<?php get_template_part('introduction-page');//自己紹介を表示?>

Simplicity2.0の子テーマ sidebar.php

<?php if(!is_single()): ?>
<?php get_template_part('introduction-page');//自己紹介を表示?>
<?php endif; ?>

サイドバーへは条件分岐if(!is_sigle())でsingle.php以外に表示させるようにしました。

あとはCSSを変更して。

雑感

プラグインがありますがプラグインだと自分の思ったように動作してくれないときは困りますね。

※投資についての記事も掲載しておりますが、このサイトは投資を推奨するものではありません。投資はリスクが伴いますので自己責任でお願いいたします。

スポンサーリンク

ブログ運営

Posted by myu