Paid Membership Pro】会員証に画像・アバターを出力する方法

Paid Membership Pro

会員サイトを作るためのプラグインは複数ありますが、Paid Membership Proが機能的に多機能で使い勝手がよさそうなので使い始めています。

会員証をつくるために、有料プランに申込、「Paid Memberships Pro – Membership Card Add On」というプラグインを導入しました。

個人的にPaid Membership Proが素敵だなぁと思うのは、説明が充実していることです。

今回とてもシンプルだった会員証に、画像や写真を追加したいと思ったのですが、そうしたこともホームページ上にちゃんと実現方法が書いてあります。

https://www.paidmembershipspro.com/add-ons/pmpro-membership-card/

ただ、英語しかないので、日本語で備忘録として記しておきます

スタート地点はここです。
デフォルトのMembership cardを表示すると、物凄くシンプルです。

ここに、画像や会員個人の顔写真(アバター)を表示していきます。

固定の画像を出力する方法

固定の画像を設置する方法はとても簡単です
(出典:https://wordpress.com/support/featured-images/)

Membership Cardが表示される固定ページの「編集」をクリックし、Featured imageを設定します

ここに設定すれば、完了。
Membership Cardを見てみるとちゃんと画像が出力されていることが確認できます

会員各自の顔写真を出力する方法

続いて、会員証に個人の顔を表示する場合の方法です。

有料プラン限定記事の中で、具体的にカスタマイズする場合のソースコード等が貼られています。
有料プランの記事のソースコードをそのまま転載するのは筋違いなので、あくまで段取りだけを記載しておきます。

https://www.paidmembershipspro.com/customize-membership-card-wordpress/#method-1

PMPro Customizationsプラグインを作成する

カスタマイズするためのソースコードを貼り付ける必要があるのですが、まず貼り付ける場所を準備する必要があります。

こちらのページでは、2つのオプションが提示されていますが、1つ目のPMPro Customizationsのプラグインを作成する方法で進めました

  • Method 1: Create a Plugin for PMPro Customizations
  • Method 2: Use the Code Snippets Plugin

1.まずは、空のCustomizations pluginをダウンロードします

Download the blank customizations plugin (.zip)

https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/

2.WordPressの管理画面からプラグイン(ダウンロードしたファイル)を追加します

3.プラグインを有効化します

PMPro CustomizationsプラグインにRecipeをコピペする

1.会員限定記事から「Method 1: Adding Additional Content to Your Membership Card」の「the recipe」をコピーします

https://www.paidmembershipspro.com/customize-membership-card-wordpress/#method-1

2.WordPress管理ページの「プラグインファイルエディター」ページを開き、右上のプラグインの選択から「PMPro Customizations」を選択し、phpファイルに、1.で「コピ」したコードを「ペ」し、「ファイルを更新」をクリックします。これで必要なコピペは完了です

結果、こんな感じで、写真と画像を追加することができます

サイズがアンバランスだなぁというあたりはこれからいじっていければと思っています

コメント

タイトルとURLをコピーしました