WordPressでサイトを運営していると、「ここにちょっとしたデザイン（CSS）を追加したい」「Googleアナリティクスのコードを貼り付けたい」という場面が出てきますよね。
通常、これらはテーマのファイルを直接書き換えたり、functions.php という重要なファイルを編集したりする必要があります。しかし、一歩間違えると「画面が真っ白になってサイトが動かない！」という大惨事になりかねません。
そこでおすすめなのが、コードを安全かつ簡単に管理できる無料プラグイン「WPCode」です。本記事では、初心者の方に向けてWPCodeの使い方やメリット・デメリットを分かりやすく解説します！
WPCodeとは？（コードスニペットって何？）
WPCodeは、WordPressに「コードスニペット」を安全に追加・管理できる人気のプラグインです。
💡「コードスニペット」とは？ プログラミングにおける「短いコードの断片（パーツ）」のことです。例えば、「特定の文字を赤くする」「特定の機能をオフにする」といった、ちょっとしたカスタマイズ用のコードを指します。
通常はテーマの裏側にあるコードを触る必要がありますが、WPCodeを使えば、管理画面の分かりやすいフォームにコピペするだけで安全に反映させることができます。
WPCodeのメリット・デメリット
非常に便利なプラグインですが、導入前に良い点と注意点を押さえておきましょう。
◯ メリット
- テーマを直接編集しないから安全！ テーマのファイルを直接書き換えないため、テーマがアップデートされてもカスタマイズしたコードが消えません。万が一コードに記述ミスがあっても、サイト全体が壊れるリスクを最小限に抑えられます。
- 便利な「テンプレート（ライブラリ）」が豊富 「コメント機能を無効化する」「SVG画像をアップロードできるようにする」など、よく使われる100種類以上のコードがあらかじめ用意されており、ワンクリックで導入できます。
- 「このページだけ動かす」といった細かい設定が可能 「スマホのときだけ実行する」「特定の記事ページだけで動かす」といった、高度な条件切り替えがボタン一つで設定できます。
- ヘッダー・フッターへのコード挿入が超簡単 Googleアナリティクスや各種広告の計測タグなど、サイト全体に影響するスクリプトを「指定の枠に貼り付けるだけ」で設置できます。
✕ デメリット（注意点）
- サーバーのセキュリティ設定（WAF）と衝突することがある コードを保存しようとした際、サーバー側のセキュリティ機能（WAF）が「危険な操作をされている！」と勘違いして、エラー（501エラーなど）を出すことがあります。※対処法は後述します。
- 管理画面がごちゃつく可能性がある 便利だからといって、あれもこれもとコードを登録しすぎると、「どれが何のコードだったか」分からなくなることがあります。
- 他のプラグインとの機能重複に注意 広告表示やアクセス解析タグの設置など、他のプラグインやテーマ自体の機能でも同じことができる場合、二重でコードが挿入されてしまう（競合する）可能性があります。
【比較】無料版（Lite）と有料版（Pro）の違い
WPCodeには無料の「Lite」と、高機能な有料の「Pro」があります。基本的には無料版（Lite）だけで十分すぎるほどのカスタマイズが可能ですが、主な違いをまとめました。
| 機能 | 無料版（Lite） | 有料版（Pro） |
| 対応コードの種類 | HTML, CSS, JS, PHP, テキスト | 左記すべて + SCSS やブロック自作 |
| 条件付き表示 | 基本的な条件設定 | ページ単位・デバイス別など高度な制御 |
| 履歴（リビジョン）管理 | ✕（保存したら上書き） | ◯（過去の状態に戻せる） |
| AIによるコード生成 | ✕ | ◯（指示を出すだけでAIがコード作成） |
| 価格 | 無料 | $99/年 〜 |
WPCodeの導入とメニュー解説
1. インストール方法
WordPressの管理画面から、以下の手順でインストール・有効化します。
- 「プラグイン」＞「新規プラグインを追加」 をクリック
- 検索窓に「WPCode」と入力
- 該当のプラグインが表示されたら「今すぐインストール」をクリックし、そのまま「有効化」します。
有効化すると、管理画面の左メニューに「コードスニペット」という項目が追加されます。
インストール後、WordPressの管理画面左メニューに以下のような項目が追加されます。
- コードスニペット：登録済みのスニペットを一覧表示し、有効・無効の切り替えや編集できる。
- ＋スニペットを追加：HTML、CSS、PHP、JavaScript、ショートコードなど新しいスニペットを追加可能。
- ヘッダーとフッター：headタグやbody終了タグ直前にコードを挿入したいときに使用します。
- コンバージョンピクセル（有料版）：広告やアナリティクス用のトラッキングピクセル（Metaピクセルなど）を簡単に設定できる機能。
- ライブラリ：WPCode公式が提供する事前登録済みスニペット集。目的に合ったコードを選んでワンクリックで追加可能。
- ファイルエディター（有料版）：テーマファイルやプラグインファイルを直接編集できるエディター。
- Search & Replace：同社によるサイト内の文字列を一括置換するプラグイン「Search & Replace Everything」の案内とインストール。
- Backups：同社によるバックアップ作成プラグイン「Duplicator」の案内とインストール。
- ツール：スニペットのインポート／エクスポートなど、補助的な機能や設定。
- 設定：WPCode全体の基本設定画面。プラグインのメニューを「ヘッダーとフッター」のみを表示、ダークモードのON/OFFなどの設定が可能。
- プロ版にアップグレード：有料版（Pro）へのアップグレード案内と購入リンク。
2. 主要メニューでできること
上記のようにメニューを開くと色々な項目がありますが、初心者が主に使用するのは以下の3つです。
- コードスニペット：登録したコードの一覧。ここで有効・無効の切り替えや編集を行います。
- ＋スニペットを追加：新しいコード（CSSやPHPなど）を新しく登録する画面です。
- ヘッダーとフッター：アクセス解析タグなどをサイト全体に一発で挿入したいときに使います。
実際にコードを追加してみよう！
オリジナル、またはネットで見つけたカスタマイズ用のコードを追加する手順です。
- 「コードスニペット」＞「＋スニペットを追加」 を選択
- 画面が開いたら、自分で1からコードを書く場合は「カスタムコード（独自のコードを追加）」を選びます。
コードの入力と設定
画面が切り替わったら、以下のステップで設定を進めます。
- タイトルを入力（例：「全記事のタイトル下に枠線を表示」など、後から見て分かりやすい名前）
- コードタイプを選択（追加したいコードに合わせて
CSSやPHP、HTMLなどを選びます） - コードプレビューの枠内にコードを貼り付ける（記述ミスがあると、左側に赤い✕マークが出ます）
⚠️ 超重要ステップ！ コードを入力・保存しただけではサイトに反映されません。画面右上にある**「無効」というスイッチを「有効化」に切り替え、その横の「更新」ボタンをクリック**することで初めてコードが作動します。
さらに細かい設定（任意）
下へスクロールすると、さらに便利な設定が行えます。
- 自動挿入：基本は「あらゆる場所で実行」でOKですが、特定の場所だけで動かしたい場合はここで指定します。
- デバイスタイプ：すべてのデバイス、パソコンのみ、スマホのみ、から選択可能です。
- スマートな条件付きロジック：これをONにすると、「特定のカテゴリーの記事だけにこのコードを適用する」といった細かな出し分けができます。
「スニペットを追加」のページに切り替わり、「スニペットライブラリー」のタブが自動的に開きます。
上部の各タブでは、以下のような操作や設定ができます。
- スニペットライブラリー：公式テンプレート集からスニペットを追加。カスタムコードを手動またはAI（有料版）でも作成可能。
- スニペットジェネレータ：選択式フォームに入力するだけのスニペット編集機能
- プラグインスニペット：インストール済みプラグインと連携して使える、専用スニペットの一覧
- マイライブラリ（有料版）：自分で過去に保存したスニペットを一覧表示
スニペットの追加方法
ライブラリーの左のカテゴリーメニューから常用スニペットを探すことができます。カテゴリーページを開くと、右側にスニペット一覧が表示されます。
また、「カスタムコード」からオリジナルのスニペットを入力できます。
追加するには、使いたいスニペットの上にカーソルを合わせ、表示された「スニペットを追加」などのボタンをクリックします。
以下のスニペットのコードタイプを選択します。
HTML：テキスト、画像、表などを挿入できるコードを追加。- テキスト：プレーンテキスト（文章や文字列）を登録・再利用できるスニペット。カスタム通知文や定型文に。
- ブロック（有料版）：ブロックエディター（Gutenberg）の投稿画面で、再利用可能なブロックの自作機能
CSS：ウェブサイトのデザインを整えるコードの追加。テーマを編集せずに調整可能。SCSS（有料版）：Sass記法に対応したコードを使える。JavaScript：ツール、クイズ、ゲームなどを作成できるコードをサイトに追加。PHP：WordPressの様々なカスタマイズや拡張機能を安全に実装。- ユニバーサル：複数の言語を混ぜるなど任意のコードを自由に記述可能。幅広い用途に使える汎用スニペットタイプ。
選択後、常用スニペットは、画面上にタイトルとコードがあらかじめ入力された状態で表示されます。
カスタムコードを作成する場合は、スニペットのタイトルとコード内容を自由に入力できます。入力ミスがある場合は、該当行にエラー表示（赤い✕）が付きます。
WordPressはプラグインで機能を強化していくことができますが、それ以外にもテーマ内にあるfunctions.phpにコードを記入することで様々な機能を追加することができます。 これらの何度も使い回せるコードのことを“スニペット”と読んでおり、覚えておくことでいろんな場面で役に立たせること…
下にスクロールすると、さらに任意の設定項目が表示されます。
- 自動挿入：スニペットを挿入するページや場所を指定可能。ただし、コードに表示箇所を指定してある場合、「あらゆる場所で実行」にして確認・修正が必要。
- ショートコード：先に画面右上の「更新」をクリックすると、自動的にスニペットのショートコードが表示。サイト内の任意の箇所に貼り付けて使用する。任意で「属性」の追加や、「Locations Used」でスニペットの使用箇所の確認も可能。
- デバイスタイプ：スニペットの読み込み場所を全てのデバイス、デスクトップのみ、モバイルのみで選択可能。
- スマートな条件付きロジック：ロジックを有効化すると、スニペットを自動挿入するページを制限できる。
ページ最下部には、基本情報が表示され、以下の項目を設定できます。
- タグ：スニペットのグループ分け。
- 優先順位：小さい数値に設定しているスニペットを優先的に実行（初期設定は10）。
- メモ：登録したスニペットごとのメモ。
その後、右上の「無効」を「有効化」に切り替えてから「更新」をクリックしてください。「更新」だけではコードは実行されませんのでご注意ください。
以下、実際にスニペットを登録して動作させた画像です。全ての投稿のタイトル下に、枠線と文が表示されました。
フォーム入力だけでコードが作れる「スニペットジェネレータ」
「コードの知識は全然ないけれど、少し高度な設定をしてみたい」という方に最適なのが「スニペットジェネレータ」機能です。
これは、画面に表示される質問やフォームにポチポチと入力していくだけで、WPCodeが自動で正しいコードを組み立ててくれる機能です。
主に、検索エンジンにサイトの内容を正しく伝えるための「構造化データ（Schema）」を作成する際などに重宝します。
※生成したコードは、そのまま「HTMLスニペット」として簡単にサイトに登録・有効化できます。
「ヘッダーとフッター」メニューの使い方
Googleアナリティクス（GA4）の計測タグや、Google Search Consoleの認証タグなどを貼り付けるための専用画面です。
テーマを切り替えてもこの設定は引き継がれるため、非常に便利です。
| 追加する場所 | できること・貼り付けるコードの例 |
ヘッダー（<head>） | Googleアナリティクスのタグ、Search Consoleのメタタグなど |
ボディ開始直後（<body>直後） | Googleタグマネージャー（GTM）のコードなど |
フッター（</body>直前） | 外部のJavaScript、広告の追跡スクリプトなど |
設定方法としては、以下の手順で行います。
- コードスニペット > ヘッダーとフッター
- 任意の箇所にコードを追加
- 「変更を保存」をクリック
⚠️ 国産テーマを使っている方の注意点 「Cocoon」や「SWELL」などの優秀な国産テーマには、最初からテーマ側の設定に「アクセス解析タグを貼り付ける枠」が用意されていることが多いです。テーマ側とWPCode側の両方に同じタグを貼ってしまうと、アクセス数が二重にカウントされるなどの不具合が起きるため、どちらか一方のみに設定するようにしてください。
よくある質問（FAQ）
Q. functions.phpに直接コードを書くのと何が違うの？
A. 安全性と管理のしやすさがまったく違います。 functions.php を直接編集すると、コードを1文字間違えただけでサイトが真っ白になり、管理画面にすらログインできなくなるリスクがあります。また、テーマをアップデートした際に書き換えた内容が消えてしまうことも。WPCodeを使えば、そうしたリスクをすべて回避できます。
Q. コードを保存しようとすると「501エラー」が出るのですが…
A. サーバーのセキュリティ機能（WAF）が原因の可能性が高いです。 PHPなどのプログラムコードを保存しようとすると、レンタルサーバー側（ConoHa WING、エックスサーバーなど）のセキュリティブロック（WAF）が働き、保存を遮断してしまうことがあります。
【対処法】
- 一度、ご利用中のレンタルサーバーの管理画面にログインします。
- セキュリティ設定から「WAF」を一時的に「OFF」にします。
- WordPressに戻り、WPCodeでコードを保存（有効化）します。
- 保存が完了したら、必ずサーバーのWAF設定を「ON」に戻しておきましょう。
まとめ：WPCodeで安全・快適なサイトカスタマイズを！
WPCodeは、コードの知識が少ない初心者から、効率的にサイトを管理したいWebデザイナーまで、幅広く愛されているプラグインです。
「デザインを少し変えたい」「便利機能を追加したい」と思ったときは、ぜひWPCodeを使って安全にカスタマイズを楽しんでみてくださいね！
