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

WordPress Web サイトにコード スニペットを追加したい場合は、ここが正しい場所です。

通常、コードをコピーして WordPress テーマ ファイルに貼り付けます。 これは簡単なプロセスですが、このプロセスは専門ユーザー向けです。

初心者および中級者のユーザーにとって、コピー＆ペーストは怖気づくかもしれません。 だからこそ私はこの記事を書いています。

また、コード スニペットを簡単に追加する方法も紹介するので、上級ユーザーにもメリットが得られます。

さぁ、始めよう！

WordPress サイトにコード スニペットを追加する理由

まず、WordPress は初心者向けの設定とユーザー中心の機能により、最も人気のある Web サイトビルダーです。

ただし、カスタム コードを追加すると、Web サイトを壊すことなく WordPress の機能を拡張できます。

どういうわけか、Web サイトに実装できるコードがいくつかあるとします。 しかし、どこに、どのように投稿するのでしょうか?

そこで、コードの貼り付けオプションが役に立ちます。これは、Web サイトに革新的な機能を追加する優れた方法です。

カスタム コードを使用するもう 1 つの理由は、WordPress の機能を拡張する効率的な方法であることです。

ほぼすべての必要に応じて、WordPress プラグインが見つかります。 しかし、あらゆるニーズに対応するためにプラグインをインストールし、サイトを重くするのは賢明でしょうか?

少数のコード セットで問題に対処できる場合は、そうすべきです。

以上のことを踏まえて、WordPress Web サイトにカスタム コードを追加するプロセスを確認してみましょう。

カスタムコードを追加する方法

WordPress Web サイトにカスタムコードを追加するには、いくつかの方法があります。 その部分について説明する前に、新しいコードがサイト内の何も破壊しないように、WordPress バックアップ プラグインをインストールしてください。

問題が発生した場合は、バックアップから以前のバージョンを復元し、サイトを以前の段階に戻すことができます。 そうは言っても、コード スニペットを追加するもう 1 つの側面は、コード スニペットをどこに追加するかです。

通常、index.php などのテーマ テンプレート ファイルにコードを追加できます。 コードを直接貼り付けることができる他の PHP ファイルもあります。

最も一般的な方法は、functions.php にスニペットを追加することだと思います。 少なくとも、公開されているほとんどのチュートリアルではこれが見られます。

ただし、テーマを変更したり、機能を一度に停止したい場合に最も役立つ最適な方法を紹介します。

ただし、カスタム コードを WordPress サイトに追加するために使用できる方法をいくつか紹介します。

WordPress にコード スニペットを追加する方法 (FluentSnippets)

最初のステップは、FluentSnippets と呼ばれるプラグインを使用してカスタム コードを追加することです。 ちなみに、このプラグインは私たち（お気に入りのWPManageNinja）によって開発されました。 すでに Fluent ユーザー (Fluent 製品を使用している) であれば、当社のプラグインがどれほど優れた品質を維持しているかご存知でしょう。

ステップ 1 – 無料のプラグインをインストールする

[プラグイン] > [新しいプラグインの追加]に移動し、FluentSnippets を検索します。

「今すぐインストール」ボタンをクリックします。

ここで「有効化」ボタンをクリックすると、プラグインが有効化されます。

WordPress ダッシュボードに戻り、左側のパネルから FluentSnippets を見つけます。 [最初のスニペットを作成]というボタンが表示されます。 または、いつでも右上の[新しいスニペット]ボタンを押すこともできます。

ステップ 2 – コード スニペットを貼り付ける

次に、スニペットを貼り付け、名前を付けます。 必要に応じて説明を書くこともできます。 結局、どこで実行するかを指定して、 「スニペットの作成」ボタンをクリックします。

数値で優先度を設定することもでき、数値が小さいほど優先度が高くなります。

多数のスニペットがある場合は、それらをグループに整理できます。 スニペットを簡単に見つけるために、いくつかのタグを割り当てることもできます。

Advanced Conditional Logic というオプションがあります。 これを有効にすると、スニペットをフィルタリングして、条件を満たした場合に実行できるようになります。

ちなみに、PHP、PHP + HTML、CSS、JS のスクリプトを書くことができます。

コードをコピーして貼り付ける最も簡単な方法はここで行われます。 [設定] に移動して確認することもできますが、そこで行うことはそれほど多くありません。

テーマファイル内にコードを貼り付けます

WordPress には、サイトに適用できる豊富な機能がデフォルトで付属しています。 多くの場合、テーマには豊富な機能とカスタマイズ オプションが備わっています。 ただし、正確なものが必要な場合は、自分で書いたコードを追加することもできます。

ここに、手間を省くための function.php ファイルがあります。 ファイルはすべてのテーマ内にありますが、最も安全な方法に従ってください。 そのため、子テーマを作成することをお勧めします。

圧倒されないでください。 子テーマはメインテーマの下にあり、親テーマと同じように機能します。 そして利点は、何か問題が発生した場合、ツリー (メインテーマ) ではなくブランチのみが影響を受けることです。

ステップ 1 – 子テーマを作成する

子テーマを作成するには、FileZilla などの FTP クライアント経由でサイトのフォルダーにアクセスする必要があります。 サイトがホストされている場所からファイル マネージャーを使用してアクセスすることもできます。

正常にログインしたら、 「wp-content > テーマ」に移動します。 そこに移動すると、Web サイトにインストールされているすべてのテーマのフォルダーが表示されます。

次に、作成する子テーマ用のフォルダーを作成する必要があります。 フォルダーに名前を付けます。 将来の混乱を避けるために、わかりやすい名前を書くことをお勧めします。 テーマ名が tropica であるとします。子テーマには tropica_childtheme という名前を付けることができます。

ステップ 2 – CSS ファイルを追加する

フォルダーを作成したら、その中に style.css ファイルを追加します。 テキスト エディターに次のコードを貼り付けます。

 /* Theme Name: My Child Theme Theme URI: https: //mysite.com/ Description: This is a new child theme I have created for experimentation. Author: Your Name Author URI: https: //mysite.com/ Template: parenttheme Version: 0.1 */

自分の情報をダミーのコンテンツに置き換えることを忘れないでください。 親テーマの名前を正しく書いていることを確認してください (ここでは tropica です)。 もう 1 つ重要なことは、子テーマの style.css ファイル内で親テーマの CSS を呼び出す必要があることです。

次のコードを追加するだけでこれを行うことができます。

 @import url("../parenttheme/style.css");

ここでの「親テーマ」はトロピカです。 右？

したがって、親テーマの名前を正しく書くことを忘れないでください。 完了したら、子テーマのフォルダー内にファイルを style.css として保存します。

ステップ 3 – function.php ファイルを作成する

次に、子テーマ用のfunctions.phpファイルを作成する必要があります。 テキスト エディターを開き、次の PHP タグを貼り付けます。

 <?php //* Write your code here

次に、このファイルをfunctions.phpとして保存し、子テーマのフォルダーに追加します。 また、FTP クライアントを使用して、このフォルダーをサイトのテーマ ディレクトリにドラッグします。

ステップ 4 – テーマをアクティブ化する

テーマをアクティブ化します。 これを行うには、WordPress ダッシュボードの左側のパネルから[外観] > [テーマ]に移動します。 そこに作成した子テーマが表示されます。 「アクティブ化」ボタンをクリックすると、子テーマが機能し始めます。

ステップ 5 – コード スニペットを追加する

ここで主なタスクを実行します。 コード スニペットを子テーマに追加するには、 [外観] > [テーマ ファイル エディター]に移動します。 ここで、functions.php またはカスタマイズしたいその他のファイルを選択します。

以下はfunctions.phpの例です。

完了したら、「ファイルを更新」をクリックすると、変更が Web サイトに反映されます。 サイトをリロードして自分自身を確認してください。

結論

これで、カスタム コード スニペットを WordPress サイトに追加する方法がわかりました。 知識を活用して、カスタム コードでサイトをこれまで以上に強力にしてみましょう。 コードを追加するのが難しい作業でなくなることを願っています。