当サイトには広告が含まれております

プラグイン「Code Snippets」で機能を追加するとテーマを変更しても大丈夫

この記事は最終更新日から6年経過しています。内容が古い可能性があります。

仕事でホームページを制作する際にphpでコードを書いてカスタマイズをすることが多いです。その場合、「子テーマのfunctions.php」にコードを書いています。コードは使い回しできることが多いので、このホームページで作った関数を、別のホームページにも、というようなときにコピーペーストをしてきました。今回ちょっとしたコードを書こうと思ったのですが「テーマを変えてもコピペしないでできたらいいな」と思って調べてみたら、「Code Snippets」というプラグインで思っていたことが実現できました。

記事をざっと見る

CSS や JS はプラグインを使えば、テーマに依存せずにコードを追加できるのに…

QRコードをショートコードで表示する、というカスタマイズをしようかと思っていて検索したところ

コピペするだけ!WordPressでプラグインを使うことなくQRコードを貼り付ける方法

こちらのWEBサイトに書いてありました!この通り、functions.php に書けば動作することがわかったのですが「うーん、こういう便利機能は色々なところで使いたいし、テーマを変えるたびにfunctions.phpをコピーするのも面倒だな。。」と思ったのです。

CSS や JS なら

あわせて読みたい
Simple Custom CSS and JS:子テーマなしでCSSとJavaScriptの追加ができるプラグイン WordPressのテーマを自分のWebサイトに合うようにCSSの修正をしたり、JavaScriptを追加して機能を追加するときは子テーマを利用しましょう!とお伝えしてきました。しか...

こちらの「Simple Custom CSS and JS」というプラグインを使えば、子テーマにしなくてもテーマを変えてもカスタマイズした内容が使えるのに、phpはなぁ~と思ったんですが、検索したら「Code Snippets」というプラグインを見つけました。

Code Snippets のインストール

「Code Snippets」 という言葉は直訳すると コードの切れ端 みたいな意味になるようで、プログラムのコードを小さな機能単位で再利用できる形に管理するもの、のようです。

インストールは、

ダッシュボード プラグイン>新規追加 をクリック

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

Code SnippetsにQRコードを表示するphpコードを追加する

これで使えるようになりました。

ダッシュボード Snippets > Add Newをクリック

このような画面が表示されます。

タイトルはどのようなスニペット(小さなコード)なのかがわかるようなものを付けます。

本文部分に通常は functions.php に書くようなコードを書きます。

ラジオボタンで、このコードがどこで動作するのかを選びます。

Descriptionにはこのコードに関するメモ(自分用)を書いておきます。

先ほど参考にさせていただいたQRコードを表示するコードを、

このように追加しました。

ページの下の方で、

Save Changes and Activateをクリック。これでスニペットが保存されました。

追加したスニペットがどのように動作するかを見てみる

このコードは

[qrcode]

というショートコードを書くと、表示中のページのURLをQRコードとして表示してくれるものです。先ほどスニペットを追加した後に、投稿などでこのコードを書いてみると、

このように、QRコードが表示されました。

functions.phpに書いた場合でも動作が同じですが、この「Code Snippets」というプラグインで追加した場合は、これから先が違ってきます。

違うテーマにしても、コードはそのまま使える!

例えば、今のテーマを違うもの、TwentySeventeenにしてみます。

こちらは子テーマでもないし、functions.phpにもしていませんがちゃんとQRコードが表示されました。

便利です!

違うWEBサイトに機能をエクスポート/インポートすることができる

ダッシュボード Snippets > All Snippetsをクリック すると一覧が表示されます

スニペットの下にあるExportをクリックすると、

タイトル.code-snippets.json という名前のファイルを保存します。

違うWEBサイトにも「Code Snippets」をインストールしておきます。そして、

ダッシュボード Snippets > Importをクリック

ファイル選択から、先ほどダウンロードした タイトル.code-snippets.json ファイルを指定して、

Upload files and importをクリック

これで、新しいWEBサイトにも同じスニペットが入ります。インポートしたばっかりの時には、

ダッシュボード Snippets > All Snippets を見たときに「Activate」という文字がでています。この状態はDeactivate(非活性)状態なので、Activateをクリックして、活性化します。

これで別のWEBサイトでも

このようにQRコードが表示できるようになりました。

Code Snippetsの利点はこれだけではない、コードの整合性も見てくれる

Code Snippetsの利点はこれだけではありません。phpコードは間違えて書いてしまうとWEBサイトが真っ白になってしまう、というような危険なことも起こりうるものです。少しでもエラーを減らしたいというときにこのCode Snippetsが役に立ちます。

例えば、わざとこの行末にあるセミコロンを削除して、保存しようとすると

こんな画面がでます。1行目にDon’t Panicと書いてあるので、焦ってはいけないんですが、翻訳すると

ちゃんと、間違った箇所を教えてくれます。また、保存もされていないのでブラウザの戻るボタンで戻って直せばOKです。

また、新しいスニペットを追加して、何かがおかしくなってしまったときは一覧の

Deactivateをクリックすれば、その機能だけを非活性化できるので、他のスニペットを止める必要がありません。

まとめ:もっと前に知っていたら、、functions.phpにはそれほどコードを書かなかった

このプラグインをもっと前に知っていたら、今までのようにfunctions.phpにそれほどコードを書かなかったと思います。またコードを再利用化できるので、このブログにコードを書いて、エクスポートしてこのブログにファイルを貼り付けていてもいいし、、、と思っています。

今後何度か試してみて問題がなさそうなら、このブログで書いたコードをスニペット化していき、皆さんに便利に使ってもらえるようにしたいな、と思っています。

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る