[BbPress] How to set up a link button to move to the profile page of the user who is currently logged in to any location

【bbPress】任意の場所へ現在ログインしているユーザーのプロフィールページへ移動するリンクボタンを設置する方法

公開日:2021年5月3日 使い方など
【bbPress】任意の場所へ現在ログインしているユーザーのプロフィールページへ移動するリンクボタンを設置する方法

WordPressの掲示板作成プラグインとして有名な「bbPress」。単なる掲示板機能だけではなく、管理画面側へ行かずにフロントエンド(閲覧画面側)からユーザー自身がプロフィールの編集ができるのも魅力の1つです。

ただ運用上少し不都合に感じるのが、プロフィールを編集したいとき。

  1. トピック内のユーザーリンクをクリックしてプロフィール画面を表示
  2. 自身であれば左側のメニューに「編集」リンクが表示されるのでクリック
  3. プロフィールの編集をする

こんな流れになります。あまり活動的でない方がプロフィール編集したいと考えた時は、自分のリンクがあるものを探すだけで大変!という感じになっています。

今回のカスタマイズでは、以下の動画のように、直接自身のプロフィールが開けるようにするようにすることで、より編集しやすくしようというものになります。

・・・結論から言うとできてしまえばこんな簡単なコード?ではありますが、結構これで困っている方がいらっしゃるようですので、参考記事として公開します。

今回のカスタマイズでは
・テーマのfunctions.phpへのコード追加
・テーマの追加CSSへのコード追加
が必要となります。トラブル防止のため、今まで行ったことのない方、経験の浅い方は行わないようにしてください。

有効化しているテーマのfunctions.phpへコードを追加する

以下のコードをテーマのfunctions.php末尾へ追加してください

/***** bbp profile lik button function *****/
function ha_bbp_profile_link() {
$this_user = wp_get_current_user();
$user_url=bbp_get_user_profile_url($this_user->ID);

echo '<div class="bbp-plink-button"><a href="' .$user_url. '">Edit Your profile</a></div>';
}
add_shortcode('ha-profilelink', 'ha_bbp_profile_link');

テーマの追加CSSへコードを追加する

以下のコードをテーマカスタマイザーの「追加CSS」へ追記するか、子テーマのstyle.cssへ追記してください

/***** bbPressのプロフィールリンクボタンデザイン *****/
/* ログインユーザーだけクリックできるようにする */
.bbp-plink-button{
pointer-events: none;
}

.logged-in .bbp-plink-button{
pointer-events: auto;
}

/* ボタンの外観 */

.bbp-plink-button {
    border: 1px solid #000;
    text-align: center;
    padding: 8px;
    background: #eee;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2em;

}

/* パソコン時 */
@media only screen and (min-width: 768px) {
.bbp-plink-button {
	max-width:340px;
}
}

/* モバイル時 */
@media only screen and (max-width: 767px) {
.bbp-plink-button {
	width:100%;	
}
}


.bbp-plink-button a{
text-decoration:none;
}

.bbp-plink-button:hover {
    background: #000;
    color: #fff;
}

.bbp-plink-button a:hover {
    color: #fff;
}

テーマによってCSSの読み込み順序が異なりますので、大抵どのテーマでも最後に適用されるようになっている「追加CSS」への追記が理想的です

ボタンの表示方法

ここまでの作業で、ボタンを表示させるための準備が完了しました。あとは、サイドバーウィジェットなどへ「カスタムHTML」ウィジェットを追加し、

[ha-profilelink]

というショートコードを入れればボタンが表示されます。

また、テーマテンプレートへ直接挿入する場合には、PHP化して

<?php echo do_shortcode( '[ha-profilelink]' ) ?>

を挿入すれば動作します。

bbPressのテンプレートは、インストール時の状態では、プラグインフォルダ内にあるテンプレートを通じ、かつ、テーマの固定ページテンプレートを通じて表示されるような少し複雑な構造になっています。テンプレートのカスタマイズに関する知識のない方はウィジェットへ挿入する方法で設置する方が無難です。

グローバルメニューへボタンを設置したいときは

今回のカスタマイズでは、ショートコードで任意の場所へプロフィールページへのリンクを表示させる仕様です。

そしてWordPressのグローバルメニューへは、通常の状態ではショートコードをメニューとして追加することができません。

ただ、このボタンを表示させるシーンとしてはグローバルメニューにという希望が多いと思いますので、そんなときは「Shortcode in Menus 」というプラグインを使うと良いでしょう。

【グローバルメニュー】とは、WordPressの管理画面から「外観」→「メニュー」を開いて作成するメニューのことです。テーマにもよりますが、グローバルメニューは通常サイトタイトル下やフッターへ表示されます。

グローバルメニューへ追加した場合、ページ中ほどで紹介したCSSの影響で思わしくない表示がされてしまうことがありますので、適宜編集してください。

ボタンを〇〇用で分けたいときは

ここまで紹介してきて、「サイドバーへは通常のボタン」「グローバルメニューへはグローバルメニューに溶け込む形の表示」をさせたい場合もあろうかと思い、ボタンを2種類作る方法を紹介しておきます(1つ目はこれまで紹介した方法のままです)

前述したfunctions.phpの内容を変更して追加します。変更するのは以下の部分です

/***** bbp profile lik button function *****/
function 独自関数名() {
$this_user = wp_get_current_user();
$user_url=bbp_get_user_profile_url($this_user->ID);

echo '<div class="bbp-plink-button"><a href="' .$user_url. '">Edit Your profile</a></div>';
}
add_shortcode('ショートコード名', '独自関数名');

上記の「独自関数名」にはもともと「ha_bbp_profile_link」というのが入っていましたが、これを複数使うことはできないため、任意の文字列(半角英数字とアンダーバーのみ使用可)へ変更します(2か所ありますので注意してください)

同時に「ha-profilelink」(ショートコードではこれを[]で囲む)も既に使用されていますので、別の文字列へ変更します。

さらに

<div class="bbp-plink-button">

の「bbp-plink-button」を任意の文字列に変更すれば、1つ目で追加したデザインは適用されなくなり、

<div class="bbp-plink-button">

</div>

を削除すれば、単純なリンク文字列だけが出力されるようになります。

あとは別のデザイン要素を書くなり、調整するなりすれば完成です。この要領でいくらでもパターンを作成できます。


今回のカスタマイズはbbPressの公式コーデックに掲載されているサンプルコードを基にショートコードとして任意の場所へ挿入できるようにしたものです。

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。