4. アクションフックを使って「この記事は約○分で読めます」にスタイルをあててみよう

「この記事は約○分で読めます」の HTML へ CSS でスタイルをあててデザインを変えてみましょう:blush:
スタイルシートの追加をアクションフックを使って行います。

アクションフックとは

アクションフックもフィルターフックと同じくコアファイルを改変せずにカスタマイズできる仕組みの1つですが、
アクションフックは WordPress の何かのイベント（ヘッダーを表示する時や投稿を保存する時など）に応じて処理を差し込んだり、追加されている処理を削除することができます。

使い方もフィルターフックと似ています。
処理を追加したい場合は add_action() 関数を使って、追加したい処理が書かれた関数と合わせて記述します。

add_action('アクションフック名', '行いたい処理の関数名');
function 行いたい処理の関数名(){
	〜行いたい処理〜
}

WordPress の wp-content → plugins → plugin-hans-on-sample フォルダを開き、中に style.css ファイルを作成します。

プラグインフォルダに作った style.css を読み込む関数を作ります。

function add_reading_minutes_styles() {
	wp_enqueue_style( 'plugin-hans-on-sample', plugin_dir_url( __FILE__ ) . 'style.css' );
}

wp_enqueue_style() 関数を使ってプラグインフォルダに置いた style.css ファイルを読み込むように登録します。

そして、この関数を wp_enqueue_scripts アクションフックで呼び出すように登録します。
※wp_enqueue_scripts アクションフックは登録されているスクリプトを読み込むタイミングで実行されるものです。

add_action( 'wp_enqueue_scripts', 'add_reading_minutes_styles' );

好きなスタイルを style.css に書いてデザインを変更してみましょう:beers:！　　

フィルターフックと同じくアクションフックもオリジナルのアクションフックを作ることができます。
オリジナルのアクションフックを作るには do_action() という WP関数で作成できます。

こちらもご興味がある方は do_action() の作成方法も確認してみて下さいね。

〰️〰️〰️〰️〰️〰️