Post Snippetsを使ってWordPressでショートコードをの登録と管理をもっと楽に!!

WordPressで定型文を作っておいて、且つ後から変更したら定型文全てに反映されるような型を作りたい時、WordPressの場合はショートコードを使うという方法があります。また、ショートコードを使えばPHPも使用できるので、特定カテゴリの新着記事一覧のようなものを記事内や固定ページ内に入れる事ができます。
しかし、ショートコードを使えるようにするにはfunction.phpをいじらないと駄目だったり、ショートコード用のファイルを作成してアップしないといけなかったり結構面倒です。ショートコードは面倒な何度も使う文言や、記事内で使用できないPHPを利用する事ができる便利な存在のはずなのに、わざわざ登録するのが面倒で結局使わないで毎回コピペしたり諦めたりしている人って結構いるのではないでしょうか?
そんな方に役立つのがショートコードを簡単に登録して使用できるようになる「Post Snippets」です。
Post Snippetsのインストール
まずはPost Snippetsのインストールから。下記サイトでダウンロードしてWordPressにアップロードするか、もしくは管理画面のプラグインの新規追加から「Post Snippets」を検索してインストール、有効化します。
[appbox wordpress post-snippets]

インストールが完了すると、新しく[設定]の中に[Post Snippets]という項目が追加されているのでそのページへ移動しましょう。
ショートコードの登録
このページでスニペットの管理をする事ができます。まだ何も作成されていないので下の方にある「Add New Snippet」ボタンを押してスニペットを作成してみましょう。

「Add New Snippet」ボタンを押すと下の画像のような表示になるので、それぞれの項目に必要事項を記入していきます。

タイトル部分に入力した名前がそのままショートコードで使用する名前になります。そして「Shortcode」にチェックが入っていないと利用する事ができないので忘れないように注意してください。
PHPを利用したい場合は「Shortcode Options」の「PHP Code」にチェックを入れると使えるようになります。ショートコードのいいところはPHPが使用できるという点ですよね。
あとはコードと説明文(任意)を書いたら「Update Snippets」ボタンを押して登録完了です。
ショートコードの利用
肝心のショートコードの使い方ですが、基本的に[と]でショートコードの名前を囲むと使用する事ができるのですが、わざわざ入力するのは面倒ですよね。そこで、記事の編集画面のツールボックスに「Post Snippets」のアイコンが増えているのでショートコードを使いたい時にそれをクリックします。

するとPost Snippetsのモーダルが開くので使用したいスニペットを選択して「Insert」ボタンを押せば記事内にショートコードが挿入されます。

登録から利用するところまで簡単で手軽ですね。
スニペットの削除
スニペットの削除はPost Snippetsの管理ページから行う事ができます。削除したいスニペットにチェックマークを入れて下の「Delete Selected」を押せば削除されます。

しかし、もう既に記事内にショートコードを入れた後にスニペットを削除してしまうとショートコードがただの文字列になってしまいます。ですから極力一度登録したスニペットは削除しないようにしましょう。
どうしても削除しなければならない時は記事内からそのショートコードを削除するなりして対策をしておかないとショートコードが記事に剥き出しで表示される事になってしまいます。
もし既に多くの記事でショートコードを利用してしまっていて、いちいち記事の編集からショートコードを1つ1つ削除していくのが面倒だという人は常時SSL化した時に記事内の画像パスを書き換えるために使用したSearch Regexというプラグインを利用すると一括で置き換える事が可能です。
ただ、一度置き換えてしまうと元には戻せないので、バックアップを必ず取ってから行うようにしましょう。




Facebookでシェアした記事の画像反映ができていない時の修正方法
疑似クラスの:hoverと:activeのスマホでの挙動の違い
iTerm2で起動時に左上に表示される「Tip of the Day(今日のTip)」を非表示にする方法
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
iOS Safariで指定したフォントサイズにならない場合の対処法
Safari 12.1から外観モード(ライト/ダーク)の判定をCSSで行えるように!
Visual Studio Codeでコメントを色分けして管理する「Better Comments」
コーディングで「スペース」と「タブ」のどちらを使えばいいのか?
js-cookieでウェブサイトのダークモード表示設定をユーザーごとに保存しておく方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
gulp-sass 5の「does not have a default Sass compiler」エラーを解消する
あしたラボUNIVERSITY主催の学生限定ハッカソンに行ってきました
人前でデモをするための設定や、始める前のチェックリスト
macOSのコマンドパレット比較!SpotlightとAlfred、Raycastどれを使えばいい?
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
Karabiner-Elementsを使ってキーボードを快適に使えるように設定する
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」
Fantastical 2 for Macでスムーズにカレンダーの登録を行う
webpackでTop-Level Awaitを使用して、一番上位でもawaitを使えるようにする方法
Search Consoleに表示される「ウェブに関する主な指標」のCLSの意味と、不良時の改善方法