wp_get_computed_fluid_typography_value()


WordPressのwp_get_computed_fluid_typography_value()関数は、フルイドタイポグラフィの値を計算するために使用されます。この関数は、指定されたフォントサイズやビューポート幅に基づいて、動的に調整されるフォントサイズを返します。

構文

wp_get_computed_fluid_typography_value( array $args );

引数の説明:

  • $args (array) — フルイドタイポグラフィを計算するためのパラメータを含む配列。
  • $args['min_font_size'] (string) — 最小フォントサイズ。
  • $args['max_font_size'] (string) — 最大フォントサイズ。
  • $args['min_viewport_width'] (string) — 最小ビューポート幅。
  • $args['max_viewport_width'] (string) — 最大ビューポート幅。

例1: 基本的なフルイドタイポグラフィの計算

最小フォントサイズと最大フォントサイズを指定して、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'min_font_size' => '16px', 'max_font_size' => '24px' ) );

例2: ビューポート幅を指定したフルイドタイポグラフィ

最小ビューポート幅と最大ビューポート幅を指定して、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'min_font_size' => '16px', 'max_font_size' => '24px', 'min_viewport_width' => '320px', 'max_viewport_width' => '1200px' ) );

例3: カスタムフォントサイズの適用

カスタムフォントサイズを適用して、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'min_font_size' => '14px', 'max_font_size' => '20px' ) );

例4: ビューポート幅を調整したフルイドタイポグラフィ

ビューポート幅を調整して、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'min_font_size' => '12px', 'max_font_size' => '18px', 'min_viewport_width' => '480px', 'max_viewport_width' => '1024px' ) );

例5: 最小フォントサイズのみ指定

最小フォントサイズのみを指定して、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'min_font_size' => '16px' ) );

例6: 最大フォントサイズのみ指定

最大フォントサイズのみを指定して、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'max_font_size' => '24px' ) );

例7: ビューポート幅の範囲を狭める

ビューポート幅の範囲を狭めて、フルイドタイポグラフィの値を計算します。

$fluid_typography = wp_get_computed_fluid_typography_value( array( 'min_font_size' => '14px', 'max_font_size' => '22px', 'min_viewport_width' => '600px', 'max_viewport_width' => '800px' ) );

注意点

  • 引数の配列に必要なキーが含まれていない場合、関数は正しく動作しません。
  • フォントサイズやビューポート幅の単位は必ず指定してください。
  • 最小フォントサイズと最大フォントサイズの値が逆転している場合、予期せぬ結果が生じる可能性があります。

関連機能：