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

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

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

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

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

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

CSS や JS なら

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をクリック。これでスニペットが保存されました。

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

このコードは

というショートコードを書くと、表示中のページの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にそれほどコードを書かなかったと思います。またコードを再利用化できるので、このブログにコードを書いて、エクスポートしてこのブログにファイルを貼り付けていてもいいし、、、と思っています。

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

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る