wordpressのウィジェットにログイン・ログアウトフォームをプラグインなしキャプチャありで設置する
スポンサーリンク

ウィジェットにログイン・ログアウトする機能があれば便利だと思って作成してみました。

スポンサーリンク

実装

ここにあるコードをお使いのテーマのfunctions.phpに追記してください。
(/wp-content/themes/<使っているテーマ>/functions.php)

ウィジェットでショートコードを使えるようにする

このコードを加えることで、普通はできないショートコードでウィジェットが使えるようになります。

php コピー

//do shortcode in widget
add_filter('widget_text', 'do_shortcode' );

ウィジェットに表示するもの

ログインしていないときはログインフォームが、ログインしているときは名前とログアウトボタンが出現します。お好みで調節してください。

php コピー

//login form in widget
function login_widget() {

	$body = <<<HTML
<form class="my_form" name="my_login_form" id="my_login_form" action="" method="post">
<fieldset>
    <div>
        <label for="login_user_name">user name</label>
        <input id="login_user_name" name="user_name" type="text" required>
    </div>
    <div>
        <label for="login_password">password</label>
        <input id="login_password" name="user_pass" id="user_pass" type="password" required>
    </div>
    <div>
        <label>capcha</label>
	<br>
	<img id="captcha_widget" src="/securimage/securimage_show.php" alt="CAPTCHA Image">
    	<input name="capcha_code" type="text" size="10" maxlength="6" required/>
    	<a href="#" onclick="document.getElementById('captcha_widget').src = '/securimage/securimage_show.php?' + Math.random(); return false">Different Image</a>
    </div>
    <br>
    <p><a href='https://sukiburo.jp/member/register/'>register / 登録</a><p>
    <button type="submit" name="my_submit" class="my_submit_btn" value="login" style='margin-bottom: 10px;'>login</button>
</fieldset>
</form>
HTML;

	$logout_form = <<<HTML
<form class="my_form" name="my_logout_form" id="my_logout_form" action="" method="post">
	<button type="submit" name="my_logout" class="my_logout_btn" value="logout">logout</button>
</form>
HTML;

$user = wp_get_current_user();
$id = get_current_user_id();
if(is_user_logged_in()){
	echo "<h3>Hi, <a href='forums/users/$user->user_login'>$user->display_name</a></h3>";
	echo $logout_form;
} else {
	echo $body;
}

}

add_shortcode('login_widget', 'login_widget');

ログアウト機能を搭載

このコードを加えることで、ログアウトurlを見せることなくログアウトできます。

php コピー

//logont
add_action('after_setup_theme', function() {
    if ( isset( $_POST['my_logout'] ) && $_POST['my_logout'] === 'logout') {
        // ログインフォームからの送信があれば
        my_logout();
    }
});

//logout function
function my_logout() {
	wp_logout();
	exit;
	return;
}

「securimage」をダウンロード

キャプチャには「securimage」を使用します。

ここからダウンロードできます。

人によってやり方は違うかもしれませんが、ダウンロードしたら、wp-adminやwp-content, wp-imcludeがある階層に「securimage」の名前で保存してください。
私はパソコンにzipで保存して、Cyberduckを使ってFTPS経由で保存しました。
もちろん階層、名前は自由ですが、自分が載せたコードでは/securimageでアクセスするようにしています。
なのでそこを変えれば任意の階層、名前でも動きます。

仕上げ

全てできましたか?

あとはwidgetのカスタムHTMLにショートコード(下の文字を[]で囲って入れる)で

login_widget

と入れるだけです!

「更新に失敗しました」と出る場合
  1. 先ほど貼り付けた
    add_shortcode('register', 'register');
    add_shortcode('login', 'login');

    add_shortcode('registers', 'register');
    add_shortcode('logins', 'login');
    と一度変える。
    二つあるうちの前を変えてください。変えれば文字は何でもいいです。
  2. ショートコードで[]の中でlogin, registerをはる。記事、固定ページ保存。
  3. add_shortcode('register', 'register');
    add_shortcode('login', 'login');
    に戻す

とりあえず先にショートコードの文字列を決定して、そのあとにコードの文字を変えればいいみたいです。

スポンサーリンク

関係する記事

securimageをカスタマイズしたい

カスタマイズできるところをのせました。

https://sukiburo.jp/code/php/customize-securimage/

以上です。ご覧いただきありがとうございました。

スポンサーリンク
おすすめの記事