概要
wp_get_custom_css 関数は、WordPress のカスタマイザーで追加した CSS を取得するために使用されます。この関数は主にテーマやプラグインの開発者がカスタマイザーの機能と連携し、ユーザーが追加したスタイルを動的に読み込む際に重宝します。以下に、この関数がよく使われるシナリオを挙げます。
- テーマのカスタマイザーでユーザーが設定した CSS を表示する。
- プラグインが追加した CSS コードを管理画面から表示する。
- フロントエンドでユーザーが追加したスタイルを適用するカスタムテンプレートを作成する。
- 管理画面でのスタイルのプレビュー機能を実装する。
- クライアントのニーズに応じて動的にスタイルを変更する機能を開発する。
- 専用のスタイルシートを用意せずに、簡易的なスタイリングを実現する。
- 特定の条件下でのみ CSS を適用する機能を開発する。
- カスタマイザーの設定を保存した後、その設定を用いてページのスタイルを更新する機能を提供する。
構文
wp_get_custom_css();
パラメータ
この関数には、パラメータはありません。
戻り値
返り値として、カスタマイザーに追加された CSS が文字列で返されます。
使用可能なバージョン
この関数は WordPress 3.4 以降で使用可能です。
コアファイルのパス
wp-includes/class-wp-customize-manager.php
関連する関数
この関数のアクションでの使用可能性
| アクション | 使用可否 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head | 〇 |
サンプルコード
サンプル 1: カスタム CSS を出力する
このサンプルでは、カスタマイザーで追加された CSS を取得し、HTML ドキュメントの <style> タグ内に出力します。
function my_custom_css_output() {
$custom_css = wp_get_custom_css();
if ( ! empty( $custom_css ) ) {
echo '<style type="text/css">' . esc_html( $custom_css ) . '</style>';
}
}
add_action( 'wp_head', 'my_custom_css_output' );
サンプル 2: カスタム CSS を変数に保存
こちらのコードでは、取得したカスタム CSS を変数に保存し、条件によって利用します。
function my_custom_css_variable() {
$custom_css = wp_get_custom_css();
if ( ! empty( $custom_css ) ) {
// ここで $custom_css を使用した処理を行う
// 例: ログ出力など
error_log( $custom_css );
}
}
add_action( 'init', 'my_custom_css_variable' );
サンプル 3: カスタム CSS をテーマ設定に保存
このサンプルでは、カスタマーで入力された CSS を取得して、別のテーマ設定に保存します。
function my_save_custom_css() {
$custom_css = wp_get_custom_css();
set_theme_mod( 'my_custom_css_setting', $custom_css );
}
add_action( 'customize_save_after', 'my_save_custom_css' );
サンプル 4: 特定のページでカスタム CSS を適用
特定のページでだけカスタム CSS を適用するためのコードです。
function my_custom_css_for_specific_page() {
if ( is_page( '特定のページスラッグ' ) ) {
$custom_css = wp_get_custom_css();
if ( ! empty( $custom_css ) ) {
echo '<style>' . esc_html( $custom_css ) . '</style>';
}
}
}
add_action( 'wp_head', 'my_custom_css_for_specific_page' );
サンプル 5: カスタム CSS をログに保存
このコードでは、カスタム CSS を取得してファイルにログとして保存します。
function my_log_custom_css() {
$custom_css = wp_get_custom_css();
if ( ! empty( $custom_css ) ) {
file_put_contents( 'custom_css_log.txt', $custom_css, FILE_APPEND );
}
}
add_action( 'wp_head', 'my_log_custom_css' );
これらのサンプルコードは、異なるシナリオで wp_get_custom_css 関数をどのように利用できるかを示すものです。