第3.6 べーた2回目くらいの WordBench Fukuokaでお話ししました「WP-Membersで作る会員制サイトについてと、StaticPressによる静的サイト生成」

とんこつラーメンわぷー

5月15日の水曜日に第3.6 べーた2回目くらいのWordBench Fukuokaでまたまたお話してきました。

会場はpaperboy&co. 福岡支社さんです。毎回ありがとうございます。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

INDEX

1. WP-Membersで作る会員制サイト

WordPressで会員制サイトを作る際にWP-Membersというプラグインを使った例をデモでお見せしました。

1-1. デモで使用したテーマ

twentytwelveを複製したwbfukokaテーマ
デモでは「twentytwelve」を複製した「wbfukoka」テーマを使用しました。

投稿詳細ページ

1-2. WP-Membersプラグインをインストールすると

検証にはWordPressバージョン 3.5.1、WP-Membersバージョン 2.8.2を使用しました。

WP-Membersメニュー
プラグインをインストールすると管理画面メニューの 設定 の中に WP-Members という項目が表示されるようになります。

WP-Members オプション
WP-Members を選択すると設定ページに遷移します。すると初期状態で 投稿記事をブロック にチェックが入っていることが分かります。

プラグイン適用後の投稿詳細ページ
この状態で管理画面からログアウトして、投稿の詳細ページを見てみると投稿記事の本文が表示されず ログインフォーム新規ユーザー登録フォーム が表示されています。

登録ユーザがログインしないと記事の内容を見ることができなくなりました。

1-3. 個別に投稿をブロックする

投稿記事をブロックを解除
先ほどチェックされていた 投稿記事をブロック のチェックを外して 変更を保存 ボタンを押します。
するとログインしてないユーザーでも投稿の詳細ページで投稿記事の本文が見ることができてしまいますが、個別に見せたくない投稿を選んでブロックする方法があります。

個別に投稿記事をブロック
投稿の登録・編集ページで WP-Members の項目があるので Block this post にチェックを入れると、その投稿記事はログインユーザしか見ることができなくなります。

WP-Members の項目が見当たらない場合は 表示オプション を選択して WP-Members にチェックを入れます。

1-4. 新規ユーザー登録とログイン

新規ユーザー登録フォーム
新規ユーザー登録を行ってログインをしてみましょう。

登録完了メッセージ
ユーザー登録を行うと登録したメールアドレスに登録完了のメッセージとパスワードが送られる仕組みになっています。
ただ今回はメールの送信出来ないローカル環境で試していますので、管理者ユーザでパスワードを変更してログイン可能にしました。

新規登録ユーザでログイン
新規登録したユーザでログインします。

ログイン後
ログインに成功すると投稿記事の本文を見ることが出来るようになったほか、ページ上部に AdminBar が表示され、プロフィールの編集や、ログアウトが行えるようになりました。

プロフィールを編集
プロフィールを編集 を選択するとWordPressの通常のユーザー情報の編集を行えるほか、WP-Membersの登録フォームから登録した 追加情報 の編集も行えます。

一般設定の新規ユーザーのデフォルト権限グループ
ちなみに新規登録で作成されるユーザの権限は管理メニューの 設定一般 から 新規ユーザーのデフォルト権限グループ の項目の権限で作成しているみたいです。

1-5. フィールド設定

フィールド設定
WP-Membersの設定ページの フィールド タブで登録フォームの項目を編集出来ます。

1-6. ダイアログ設定

ダイアログ設定
WP-Membersの設定ページの ダイアログ タブでユーザ登録時のエラーメッセージや登録完了メッセージを編集出来ます。

1-7. メール設定

メール設定
WP-Membersの設定ページの メール タブでユーザ登録完了時のメールの文章を編集出来ます。

1-8. 管理者が承認するまで登録後ログインできないようにする

承認登録
WP-Members設定ページで 承認登録 にチェックを入れて 変更を保存 ボタンを押します。

ユーザの承認
管理画面メニューの ユーザー の中の ユーザー一覧 を選択してユーザの上にマウスカーソルを持って行くと Activate というリンクが表示されます。このリンクをクリックしてユーザを承認しなければ、登録ユーザは勝手にログインすることはできません。

1-9. ショートコードでメンバーズページを設置

メンバーズページの作成

以下のショートコードを貼り付けることで、メンバーズページの設置が可能です。

[wp-members page="members-area"]

未ログイン時

メンバーズページで未ログイン時
メンバーズページでは、未ログイン時に ログインフォーム新規ユーザー登録フォーム が表示されます。

ログイン時

メンバーズページでログイン時
また、ログイン時には 登録情報の編集パスワード変更 が行えます。

1-10. ショートコードで新規ユーザー登録フォームを設置

会員登録ページの作成

以下のショートコードを貼り付けることで、新規ユーザ登録ページの設置が可能です。

[wp-members page="register"]

1-11. ウィジェットでログインフォームを設置

ログインフォームウィジェットの登録
管理画面メニューの 外観の の中の ウィジェット を選択し、WP-Members Login をサイドバーに登録してみます。

サイドバー
サイトバーにログインフォームが設置出来ました。

1-12. テーマ制作時の注意点

アイキャッチ画像を登録した場合
上の画面のキャプチャのようにアイキャッチ画像をテーマで表示している場合は、ログインしてない状態でも見ることが出来てしまいます。
これはWordPressのフックという機能を使って投稿記事の本文を消してるいて、アイキャッチ画像やカスタムフィールドなど本文外のデータに関しては非表示にならないためだと思われます。

このアイキャッチ画像をログインユーザーにしか見せたくない場合、例として以下のような実装を行ってみました。

content.php

<header class="entry-header">
    <?php //the_post_thumbnail(); ?>
    <?php if ( is_single() ) : ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>

content.php でアイキャッチ画像を表示している部分をコメント化します。

functions.php

// 投稿記事本文の前にアイキャッチ画像を連結させて表示させる
add_filter( 'the_content', 'hook_the_content', 0 ); 
function hook_the_content( $content ) {
    global $post;
    
    if( is_single() ) {
        $content =  get_the_post_thumbnail( $post->ID ) . $content;
    }
    
    return $content;
}

functions.php で投稿記事本文にフックして本文の前にアイキャッチ画像を連結します。

functions.php

三好さんにこんな風にも書けるんじゃないかなって教えて頂きました!wpmem_securify はプラグイン独自の関数です。

// 投稿記事本文の前にアイキャッチ画像を連結させて表示させる
add_filter( 'the_content', 'hook_the_content', 0 ); 
function hook_the_content( $content ) {
    global $post;
    
    return wpmem_securify( get_the_post_thumbnail( $post->ID ) ) . $content;
}

functions.php

加えて functions.php にお試しでこんなカスタマイズコードも入れてみましたよ。

// "購読者"にのみAdminBarを表示させない
add_action( 'init', 'hook_init' );
function hook_init() {
    if( !is_user_logged_in() ) return;
    
    $user = wp_get_current_user();
    if( in_array( 'subscriber', $user->roles ) ) {
        add_filter( 'show_admin_bar', '__return_false' );
    }
    
}

// "管理者"以外管理ページにアクセスさせない
add_action( 'admin_init', 'hook_admin_init' );
function hook_admin_init(){
    if ( !current_user_can( 'administrator' ) ) {
        wp_die( 'アクセスできません' );
    }
}

こちらの記事が参考になりました。ありがとうございます:)

2. StaticPressによる静的サイト生成

お次はStaticPressというプラグインを使った静的サイト生成のデモをお見せしました。

StatiPressメニュー
プラグインをインストールすると管理画面メニューの 設定 の中に StaticPress という項目が表示されるようになります。

StatiPress設定
StaticPress を選択すると設定ページに遷移します。静的サイト URL出力先ディレクトリ (ドキュメントルート) を入力して 変更を保存 ボタンを押します。

再構築開始
再構築 ボタンを押します。

再構築完了
静的ファイルの生成が開始されます。終了 が表示されたら再構築完了です。

出力されたファイル
静的ファイルが生成されました。

静的ファイルの参照
静的サイト URLにアクセスしてみます。

3. そのほか出た話題など

ブルートフォースアタック(総当たり攻撃)について

外部リンクの管理どうする?

  • 同じリンクが複数の固定ページに登場する。固定ページによって外部リンク一覧は変わったりする。
  • PHPファイルで管理する?
  • 配列に格納して独自テンプレートタグやショートコード?
  • カスタムメニューだと面倒。
  • 管理画面で編集できたら理想だがそこまでするか?

マルチサイトの画像アップロード時のURLについて

WordPress10周年記念パーティ

  • 福岡でもなにかやりますか!と話題に。

WordCamp Fukuoka

  • Campという名前だと制限が多いので違う名前でも良いかも?
  • 若い人たちに引っ張って行って貰いたい。

4. 6月は初心者向け、7月はコンタクトフォーム祭り!

6月は初心者向け勉強会!

スピーカーを募集中です。

7月はコンタクトフォーム祭り!

  • Contact Form 7(三好さん)
  • Trust Form(堀家さん)
  • MW WP Form(キタジマさん)

豪華メンバーでお送りする7月の勉強会、対談あり!?

『たら竹崎温泉に行ってカニを食べよう!』なんて話題も。

5. WordBench FukokaのTwitterアカウントが開設されました!

とんこつラーメンわぷー
@wbfukuoka

とんこつラーメンをすすってるマスコットキャラクター「わぷー」が今後のWordBench Fukuoka情報を流してくれるそうですよ!

6. 当日のTweetまとめ

7. 過去のWordBnech Fukuokaまとめ

  

共有やブックマークなど

3 Responses to “第3.6 べーた2回目くらいの WordBench Fukuokaでお話ししました「WP-Membersで作る会員制サイトについてと、StaticPressによる静的サイト生成」”

  1. […] 第3.6 べーた2回目くらいの WordBench Fukuokaでお話ししました「WP-Membersで作る会員制サイトについてと、StaticPressによる静的サイト生成」 – WebCake […]

  2. realkazuyana より:

    フォーラムにも書いたのですが、初心者に毛が生えた程度なもので、もし解れば教えていただきたいのですが。

    p-membersでユーザー未登録時にページを表示するとWhat’s New Generatorの表示のdivの「新着情報」がstyleタグが文字の後に表示されてしまいます
    タイトルが
    新着情報style=’background-color: #f5f5f5;color : #000000;’>
    と表示されます。 Wp-membersのphpのどこかに 「<」ないのではと探しましたが、見つかりませんでした。
    ログインした後ですとタグは表示されずに適切に表示されます。
    ちなみにログインページはHOMEとしてますがショートコードは
    [wp-members page="members-area"]
    [showwhatsnew]
    としています。register関係のphpの単純なバグではないかと思いますが、どなたか解決経験ありますでしょうか?よろしくお願いします。

  3. realkazuyana より:

    すいません先日投稿したものです。自己解決しました。What’s New Generatorの一部phpにやはり<が抜けた部分がありました。