最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPress にカスタムコードをサイトを壊さずに簡単に追加する方法

自分の WordPress サイトをカスタマイズし始めた頃は、カスタムコードを追加するのが怖くてたまりませんでした。functions.php ファイルのセミコロンを一つでも間違えれば、ウェブサイト全体がクラッシュする可能性がありました。その考えだけでパニックになりました。

そのため、WPBeginnerにあるようなWordPressチュートリアルに出くわしたとき、多くの人がテーマやサイト固有のプラグインにスニペットを貼り付けるように指示されたのですが、その考えはさらに気が遠くなるようなものでした。

ただし、良いニュースがあります。サイトを壊すリスクなしにカスタムコードを安全に追加できる無料のプラグインがあります。

この記事では、WordPressにカスタムコードを安全に追加する簡単な方法を紹介します。このアプローチは、ストレスなくサイトをカスタマイズしたい初心者と経験豊富なユーザーの両方に最適です。

WordPressにカスタムコードを簡単に追加する方法

カスタムコードスニペットの問題(およびその解決策)

前述したように、WordPressチュートリアルでは、コードスニペットをテーマのfunctions.phpファイルやサイト固有のプラグインに追加するように指示されることがよくあります。

最大の問題は、カスタムコードスニペットのわずかな間違いでもWordPressサイトが破損し、アクセスできなくなる可能性があることです。

ましてや、WordPressテーマを更新または変更すると、すべてのカスタマイズが削除されてしまいます。

もう一つの問題は、サイト固有のプラグインに複数のコードスニペットを追加すると、ファイルを管理するのが難しくなることです。

幸いなことに、ユーザーがWordPressにカスタムコードスニペットを追加および管理するための、より簡単な方法があります。

WPCodeは、200万以上のWordPressウェブサイトで使用されている最も人気のあるコードスニペットプラグインです。これにより、テーマのfunctions.phpファイルを編集することなく、WordPressにコードスニペットを簡単に追加できます。

WPCode - 最高のWordPressコードスニペットプラグイン

WPCodeは、GoogleアナリティクスFacebookピクセルGoogle AdSenseなどのトラッキングコードをサイトのヘッダーとフッター領域に追加することも簡単にします。

スマートコードスニペット検証により、一般的なコードエラーを防ぐことができるため、サイトを壊す心配はもうありません。

さらに、WPCodeには組み込みのスニペットライブラリがあり、SVGファイルのアップロードを許可する、REST APIを無効にする、コメントを無効にする、Gutenbergを無効にする、削除するなど、最も人気のあるWordPressコードスニペットをすべて見つけることができます。

これにより、機能リクエストごとに個別のプラグインをインストールする必要がなくなります。

最も良い点は、すべてのコードスニペットを1つのセントラル画面で管理でき、タグを追加して整理できることです。

また、WordPressにカスタムコードを追加するために必要な基本的な機能(6つのコードタイプ、スマート条件付きロジックなどのサポートを含む)を備えたWPCodeの無料バージョンもあります。

それでは、WPCode を使用して WordPress にカスタムコードスニペットを簡単に追加する方法を見てみましょう。

WordPress でカスタムコードスニペットを追加する

まず、ウェブサイトに無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

注意:無料のWPCodeプラグインには、WordPressにカスタムコードを追加するために必要なすべてが含まれています。スニペットのスケジュール設定、コードの改訂、eコマースコンバージョン追跡などの高度な機能が必要な場合は、WPCode Proにアップグレードできます。

有効化すると、プラグインはWordPressの管理バーに「コードスニペット」というラベルの新しいメニュー項目を追加します。それをクリックすると、サイトに保存されているすべてのカスタムコードスニペットのリストが表示されます。

プラグインをインストールしたばかりなので、リストは空になります。

WordPress で最初のカスタムコードスニペットを追加するには、「新規追加」ボタンをクリックしてください。

新しいカスタムスニペットを作成するには、WPCodeで「新規追加」をクリックします

これで「スニペットの追加」ページが表示されます。ここでは、あらかじめ用意されたライブラリからコードスニペットを選択するか、カスタムコードを追加できます。

カスタムコードを追加するには、「カスタムコードを追加(新規スニペット)」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

WPCode にカスタムコードを追加する

次に、画面に表示されるオプションのリストからコードタイプを選択します。

このチュートリアルでは、「PHPスニペット」オプションをクリックします。

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でカスタムコードスニペットを管理するための簡単なユーザーインターフェースを提供します。

コードスニペットをサイトで有効化せずに保存し、いつでもスニペットを有効化または無効化できます。また、コードスニペットをタイプと場所でフィルタリングし、タグを使用してコードスニペットを簡単に整理することも可能です。

WPCode - タグで整理されたWordPressスニペット

特定のコードスニペットをエクスポートしたり、すべてをまとめてエクスポートしたりすることもできます。

コードスニペット » ツール に移動し、「エクスポート」タブをクリックしてください。

カスタムコードスニペットをエクスポートする

ウェブサイトを別のサーバーに移行する場合、コードスニペットを新しいサイトに簡単にインポートできます。

コード スニペット » ツール » インポート ページにアクセスし、エクスポートファイルをアップロードしてください。

WPCode でコードスニペットをインポートする

ボーナス:AIでカスタムコードスニペットを生成する

コーディング方法を知らなくても、WPCodeのAIスニペットジェネレーターを使えば、WordPressウェブサイト用のカスタムスニペットを簡単に作成できます。PHP、HTML、CSSで苦労する代わりに、ウェブサイトで欲しいものをプレーンな英語で説明できます。

「スニペットを追加」ページで、「AIを使用してスニペットを生成」オプションにカーソルを合わせます。次に、「+スニペットを生成」ボタンをクリックします。

「AIを使用してスニペットを生成する」オプションをクリックします

次に、スニペットに何をしてほしいかを説明できるテキストボックスが表示されます。具体的に何をしたいかを記述するようにしてください。ただし、長すぎないようにしてください。後で AI 改善機能を使用して追加の変更を行うことができます。

リクエストを入力したら、「生成」ボタンをクリックします。

スニペットに実行させたいことを説明し、「生成」ボタンをクリックします

AIが新しいコードスニペットを作成し、必要に応じて自動挿入場所を選択し、条件付きロジックを設定します。

WPCode AI がコードを自動作成します

新しいスニペットを調整したい場合は、「AI改善」ボタンをクリックすると、行いたい変更を説明できます。

AI改善ボタンを使用して新しいスニペットを調整する

AI改善機能を使用して、既存のコードスニペットを強化することもできます。

動画チュートリアル

文章での説明が苦手な場合は、WordPressにカスタムコードを簡単に追加する方法に関するビデオチュートリアルをご覧ください。

WPBeginnerを購読する

この記事が、WordPressにカスタムコードを簡単に追加する方法を学ぶのに役立ったことを願っています。ウェブサイトでコードスニペットを試してみたいですか?WordPressのfunctions.phpファイルで非常に役立つトリックのリストをチェックして、WordPressサイトの高速化に関する究極のガイドも忘れずに確認してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

28 CommentsLeave a Reply

  1. このガイド、大好きです!WPCodeプラグインは、WordPressにカスタムコードを安全に追加するためにまさに必要としていたものでした。エラーが発生する前に検知してくれるので、非常に役立ちます。
    私が学んだプロのヒントですが、親テーマのfunctions.phpを直接編集しないでください。代わりに、子テーマを作成し、そこにカスタムコードを追加してください。そうすれば、テーマがアップデートされても変更が失われることはありません。
    コード検証機能のおかげで、何度も間違いから救われました。このガイドがこれらの重要な点をすべて網羅していることに本当に感謝しています!

  2. WP Code は、複数のプラグインを単独で置き換えることができる、まさに完璧なプラグインです。開発者として、スニペットを楽しんでいます。それらを作成してウェブサイトに追加するのが好きです。このアプローチにより、WordPress をカスタムビルドのソリューションに調整し、そうでなければプラグインが必要になる機能を追加できます。テストモードと組み込みのセーフガードは素晴らしく、プラグイン自体が追加されたコードの構文エラーをチェックします。そして、豊富なスニペットライブラリ、それがどれほど役に立ったかについては、いくらでも話せます。プラグインのトップ10ランキングがあるなら、これは間違いなくその一つです。

  3. 私は、たとえ非常に小さな機能であっても、あらゆる機能のためにプラグインをインストールすることに常にためらいがありました。
    wpcode を通してコードスニペットを挿入することで、必要なあらゆる小さな機能のために個別のプラグインを持つ必要がなくなったため、それが革命的でした。
    さらに良い点は、wpcode には最も一般的に使用されるコードスニペットが付属しており、それらを使用および有効化するだけでよいことです。

    • そして、有料版はさらに優れています。私は約2ヶ月間使用していますが、有料版のスニペットライブラリには、ほぼすべてのものに対応する数百ものスニペットが含まれています。ライト版のWP Codeを気に入っているなら、有料版はコードを事前にテストできる機能も含め、絶対に完璧なプラグインです。本当に素晴らしいです。

      • wpcodeに関する貴重なご経験を共有していただきありがとうございます。
        私は現在ライト版を使用しており、その使いやすさにはいくら感謝してもしきれません。
        将来的にはプロ版へのアップグレードを検討し、既製のコードベースのシームレスな体験をしたいと思います。

  4. 私もWPコードを使用してウェブサイトにスニペットを挿入していますが、多くのプラグインのインストールを節約したい人にとって、スニペットがうまく処理できるタスクは不可欠なツールの1つであることに同意します。また、人工知能が現在多くの目的のためにカスタマイズされたスニペットを提案できることも良い点です。

  5. 素晴らしいチュートリアルです。WordPressの要素にクラスを割り当てるにはどうすればよいですか?

    ありがとう。

  6. プラグインを使ってみましたが、コードを有効化しようとすると、常に「Line 0」というエラーが表示されます。どうすればよいかわかりません。なぜなら、<?php がある行以外に 0 行目が見当たらないからです。

  7. WordPressコミュニティへの多大なご尽力とサポートに感謝いたします。

    Code Snippets プラグインを使用しており、最後のアップデート後にすべてのコードが消え、変更を保存できなくなり、404 エラーページが表示されるまで完璧でした。

  8. アフィリエイトリンク付きの長い著者ページがあり、ユーザーが特定のトピックでそれらの本を検索できるようにしたいと考えています。

    例えば、ガーデニング、料理、裁縫に関する本があるとします。ユーザーが他のすべてのタイトルを見ることなく、裁縫に関するすべての本を検索できるようにしたいとします。さらに、一部のタイトルではすぐに主題がわからないため、リスト全体を閲覧してもすべてを見つけることができない可能性があります。

    個々のタイトルをコーディングして、あらかじめ定められた複数の件名リストに表示できるようにし、ユーザーがクリックするとその特定の件名のタイトルのみの動的なリストが表示されるようにしたいと考えています。動的とは、私が追加してコーディングした新しいタイトルがすべてユーザーに表示されることを意味します。

    私はプログラマーではありませんし、なりたくもありません。それをしてくれるプラグインが必要です。おそらく、これをやりたいと思ったのは私が最初ではないでしょう。これをしてくれるプラグインはありますか?

  9. こんにちは
    チェックアウトページにのみ関数コードを追加したいのですが、スニペットをどのように使用すればよいですか?

  10. みんな気に入っているようなので、このプラグインを使ってみましたが、何もする前にサイト全体がクラッシュしました。

    この記事を読んで、もう一度試してみる気になりました。みんな気に入っているようですが、有効化するだけでサイト全体が壊れてしまい、あなたが言及している 500 エラーが発生します。

    何か原因について心当たりはありますか?

    私のミスだと思いますが、やっていることはインストールして有効化することだけです。

  11. このプラグインに入力したコードは、テーマのアップデート後も保持されますか?このプラグインに期待することは次のとおりです。多くの開発者は、PHPコードのスニペットを子テーマに配置して、コピーライトの年を自動的に更新できるようにしています。その小さな変更のためにウェブサイトごとに子テーマを作成したくはありませんが、そうでなければテーマのアップデートごとに変更が消えてしまいます。しかし、それほどマイナーなことのために子テーマを追加するのは、ゲートのラッチの色を変えたいだけなのに、まったく新しいフェンスを建てるようなものです。このプラグインは、このための簡単な方法でしょうか?

  12. 私は古いPHP開発者ですが、これを使えばスニペットの管理がずっと楽になります。(そして、人間なので、スニペットを追加する際にエラーを起こしましたが、無効になっただけでした。手動で行っていたら、サイトを試すときにエディタが開いたままになっていることを確認する必要があり、戻って500エラーの原因を見つけようとしていたでしょう。

    この投稿をありがとうございます。

  13. このスニペットの範囲はどのくらいですか?
    このスニペットコードは、メインテーマの機能をオーバーライドできますか?

  14. これを共有してくれてありがとう。私もカスタムコードを追加するのは怖いのですが、これは簡単そうですね。もし私が正しく理解していれば、コードスニペットにエラーがあった場合、プラグインは自動的に無効化されるのですよね?

    • こんにちは、アムリタさん、

      一般的な構文エラーのほとんどを検出できますが、チェックに失敗することもあります。これは、追加しようとしているコードによって異なります。

      管理者

  15. この素晴らしいプラグインをありがとうございます。カスタムスニペットをより簡単に管理できるようになりました。

Leave A Reply

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。