はじめに

WordPress公式は、テーマのカスタマイズに子テーマの使用を推奨していますが、自作プラグインから行うこともできます。子テーマとはコードの書き方が少し違ってきます。

プラグインの作り方

ここでは、clock-child-pluginというプラグイン名にしました。

  1. 「clock-child-plugin」フォルダを作成します。
  2. フォルダ内に、clock-child-plugin.php、style.cssファイルを作ります。PHPファイルはフォルダ名と同じにします。
  3. 以下のコードをコピペします。

clock-child-plugin.php(自作プラグイン)

<?php
/*
Plugin Name: Clock Child Plugin
Plugin URI: http://colors-themes.com/clock/
Description: Clock Child Plugin
Version: 1.0.0
Author: Colors Themes
Author URI: http://colors-themes.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://colors-themes.com/clock/clock-update/
Text Domain: clock-child-plugin
Domain Path: /languages
*/
defined( 'ABSPATH' ) || exit;

/* ----------------------------------------------------------------------
	# functions
---------------------------------------------------------------------- */

style.css (自作プラグイン)

@charset "UTF-8";
/* ----------------------------------------------------------------------
	# style
---------------------------------------------------------------------- */

CSSのカスタマイズ方法

自作プラグインのファイルに以下のコードを追記します。

style.css (自作プラグイン)

body {
	line-height: 1.5;
}

clock-child-plugin.php (自作プラグイン)

function clock_child_plugin_scripts() {
	wp_enqueue_style( 'clock_child-plugin-style', plugins_url( '/style.css', __FILE__ ), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'clock_child_plugin_scripts', 20 );

関数(PHP)のカスタマイズ方法

子テーマと同じ方法でできます。
別ページで紹介しています。

テンプレート(PHP)のカスタマイズ方法

アクションフック

親テーマ内の「do_action」が記載された所に、文字列等を出力します。

例)header.php(CLOCKテーマ)
テーマ開発者が書いておく必要があります。

<?php do_action( 'clock_header_before' ); ?>

clock-child-plugin.php (自作プラグイン)
「do_action」が記載された所に、「CLOCK」という文字列を出力します。

function clock_adding() {
	echo esc_html__( 'CLOCK', 'clock-child-plugin' );
}
add_action( 'clock_header_before', 'clock_adding' );

フィルターフック

親テーマ内の「apply_filters」の部分を変更します。

例) 404.php(CLOCKテーマ)

テーマ開発者が書いておく必要があります。※CLOCKテーマには書いてありません。

<?php echo esc_html( apply_filters( 'clock_header_filter_before', __( 'CLOCK', 'clock' ) ) ); ?>

clock-child-plugin.php (自作プラグイン)
表示されている「CLOCK」を「CLOCK2」に変更します。

function clock_edit( $edit ) {
	$edit = __( 'CLOCK2', 'clock-child-plugin' );
	return $edit;
}
add_filter( 'clock_header_filter_before', 'clock_edit' );

jQueryオプション(JS)のカスタマイズ方法

functions.php(CLOCKテーマ)

function clock_scripts() {
    wp_enqueue_script( 'clock-js-custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0', true );
add_action( 'wp_enqueue_scripts', 'clock_scripts' );

clock-child-plugin.php (自作プラグイン)

function clock_scripts_child() {
    wp_dequeue_script( 'clock-js-custom' );
    wp_enqueue_script( 'clock-child-plugin-js-custom', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'clock_scripts_child', 20 );