MENU
WP-Search
WP-Search
SEOキーワードツール
SEOキーワードツール
note
WP-Search

Code Snippetsの使い方と設定方法【WordPress子テーマ不要】

この記事では、WordPressプラグイン「Code Snippets」の使い方と設定方法を、画像を用いてわかりやすくご紹介します。

Code Snipeets(コードスニペット)」を使えば、子テーマ不要でカスタマイズが可能です。

CSSやJavaScriptだけでなく、PHPのカスタマイズを簡易に実行できます。

suya

子テーマ不要のカスタマイズ用プラグインです。

なるほどくん

なるほど!簡単そうですね。

Code Snipeet」は日本語化されていませんが、英語でも使い方は簡単です。

「Code Snippets」と似た名前のプラグイン「Post Snippets」については、以下をご覧ください。

「Post Snippets」は、ショートコードでPHPカスタマイズが可能です。

この記事でできること
  • Code Snippets」のインストールが完了できる
  • Code Snippets」の使い方がわかる
この記事を書いた人

suya @suyasite

この記事を最後まで読めば、WordPress(ワードプレス)でカスタマイズ環境がすぐ準備できます。

ぜひ最後まで進めてみてください。

目次

子テーマは必要か?

子テーマとは、親テーマの機能を継承し、部分的なカスタマイズを可能とするものです。

親テーマを直接カスタマイズしてしまうと、テーマをバージョアップするたびにカスタマイズが消えてしまいます

親テーマはそのままに、子テーマをカスタマイズすることで、バージョンアップによる上書き消去を防止します。

しかし、子テーマにもデメリットが存在します。

子テーマのメリット
子テーマのデメリット
  • 親テーマを直接カスタマイズしない
  • アップデートでカスタマイズが消えない
  • 読み込むファイルが増える(速度低下)
  • テーマを変更したら内容が消える

Code Snippetsプラグインを利用することで、子テーマのデメリットをなくしてメリットだけを享受できます

Code Snippetsのメリット
Code Snippetsのデメリット
  • 親テーマを直接カスタマイズしない
  • アップデートでカスタマイズが消えない
  • 読み込むファイルが増えない
  • テーマを変更しても消えない
  • コードを管理しやすい
  • 特になし

つまり、親テーマのままでfunction.phpなどの編集が可能になります。

1) プラグイン「Code Snippets」をインストール

WordPress(ワードプレス)にログインしたら、左メニューの[プラグイン][新規追加]をクリックして、[プラグインの検索]をします。

WordPress(ワードプレス)のプラグインを検索して新規追加
[プラグイン]→[新規追加]から、[プラグインの検索]

Code Snippets」を検索して、[今すぐインストール]した後に[有効化]します。

WordPressプラグイン「Code Snippets」のインストール
「Code Snippets」をインストール・有効化

以上で、プラグイン「Code Snippets」のインストール・有効化は完了です。

2) プラグイン「Code Snippets」の使い方

初期設定は必須ではないので、そのままコードを書いていっても大丈夫です。

1) 新規追加

左メニューの[Snippets]から[Add New]を開きます。

画面に表示されているのは、サンプルコードです。

WordPressプラグイン「Code Snippets」のコード新規追加
Code Snippetsの新規追加

2) コード編集

[タイトル]を設定したら、function.phpと同じようにPHPコードを書いてきます。

WordPressプラグイン「Code Snippets」のコード編集
Code Snippetsのコード編集

コードの動作箇所や実行優先度を設定することもできます。

設定項目説明
Run snippet everywhereすべての場所で実行します
Only run in administration area管理画面でのみ実行します
Only run on site front-endフロント画面でのみ実行します
Only run once1回だけ実行します
Priority実行順の優先度を設定します

3) コード保存

[Save Changes and Activate]をクリックしたら、コードが保存されて実行が開始されます。

WordPressプラグイン「Code Snippets」のコード保存
Code Snippetsのコード保存&実行

保存だけで実行したくない場合は、[Save Changes]をクリックします。

コードの有効化・無効化は、管理画面で簡単に切り替えられます。

DescriptionやTagsは、管理用なので設定しなくても大丈夫です。

閲覧できません (Forbidden access)と表示される場合

閲覧できません (Forbidden access)と表示されるのはなぜですか?

サーバーのWAFで誤検知されており、除外設定する必要があります。

サーバーのWAFがON(有効化)されている場合、以下のようなエラーメッセージが表示され、正常に保存できないことがあります。

閲覧できません (Forbidden access)

指定したウェブページを表示することができません。

入力したURLや値が正しくない可能性がございますのでご確認ください。

WAFが誤検知しているのですが、SiteGuardを採用しているレンタルサーバーでよく起こります。

以下の記事を参考に、WAFをOFF(無効化)するか、チューニングで除外設定してください。

3) エラーやログインできないときの対処法

やり方を忘れそうな人は、本ページをブックマークしておきましょう。

a) セーフモードでアクセスする方法

wp-config.phpに、以下のコードを追加します。

define( 'CODE_SNIPPETS_SAFE_MODE', true );

もしくは、URLに「?snippets-safe-mode=1」か「&snippets-safe-mode=1」を追加してアクセスします。

例えば、「Code Snippets」の管理画面にアクセスしたい場合は、以下のようなURLにアクセスします。

https://example.com/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

b) ファイルマネージャーで無効化する方法

STEP
サーバーディレクトリ(ファイル管理)にアクセス

FTPソフトやレンタルサーバーのファイルマネージャーでサーバーディレクトリにアクセスします。

STEP
プラグインフォルダを削除

/public_html/サイト/wp-content/plugins/code-snippets/を削除します。

/サイト/public_html/wp-content/plugins/code-snippets/などの場合もあります。

STEP
WordPressにログイン

プラグイン「Code Snippets」が無効化された状態でログインできるはずです。

STEP
「Code Snippets」を再設定する

インストール・有効化して再設定します。

コードは必ずバックアップしておきましょう。

画面が変わらない場合は、Cookie(クッキー)やブラウザキャッシュをクリアするか、別のブラウザでアクセスしてみてください。

この記事のまとめ

プラグイン「Code Snippets」の設定方法と使い方を見てきました。

簡単なのでぜひ使ってみてください。

なるほどくん

試してみます。

SSLプラグイン

この記事の参考情報

Code Snippets公式サイト
この記事が役に立ったらご紹介ください!

コメント

コメントする

目次