WordPress にカスタムコードスニペットを追加する方法 (最も簡単な方法)

WordPress コードスニペットを Web サイトに追加する簡単で簡単な方法をお探しですか?

WordPress を学ぶのはテーマやツールだけではありません。 場合によっては、コード スニペットの微妙な力がサイトに独特の風味を与えることがあります。

完璧なカスタマイズをお探しですか? 適切なコードを使用すればこれを実現できますが、問題は、ほんの小さなエラーでも Web サイトが破損する可能性があることです。

この記事では、Web サイトを壊さずに WordPress にカスタム コード スニペットを簡単に追加する方法を説明します。

WordPress のコード スニペットとは何ですか?

WordPress のユーザーフレンドリーなインターフェイスの下には、WordPress のあらゆる動きを動かすコードの世界があります。

コード スニペットと呼ばれるこれらのコードの小さな断片は、WordPress に特定の機能を指示する、コンパクトながら強力なツールです。

これらのスニペットの力を活用すると、一般的な WordPress Web サイトと、要件に正確に合わせてカスタマイズされた Web サイトとの間に違いが生まれます。

これらは WordPress の呪文に相当し、適切に唱えるとフロントエンドで優れた結果をもたらす可能性があると考えてください。

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

WordPress にカスタム コード スニペットを追加するには、WPCode のシンプルさと機能を利用できます。 以下の手順に従って開始してください。

1. WPCodeプラグインをインストールして有効化する

WPCode は、WordPress ユーザーにとって、 functions.phpファイルをいじったり、わずかなエラーによるサイトの破損を心配したりすることなく、カスタム コード スニペットをサイトに追加するための最良の方法です。

コード スニペット プラグインを使用すると、フッターやヘッダーなど、WordPress サイトの任意の部分にスニペットを簡単に追加できます。 functions.phpファイルを直接編集するのではなく、ダッシュボードから直接必要なカスタム コードを挿入できます。

始めるには、Web サイトに WordPress プラグインをインストールして有効にする必要があります。 これにより、WordPress ダッシュボードの左側のメニュー パネルにプラグインが追加され、そこからカスタム コードの追加をすぐに開始できるようになります。

2. カスタム コード (PHP、CSS、HTML) を作成します。

すでにカスタム コードを準備している場合は、この手順をスキップして次の手順に進みます。 カスタム コードを最初から作成する人のために、ここに例を示します。

このガイドでは、WPForms でラジオとチェックボックスの値が正しく表示されない原因となるテーマの競合を防ぐカスタム コードを作成します。

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

上記のコードは CSS を使用してテーマの競合問題を修正していますが、前述したように、PHP と HTML を使用してコードを作成することもできます。

3. カスタム コードを追加します (新しいスニペット)

WordPress 管理者のメニュー バーから、 [コード スニペット]オプションをクリックし、 [新規追加]ボタンをクリックします。 プラグインをインストールしたばかりなので、リストは空です。

[スニペットの追加]ページが表示されます。 ここでは、独自の一意のコードを追加することも、既製のライブラリからコード スニペットを選択することもできます。

[カスタム コードの追加 (新しいスニペット)]オプションの横にある[スニペットの使用]ボタンをクリックして、新しいコードを挿入します。

あとは、スニペットに名前を付け、作成したカスタム コードをコピーして WPCode プラグインのコード プレビュースペースに貼り付けるだけです。

CSS でコードを作成したため、 [コード タイプ]ドロップダウン メニューで[CSS スニペット]を選択しました。 作成したコードに基づいて変更できます。

次に、 「挿入」タブまで下にスクロールします。 次に、 [自動挿入] を選択し、 [場所]ドロップダウンから[サイト全体のヘッダー]オプションを選択します。

作成しているコードの種類に応じて、 [/] ショートコードとしてページ/投稿に追加することもできます。

コード スニペットにタグを割り当てる場合は、 「基本情報」セクションまで下にスクロールします。 これは、コード サンプルをトピックと機能ごとに分類するのに役立ちます。

多数のスニペットを同じ場所に表示したい場合は、 Priorityパラメーターを使用して、スニペットが処理される順序を選択できます。

次に、洗練されたスマート条件付きロジック機能を使用すると、一連の基準に基づいて自動挿入されたスニペットを表示または非表示にすることができます。

最後に、プラグインから離れる前に、 [アクティブ]オプションをチェックし、 [スニペットの保存]ボタンを押すだけです。

4. カスタムコード内のエラーの処理

コード スニペットを使用すると、サイト固有のプラグインまたはテーマ ファイルにタイプミスがあると、訪問者がサイトを即座に利用できなくなる可能性があります。

構文エラーまたは 500 内部サーバー エラーがサイトに表示されます。 変更を手動で元に戻すには、FTP クライアントを使用する必要があります。

WPCode プラグインのユニークな機能は、コード内の構文エラーのインスタンスを自動的に識別して無効にすることです。

エラーのデバッグに役立つエラー メッセージが表示されます。 カスタム コードを追加すると、WPCode の賢いコード スニペット検証によって間違いが検出されます。

問題の上にマウスを置くと、解決方法を示すポップアップが表示されます。

5. カスタム コード スニペットの管理

複数のコード スニペットがある場合、WPCode を使用すると、ユーザー フレンドリーなインターフェイスとスニペット ライブラリを使用してコード スニペットを非常に簡単に管理できます。

コード スニペットは Web サイト上でアクティブ化せずに保存でき、後でいつでも選択してスニペットをアクティブ化または非アクティブ化できます。

さらに、タグを使用してコード スニペットを分類し、種類と場所に基づいてフィルタリングすることができます。

特定のコード スニペットをエクスポートすることも、すべてのコード スニペットを一括でエクスポートすることもできます。 コード スニペット » ツールに移動し、エクスポートオプションを選択するだけです。

このプラグインを使用すると、Web サイトを新しいサーバーに移行する場合にスニペットをインポートすることもできます。 コード スニペット » ツール » に移動し、エクスポート ファイルをインポートしてアップロードします。

カスタム コード スニペットに関する FAQ

カスタム コード スニペットの追加は、読者の間で使いやすさに関する人気のトピックです。 よくある質問のいくつかに対する簡単な回答を次に示します。

WordPress に最適なコード スニペット マネージャーは何ですか?

WPCode は、WordPress でコード スニペットを管理および実行するための最良の選択肢であり、合理化された組織とシームレスな統合機能を提供します。

WordPress のコードスニペットに CSS を追加するにはどうすればよいですか?

WPCode 内で、 [+ 新規追加]セクションに移動し、目的の CSS を入力し、保存してアクティブ化する前に CSS タイプを選択していることを確認します。

プラグインを使用せずにカスタム コードを WordPress に追加するにはどうすればよいですか?

カスタム コードをテーマのfunctions.phpファイルに直接導入できます。 ただし、WPCode のような専用ツールを使用すると、より安全で組織的なスニペット管理が保証されます。

WordPress にカスタム PHP コードを追加するにはどうすればよいですか?

PHP の場合は、WPCode のインターフェイスに移動し、 [+ 新規追加]を選択し、PHP コードを貼り付けて保存します。 最初に必ずステージング用の子テーマ サイトでテストされていることを確認してください。

次に、ファイルのダウンロードに電子メール アドレスを要求する方法を学習します。

WordPress ユーザーがファイルをダウンロードする前にメール アドレスを提供する必要があれば、素晴らしいと思いませんか? WordPress サイトの訪問者にメール アドレスを共有してもらい、ファイルをダウンロードできるようにする方法を説明します。

今すぐWordPressフォームを作成しましょう

フォームを構築する準備はできましたか? 最も簡単な WordPress フォームビルダープラグインを今すぐ始めましょう。 WPForms Pro には多数の無料テンプレートが含まれており、14 日間の返金保証を提供しています。

この記事がお役に立った場合は、Facebook と Twitter でフォローして、さらに無料の WordPress チュートリアルとガイドをご覧ください。