function.phpを扱いやすくしてくれるプラグイン『Code Snippets』の紹介

 Code Snippetsというプラグインを使っているのですが、便利なのでインストール方法、使い方など、紹介をば。

広告

Code Snippetsとは?

 Code Snippetsは、WordPressのカスタマイズにおいて、function.phpの管理をしやすくするものです。
 snippetとは、断片、切れ端といった意味を持つ英語で、プログラミングでは、再利用のできる小さな領域のことを言います。私はなんとなく、コードを分割した切れ端とか、そう言うものかなと思っています(尚これは勿論私見ですので、誤っているかもしれません)。
 さてその名前が示すように、function.phpのコードの分割管理をするのが主な機能です。

 今までfuction.phpについて調べたり、コードの追加をしてきた方はご存知でしょうが、通常function.phpを用いた改造をする場合、function.phpをFTPでダウンロードし、編集してそれからアップロードするといったように、直接ファイルを扱う上に手間のかかることになったり、テーマを更新するとfunction.phpに設定したコードがリセットされたり、ということがありました。そもそも、生の備え付けphpのソースコードを直接編集というのはさまざまなリスクを伴います。

 このCode Snippetsを使うと、テーマを更新しても設定しておいたスニペットは反映されますし、また、「一部の関数だけ書き換えたつもりが別の関数を書き換えていた」というリスクも回避しやすいです。さらに、プラグイン画面からfunction.phpへのコード追加等を行えるので、生のfunction.phpを扱うリスクを減らせるといえましょう。
 さらに、Code Snippetsを分割したコードへのコメント付け、その部分のオンオフの切り替えを行う等の機能もついてきます。

 これにより、例えば「SNSシェアボタンを設置するショートコードを設定するPHPコード」と「h2タグ前に広告を挿入するコード」を、中身を把握しやすくしつつ、別々に管理することが可能です。

 さらに、更新頻度が高く(2017年6月7現在、3週間前に更新されている)、その点でも結構安心です。

Code Snippetsのインストール方法

 Code SnippetsはWordPressの公式プラグインディレクトリにあります。

 ですので、WordPressの管理画面から、「プラグイン」→「新規追加」→「Code Snippets」で検索→インストール、というやり方でインストールすることができます。ZIPでインストールする場合は先述の公式プラグインへのリンクで可能でしょう。

使用方法と設定項目の説明

 WordPressの管理画面のサイドバーに「Snippets」が追加されます。
 ホバリングすると、

  • All Snippets
  • Add New
  • Import
  • Settings
     の4項目が表示されますので、選びます。なお「Snippets」をそのままSnippetsをクリックすると「All Snippets」をクリックしたのと同じ画面が出ます。
     これらの画面に従って、コードを追加して適用する、というのが使用方法になります。
     大体の場合、
  1. 「Add New」か「All Snippets」からコードを追加or調整(編集含む)
  2. 新規追加したり、編集したコードを保存したり、Deactive(無効)にしたりActive(有効)にする。

 という流れになると思います。
 以下、各項目をクリックすると表示される画面について説明します。

All Snippets(全てのスニペット)

 All Snippetsを押すと、今まで設定したスニペット、ここでは通常function.phpに一連で記入するものを、機能に分けて分割し切り取ったもののような扱いのようです、を一覧にしてみることができます。なお、それぞれのスニペット内のコードを有効にするか、無効にするかを切り替えたりできます。地味にこのプラグインの威力を知ることができる画面ですね。
 他にも、編集、エクスポート、削除、新規スニペットの追加などの処理ができます。
 画面の見方や、操作手順についていくつか書いておきます。
 
 まず、表の列の意味です。デフォルトで各行において、表示されるセルはそれぞれ、列の一番上に書いてあるように、(一括処理用のチェックボタンを覗いて)左から、そのスニペットの名前(Name)、記述(Description)、タグ(Tags)を示しています。なおこの項目は一番上の表示オプションから表示するかどうかを切り替えること画家のうです。
 この名前・記述・タグはコードとは全く別に設定できます。この記述、とここで書いているものについてですが、これは列の一番上のセルに書いてある項目名であるDescriptionを直訳したものです。つまりメモやスニペットの説明などの、ちょっとした記述を書くものであると考えてもらっていいでしょう。
 function.phpにこういった情報を書く場合は、英訳して関数名にしたり、コメントアウトする必要があるかもしれませんが、このプラグインではそういう処理をせずに、最初からスニペットに割り当てられた名前・詳細・タグの欄に記して保存ことで記録しておくことができるのです。
 名前と記述を読めば、そのスニペットがどういう機能の役割をはたすかが、コードを読まなくてもわかりますし、タグについては、分類にも役立ちます。この画面は記事の投稿画面にも似ているのでお気づきだとは思いますが、表示されているタグの名前を押すと、同じタグが付いているスニペットが一覧で表示されます。

 表の右上にあるテキストエリアでは、スニペットのコードを検索できます。
 表の左上にあるものは、WordPressを使っていればおなじみの、一括処理や表示関連のものです。All(スニペット数)|Active(スニペット数)|Inactive(スニペット数)というようになっているところでは、Allで全てのスニペット、Activeで有効な(作動するようにしている)スニペット、Inactiveで有効でない(作動するようにしていない)スニペットを、それぞれクリックすることで表示することができます。

 一番上の「Snippets」という見出しの横の「Add New」ボタンは、その名前の通り、左サイドバーでAdd Newを押したのと同じ、スニペットの新規追加画面が表示されます。

Add New(新規追加)

 スニペットの新規追加画面を呼び出すことができます。
 基本的には、「Code」部分のテキストエリアにスニペットの中身部分(作動させる部分のPHPコード)を入力して、Enter title hereと書いてあるスニペットのタイトル入力欄を使って名前をつけ、「変更を保存」もしくは「Save Changes and Activate(保存してスニペットを有効にする)」を押すことでスニペットを新規作成・保存できます。
 このとき、DescriptionやTagsなどのオプションを追加しておくこともできます。
 また、変更を保存ボタンの下にあるSettingsでは、Scope、すなわちスニペットをどこに適用するかを設定できます。「Run snippet everywhere(どこでも実行)」、「Only run in administration area(管理エリアだけで実行)」、そして「Only run on site front-end(フロントエンドでだけ実行)」の3つからの選択制。適用範囲としては1,2,3番目の順で狭くなる…のかなあ。とりあえず、ショートコードで使うだけにはフロントエンドで実行させるだけで十分みたい…?です。

 また、この内容はAll Snippets画面から後々変更可能です。All Snippetsから編集したいスニペットを選び、そのNameをクリックするか、Edit(編集)を選択することで、ほぼほぼ新規追加と同じEdit Snippet画面へ移行して、Descriptionやtitle、CodeやTags、Scopeを編集することが可能です。

 なお新規画面でも編集画面でも、コードはそれなりにハイライトがきいている、簡易コードエディタ状態の上に、有効にするときはコードで何か妙なところがないか、簡単にチェックして、エラーを報せてくれます(あくまで簡単なチェックのようなので、本格的に妙なところを指摘してくれるかは分かりません。ですが、だいぶ助かっています)。

Import(インポート/取り込み)

 スニペットのインポート画面を呼び出すことができます。
 Edit Snippet画面には、Exportというボタンがあります。これは、スニペットをエクスポートするためのもので、これを用いて生成されたファイルをここで取り込むことで、スニペットを読み込むことが可能です。多分、ブログの移転とか、他のブログで作成したスニペットを取り込みたい、というときに使うのだと思います。

Settings(設定)

 その名前の通り、セッティング画面です。
設定できる項目は、以下の通り。

  • General: 全般の設定
    • Activate by Default: 「Save and Active」、つまり保存したら即有効にするのをデフォルトにするか。するならチェックを入れます。
    • Enable Scope Selector: スニペット編集時にスコープの設定をできるようにするならチェック。
    • Enable Snippet Tags: スニペットのタグ付けをできるようにするならチェック。
    • Enable Snippet Descriptions: スニペットにDescriptionをつけれるようにするならチェック。
    • Disable shortcode syntax highlighter: ショートコードのシンタックスハイライトをしないようにする場合はチェック。
  • Description Editor: Description(詳細)を入力する欄の設定
    • Row Height: 入力エリアは何行の高さにするかを選択する。テキストエリアに入力した数字分の行を表示するエディタになる。
    • Use Full Editor: ビジュアル・エディタの全部の機能を使えるようにするか。使えるようにする場合はチェック。
    • Media Buttons: メディア追加ボタンを可能にするならチェック。
  • Code Editor: コード入力部分のエディタの設定
    • Theme: コードエディタテーマを変更できます。要するに、ハイライトの色をどういう組み合わせにするかとか、そういうものですね。
    • Indent With Tabs: タブでインデントをするか。する場合はチェック。
    • Tab Size: タブを入力したとき何文字分で表現するか。
    • Indent Unit: インデントの幅を設定。
    • Wrap Lines: チェックをはずすと、コードが多くの行にわたるときはスクロールバーが付く、ようです。あまりわかっていませんが。
    • Line Numbers: 行のナンバーを見せるかどうか。見せる場合はチェック。
    • Auto Close Brackets: quote(’、”)がタイプされたら自動的に括弧を閉じるか。チェックすると自動的に括弧が閉じられる様子。
    • Highlight Selection Matches: 現在選択しているワードをハイライトするかどうか。チェックするとハイライトする。
    • Editor Preview: 設定を反映させたエディタのプレビュー。ここでテーマを変更するとどのように見えるかを知ることができる。

 基本的に、デフォルトで大体いけるようになっていたようには思うのですが、これらの項目の状態を変更させて、「変更を保存」すると項目に関する設定が可能なようです。

簡潔な入門、トラブルシューティングについて解説しているWebページの紹介

 下のリンクカードからリンクを張ってあるページでも、Code Snippetsが紹介されています。私の解説は、簡単な使い方&取扱説明書のような感じですが、下のサイトは画像つき、またCode Snippetsに追加したコードが原因でトラブルが起きたときの対処法も書いてありますので、どう動くかを軽くテストする場合はこちらを参考になさる方がやりやすいかもしれません。

その他コメントなど

 今回はCode Snippetsを紹介しました。導入以来、色々と助けられているプラグインです。更新間隔も広くなく、最近も更新がありましたので、「2年前から更新がない」といったような、古いプラグインには当分ならないと思います。
 とにもかくにも、扱いやすいので、おすすめです。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA