WordPressの著者プロフィールページにソーシャルメディアへのリンクを追加することで、さまざまなプラットフォームで読者とつながり、より強力なオンラインプレゼンスを構築することができます。WordPressにはデフォルトでソーシャルメディアのプロフィール用のフィールドは含まれていませんが、追加する簡単な方法はあります。
WPBeginnerでは、長年にわたって著者のプロフィールページにソーシャルリンクを表示してきました。私たちは、ソーシャルリンクがコミュニティとエンゲージメントの感覚を構築し、読者が他のプラットフォームで私たちとつながることを奨励することを発見しました。
この記事では、WordPressで著者のTwitterやFacebookのプロフィールリンクを簡単に表示し、ウェブサイトに個人的なタッチを加える方法をご紹介します。
なぜサイトに投稿者のTwitterやFacebookのプロフィールを表示するのか?
ソーシャルメディア・プラットフォームは、WordPressサイトの重要なトラフィック源です。そこで、ソーシャルメディアのプロフィールを正しい方法で設定するのに役立つソーシャルメディア・チートシートをまとめました。
投稿者は自分のソーシャルプロフィールも持っており、それをサイトに表示することで、読者との信頼関係を築き、サイトの権威を強化することができます。
訪問者はソーシャルメディアでお気に入りの投稿者をフォローし、あなたのサイトの新しい投稿をいち早く発見することができます。また、彼らのソーシャルメディアのプロフィールをあなたのサイトのスキーマに追加することで、Googleやその他の検索エンジンでのサイトの信頼スコアを高めることができます。
ということで、投稿者のTwitterとFacebookのリンクをユーザープロフィールページに表示する方法を見てみましょう:
方法1:投稿者の経歴にソーシャルリンクを表示する
WordPressテーマの中には、各投稿の下に投稿者情報ボックスが表示されるものもある。 この機能を使えば、投稿者のソーシャルプロフィールへの簡単なリンクを表示することができる。
WordPress管理画面のユーザー ” すべてのユーザーに移動し、作者名をクリックするか、その下にある「編集」リンクをクリックすると、ユーザー編集ページが開きます。
次に、「ユーザーについて」セクションまでスクロールダウンし、「経歴情報」ボックスを探します。
もしあれば、あなたのテーマには投稿者ボックスのビルトインサポートがあります。
ここでは、投稿者の説明をテキストまたはHTMLで入力することができます。このように投稿者のTwitterやFacebookのプロフィールURLのHTMLリンクを手動で追加することができます:
ADD BIO HERE. Follow them on <a href="https:/twitter.com/USERNAME">Twitter</a> and <a href="https://facebook.com/USERNAME">Facebook</a>.
投稿者の略歴を追加し、USERNAMEを
実際のTwitterとFacebookのユーザーネームに変更することを本当に〜してもよいですか?
設定が完了したら、ページを一番下までスクロールし、「ユーザーを更新」ボタンをクリックして設定を保存することをお忘れなく。
ユーザーが投稿した記事に、TwitterとFacebookのリンクがユーザーの経歴とともに表示されるようになりました。デモサイトではこんな感じです:
方法2:投稿者Bio Boxプラグインでソーシャルアイコンを表示する
もしあなたのテーマが投稿者プロフィールボックスを表示しない場合、またはもっとカスタマイズ可能でリンクの代わりにソーシャルアイコンを表示するものが欲しい場合は、プラグインを使うことができる。
Simple Author Boxは最高の無料投稿者プロフィールボックスプラグインです。それはあなたの著者のためのソーシャルメディアリンクを追加するなど、あなたの著者のバイオボックスのほぼすべての側面をカスタマイズすることができます。
まず、Simple Author Boxプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
さらに多くの機能が必要な場合は、コンテンツの前後に投稿者ボックスを表示したり、サイトリンクを追加したり、ソーシャルアイコンのスタイルを増やしたり、ゲスト投稿者や共著者を含めたりできるプロバージョンがあります。詳しくはSimple Author Boxのレビューをご覧ください。
プラグインを有効化すると、各ユーザーのプロフィールにソーシャルメディアフィールドが追加されます。WordPress管理エリアの投稿者 ” すべてのユーザーページに移動し、作者名か下の「編集」リンクをクリックするだけです。
ヒント:自分のユーザープロフィールを素早く編集するには、ユーザー ” プロフィールページに移動します。
投稿者プロフィールの一番下までスクロールすると、Author Bio Boxプラグインによって追加されたいくつかの新しいフィールドに気づくでしょう。
Social Media Links (Simple Author Box)」というセクションが表示されるまでスクロールする。ここで、ドロップダウンメニューから’Facebook’を選択し、次のフィールドにFacebookのプロフィールへのURLを貼り付ける必要があります。
ここで、「+ 新しいソーシャルプラットフォームを追加」と書かれたボタンをクリックします。
新しいドロップダウンとフィールドが追加され、TwitterのURLを追加することができます。
ユーザー更新」ボタンをクリックして、設定を保存してください。
注:ボタンをクリックした後、FacebookとTwitterのURLが消えてしまっても心配しないでください。この記事を書いている時点では、URLが非表示になる小さなバグがありますが、設定は保存されています。
投稿者のプロフィールの下に、FacebookとTwitterのアイコンが表示されるようになりました。これらのアイコンをクリックすると、訪問者は彼らのソーシャル・プロフィールに移動しますが、これらのリンクはWordPressブログと同じウィンドウで開きます。
リンクを新しいタブで開きたい場合は、外観 ” シンプルオーサーボックスページに移動し、「要素」タブをクリックしてください。
そこで、「ソーシャルアイコンのリンクを新しいタブで開く」オプションを見つけ、オンに切り替える必要がある。
これで、投稿者のソーシャル・プロフィールが新しいタブで開かれる。
方法3:ページビルダー・プラグインで投稿者にソーシャル・アイコンを表示する
ソーシャルアイコン、体験談、最近の投稿、星の評価、画像カルーセルなどを備えたカスタム投稿者プロフィールページを作成したい場合は、SeedProdのようなプラグインを使用することをお勧めします。
SeedProdは、WordPressのための最高のドラッグアンドドロップページビルダープラグインです。WordPressのカスタムテーマやページレイアウトを簡単に作成でき、コーディングは必須ではありません。
まず、SeedProdプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のチュートリアルをご覧ください。
注: SeedProdには無料版があります。しかし、カスタマイザーページを作成するにはProバージョンが必要です。
プラグインを有効化したら、WordPressダッシュボードからSeedProd ” Theme Builderに行き、’Theme Templates Kit’ボタンをクリックします。
ここから、SeedProdの既成サイトキットの中から1つを選ぶことができます。
気に入ったデザインにマウスオーバーし、チェックマークアイコンをクリックするだけで選択できます。
SeedProdは、ホームページ、ブログページ、アバウトページなど、サイトに必要なテンプレートパーツをすべて含むウェブサイトキットをインポートします。
これらのページはすべてSeedProdのテーマビルダーを使ってカスタマイズすることができます。詳しくはカスタマイザーの作成方法をご覧ください。
次に、「新規テーマテンプレートの追加」ボタンをクリックして、新しい投稿者ページテンプレートを作成する必要があります。
すべてのライターに同じ投稿者ページを作成することも、特定のライターごとに独自の投稿者ページを作成することもできます。ステップバイステップの手順については、WordPressでカスタムオーサープロフィールページを追加する方法のガイドをご覧ください。
投稿者ページテンプレートを作成したら、カスタマイズを始めましょう。SeedProdの既製ブロックを使えば、ドラッグ&ドロップで簡単にページに追加することができます。
例えば、ヘッドライン、テキスト、画像、著者プロフィール、著者ボックス、投稿などのブロックを追加することで、著者に関するあらゆる情報を紹介することができます。
投稿者プロフィールページにソーシャル・プロフィールを追加するには、左側の「ソーシャル・プロフィール」ブロックを見つけ、表示したいページにドラッグするだけです。
初期設定では、ブロックにFacebook、Twitter、Instagram、YouTubeのソーシャルシェアアイコンが表示されます。
次に、新しく追加したブロックをクリックして編集パネルを開きます。ここで、ドロップダウンリストから新しいソーシャルメディアプラットフォームを選択することができます。
カスタムソーシャルメディアプロフィールボタンを作成するには、ドロップダウンリストから「カスタム」オプションを選択します。
次に、歯車のアイコンをクリックして設定を開きます。
SeedProdのビルトインアイコンライブラリからソーシャルメディアアイコンを選択できるようになりました。
あなたのソーシャルメディアのプロフィールのURLを入力する必要があります。
アイコンの色、サイズ、配置、スタイルを変更したり、高度な設定を行うこともできます。カスタマイザーが終わったら、画面上部の「保存」ボタンをクリックし、テーマビルダーを終了します。
最後に、カスタム投稿者ページを公開するためにSeedProdテーマを有効化する必要があります。
そのためには、SeedProd ” Theme Builderにアクセスしてください。そこから’SeedProdテーマを有効化’トグルを見つけ、’はい’の位置に切り替えてください。
これで、WordPressサイトにカスタマイザーの投稿者プロフィールページが表示されます。
方法4:SEOのためにサイトのスキーマにソーシャル・プロフィールを追加する
All In One SEO(AIOSEO)は、300万以上のサイトで使用されているWordPressオリジナルのSEOプラグインです。投稿者のプロフィールページにソーシャル・プロフィール欄を追加することもできる。
他の方法とは異なり、AIOSEOはこれらのソーシャルプロフィールをサイトのスキーママークアップに追加するので、この方法はあなたのサイトのSEOを向上させます。
問題は、AIOSEOが投稿者の経歴にそれらを自動的に表示しないことだ。しかし、心配しないでください。
このチュートリアルでは、サイトと各ユーザーのソーシャルプロフィールを追加することができるため、All In One SEOの無料版を使用します。しかし、AIOSEO Proは、検索エンジンの結果ページでより良いランク付けを支援するために、さらに多くの機能を提供しています。
最初に行う必要があるのは、無料のAll In One SEO Liteプラグインをインストールすることです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
AIOSEOプラグインをセットアップしたら、投稿者 ” すべてのユーザーページに移動し、作者の名前またはすぐ下の’編集’リンクをクリックする必要があります。
投稿者のユーザー編集ページが開きます。
AIOSEOは、ページの上部にソーシャル・プロフィールのタブを追加したことに注目してください。そのタブをクリックしてください。
ユーザーのソーシャル・プロフィールのURLをプロバイダーに入力することができます:
https://facebook.com/johnsmith345
https://twitter.com/johnsmith345
ユーザー名を追加するだけでは不十分であることに注意。
また、投稿者が複数のソーシャルネットワークで同じユーザー名を使用している場合は、「複数のソーシャルネットワークで同じユーザー名を使用する」と書かれたボックスをクリックすることもできます。
次に、そのユーザー名を入力して、そのユーザー名が使われているソーシャルネットワークをチェックすることができる。他のソーシャルネットワークの場合は、以前と同じように完全なURLを入力するだけです。
完了したら、ページ下部の「ユーザー更新」ボタンをクリックし、変更内容を保存します。
プロからのアドバイス:もしあなたのビジネスやサイトにTwitterやFacebookのプロフィールがあるのであれば、All In One SEO ” ソーシャルネットワークにアクセスし、ソーシャルプロフィールタブにリンクを追加することで、同様の方法でサイトのスキーマにこれらを追加することができる。
投稿者のソーシャルメディア・プロフィールがあなたのサイトのスキーマに追加され、検索エンジンがあなたのサイトをよりよく理解できるようになりました。しかし、あなたのサイトにはまだ表示されていません。
AIOSEO投稿者のTwitterとFacebookのリンクをテーマに表示する
では、これらのフィールドをテーマにリンクとして表示する必要があります。
上級ユーザーであれば、WordPressテーマファイルを編集することで、All In One SEOのソーシャルプロフィールからのリンクを表示することができます。この作業を行ったことがない場合は、WordPressでコードをコピー&ペーストする方法のガイドをご覧ください。
注:テーマのコアファイルの編集やカスタムコードの追加に慣れていない場合は、AIOSEOを使用してサイトのスキーマにソーシャルプロフィールを追加し、上記の方法1または方法2を使用してサイトに表示することをお勧めします。
上級ユーザーは、著者プロフィールリンクを表示したいテーマファイルに以下のコードを追加することができます:
<?php
$twitter = get_the_author_meta( 'aioseo_twitter', $post->post_author );
$facebook = get_the_author_meta( 'aioseo_facebook', $post->post_author );
echo '<a href="' . $twitter .'" rel="nofollow" target="_blank">Twitter</a> | <a href="'. $facebook .'" rel="nofollow" target="_blank">Facebook</a>';
?>
変更を保存し、投稿日: あなたのサイトに投稿を表示します。
これがデモサイトでの見え方です。Twenty Sixteenテーマのtemplate-parts
フォルダーにあるbiography.php
ファイルにコードスニペットを追加しました。
代替案 AIOSEOのAuthor SEOアドオンで投稿者のTwitterとFacebookのリンクを表示する
AIOSEO Proをご利用の方は、強力な投稿者SEOアドオンをご利用いただけます。スキーママークアップと投稿者プロフィールで経験、権威、信頼性を示すことで、Google E-E-A-Tシグナルを改善することができます。
さらに、無料版のプラグインとは異なり、投稿者の経歴にTwitterやFacebookのリンクを自動的に表示することができます。
Proプラグインを有効化したら、WordPress管理ダッシュボードからユーザー ” すべてのユーザーに移動するだけです。
次に、投稿者名の下にある「編集」リンクをクリックしてください。
次に、ページ上部の「投稿者SEO」タブをクリックする。
投稿者SEOのページが開き、投稿者の詳細を追加することができます。
まず、「投稿者情報を有効化」のトグルが「オン」になっていることを確認してください。
その後、学歴、勤務先、役職、専門エリアなどの詳細を追加して、E-E-A-Tシグナルを正しいものにすることができる。
また、投稿者画像、投稿者抜粋、投稿者略歴を追加することもできます。
投稿者の経歴の書き方については、こちらのガイドをご覧ください。
次に、ページを一番下までスクロールして、FacebookとTwitterのプロフィールURLを追加します。
Instagram、TikTok、YouTube、PinterestなどのURLを追加することもできる。
その後、スイッチを切り替えてAppend Author Bio to Postsオプションを有効化する。
これにより、ユーザーが投稿したすべての投稿にコンパクトな投稿者経歴が自動的に表示されます。
投稿者SEOページへの入力が終わったら、「ユーザー更新」ボタンをクリックして変更を保存します。
投稿者のプロフィールとサイトネットワークへのリンクが表示されます。デモサイトではこんな感じです:
WordPress投稿者向けエキスパートガイド
投稿者のソーシャル・プロフィールを表示する方法がわかったところで、WordPressの投稿者に関連する他のガイドもご覧ください:
- WordPressブログに新規ユーザーと投稿者を追加する方法
- カテゴリー:WordPressで投稿者を変更する方法
- WordPressで投稿者の写真を追加する方法
- WordPress投稿に投稿者情報ボックスを追加する方法
- カテゴリー:WordPressで投稿に複数の投稿者(共著者)を追加する方法
- WordPress投稿から投稿者名を削除する方法
- WordPressでブログの投稿者をすべて表示する方法
- WordPressで投稿記事を公開したときに投稿者にメールを送る方法
- カテゴリー:WordPressで投稿者が投稿を削除しないようにする方法
- WordPressマルチオーサーブログを効率的に管理するプラグイン
WordPressで投稿者のTwitterやFacebookのプロフィールリンクを表示する方法について、この投稿がお役に立てれば幸いです。また、最近のツイートを表示する方法や、WordPressに最適なYouTube動画ギャラリープラグインのエキスパートピックもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
beto
How can I display that on mobile versions ????
WPBeginner Support
If it is being removed on mobile versions then you would want to reach out to the support for your specific theme for assistance.
管理者
Manoj Solanki
How to disable the theme author box to use this plugin ?
Brandie
How can users add their social media links themselves?
Right now I can add it for my authors, but they cannot edit it themselves.
Ricardo Martins
Hi! I’m from Brazil! You frequently help me! Thank you!
So… I did not have success to add Facebook on my Author Box. Could you help me?
My Instagram and my website are showing, but Facebook not.
Touraj Aminfar
Very goood and useful , thanks
Abdelrahman Helmi
How to make it visual icons??
BImal
Can anyone give better explanation?
Vito
I would like to apply this to the page of the publication of the post, and insert text tags for each post. similar to the custom fields but with this style is that possible?
Thanks
Aamir
i am trying to include author google plus profile link in the template..
i have successfully added custum field to add google plus link in user profile of evry author but not able to include in the template …
i am using headway v3 ..
as its not posiible to edit files like author.php in headway i tried inserting the code directly in postpages by creating a Custum Code block but GooglePLus; ?> does not work…
please help..
Editorial Staff
Ask them about the related hooks that you can use to make it happen.
管理者
stephane.falzon
I try but it did not work and now it’s good. I do not understand why, but thx.
thegooch
What is the plugin’s name? I’d like to use it
richard
where in the theme function page should i place this code??
rayne
How do I add a dropdown instead of a text field?
Editorial Staff
For that you would have to write a mini-plugin calling the function and telling it to add the dropdown box.
管理者
Enk.
A little more in details, how can we get it working like we only write ‘wpbeginner’ in fields and it links automatically ?
Editorial Staff
Sure, more details added in the post.
管理者
Luke
Thank you for this.
Stupid question: What’s the code if you want to show only the info that’s displayed in user profile.
For example, when I add these in the user profile and don’t enter data, it still shows the icon.
Editorial Staff
You have to use a if then statement for that specific field in the database.
管理者
Nicole
Could you elaborate on how to write the if then statement for this?
Editorial Staff
If / Then statement are basics of PHP. This tutorial was added for developers. We would recommend looking at the PHP Tutorials site.
John (Human3rror)
very cool. i’m using it.