WPCodeの使い方とLite・Proの違いを初心者向けにわかりやすく解説！

WPCodeは、WordPressサイトにコードスニペット（プログラミングにおけるコードの断片）を安全かつ簡単に追加できる、人気の無料プラグインです。

本記事では、WPCodeの使い方やLite（無料）とPro（有料版）の違いなどを、実際の画面とともにわかりやすく解説していきます。

WPCodeとは？

WPCode（旧名：Insert Headers and Footers）は、PHPやJavaScriptなどのカスタムコードを安全に追加・管理できるWordPressプラグインです。

テーマのfunctions.phpを直接編集することなく、コードを追加できるのが大きな利点です。安全性と汎用性の高さから、初心者から開発者まで幅広く利用できます。

WPCode

メリット

• テーマファイルを編集せずにコードを安全に追加：テーマ更新でコードが消える、サイトが真っ白になるなどの問題を回避。万が一テーマが壊れても、WPCodeに保存されたスニペットは残る。
• スニペットライブラリ（テンプレート集）から簡単に追加：「コメント機能の無効化」や「SVGのアップロード許可」など、100種類以上のよく使われるコードがすぐ使える。
• コード生成機能 & AI支援：フォーム入力でコードを自動生成したり、AIに最適なコードを書かせたりできる。手動で完全オリジナルのコード編集も可能。
• スニペットの詳細な制御：投稿ページだけ・管理者だけ・モバイルのみ・WooCommerceの商品ページだけ…といった条件を指定してコードを自動実行可能。
• ヘッダー／フッターに簡単にスクリプト追加：Googleアナリティクスや広告タグなど、サイト全体に影響するスクリプトの追加が簡単。

WPCodeは、コード編集に不安がある方でも、簡単にカスタマイズできるおすすめのプラグインです。

デメリット

• セキュリティ設定との相性問題：コードを保存した際、サーバー側のWAF（Webアプリケーションファイアウォール）の設定により、エラーが出ることがある。一度WAFをOFFにしてからコードを編集し、再度ONにする必要あり。
• セキュリティリスクを伴う使い方ができてしまう：悪意のあるコードや危険な関数も登録可能。複数人で管理している場合や、セキュリティ意識が低いとリスクが増す。
• 管理画面が煩雑になることがある：スニペットをたくさん登録していくと、どれがどの目的か分かりづらくなる。
• 他のプラグインやテーマ機能との重複・干渉：構造化データ、広告表示、アクセス解析タグなど、他の専用プラグインでも同じことができるため、二重挿入・競合の可能性が出てくる。

WordPressテーマTCDでは、TCDテーマオプションからサイト全体やページ別にコードを追加可能です。WPCodeと重複・干渉しないよう設定に注意しましょう。

WPCode LiteとProの主な違い

Lite（無料版）の主な機能

• コードの安全管理：HTML／CSS／JS／PHPのスニペットを安全に管理できる。
• カスタマイズの基本機能：条件付き表示や自動挿入など、基本的な機能はほぼ網羅。
• スニペットライブラリ：登録されている100以上のコードをそのまま使える。

Pro（有料版）の主な機能

• クラウドスニペット機能：自分だけのコードライブラリで再利用可能。
• リビジョン（履歴）管理：過去のバージョンとの差分比較や復元が可能。
• AIコードジェネレータ：説明文だけでコードを自動生成・更新できる。
• 細かな条件設定：特定ページやデバイス別、WooCommerceフックに応じてスニペット出し分け可能。
• ユーザー権限制御：チームやクライアントとの共同管理が可能。

WPCodeの使い方

インストール方法

WordPressにログイン後、管理画面から以下の操作でインストールします。

1. プラグイン > プラグインを追加
2. WPCodeを検索
3. 今すぐインストール > 有効化

インストール後、WordPressの管理画面左メニューに以下のような項目が追加されます。

• コードスニペット：登録済みのスニペットを一覧表示し、有効・無効の切り替えや編集できる。
• ＋スニペットを追加：HTML、CSS、PHP、JavaScript、ショートコードなど新しいスニペットを追加可能。
• ヘッダーとフッター：headタグやbody終了タグ直前にコードを挿入したいときに使用します。
• コンバージョンピクセル（有料版）：広告やアナリティクス用のトラッキングピクセル（Metaピクセルなど）を簡単に設定できる機能。
• ライブラリ：WPCode公式が提供する事前登録済みスニペット集。目的に合ったコードを選んでワンクリックで追加可能。
• ファイルエディター（有料版）：テーマファイルやプラグインファイルを直接編集できるエディター。
• Search & Replace：同社によるサイト内の文字列を一括置換するプラグイン「Search & Replace Everything」の案内とインストール。
• Backups：同社によるバックアップ作成プラグイン「Duplicator」の案内とインストール。
• ツール：スニペットのインポート／エクスポートなど、補助的な機能や設定。
• 設定：WPCode全体の基本設定画面。プラグインのメニューを「ヘッダーとフッター」のみを表示、ダークモードのON/OFFなどの設定が可能。
• プロ版にアップグレード：有料版（Pro）へのアップグレード案内と購入リンク。

コードスニペット

WPCodeのメニューにある「コードスニペット」を選択すると、あらかじめ用意されたコードを追加するか、手動でコードを追加・管理できるメイン機能です。

スニペットの追加手順は以下のとおりです。

1. 左側のメニューから「コードスニペット」を選択
2. 「新規追加」をクリック

「スニペットを追加」のページに切り替わり、「スニペットライブラリー」のタブが自動的に開きます。

上部の各タブでは、以下のような操作や設定ができます。

• スニペットライブラリー：公式テンプレート集からスニペットを追加。カスタムコードを手動またはAI（有料版）でも作成可能。
• スニペットジェネレータ：選択式フォームに入力するだけのスニペット編集機能
• プラグインスニペット：インストール済みプラグインと連携して使える、専用スニペットの一覧
• マイライブラリ（有料版）：自分で過去に保存したスニペットを一覧表示

スニペットの追加方法

ライブラリーの左のカテゴリーメニューから常用スニペットを探すことができます。カテゴリーページを開くと、右側にスニペット一覧が表示されます。

また、「カスタムコード」からオリジナルのスニペットを入力できます。

追加するには、使いたいスニペットの上にカーソルを合わせ、表示された「スニペットを追加」などのボタンをクリックします。

以下のスニペットのコードタイプを選択します。

• HTML：テキスト、画像、表などを挿入できるコードを追加。
• テキスト：プレーンテキスト（文章や文字列）を登録・再利用できるスニペット。カスタム通知文や定型文に。
• ブロック（有料版）：ブロックエディター（Gutenberg）の投稿画面で、再利用可能なブロックの自作機能
• CSS：ウェブサイトのデザインを整えるコードの追加。テーマを編集せずに調整可能。
• SCSS（有料版）：Sass記法に対応したコードを使える。
• JavaScript：ツール、クイズ、ゲームなどを作成できるコードをサイトに追加。
• PHP：WordPressの様々なカスタマイズや拡張機能を安全に実装。
• ユニバーサル：複数の言語を混ぜるなど任意のコードを自由に記述可能。幅広い用途に使える汎用スニペットタイプ。

選択後、常用スニペットは、画面上にタイトルとコードがあらかじめ入力された状態で表示されます。

カスタムコードを作成する場合は、スニペットのタイトルとコード内容を自由に入力できます。入力ミスがある場合は、該当行にエラー表示（赤い✕）が付きます。

下にスクロールすると、さらに任意の設定項目が表示されます。

• 自動挿入：スニペットを挿入するページや場所を指定可能。ただし、コードに表示箇所を指定してある場合、「あらゆる場所で実行」にして確認・修正が必要。
• ショートコード：先に画面右上の「更新」をクリックすると、自動的にスニペットのショートコードが表示。サイト内の任意の箇所に貼り付けて使用する。任意で「属性」の追加や、「Locations Used」でスニペットの使用箇所の確認も可能。

• デバイスタイプ：スニペットの読み込み場所を全てのデバイス、デスクトップのみ、モバイルのみで選択可能。
• スマートな条件付きロジック：ロジックを有効化すると、スニペットを自動挿入するページを制限できる。

ページ最下部には、基本情報が表示され、以下の項目を設定できます。

• タグ：スニペットのグループ分け。
• 優先順位：小さい数値に設定しているスニペットを優先的に実行（初期設定は10）。
• メモ：登録したスニペットごとのメモ。

その後、右上の「無効」を「有効化」に切り替えてから「更新」をクリックしてください。「更新」だけではコードは実行されませんのでご注意ください。

以下、実際にスニペットを登録して動作させた画像です。全ての投稿のタイトル下に、枠線と文が表示されました。

スニペットジェネレータ

WPCodeのスニペットジェネレータは、コードの知識がなくても、フォーム入力だけでカスタムスニペットを作成できる機能です。

主に、検索エンジンに内容を正しく伝えるための「構造化データ」関連のスニペットが多い傾向があります。構造化データはSEO対策だけでなく、近年注目されているLLMO対策にも効果があると考えられています。

参考記事：構造化データ マークアップとは | Google 検索セントラル

スニペットジェネレータは、以下の手順で作成できます。

1. スニペットジェネレータのタブをクリック
2. カテゴリーから生成できるスニペットを探す
3. 使いたいスニペットを選択

「情報」のページが開き、概要が表示されます。今回は、「Article Schemaジェネレータ」の画面で解説します。こちらは、記事の構造化データを生成する機能です。

ジェネレータの左メニューから各ページを開き、設定を行います。入力後、各ページ内に「コードを更新」というボタンが表示されていますので、必ずクリックして更新してください。

下にスクロールし、「スニペットを使用」または「コードをコピー」を押して、使用します。

「スニペットを使用」をクリックした場合は、コードを編集できます。今回の構造化データ（JSON-LD）はHTML内に記述されるため、コードタイプは「HTMLスニペット」で問題ありません。

前述した「スニペットの追加」と同じ手順で入力し、最後に「無効」を「有効化」し、「更新」を押したら完了です。

プラグインスニペット

プラグインスニペットのタブを開くと、同社のWordPressプラグインの機能を拡張・カスタマイズするためのコードを、簡単に追加可能です。

利用方法としては、使いたいプラグインのインストールボタンをクリックします。

インストールしたプラグインの設定画面になりますので、任意で入力します。その後、再び次の手順で操作します。

1. コードスニペット > ＋スニペット追加
2. プラグインスニペットをクリック
3. インストールしたプラグイン用のスニペットを選択

同様にスニペット編集画面となりますので、必要に応じてタイトルとコードの編集をします。右上の「無効」を「有効化」し、「更新」をクリックして完了です。

ヘッダーとフッター

WPCodeから「ヘッダーとフッター」を選択すると、以下の3箇所にコードを入力可能です。ただし、国産のWordPressテーマでは、同様の設定項目があることが多いため、重複しないよう注意が必要です。

設定方法としては、以下の手順で行います。

1. コードスニペット > ヘッダーとフッター
2. 任意の箇所にコードを追加
3. 「変更を保存」をクリック

よくある質問（FAQ）

Q. functions.phpに直接書くのと何が違うの？

A. WPCodeを使うと、テーマのアップデートでコードが消える心配がなく、安全に管理できます。

Q. 501エラーが出る

A. PHPスニペットを更新すると、「501エラー（Not Implemented）」が表示される場合、多くはサーバー側のWAF（Webアプリケーションファイアウォール）が原因です。

必要なスニペットを追加したい場合、一度WAFをOFFにしてコードを入力した後、再度ONにしましょう。

Q. WPCodeが動かない

A. キャッシュやプラグインの競合が原因の可能性があります。キャッシュの削除や、他のプラグインの無効化を行いましょう。

まとめ

WPCodeを活用すれば、安全に複雑なカスタマイズができ、サイトトラブルのリスクも大幅に軽減されます。コードに不安がある初心者の方でも、安心して使えるのが魅力です。

まずは無料版から使い始めて、必要に応じてPro版へのアップグレードも検討してみましょう。