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

公開日：2021(令和3)年5月3日／最終更新日： 2021(令和3)年4月27日

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

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

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

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

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

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

今回のカスタマイズでは
・テーマの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 」というプラグインを使うと良いでしょう。

Shortcode in Menus

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

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

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

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

前述した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」というのが入っていましたが、これを複数使うことはできないため、任意の文字列（半角英数字とアンダーバーのみ使用可）へ変更します（２か所ありますので注意してください）

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

さらに