韓国型 WordPress 掲示板プラグの1つであるManboardを使用している場合は、Manboardが提供する機能を使用してサイトの上部にログイン/ログアウトボタンを表示できます。マンボード文書のテーマの上部にログイン/ログアウトボタンを追加する方法を説明しています。マンボードで提示されたコードを活用して GeneratePress テーマ와 Astra テーマ 上部にログイン/ログアウトボタンを追加する方法を見てみましょう。マンボードを使用しない場合の基本 WordPress 関数を使用してテーマの上部にログイン/ログアウトボタンを表示する方法についても説明します。
サイトの上部にログイン/ログアウトメニューを表示する（feat。マンボード）
たとえば、マンボード掲示板を使用していて非ログインユーザー（ゲスト）が訪問した場合、サイトの上部に ログイン|会員登録 メニューを表示できます。
ログイン時には、テーマの上部に歓迎の挨拶（例：ホンギルドン様の訪問を歓迎します！）と会員情報|アウトアウトメニューを表示します。
これに関連するコードがマンボードの「テーマの上部にログイン/ログアウトボタンを作成する「文書に記載されています。
そのコードを引用すると、次のようになります。
<?php
$html = '';
$html .= '<div class="container" style="text-align:right;background-color:#FFF;color:#555;font-size:12px;">';
if(mbw_is_login()){
if(mbw_get_user("fn_user_name")!="") $html .= '<span class="text-user-welcome">'.mbw_get_user("fn_user_name").'님의 방문을 환영합니다!</span> ';
$html .= '<a href="'.mbw_get_user_url("user_info").'" ><span class="btn-user-info">회원정보</span></a><span style="padding:0 10px;font-size:11px;vertical-align:1px;">|</span>';
$html .= '<a href="'.site_url().'/?mb_user=logout" ><span class="btn-user-logout">로그아웃</span></a>';
}else{
$html .= '<a href="'.mbw_get_user_url("login").'" ><span class="btn-user-login">로그인</span></a><span style="padding:0 10px;font-size:11px;vertical-align:1px;">|</span>';
$html .= '<a href="'.mbw_get_user_url("register").'" ><span class="btn-user-join">회원가입</span></a>';
}
$html .= '</div>';
echo $html;
?>上記のコードをテーマのheader.phpファイルに追加すると、ログイン/ログアウトボタンが右揃えで表示されます。
コードをショートコードに変換する
マンモードで紹介するコードは、PHPコードをheader.phpファイルに直接追加するように案内しています。これよりもショートコード（shortcode）に変換するとテーマ エレメン などのページビルダーで、必要な場所に短縮コードを追加してログイン/ログアウトメニューを表示できます。
チャイルドテーマを作成し、チャイルドテーマ内の関数ファイル（funcitons.php）に次のコードを追加します。
/* 망보드 사용 시 테마의 상단에 로그인/로그아웃 메뉴 표시하기 */
function custom_user_greeting_shortcode() {
$html = '';
$html .= '<div class="mb-container">';
if(mbw_is_login()){
if(mbw_get_user("fn_user_name") != "") {
$html .= '<span class="text-user-welcome">' . mbw_get_user("fn_user_name") . '님의 방문을 환영합니다!</span> ';
}
$html .= '<a href="' . mbw_get_user_url("user_info") . '"><span class="btn-user-info">회원정보</span></a><span class="mb-separator">|</span>';
$html .= '<a href="' . site_url() . '/?mb_user=logout"><span class="btn-user-logout">로그아웃</span></a>';
} else {
$html .= '<a href="' . mbw_get_user_url("login") . '"><span class="btn-user-login">로그인</span></a><span class="mb-separator">|</span>';
$html .= '<a href="' . mbw_get_user_url("register") . '"><span class="btn-user-join">회원가입</span></a>';
}
$html .= '</div>';
return $html;
}
add_shortcode('user_greeting', 'custom_user_greeting_shortcode');チャイルドテーマ内のスタイルシートファイル（style.css）または WordPress 通知パネル»カスタマイズ»追加CSSに適切なコードを追加して、トップログイン/ログアウトメニューのスタイルを設定します。例：
.mb-separator {
padding: 0 10px;
font-size: 11px;
vertical-align: 1px;
}GeneratePress テーマのトップバーウィジェットエリアにログイン/ログアウトメニューを表示する
GeneratePress テーマでは、トップバーウィジェットエリアを使用してサイトの上部に必要な要素を表示できます。 デザイン » ウィジェットに移動します。
トップバーウィジェットエリアに カスタムHTML ブロックを追加し、次のショートコードを入力します。
[user_greeting]カスタムHTML ブロックの代わりに ショートコード ブロック 段落 ブロックを使用することもできます。 段落 ブロック ショートコード ブロックを使用する場合は意図せずタグが挿入され、スタイルを取り戻す必要がある面倒です。 カスタムHTML ブロックを使用すると不要タグは挿入されません。
保存すると、上部にログイン/ログアウトメニューが表示されることを確認できます。上部トップバーのテキストの色、背景色、余白などの設定はカスタマイズすることで可能です。
トップバーカラー設定：
トップバーレイアウト：
保存してサイトを更新すると、トップバーにログイン/ログアウトメニューが表示されます。マンボードがインストールされていないと、致命的なエラーが発生します。そのような場合、以下の「ページの上部に WordPress デフォルトのログイン/ログアウトメニューを表示する「部分を参考にしてみてください。
Astra テーマのトップバーウィジェットエリアにログイン/ログアウトメニューを表示する
アストラテーマを使用している場合は、ヘッダービルダーの上部ヘッダー部分にショートコードを追加できます。
HTML要素またはウィジェット要素を使用してショートコードを追加できます。
ヘッダーのトップバーのレイアウトはCSSを使用して調整できます。 基本的なCSSを理解すれば、ある程度必要に応じてスタイルを調整できるはずです。
ページの上部に WordPress デフォルトのログイン/ログアウトメニューを表示する
マンボードを使用しない場合 WordPress デフォルトのログイン/ログアウトリンクにリンクするメニューを表示できます。上記のショートコード関数の代わりに、次のコードをチャイルドテーマ内の関数ファイルに追加してテストしてください。
/**
* Shortcode to display user greeting and login/logout links.
*
* 이 숏코드는 ユーザー 환영 인사와 로그인/로그아웃 링크를 표시합니다.
*/
function custom_user_greeting_shortcode() {
$html = '';
$html .= '<div class="mb-container">'; // Create a container div with the class "mb-container".
if (is_user_logged_in()) {
$current_user = wp_get_current_user(); // Get the current logged-in user's information.
// If the user's display name is not empty, display a welcome message.
if ($current_user->display_name != "") {
$html .= '<span class="text-user-welcome">' . esc_html($current_user->display_name) . '님의 방문을 환영합니다!</span> ';
}
// Display the profile link and logout link for logged-in users.
$html .= '<a href="' . esc_url(admin_url('profile.php')) . '"><span class="btn-user-info">회원정보</span></a><span class="mb-separator">|</span>';
$html .= '<a href="' . esc_url(wp_logout_url()) . '"><span class="btn-user-logout">로그아웃</span></a>';
} else {
// Display the login and registration links for guests.
$html .= '<a href="' . esc_url(wp_login_url()) . '"><span class="btn-user-login">로그인</span></a><span class="mb-separator">|</span>';
$html .= '<a href="' . esc_url(site_url('/wp-login.php?action=register&redirect_to=' . get_permalink())) . '"><span class="btn-user-join">회원가입</span></a>';
}
$html .= '</div>'; // Close the container div.
return $html; // Return the generated HTML.
}
add_shortcode('user_greeting', 'custom_user_greeting_shortcode'); // Register the shortcode.ページの上部に WooCommerce ログイン/ログアウトメニューを表示する
WooCommerce モールを運営している場合は、次のコードを適用できます。
/**
* Shortcode to display user greeting and login/logout links with WooCommerce integration.
*
* 이 숏코드는 WooCommerce 통합을 통해 ユーザー 환영 인사와 로그인/로그아웃 링크를 표시합니다.
*/
function custom_user_greeting_shortcode() {
$html = '';
$html .= '<div class="mb-container">'; // Create a container div with the class "mb-container".
if (is_user_logged_in()) {
$current_user = wp_get_current_user(); // Get the current logged-in user's information.
// If the user's display name is not empty, display a welcome message.
if ($current_user->display_name != "") {
$html .= '<span class="text-user-welcome">' . esc_html($current_user->display_name) . '님의 방문을 환영합니다!</span> ';
}
// Display the profile link and logout link for logged-in users.
$html .= '<a href="' . esc_url(get_permalink(get_option('woocommerce_myaccount_page_id'))) . '"><span class="btn-user-info">회원정보</span></a><span class="mb-separator">|</span>';
$html .= '<a href="' . esc_url(wp_logout_url()) . '"><span class="btn-user-logout">로그아웃</span></a>';
} else {
// Display the login and registration links for guests.
$html .= '<a href="' . esc_url(wc_get_page_permalink('myaccount')) . '"><span class="btn-user-login">로그인</span></a><span class="mb-separator">|</span>';
$html .= '<a href="' . esc_url(wc_get_page_permalink('myaccount')) . '"><span class="btn-user-join">회원가입</span></a>';
}
$html .= '</div>'; // Close the container div.
return $html; // Return the generated HTML.
}
add_shortcode('user_greeting', 'custom_user_greeting_shortcode'); // Register the shortcode.
コメントを残す