Post Snippetsの使い方を徹底解説

blog

ブログの記事を作成する時、文章だけでなく、装飾や画像の編集、コードの確認など、意外と多くの作業を抱えていて大変だと感じることはありませんか?

そういう方に向けて、今回は記事作成を効率化してくれる便利なプラグイン「Post Snippets」をご紹介します。

Post Snippetsの特徴 

Post Snippetsは、HTML や CSS、 JavaScript、 phpといったコードをタグ化して使いまわせる大変便利なプラグインです。

ショートコードも利用できるので、ウィジェットなどの任意の場所にも関数などを挿入出来るようになります。

今回は、Post Snippetsの使い方を、なるべく具体的に解説していますので、記事作成を効率化したい人はぜひ活用してみてください。

Post Snippetsの使い方

コード管理のプラグイン

インストール後ダッシュボードから設定が可能になります。

postsnippetsの設定
postsnippetsの設定

主に「Manage Snippets」タブで設定を行います。

まずは「Add New Snippets」で新規コードを登録します。

図ではあらかじめ追加したものが表示されています。

htmlを使用する場合 

アドセンスのコードを登録することができます。

postsnippetsの設定

※「Shortcode」にチェックマークを入れなくてもタグとして利用できます。

名前は鉛筆マークで編集して、最後にチェックマークをクリックすると保存されます。 

postsnippetsの設定

CSS と JavaScript も同じように登録します。

さっそく投稿画面を見てみましょう。

クラシックエディタ

ビジュアルタブの場合は、右上の黄色い紙のマークをクリックします。

postsnippetsの設定
postsnippetsの設定

「アドセンス」を選択した後、「Insert」をクリックします。

すると、以下のショートコードが挿入されます。

postsnippetsの設定

ショートコード名には登録したタイトルがそのまま使われます。

テキストタブを選択すると、このようにタグが追加されていますね。

postsnippetsの設定

操作は先ほどと同じです。 

ブロックエディタ

ブロックから「Post Snippets」を選択します。

postsnippetsの設定

投稿画面で先程登録したタブを選択します。

postsnippetsの設定

phpを使用する場合

以下のような PHP コードを登録してみました。

postsnippetsの設定

phpコードを有効化したい場合は、「PHP Code」にチェックをいれます。

プレビューを確認しましょう。

postsnippetsの設定

Post Snippetsの使い方(応用)

変数を使用することで、同じショートコードでテキストの色やURLだけ変えると言った使い分けができるようになります。

変数名を”{”と”}”で囲むことによって適用することができます。

実際に入力してみました。

html

以下はテキストの色を緑色に変える変数の記述例です。

postsnippetsの設定

「Variables」に{}内の変数を入力します。

投稿画面に挿入してみましょう。

postsnippetsの設定

「text」には内容を入力します。

postsnippetsの設定

「テキスト」という緑色の文章が表示されます。

URLを変えたい場合も、{}内に変数を記述するだけです。

postsnippetsの設定

変数が複数ある場合は、「Variables」の内容をカンマで区切ります。

上の例だと変数が2つなので、単語の区切りの間にカンマを1つ打ちます。

試しに「wordpress」というリンクを作ってみました。

この場合は、nameの部分を「name=wordpress」にします。

するとこのようになります。

postsnippetsの設定

wordpressというリンク名は固定で、 URL を自由に入力できる仕様になりました。

任意のURLを入力してプレビューを確認してみます。

postsnippetsの設定

php

試しに、生年月日を入力したら年齢が算出されるコードを入力してみます。

postsnippetsの設定

この場合、変数は「birth」になります。

postsnippetsの設定

適当な西暦を入力してみました。

postsnippetsの設定
postsnippetsの設定

時間帯によって文字を変える変数を設定することもできます。

以下は挨拶の文言を時間帯によって変える変数です。

postsnippetsの設定

変数は「message」です。

postsnippetsの設定

空欄で「Insert」します。

postsnippetsの設定

夜に投稿したので「こんばんは」になりました。

関数(コード)がうまく機能しない時 

コードが反映しない原因は、大抵以下が原因です。

コードを間違えている

セミコロン(;)とコロン(:)、”と’は間違えやすいので注意しましょう。

不要なコードが記述されている  

Post Snippetsの場合は開始タグ(<?php)と終了タグ(?>)は必要ありません。

必要な所にチェックが入っていない

「Shortcode」と「PHP code」にチェックが入ってないと反映されませんので、しっかり確認しましょう。


いかがでしたか?

Post Snippetsを使えば、1回1回コードを入力する手間が省けますので、ブログの執筆活動がより快適になります。

ぜひ活用してみてください。 

以上、Post Snippetsの解説でした 。


ページトップに戻る

blog
タイトルとURLをコピーしました