スニペットとは?複数のWordPressでスニペットを使う超便利プラグイン「PostSnippets」を徹底解説!

こんな方に読んで欲しい!
  • いつも使う「スニペットコード」を簡単に使いまわしたい!
  • テーマを変えても「スニペットコード」を使いまわしたい!
  • なるべく「functions.php」に追記したくない!

何度も何度も使う「表現・コード」を使いまわしたい!なんかよい方法ない?

例えば、「URLを指定して、自動的にQRコードを生成し、ブログに表示する」ということを「プラグインなし」で行いたい場合、

  • functions.phpにコードを書く
  • 表示させたい箇所に、ショートコードを書く

という作業が必要になります。

でも、functions.php の編集を誤ると、WordPressが壊れるリスクがあります。

また別のWebサイトで使いまわす場合、わざわざコピペしなければなりません。

そんな時に活躍するのが、スニペットコードを登録できるプラグイン「Post Snippetsです。

今回の記事では、「スニペットコード」と「Post Snippets」プラグインについて徹底解説します!

もくじ

スニペットコードとは?

Question

スニペットとは「Snippet」と書きます。日本語にすると「切れ端」「断片」「少し」「わずか」などと訳されます。

簡単に言うのであれば、「ミニプログラム」だと思ってください。

あちこちで使いまわせる、数行から数十行の簡単で再利用可能なミニプログラムです。

例えば、来店者へのお礼メールを送るとします。

この度は、当店をご利用いただきありがとうございました。

当店ではお客様目線の店作りに取り組んでおり、日々努力を重ねております。

またのご利用を心よりお待ちしております。

この文章を個々のお客さんに送信するとした時、毎回、入力するのは大変です。間違う可能性もあります。

数十人数百人となると嫌気がさします。

そこで [ あいさつ ] とメール本文に入力すると、あらかじめ登録していた文に自動的に変換されて送信されたら、便利で効率的ですよね?

この例では「あらかじめ登録していた文に自動的に変換」するプログラム が「スニペット」と呼ばれるものです。

ちなみに、「スニペット」を呼び出した、 [ あいさつ ]  はショートコードと呼ばれます。

プラグイン「Post Snippets」を使うメリット

good

Post Snippetsを使うと、

  • WordPressのテーマに依存しない
  • 変数を設定することができる
  • スニペットのインポート・エクスポートができる

のようなメリットがあります。それぞれ見てみましょう!

WordPressのテーマに依存しない

functions.php は、WordPressの「テーマ」に含まれるファイルです。

そのため、テーマを変更する際は functions.php に追記した内容をコピーし、新しいテーマの functions.php に追記しなければなりません。

これには、手間とリスクがあります。

functions.php は、編集を間違うとWordPressが動作しなくなる可能性があります。初心者はできる限り、変更しないことをおすすめしています。

またWordPressのテーマによりますが、独自のスニペットが設定されているものもあります。

これはこれで便利なのですが、やはりそのテーマに依存するので、テーマを変えれば使えなくなります。

例えば、今までのテーマでは、

[aka]○○○[/aka]

と入力すると、文字の色が赤色になっていたとします。

でも新しいテーマでは「文字の色を赤色にするスニペット」が設定されていないので、赤で表示されていた文字が全て通常の文字に置き換わってしまいます。

記事数が多ければ多いほど、修正に時間がかかります。

これを避けるためにも、テーマに依存したスニペットは使うべきではありません。

プラグイン「Post Snippets」は、プラグインにスニペットとショートコードを登録するため、WordPressのテーマに依存しません。

テーマを変えても動作し続ける点は大きなメリットです。

変数を設定することができる

変数は「設定を変えるために指定する設定値」です。

例えば、「文字の色を赤に変えるスニペット」を考えてみましょう。

ショートコードは

[color-red]「ここの文字が赤色になるよ!」[/color-red]

とします。

実際の画面には

「ここの文字が赤色になるよ!」

と表示されます。

いくつかの色を使う場合、

  • 青色にするスニペット
  • 緑色にするスニペット
  • オレンジにするスニペット
  • ピンクにするスニペット
  • ・・・・

など、いくつも作ることになってしまいますし、使い分けるのも面倒です。

ここで変数(設定を変えるために指定する設定値)を使います。命令の一部に変数を追加してより応用が利くスニペットにしましょう。

例えば「文字の色を { color } に変えるスニペット」を作り、ショートコードは [ moji color=”○○” ][ /moji ] のように設定します。

「color=”red”」とすれば赤色に、「color=”green”」とすれば緑色に、手軽に変えることができるようになります。

変数の使い方によっては、便利なスニペットコードを作ることができます。

スニペットのインポート・エクスポートができる

実はこれが一番大事です。

あなたがWordPressで登録したスニペットは、別のWordPressでも利用することができるんです!

登録したスニペットをZip形式でダウンロード(エクスポート)し、別のWordPressでインポートすることで、そのスニペットを利用することが可能になります!

複数のWebサイトを運営していても、スニペットの登録は一回だけ!このお手軽さもPost Snippetsのメリットといえるでしょう。

プラグイン「Post Snippets」の導入方法

では、「Post Snippets」をインストールしていきましょう!

まずはプラグインを導入するためのページに移動します。

左側の管理メニューより「プラグイン」をクリックしてください。

下の画像のようなページが表示されますので、②の場所、[新規追加]を選択してクリックしましょう。

Post Snippets 新規追加

右上の検索欄にてプラグインを検索します。

今回は「Post Snippets」と入力してください。複数の候補が出てきますが、画像に表示されているプラグインをインストールしてください。インストールは「今すぐインストール」をクリックするだけで可能です!

インストールできたら、「今すぐインストール」ボタンが「有効化」ボタンに変わります。

クリックして「Post Snippets」を有効化しましょう。

Post Snippets 新規追加2

これでプラグインのインストールと有効化が完了しました。

プラグイン「Post Snippets」の使い方

Post Snippetsは投稿編集をしながら随時、設定を加えていくことが多いので設定方法をこの機会に覚えておきましょう。

難しい操作はなく、流れるように設定することができますので安心してください!

それでは、「Post Snippets」の設定を行っていきます。

単純なスニペットの作成

右側の管理メニューから「Post Snippets」を選択してください。

「Post Snippets」の設定画面が表示されたら、左上の [Add New Snippet] から新規スニペットを追加することができます。

Post Snippets 作成

[Add New Snippet] をクリックすると、「Untitled」と書かれた編集画面が開かれます。

このUntitledの部分は目的に応じて変更してください。

Post Snippets 作成2

このUntitledの部分がショートコードになります。上の画像では「test」と入力していますので、ショートコードは、

[test]

となります。

今回は「 test 」にしていますが、なんのスニペットかわかる名前が良いですね。

文字の色関連であれば「 font-color 」など、一発でわかる名前がベストです。

右側の▲ボタンからスニペットに関する編集を行うことができます。

今回は以下のサンプルコードを使います。

<span style="color:#ff0000;">Test-AAAAAA</span>

コードを入力したら、右側の「Shortcode」にチェックを入れるのをお忘れなく!

ここにチェックを入れていないとショートコードとして動作しません。

「 Description 」にはコードの説明を入力します。任意ですが、何のコードか書いておくと、あとあとわかりやすいですね。

最後に「Save」ボタンで保存します。4-2. 単純なスニペットの動作確認

Post Snippets 作成3

先ほど作成したスニペット [test] を動作させてみましょう。

投稿編集画面で [test] と入力します。

入力できたらプレビューで見た目を確認します。

Post Snippets 作成4

今回設定したスニペットは、「赤文字で『Test-AAAAAA』」と表示するものでしたので、きちんと動作していることが確認できました。

変数を含むスニペットの作成

次に「変数」を使ったスニペットの設定方法を解説します。

上のスニペットコードでは「Test-AAAAAA」と表示されるのですが、これでは使い回しが利きません。

使いまわせるように、変数で指定した文字列を赤色で表示できるように工夫してみます。

Post Snippets 作成5

今回は「変数名」を指定する作業が必要となります。変数名の指定は右上の「Variables」から行えます。

今回の変数名は「word」としています。

コードの編集欄で先ほど指定した変数を含むコードを記述してください。変数をコード内に入れ込む時には変数を{  }でくくる必要があるので注意してください。

サンプルコードはこちらです。

<span style="color:#ff0000;">{word}</span>

「Save」で保存するのを忘れずに。

変数を含むスニペットの動作確認

Post Snippets 作成6

再び投稿編集画面に戻ってきました。

[test-2 word="こんにちは"]

と入力することで、スニペットを呼び出すことができます。

入力できたら、プレビューで確認しましょう。

Post Snippets 作成7

変数で指定した文字列で表示されていることがわかりました。きちんと動作していることが確認できました。

スニペットのインポート・エクスポート

最後にスニペットコードのインポート・エクスポートについて解説します。

登録したスニペットは、エクスポートで出力することができ、別のWordPressで再利用することができます。

当たり前ですが、どちらにも「Post Snippets」がインストールされていることが条件です。

Post Snippetsの設定画面の上部、「Import/Export」というタブがあります。

そこをクリックすると、インポートまたはエクスポートできる画面が表示されます。

Post Snippets 作成8

Webサイトを増やす際も、使い慣れたスニペットを簡単に使いまわせるので、とても便利ですね!

まとめ

「スニペット」と「Post Snippets」プラグインについて、理解できましたでしょうか・・・?

  • WordPressのテーマに依存しない
  • 変数を設定することができる
  • スニペットのインポート・エクスポートができる

が、このプラグインを使う上でのメリットです。

例えば、特定のテーマに特化したアフィリエイトサイトを量産する際に重宝するプラグインですね。

今回は、簡単にしたかったので「文字色」の変更を例にしましたが、例えば、

  • 見られているページのQRコードを自動的に生成して表示したい
  • 記事の下に特定の広告を表示させたい
  • RSSフィードを利用し、メインWebサイトの更新情報を表示させたい

というような、ちょっと複雑な使い方もできます。

作ったスニペットは、「AddQuicktag」プラグインを使って呼び出せるようにしておけば、より便利になりますよ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ