記事を効率化!ショートコードを自作するプラグイン!WordPressでタグ&コードをショートコードで呼び出すSnippyの使い方

記事を効率化!ショートコードを自作するプラグイン!WordPressでタグ&コードをショートコードで呼び出すSnippyの使い方

はじめに

WordPressを使ってブログを書く時に必ず発生する

もっと記事を効率的に書きたい!

同じデザインのボタンをいちいち呼び出すのはめんどくさい・・

一度作った広告、アフィリエイトリンクをコピーして貼り付けするのもめんどくさい・・

毎回同じアフィリエイトタグ、広告タグを1クリックで効率的に埋め込みたい・・・

今回は上記のような問題を解決してくれるsnippyというワードプレスのプラグインを紹介いたします!

AddQuickTagと似ていますが、初心者のわたしが実践しているAddQuickTagとSnippyの違い、使い分け方についてはこの記事の下で紹介させていただいております!

WordPressのプラグイン AddQuickTagとsnippyの違い、効率的な使い分けの方法を紹介
WordPressのプラグイン AddQuickTagとsnippyの違い、効率的な使い分けの方法を紹介
目次 1. はじめに2. AddQuickTagとSnippyの違いについて2.1. AddQuic […]

実際にSnippyをつかっていただくと

wordpress-blog-snippy1

上記のようにエディターから1クリックで好きなタグを呼び出すことができます。

更にショートコードをかんたんに自作することができます。

私はGoogle AdSenseのタグなどはこちらに登録してワンクリックで貼り付けをしております。

1.Snippy プラグインのインストール方法

プラグイン→新規追加をクリック

WordPressの左側のプラグイン→新規追加をクリックします。

wordpress-blog-snippy2

snippyと検索→インストール→有効

上記でインストール&有効化が完了します。

wordpress-blog-snippy3

 

2.Snippyの使い方

snippyには2つの設定があります。

bitsとshortcodesになります。

・bits → コードを入力する

・shortcodees → ショートコードにbitsの紐付けをする

になります。順番としてはbitsの作成後、shortcodesに作成したbitsを当てはまる形になります。

snippyのbitsの設定

1. add bitsをクリック

wordpress-blog-snippy4

Add Bitが新規でBitsを追加する場所になります。Bitsをクリックしていただくと、すでに作成しているBitsの編集をすることができます。

2.Bitsの設定をする

wordpress-blog-snippy5

・NameはBitsの名前になります。わかりやすいように設定しましょう。

・コードの種類を選択します。わたしはCSSもJSもHTMLに組み込んで、HTMLの欄にいれています。

・保存をクリック

snippyのショートコードの設定

1. add shortcodesをクリック

wordpress-blog-snippy6

shortcodesをクリックしますと、既存のショートコードの編集をすることができます。

2.bitsとshortcodeを紐付ける

wordpress-blog-snippy7

名前は先程と同様にわかりやすものにしていおきましょう、ここで登録した名前がエディターの選択肢に表示されます。

Bitsの欄からご自身で作成されたBitsを紐付けて完了になります!

最後に

いかがでしたでしょうか。

Addquicktagに似ていますが、Addquicktagはあくまでタグをよびだすものになります。違いに関しては下記記事で紹介しておりますので、ご参考になればと思います。

WordPressのプラグイン AddQuickTagとsnippyの違い、効率的な使い分けの方法を紹介
WordPressのプラグイン AddQuickTagとsnippyの違い、効率的な使い分けの方法を紹介
目次 1. はじめに 2. AddQuickTagとSnippyの違いについて 2.1. AddQu […]

ブログ運営関係の記事は下記から確認することができます!

 

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに 2. TechAcademyとは? 2.1. 運営会社 2.2. TechAc […]

 

人生が変わるかも?本気でプログラミング教室に関して解説しております。


知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!

 

 

WordPressカテゴリの最新記事