この記事にはプロモーションが含まれています。

子テーマ無しでfunctions.phpを編集|Code Snippetsの使い方【WordPress】

子テーマ無しでfunctions.phpを編集|Code Snippetsの使い方【WordPress】

ケケンタ

functions.phpを編集したいけど、失敗したら「画面が真っ白になる」って聞くし、不安だな……

今回はこのようにWordPressでfunctions.phpを編集することにハードルを感じている方へ向けて

プラグイン「Code Snippets」の使い方
+
functions.phpを安全に編集する方法

を画像付きでわかりやすく解説していきます。

当ブログでもWordPressのカスタマイズ記事はたくさん公開していますが、たいていの場合はfunctions.phpの編集が必要です。

しかし、普段からWordPressでWeb制作をされている方ならともかく、そうでない方にとっては超重要ファイルであるfunctions.phpを編集するのはハードルが高いかと思います。

ケケンタ

安心安全にfunctions.phpが編集できるよう、丁寧に解説していきます!
ぜひ最後までご覧ください!

目次

kindle日替わりセールバナー

————

WordPressのスキルを伸ばしたい方おすすめの書籍



Code Snippetsとは?

プラグイン「Code Snippets」は、functions.phpなどのファイルを直接いじらなくても、WordPressの管理画面で誰でも簡単にコードの追加・編集ができるようにするためのプラグインです。

冒頭でもお伝えしたように、WordPressで機能的なカスタマイズをするときは、必ずと言って良いほどfunctions.phpなどのファイルを編集しなくてはいけません。

しかし、functions.phpはWordPressにおける心臓部のような存在で、ちょっとでも記述ミスがあると「サイトが真っ白」になってしまいます。

ケケンタ

「全角スペース」が紛れ込むだけでもエラーになって真っ白な画面になります……

「Code Snippets」は、そうした危うい状況を回避して、コードを安全に追加できるようにしてくれる便利なプラグインです。

Code Snippetsを使用するメリット

「Code Snippets」がどういったプラグインなのかを理解したところで、使用するメリットを具体的に見てみましょう。

Code Snippetsを使用するメリット
  • functions.phpを直接編集する必要が無くなる
  • エラーがあると自動的にコードを無効化してくれるため、安心して編集できる
  • コードを一元管理できるため保守性が高まる
  • コードの編集・追記・削除が簡単
  • テーマ変更にも対応(保存したコードが消えない)
  • インポート・エクスポート機能があるため別のWordPressサイトへの複製も簡単
  • 子テーマを作成しなくても、テーマアップデートを気にせずカスタマイズができる

このようにメリットはたくさんあります。
その中でも、なんといってもfunctions.phpを直接編集しなくて済み、エラーがあったときには自動的にコードを無効化して「真っ白い画面」になってしまうのを防いでくれる点が大きなメリットです。

Code Snippetsの使い方

STEP1 プラグインのインストール・有効化

まずはプラグインをインストールして有効化します。

STEP
Code Snippetsのインストール

「プラグイン」→「新規プラグインを追加」→「『プラグインの検索』に『Code Snippets』と入力」→「インストール」をクリック

Code Snippetsのインストール手順
Code Snippetsのインストール手順

STEP
Code Snippetsの有効化

インストールが完了したら「有効化」をクリックします。

Code Snippetsの有効化
Code Snippetsの有効化

STEP
不要な初期スニペット(コード)の削除

Code Snippetsでは、デフォルトでサンプルとして作成されているコードがいくつかあります。
もし不要であれば、このタイミングで削除してしまった方が、コード管理がしやすくなります。

Code Snippetsにデフォルトで用意されているスニペット(コード)
Code Snippetsにデフォルトで用意されているスニペット(コード)

STEP2 コードを作成・有効化する

プラグインを有効化できたら、次はソースコードを追加して「有効化」しましょう。

STEP
「新規追加」をクリックする

コードを新規作成するときは、「スニペット」→「新規追加」をクリックします。

「新規追加」をクリック
「新規追加」をクリック

STEP
「タイトル」と「ソースコード」を入力する

新規追加画面が表示されたら ①タイトル②ソースコード を入力します。

「ファンクション」タブが選択されていることをご確認ください。

「タイトル」と「ソースコード」を入力
「タイトル」と「ソースコード」を入力

ケケンタ

今回は例として、以下の内容を入力しています。

①タイトル

サンプル(投稿一覧に文字数を表示)

②ソースコード

/*
 * 投稿一覧画面に「本文」列を追加
 */
function my_add_post_column($columns) {
	$columns['length'] = __('本文');
	return $columns;
}
add_filter('manage_post_posts_columns', 'my_add_post_column');

/*
 * 「本文」列に記事の本文文字数を表示
 */
function my_custom_post_column($column_name, $post_id) {
	$post = get_post($post_id);
	if ($post === null) {
		echo "無効な投稿ID";
		return;
	}

	if ($column_name == 'length') {
		$content_length = mb_strlen(strip_tags($post->post_content));
		echo "本文: " . $content_length . " 文字";
	}
}	
add_action('manage_posts_custom_column', 'my_custom_post_column', 10, 2);

このソースコードを追加すると、「投稿一覧画面」に「本文の文字数」が表示されるようになります。

なお、ソースコードの実行範囲は以下の部分で選択可能です。

ソースコードの実行範囲の選択
ソースコードの実行範囲の選択

例えば今回の「投稿一覧画面に『本文の文字数』が表示されるようにする」というソースコードであれば、「管理画面のみで実行」を選択すると、より無駄がなくなります。

STEP
ソースコードを「有効化」する

追加したソースコードを「有効化」するときは画面下部にある「変更を保存して有効化」をクリックします。

「変更を保存して有効化」をクリック
「変更を保存して有効化」をクリック

有効化が成功すると以下のようなメッセージが表示されます。

「有効化」成功のメッセージ
「有効化」成功のメッセージ

補足 ~スニペットを有効・無効化する方法~

ソースコードを新規追加したときは「変更を保存して有効化」をクリックすることで、スニペットが「有効化」されます。

これ以外に、「スニペット管理画面」でも簡単にON/OFFを切り替えることが可能です。

スニペットの有効・無効化
スニペットの有効・無効化

STEP3 コードの内容がサイトへ反映されていることを確認する

最後に、有効化したソースコードの内容がサイトへ反映されていることを確認してみましょう。

今回追加したソースコードの例では、管理画面左側の「投稿」をクリックして「投稿一覧画面」を表示します。

ケケンタ

投稿一覧画面の列に、「本文」という列が追加+本文の文字数が表示されていれば成功です!

スニペットの反映確認
スニペットの反映確認

Code Snippetsを使用する際の注意点

注意点① 自動停止したときの対処方法

メリットでもご紹介したように、Code Snippetsではエラーがあったときにコードを自動停止してくれる機能が備わっています。

コードが自動停止されてしまった場合には、以下の流れでスニペットを再始動させましょう。

  • エラーを修正する
  • スニペットを再度「有効化」する

注意点② 強制実行されてエラーが発生したときの対処方法

ソースコードの内容によっては、エラーがあるにも関わらず、強制実行されてしまうことがあります。

強制実行によって「サイトが真っ白」になってしまったときには、以下の手順にしたがって、セーフモードを利用することでエラーを解消することが可能です。

STEP
セーフモードでCode Snippets編集画面へアクセスする

下記のURLへアクセスすると、Code Snippets編集画面をセーフモードで開くことが可能です。

Code Snippets 編集画面(セーフモード):
https://ドメイン名/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

STEP
疑わしいスニペットをOFFにする

セーフモードでCode Snippets編集画面へアクセスすると、スニペットが有効化されています(ただし、内部的には停止しています)

ケケンタ

有効化されているスニペットの内、エラーが発生したと思しきものを無効化しましょう。

エラーが発生している可能性があるスニペットを「無効化」
エラーが発生している可能性があるスニペットを「無効化」
Code Snippets編集画面URL比較】
  • Code Snippets 編集画面(通常モード):
    https://ドメイン名/wp-admin/admin.php?page=snippets
  • Code Snippets 編集画面(セーフモード):
    https://ドメイン名/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

STEP
ソースコードを修正+有効化する

セーフモードでスニペットを無効化した状態でソースコードを修正→有効化します。

STEP
セーフモードを解除する(通常モードに戻す)

ソースコードの修正が問題なく完了できたら、再度通常モードで管理画面にアクセスしてみましょう。

Code Snippets 編集画面(通常モード):
https://ドメイン名/wp-admin/admin.php?page=snippets

ケケンタ

このときに「真っ白い画面」が解消されていればOKです!

まとめ

ここまでプラグイン「Code Snippets」の使い方や注意点についてご紹介してきました。

WordPressをカスタマイズしようとした場合、プラグイン導入やテーマ独自の機能を利用するなど、いくつか選択肢があります。

しかし、それらの範囲を超えたカスタマイズをしたいとなった場合には、必ずと言っていいほどfunctions.phpの編集が必要になります。

WordPressファイルの扱いに慣れている方ならともかく、そうではない方にとって、「ミスをしたらサイトが真っ白になってしまう……」という不安な状態で、functions.phpを編集するのは非常にハードルが高いでしょう。

「Code Snippets」は、そんな悩みを解決してくれる便利なプラグインです。

使い方もとてもシンプルで、導入するのも簡単です。

ケケンタ

この記事を参考に、ぜひ「Code Snippets」を導入してWordPressのカスタマイズに挑戦してみてください!

当記事ではWordPressのカスタマイズ記事をたくさん公開しているので、そちらも参考にしていただけるとうれしいです。

それでは、最後までご覧いただきありがとうございました!

WordPressカスタマイズのおすすめ記事

【WordPress】子テーマ無しでfunctions.phpを編集|Code Snippetsの使い方のアイキャッチ画像

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

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次