Zenn
🐕

WP-Membersを触り始めた（2022年12月7日業務報告）

2022/12/07に公開
CSS
HTML
PHP
tech

上の階層に戻るためのリンク設定

<a href="https://〜"></a>

通常はhref=の後ろにURLなどを入れますが、同じサイト内ですぐ上の階層を指定したい場合は、以下の書き方でURLを省略できます。

<a href="../"></a>

さらに上の階層に戻る場合は

<a href="../../"></a>

と、../を重ねることで２つ上の階層を指定できます。
 

一覧に戻るボタンを実装

一覧に戻るボタン

.button a {
    display: flex; /* テキストと矢印を横並びにして、高さを作るため */
    justify-content: center; /* flexボックス中央寄せ */
    align-items: center; /* flexボックスの高さ中央寄せ */
    margin: 0 auto; /* 要素自体の中央寄せ */
    width: 240px; /* ボタンの横幅 */
    height: 80px; /* ボタンの高さ */
    background-color: #cccccc; /* ボタン背景色 */
    border: 3px solid #aaaaaa; /* ボタンの枠線 太さ 種類 色 */
    border-radius: 50vh; /* ボタン両端の丸み */
    transition: 0.3s; /* マウスオーバー時の変化の速度 */
}

.button a::after {
    content: ''; /* 疑似要素で線を書く場合に必要 */
    width: 10px; /* 線の長さ */
    height: 10px; /* 線の高さ */
    border-top: 3px solid #666; /* 上辺の線 太さ 種類 色 */
    border-left: 3px solid #666; /* 左辺の線 太さ 種類  色 */
    transform: rotate(45deg); /* 疑似要素を45°傾ける これで「 が ∧ になる*/
    transition: 0.3s; /* マウスオーバー時の変化の速度 */
    margin-left: 20px; /* テキストとの間に空白を作る */
}

.button a:hover {
    background-color: #333333; /* マウスオーバー時の背景色 */
}

.button a:hover::after {
    border-top: 3px solid #f2f2f2; /* マウスオーバー時に線の色を変える */
    border-left: 3px solid #f2f2f2; /* マウスオーバー時に線の色を変える */
    transform: translateY(-5px) rotate(45deg); /* マウスオーバーで矢印の位置を上にずらす */
}

 

サイトタイトルが表示されていない問題

<title><?php wp_title(‘|’, true, ‘right’); ?></title>

<head>タグに書かれた上記のコードだけだとトップページのタイトルが出力されないことがわかりました。
 
以下の記述に変更すると表示されるようになります。

<title><?php bloginfo('name'); wp_title('|', true, 'left'); ?></title>

 

会員管理が出来るサイト制作

WP-Members Membershipの導入

Wordpressで会員管理が出来るようにするためプラグイン「WP-Members Membership」を導入
 

ログイン後に画面をリダイレクトさせる

funcion.phpに以下の記述を追加するとログイン後に別のページを表示させることができます。

// ログイン時にリダイレクト
add_filter( 'wpmem_login_redirect', 'my_login_redirect', 10, 2 );
function my_login_redirect( $redirect_to, $user_id ) {
    return '../home'; /* ←転送させたい宛先を指定 */
}

 

購読者権限のユーザーがログインしたときにはWordpressの管理メニューを表示させない

funcion.phpに以下の記述を追加すると購読者は管理メニューを非表示にできます。

//購読者がログイン時に管理バーを表示させない
function my_function_admin_bar($content) {
 return ( current_user_can("administrator") ) ? $content : false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

 

ユーザー情報を表示するショートコード

https://rocketgeek.com/plugins/wp-members/docs/shortcodes/field-shortcodes/
ある程度はヘルプで紹介していますが、自分で追加したフィールドなどの場合を解説します。

基本の形は、、、

[wpmem_field メタ値]

です。

プラグインのフィールド設定でメタキーが指定されていたり、自分で作成したものなら自分で指定しますが、それをwpmem_fieldの後ろにつけてあげればOKです。
フィールド設定

例えば、郵便番号の場合は、

[wpmem_field billing_postcode]

となります。
 

メモ

  • 「 ∧ 」と「 ∨ 」の出し方
    「上向き矢印」とか「山型記号」とかで検索する人も多そうなこの記号の出し方
     
    ∧ ＝ "かつ"で変換
    ∨ ＝ "または"で変換

Discussion