自分の WordPress サイトをカスタマイズし始めた頃は、カスタムコードを追加するのが怖くてたまりませんでした。functions.php ファイルのセミコロンを一つでも間違えれば、ウェブサイト全体がクラッシュする可能性がありました。その考えだけでパニックになりました。
そのため、WPBeginner の多くのチュートリアルのように、テーマやサイト固有のプラグインにスニペットを貼り付けるように指示するWordPressチュートリアルに出会ったとき、その考えはさらに恐ろしく感じられました。
ただし、良いニュースがあります。サイトを壊すリスクなしにカスタムコードを安全に追加できる無料のプラグインがあります。
この記事では、WordPressにカスタムコードを安全に追加する簡単な方法を紹介します。このアプローチは、ストレスなくサイトをカスタマイズしたい初心者と経験豊富なユーザーの両方に最適です。
カスタムコードスニペットの問題（およびその解決策）
前述したように、WordPressのチュートリアルでは、コードスニペットをテーマのfunctions.phpファイルまたはサイト固有のプラグインに追加するように指示されていることがよくあります。
最大の問題は、カスタムコードスニペットのわずかな間違いでもWordPressサイトが破損し、アクセスできなくなる可能性があることです。
さらに、WordPressのテーマを更新または変更すると、すべてのカスタマイズが削除されます。
もう一つの問題は、サイト固有のプラグインに複数のコードスニペットを追加すると、ファイルを管理するのが難しくなることです。
幸いなことに、ユーザーがWordPressにカスタムコードスニペットを追加および管理するための、より簡単な方法があります。
WPCodeは、200万以上のWordPressウェブサイトで使用されている最も人気のあるコードスニペットプラグインです。テーマのfunctions.phpファイルを編集することなく、WordPressにコードスニペットを簡単に追加できます。
WPCodeを使用すると、Googleアナリティクス、Facebookピクセル、Google AdSenseなどのトラッキングコードをサイトのヘッダーとフッター領域に簡単に追加できます。
スマートコードスニペット検証により、一般的なコードエラーを防ぐことができるため、サイトを壊す心配はもうありません。
さらに、WPCode には組み込みのスニペットライブラリがあり、SVG ファイルのアップロードを許可する、REST API を無効にする、コメントを無効にする、Gutenberg を無効にするなど、最も人気のある WordPress コードスニペットを見つけることができます。
これにより、機能リクエストごとに個別のプラグインをインストールする必要がなくなります。
最も良い点は、すべてのコードスニペットを1つのセントラル画面で管理でき、タグを追加して整理できることです。
WordPress でカスタムコードを追加するために必要な基本的な機能をすべて備えた WPCode の無料バージョン もあり、6 つのコードタイプ、スマート条件付きロジックなどをサポートしています。
それでは、WPCode を使用して WordPress にカスタムコードスニペットを簡単に追加する方法を見てみましょう。
- WordPress でカスタムコードスニペットを追加する
- カスタムコードのエラー処理
- カスタムコードスニペットの管理
- Bonus: Generate Custom Code Snippets with AI
WordPress でカスタムコードスニペットを追加する
まず、無料のWPCodeプラグインをウェブサイトにインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注: 無料のWPCodeプラグインには、WordPressにカスタムコードを追加するために必要なものがすべて含まれています。スニペットのスケジュール設定、コードの改訂、eコマースコンバージョントラッキングなどの高度な機能が必要な場合は、WPCode Proにアップグレードできます。
有効化すると、プラグインはWordPressの管理バーに「コードスニペット」というラベルの新しいメニュー項目を追加します。それをクリックすると、サイトに保存されているすべてのカスタムコードスニペットのリストが表示されます。
プラグインをインストールしたばかりなので、リストは空になります。
WordPress で最初のカスタムコードスニペットを追加するには、「新規追加」ボタンをクリックしてください。
これで「スニペットの追加」ページが表示されます。ここでは、あらかじめ用意されたライブラリからコードスニペットを選択するか、カスタムコードを追加できます。
カスタムコードを追加するには、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードタイプを選択します。
このチュートリアルでは、「PHPスニペット」オプションをクリックします。
カスタムスニペットの作成ページに移動します。
カスタムコードスニペットのタイトルを入力することから始めることができます。これは、コードを識別するのに役立つものであれば何でも構いません。
その後、コードスニペットを「コードプレビュー」ボックスにコピー＆ペーストできます。
上のスクリーンショットでは、テストサイトからWordPressのバージョン番号を削除するためにカスタムコードスニペットを追加しました。
function wpb_remove_version() {
return '';
}
add_filter('the_generator', 'wpb_remove_version');
コードボックスの下に、挿入オプションが表示されます。挿入オプションは主に2つあります：自動挿入とショートコード。
「自動挿入」メソッドを選択した場合、スニペットはサイトに自動的に挿入および実行されます。
スニペットをWordPressの管理エリア、サイトのフロントエンド、またはすべての場所で自動的に実行するように設定できます。また、投稿の前または後、あるいは投稿コンテンツ内など、特定のページにスニペットを挿入することもできます。
不明な場合は、デフォルトの「スニペットをすべて実行」オプションを選択してください。
「ショートコード」メソッドでは、スニペットは自動的に挿入されません。スニペットを保存すると、サイトのどこでも使用できるスニペット固有のショートコードが生成されます。
さらに下にスクロールすると、スニペットを読み込む場所をデバイスタイプで制限できます。デフォルトでは、スニペットはすべてのデバイスタイプで読み込まれますが、デスクトップのみまたはモバイルのみで読み込むように設定することもできます。
次に、強力な「スマート条件付きロジック」セクションを使用して、一連のルールに基づいて自動挿入されたスニペットを表示または非表示にできます。
例えば、ログインユーザーにのみコードスニペットを表示したり、特定のページURLにのみコードスニペットを読み込んだりすることができます。
最後に、「基本情報」セクションが表示されます。このコードが何をするのか、どこで見つけたのか、なぜウェブサイトに追加するのかを理解するのに役立つことは何でもここに追加できます。
コードスニペットにタグを割り当てることもできます。これにより、トピックや機能別にコードスニペットを並べ替えることができます。
優先度フィールドを使用すると、同じ場所に複数のスニペットを表示したい場合に、スニペットが実行される順序を制御できます。デフォルトでは、すべて のスニペットの優先度は 10 です。スニペットを他のスニペットよりも早く表示したい場合は、スニペットの優先度を 5 のように低い数値に設定するだけです。
オプションの選択が完了したら、右上隅のスイッチを「非アクティブ」から「アクティブ」に切り替え、次に「スニペットを保存」ボタンをクリックします。
コードスニペットを保存してアクティブにしたくない場合は、「スニペットの保存」ボタンをクリックするだけです。
コードスニペットを保存して有効化すると、選択した挿入方法であれば自動的にサイトに追加されるか、ショートコードとして表示されます。
カスタムコードのエラー処理
多くの場合、サイト固有のプラグインまたはテーマファイルにカスタムコードを追加する際に間違いを犯すと、サイトにアクセスできなくなります。
サイトに構文エラーまたは500内部サーバーエラーが表示され始めます。これを修正するには、FTPクライアントを使用してコードを手動で元に戻す必要があります。
WPCodeプラグインの優れた点は、コードの構文エラーを自動的に検出し、すぐに無効にすることです。
エラーメッセージも表示されるため、エラーのデバッグに役立ちます。
WPCodeのスマートコードスニペット検証機能は、カスタムコードを追加する際にエラーを検出します。
エラーにカーソルを合わせると、修正に役立つ手順が表示されます。
カスタムコードスニペットの管理
WPCodeプラグインは、WordPressでカスタムコードスニペットを管理するための簡単なユーザーインターフェースを提供します。
コードスニペットをサイトで有効化せずに保存し、いつでもスニペットを有効化または無効化できます。また、コードスニペットをタイプと場所でフィルタリングし、タグを使用してコードスニペットを簡単に整理することも可能です。
特定のコードスニペットをエクスポートしたり、すべてをまとめてエクスポートしたりすることもできます。
コードスニペット » ツール に移動し、「エクスポート」タブをクリックしてください。
ウェブサイトを別のサーバーに移行する場合、コードスニペットを新しいサイトに簡単にインポートできます。
コード スニペット » ツール » インポート ページにアクセスし、エクスポートファイルをアップロードしてください。
ボーナス：AIでカスタムコードスニペットを生成する
コーディング方法を知らなくても、WPCodeのAIスニペットジェネレーターを使用してWordPressウェブサイト用のカスタムスニペットを簡単に作成できます。したがって、PHP、HTML、またはCSSで苦労する代わりに、プレーンイングリッシュでウェブサイトに必要なものを説明できます。
「スニペットを追加」ページで、「AIを使用してスニペットを生成」オプションにカーソルを合わせます。次に、「+スニペットを生成」ボタンをクリックします。
次に、スニペットに何をしてほしいかを説明できるテキストボックスが表示されます。具体的に何をしたいかを記述するようにしてください。ただし、長すぎないようにしてください。後で AI 改善機能を使用して追加の変更を行うことができます。
リクエストを入力したら、「生成」ボタンをクリックします。
AIが新しいコードスニペットを作成し、必要に応じて自動挿入場所を選択し、条件付きロジックを設定します。
新しいスニペットを調整したい場合は、「AI改善」ボタンをクリックすると、行いたい変更を説明できます。
AI改善機能を使用して、既存のコードスニペットを強化することもできます。
動画チュートリアル
文章での説明が苦手な場合は、WordPressにカスタムコードを簡単に追加する方法に関するビデオチュートリアルをご覧ください。
この記事が、WordPressにカスタムコードを簡単に追加する方法を学ぶのに役立ったことを願っています。ウェブサイトでコードスニペットを試してみたいですか？WordPressの関数ファイルに非常に役立つトリックのリストをご覧ください。また、WordPressサイトの高速化に関する究極のガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
このガイド、大好きです！WPCodeプラグインは、WordPressにカスタムコードを安全に追加するためにまさに必要としていたものでした。エラーが発生する前に検知してくれるので、非常に役立ちます。
私が学んだプロのヒントですが、親テーマのfunctions.phpを直接編集しないでください。代わりに、子テーマを作成し、そこにカスタムコードを追加してください。そうすれば、テーマがアップデートされても変更が失われることはありません。
コード検証機能のおかげで、何度も間違いから救われました。このガイドがこれらの重要な点をすべて網羅していることに本当に感謝しています！
Olaf
WP Code は、複数のプラグインを単独で置き換えることができる、まさに完璧なプラグインです。開発者として、スニペットを楽しんでいます。それらを作成してウェブサイトに追加するのが好きです。このアプローチにより、WordPress をカスタムビルドのソリューションに調整し、そうでなければプラグインが必要になる機能を追加できます。テストモードと組み込みのセーフガードは素晴らしく、プラグイン自体が追加されたコードの構文エラーをチェックします。そして、豊富なスニペットライブラリ、それがどれほど役に立ったかについては、いくらでも話せます。プラグインのトップ10ランキングがあるなら、これは間違いなくその一つです。
モイヌディン・ワヒード
私は、たとえ非常に小さな機能であっても、あらゆる機能のためにプラグインをインストールすることに常にためらいがありました。
wpcode を通してコードスニペットを挿入することで、必要なあらゆる小さな機能のために個別のプラグインを持つ必要がなくなったため、それが革命的でした。
さらに良い点は、wpcode には最も一般的に使用されるコードスニペットが付属しており、それらを使用および有効化するだけでよいことです。
イジー・ヴァネック
そして、有料版はさらに優れています。私は約2ヶ月間使用していますが、有料版のスニペットライブラリには、ほぼすべてのものに対応する数百ものスニペットが含まれています。ライト版のWP Codeを気に入っているなら、有料版はコードを事前にテストできる機能も含め、絶対に完璧なプラグインです。本当に素晴らしいです。
モイヌディン・ワヒード
wpcodeに関する貴重なご経験を共有していただきありがとうございます。
私は現在ライト版を使用しており、その使いやすさにはいくら感謝してもしきれません。
将来的にはプロ版へのアップグレードを検討し、既製のコードベースのシームレスな体験をしたいと思います。
イジー・ヴァネック
私もWPコードを使用してウェブサイトにスニペットを挿入していますが、多くのプラグインのインストールを節約したい人にとって、スニペットがうまく処理できるタスクは不可欠なツールの1つであることに同意します。また、人工知能が現在多くの目的のためにカスタマイズされたスニペットを提案できることも良い点です。
WPBeginnerサポート
Glad to hear you found the plugin helpful
管理者
C
素晴らしいチュートリアルです。WordPressの要素にクラスを割り当てるにはどうすればよいですか？
ありがとう。
WPBeginnerサポート
サイトのコンテンツに独自のクラスを追加する方法については、以下のガイドをご覧ください。
https://www.wpbeginner.com/wp-themes/wordpress-body-class-101-tips-and-tricks-for-theme-designers/
管理者
DAMIEN GALVEZ
ありがとうございます!! とても参考になりました!!
WPBeginnerサポート
お役に立てて嬉しいです！
管理者
ebere akadonye
プラグインを使ってみましたが、コードを有効化しようとすると、常に「Line 0」というエラーが表示されます。どうすればよいかわかりません。なぜなら、<?php がある行以外に 0 行目が見当たらないからです。
Elena Ocone
WordPressコミュニティへの多大なご尽力とサポートに感謝いたします。
Code Snippets プラグインを使用しており、最後のアップデート後にすべてのコードが消え、変更を保存できなくなり、404 エラーページが表示されるまで完璧でした。
WPBeginnerサポート
こちらの記事のトラブルシューティング手順をお試しください：https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
他のプラグインやテーマとの競合がないか確認してみてください。
管理者
Romadhon Hapsa
これを投稿してくれてありがとう。うまくいきました
WPBeginnerサポート
Glad our article could help
管理者
キャロル
アフィリエイトリンク付きの長い著者ページがあり、ユーザーが特定のトピックでそれらの本を検索できるようにしたいと考えています。
例えば、ガーデニング、料理、裁縫に関する本があるとします。ユーザーが他のすべてのタイトルを見ることなく、裁縫に関するすべての本を検索できるようにしたいとします。さらに、一部のタイトルではすぐに主題がわからないため、リスト全体を閲覧してもすべてを見つけることができない可能性があります。
個々のタイトルをコーディングして、あらかじめ定められた複数の件名リストに表示できるようにし、ユーザーがクリックするとその特定の件名のタイトルのみの動的なリストが表示されるようにしたいと考えています。動的とは、私が追加してコーディングした新しいタイトルがすべてユーザーに表示されることを意味します。
私はプログラマーではありませんし、なりたくもありません。それをしてくれるプラグインが必要です。おそらく、これをやりたいと思ったのは私が最初ではないでしょう。これをしてくれるプラグインはありますか？
ton
こんにちは
チェックアウトページにのみ関数コードを追加したいのですが、スニペットをどのように使用すればよいですか？
Lauren
ホームページを除くすべてのページにコードスニペットを適用できますか？
THadryan
みんな気に入っているようなので、このプラグインを使ってみましたが、何もする前にサイト全体がクラッシュしました。
この記事を読んで、もう一度試してみる気になりました。みんな気に入っているようですが、有効化するだけでサイト全体が壊れてしまい、あなたが言及している 500 エラーが発生します。
何か原因について心当たりはありますか？
私のミスだと思いますが、やっていることはインストールして有効化することだけです。
WPBeginnerサポート
こんにちは、
これは、他のプラグイン、テーマ、またはウェブサイト上のカスタムコードとの競合が原因である可能性があります。この問題の原因を特定するには、WordPressエラーのトラブルシューティングに関するガイドを参照してください。
管理者
PseudoGeek
このプラグインに入力したコードは、テーマのアップデート後も保持されますか？このプラグインに期待することは次のとおりです。多くの開発者は、PHPコードのスニペットを子テーマに配置して、コピーライトの年を自動的に更新できるようにしています。その小さな変更のためにウェブサイトごとに子テーマを作成したくはありませんが、そうでなければテーマのアップデートごとに変更が消えてしまいます。しかし、それほどマイナーなことのために子テーマを追加するのは、ゲートのラッチの色を変えたいだけなのに、まったく新しいフェンスを建てるようなものです。このプラグインは、このための簡単な方法でしょうか？
WPBeginnerサポート
テーマのアップデートはコードに影響しません。
管理者
アル・クライン
私は古いPHP開発者ですが、これを使えばスニペットの管理がずっと楽になります。（そして、人間なので、スニペットを追加する際にエラーを起こしましたが、無効になっただけでした。手動で行っていたら、サイトを試すときにエディタが開いたままになっていることを確認する必要があり、戻って500エラーの原因を見つけようとしていたでしょう。
この投稿をありがとうございます。
Victorvijay
このスニペットの範囲はどのくらいですか？
このスニペットコードは、メインテーマの機能をオーバーライドできますか？
Amrita
これを共有してくれてありがとう。私もカスタムコードを追加するのは怖いのですが、これは簡単そうですね。もし私が正しく理解していれば、コードスニペットにエラーがあった場合、プラグインは自動的に無効化されるのですよね？
WPBeginnerサポート
こんにちは、アムリタさん、
一般的な構文エラーのほとんどを検出できますが、チェックに失敗することもあります。これは、追加しようとしているコードによって異なります。
管理者
Abdal Muntaqeem
この素晴らしいプラグインをありがとうございます。カスタムスニペットをより簡単に管理できるようになりました。