Wordpress機能

コードスニペット

初心者でも簡単

で、Wordpressホームページ制作を応援しています

スニペット(Snippet)
WordPressの機能を少しだけ「カスタマイズ」したいときに使う、短いコード(PHP・CSS・JavaScriptなど) のことです。

たとえば

ページタイトルの出力方法を変えたい
管理画面の表示を整理したい
ElementorやGutenbergに小さな動作を追加したい
といった場合、テーマやプラグインを作るほどではない「軽い処理」を
スニペットとして登録します。

GutenbergやElementorとの違い

  • 比較項目
     スニペットプラグイン
    目的WordPressの挙動を細かく調整新しい機能や画面を追加
    導入方法コードを管理画面から登録(またはfunctions.php)ZIPをアップロードして有効化
    開発の難易度やや高い(コード理解が必要)低い(設定中心)
    処理の範囲一部の動作・表示を変更システム全体に新機能を追加
    代表的なツールCode Snippets / WPCode などElementor / WooCommerce など
    Elementor / WooCommerce などスニペットは、WordPressの「裏側を少し調整する道具」です。
    一方プラグインは、「大きな新機能を追加する道具」です。

スニペットでできること(例)

  • 投稿や固定ページのタイトル表示を変更
  • 管理画面にカスタム列を追加
  • 更新日やログイン日時などを表示
  • CSSを追加して見た目を調整
  • WooCommerceの商品ページを条件付きで非表示
  • Elementorウィジェットの動作を上書き


スニペットを使うメリット

  • プラグインを増やさずにカスタマイズできる(軽量)
  • テーマを変えても設定を維持できる(スニペットプラグイン経由なら)
  • サイト全体または特定ページに限定して適用できる
  • 自分専用の「ちょっと便利な設定」を増やせる
  • ElementorやACF、WooCommerceなどとの連携も可能


スニペットの導入方法
スニペットは、直接コードを書くか、専用プラグインで管理するのが一般的です。

  • 方法①:テーマのfunctions.phpに直接追加
    外観 → テーマファイルエディター → functions.php を開く
    *テーマが更新されると削除されるので、子テーマを作成して記述するのが一般的です。
    最後の行にスニペットコードを貼り付け
    保存して動作を確認
    ⚠️ 間違ったコードを入れるとサイトが真っ白になる(Fatal Error)ことがあります。
     初心者にはあまりおすすめしません。
  • 方法②:スニペット専用プラグインを使う(おすすめ)
    代表的なプラグイン:Code Snippets、Code(旧Insert Headers and Footers)

【Code snipeptesプラグインの使い方】

  • プラグイン → 新規追加 → 「Code Snippets」で検索
  • インストール → 有効化
  • 「Snippets → 新規追加」からコードを登録

タイトルとコードを入力し、「保存して有効化」
Code Snippetsは、functions.phpに書くのと同じ効果を持ちますが、
管理画面から安全にオン・オフできます。

スニペットの種類

  • PHP:WordPressの動作や管理画面の処理を変更
    *当サイトで扱っているコードスニペットです。
    CSS:デザインや見た目を変更
    JavaScript:動きやイベントを追加
    HTML:固定要素をページに直接追加

スニペットを使うときの注意点

  • ⚠️ コードミスでエラーが出ると画面が真っ白になることがあります
  • バックアップを取ってから追加すること
  • 同じ機能を持つプラグインとの重複・競合に注意
  • functions.php に書いた場合は、テーマを変更すると無効になる
  • Code Snippetsプラグインを使えばテーマに依存せず安全に管理可能


スニペットとプラグインの使い分け

  • 小さな機能変更(例:タイトルや日付の表示):スニペット
  • デザイン・ウィジェット・大きな機能追加:プラグイン
  • コード知識がある場合:スニペットが軽くて安全
  • ノーコードで使いたい場合:プラグインがおすすめ


まとめ

スニペットは「小さなコードでWordPressをカスタマイズ」する方法
プラグインは「大きな機能を追加」する方法
スニペット専用プラグイン(Code Snippetsなど)を使えば安全・便利
ElementorやGutenbergと併用することで、自由なサイト構築が可能
*⚠️同じ機能の場合は、スニペットとプラグインを重複してインストールしないでください。