顔認証wordpress対策

顔認証アプリ WordPress設置手順

なぜこの手順が必要か

WordPressは外部CDN（jsdelivr・unpkg等）からのJavaScriptを セキュリティ設定でブロックすることがあります。 face-api.jsとモデルファイルをWordPress自身のサーバーに置くことで この問題を完全に回避できます。

Step 1: face-api.js本体をダウンロード

ブラウザで以下のURLを開き「名前を付けて保存」:

 
 
https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js

保存ファイル名: face-api.min.js

Step 2: モデルファイルをダウンロード（3種類 計7ファイル）

以下の7ファイルをダウンロードしてください。 すべて同じフォルダに保存してください。

TinyFaceDetector（顔検出）

 
 
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-weights_manifest.json
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-shard1

FaceLandmark68（顔のランドマーク）

 
 
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_landmark_68_model-weights_manifest.json
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_landmark_68_model-shard1

FaceRecognition（顔認識）

 
 
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_recognition_model-weights_manifest.json
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_recognition_model-shard1
https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_recognition_model-shard2

Step 3: WordPressメディアライブラリにアップロード

3-1. FTPクライアント（FileZilla等）でサーバーに接続

以下のフォルダ構成でアップロード:

 
 
/wp-content/uploads/faceapp/
├── face-api.min.js
├── tiny_face_detector_model-weights_manifest.json
├── tiny_face_detector_model-shard1
├── face_landmark_68_model-weights_manifest.json
├── face_landmark_68_model-shard1
├── face_recognition_model-weights_manifest.json
├── face_recognition_model-shard1
└── face_recognition_model-shard2

3-2. WordPressのサイトURLを確認

WordPress管理画面 → 設定 → 一般 → 「サイトURL」を確認 例: https://example.com

Step 4: HTMLの2か所を自分のサイトURLに書き換え

face_recognition_wp.html の冒頭付近にある以下の2行を書き換えます:

 
 
// ↓ この行のURLを自分のサイトに変更
var FA_LIB_URL   = 'https://【サイトURL】/wp-content/uploads/faceapp/face-api.min.js';
var FA_MODEL_URL = 'https://【サイトURL】/wp-content/uploads/faceapp';

例（サイトURLが https://example.com の場合）:

 
 
var FA_LIB_URL   = 'https://example.com/wp-content/uploads/faceapp/face-api.min.js';
var FA_MODEL_URL = 'https://example.com/wp-content/uploads/faceapp';

Step 5: WordPressに貼り付け

書き換えたHTMLを Elementor「HTMLウィジェット」に貼り付けて完成。