投稿やページで使用する投稿スニペットのライブラリを作成する方法

多くのWordPressWebサイトは、投稿やページ内のどこかでカスタムコードまたは関数を使用しています。 プラットフォームを使用すると、このコードを簡単に追加できますが、サイト全体でスニペットを再利用する場合は、必要なときに手動でコードを追加するのが面倒な場合があります。

コードスニペットを必要になるたびに手動で挿入する代わりに、プラグインを使用して整理して保存する方が理にかなっています。 この記事では、コードスニペットを整理しておくことの利点について説明し、次に2つのステップでCode SnippetsExtendedプラグインを使用してそれを行う方法を示します。 仕事に取り掛かろう！

コードスニペットを整理する必要がある理由

開発者でなくても、Webサイトに手動でコードを追加しなければならない可能性があります。

多くのWordPressユーザーは、投稿やページにカスタムコードスニペットを追加しています。 あなたのニッチとサイズに関係なく、あなたがあなたのサイトに小さなコードを追加する必要がある状況はたくさんあります。 たとえば、GoogleAdsenseやFacebookPixelを例にとると、どちらも機能する前に数行のJavaScriptをWebサイトに追加する必要があります。 多くのWordPressプラグインでもショートコードを使用する必要があるため、Webサイトにカスタムコードを追加する可能性が高くなります。

これを考えると、サイトで使用しているコードのスニペットをすべて保存する方法を見つけることは素晴らしい考えです。 理由は次のとおりです。

• 必要に応じていつでもコードを参照できます。 ファイルに追加したカスタムコードの行を忘れてしまうことがあるので、ライブラリを使用してスニペットを整理することにはお金がかかります。
• コードスニペットをより簡単に再利用できるようになります。 同じコードを複数回使用する必要がある場合は、後で使用するために保存しておくことをお勧めします。

もちろん、コンピューター上またはクラウド内の通常のテキストファイルを使用して、これらのコードスニペットを保存することもできます。 ただし、適切なWordPressプラグインを使用すると、サイト内にそれらを保存するためのより適切な方法を提供できます。 そうすれば、使用している特定のWebサイトごとに追加したコードを知ることができます。

コードスニペット拡張プラグインの紹介

Code Snippets Extendedプラグインは、WordPress内で簡単なコードライブラリをセットアップできる興味深いツールです。 カスタムコードを保存し、任意の名前を使用して識別し、数回クリックするだけで投稿やページに追加できます。

さらに、プラグインを使用すると、コードスニペットが単純なJavaScriptまたはCSSである限り、その効果をプレビューすることもできます。 PHPもサポートしていますが、これらのスニペットは通常、ツールのプレビュー機能を使用しても表示されません。

プラグインは全体としてDiviBuilderとうまく連携しますが、回避策が必要な問題が1つあります。 デフォルトでは、ツールはエディターに新しいボタンを追加します。これにより、ライブラリのスニペットを投稿またはページに追加できます。 ただし、Divi Builderに切り替えると、ボタンは消えます。 ただし、修正は簡単です。これについては、後ほど詳しく説明します。

主な機能：

• すべてのカスタムコードスニペットをダッシュ​​ボード内の一元化されたライブラリに保存します。
• 一意の名前を使用して各スニペットを識別します。
• ライブラリ内の各アイテムに使いやすいショートコードを割り当てます。
• コードに触れることなく、WordPressエディターの新しいオプションを使用して投稿やページにスニペットを追加します。

価格：無料| 詳しくは

投稿やページで使用する投稿スニペットのライブラリを作成する方法（2ステップ）

始める前に、プラグインをインストールしてアクティブ化する必要があります。 準備ができたら、ステップ1にジャンプしてください。

ステップ1：ライブラリに新しいスニペットを追加する

プラグインをインストールすると、WordPressダッシュボードにSnippetsという新しいタブが表示されます。 それをクリックして、[スニペットの追加]オプションを探します。 次の画面で、ライブラリ内のコードを識別するための名前を設定したり、コードの実行に必要なメディアファイルをアップロードしたりできます。

このページから必要なメディアをアップロードしなくても、ライブラリにある限り、コードは機能します。 この機能はそこにあるだけなので、ページの下部にある[テスト]ボタンを使用してコードの効果をプレビューできます。

次に進むと、CSS、JavaScript、PHP、およびjQueryコードを入力するエディターも表示されます。 ただし、言語ごとに特定のタグでラップする必要があります。 参照用の簡単な例を次に示します。

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

新しいスニペットを追加するときはいつでも、エディターの下でこれらすべてのタグを参照できます。言語ごとに異なるタグが必要であることを覚えている限り、それらを覚える必要はありません。 さらに、同じスニペット内で複数の言語を使用できます。必ず、それぞれのタグを使用してそれらをラップしてください。

コードの入力または貼り付けが完了したら、ページの下部にある[スニペットを保存]ボタンを使用すると、WordPressダッシュボードの[スニペット] > [スニペット]タブに表示されます。

あとは、WordPressエディターとDiviBuilderの両方を使用して新しいスニペットをテストするだけです。

ステップ2：スニペットをDiviの投稿とページに挿入する

Divi Builderを使用していない場合は、通常のWordPressエディターを使用して投稿やページを開くことができます。 上部に新しい[スニペットの挿入]ボタンが表示されます。

それをクリックすると、ライブラリ内のすべてのアイテムを表示するオーバーレイが表示され、必要なアイテムを選択できます。

これで、プラグインがコードをエディターに追加し、設定が完了しました。これは非常に簡単です。 ただし、Divi Builderを使用している場合は、このオプションにアクセスできません。 この問題を回避する最も簡単な方法は、ダッシュボードの[スニペット]タブを新しいウィンドウで開き、追加するコードに対応するショートコードをコピーすることです。 入手したら、Divi Builderに戻り、作業中のページにコードモジュールを追加します。

入力したら、[コンテンツ]フィールドにショートコードを貼り付けて、変更を保存します。

これで、スニペットは通常どおり機能します。 Divi Builderを使用すると、プロセスに1つのステップが追加されますが、それでも、アクセスしやすい内部ライブラリにすべてのコードスニペットを保存できます。

結論

あなたが私たちのようなものなら、あなたはあなたのすべてのプロジェクトの効率を大切にします。 同じコードを複数のページや投稿に手動で追加することは可能ですが、それはあなたの時間を有効に活用することではありません。 代わりに、コードを一度テストしてライブラリに保存し、必要なときにいつでも仮想バックポケットに入れておくことをお勧めします。

Code Snippets Extendedプラグインを使用すると、まさにそれを実行できます。 インストールして、次の2つの手順に従ってください。

1. ライブラリに新しいスニペットを追加します。
2. スニペットをDiviの投稿とページに挿入します。

Divi Webサイトにコードスニペットを追加する方法について質問がありますか？ 下のコメントセクションで質問してください！

Andrii Bezvershenko /shutterstock.comによる記事のサムネイル画像。