کنترل Color

کنترل Color یک color picker سفارشی است.

این به شما امکان می‌دهد رنگ‌ها را در قالب‌های hex، rgba و hsl انتخاب و تنظیم کنید. همچنین شامل یک پالت رنگ سراسری برای ذخیره رنگ‌ها جهت استفاده مجدد در هر جای سایت است.

پالت رنگ پیش‌فرض خود را با فیلتر bricks/builder/color_palette تعریف کنید.

همان‌طور که در مثال زیر نشان داده شده، می‌توانید property CSS را روی color یا background-color تنظیم کنید.

class Prefix_Element_Color extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    // Text color applied to '.prefix-element-test-title'
    $this->controls['exampleColor'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Title color', 'bricks' ),
      'type' => 'color',
      'inline' => true,
      'css' => [
        [
          'property' => 'color',
          'selector' => '.prefix-element-test-title',
        ]
      ],
      'default' => [
        'hex' => '#3ce77b',
        'rgb' => 'rgba(60, 231, 123, 0.9)',
      ],
    ];

    // Background color applied to '.prefix-element-test-content'
    $this->controls['exampleBackgroundColor'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Background color', 'bricks' ),
      'type' => 'color',
      'inline' => true,
      'css' => [
        [
          'property' => 'background-color',
          'selector' => '.prefix-element-test-content',
        ]
      ],
      'default' => [
        'hex' => '#1ebea5',
        'rgb' => 'rgba(30, 190, 165, 0.8)',
      ],
    ];
  }

  // Render element HTML
  public function render() {
    echo '<h5 class="prefix-element-test-title">' . get_bloginfo( 'name' ) . '</h5>';
    echo '<p class="prefix-element-test-content">Just some bogus text ..</p>';
  }
}

فیلتر پالت رنگ

کد PHP زیر را به فایل functions.php تم کودک خود اضافه کنید تا رنگ‌های خود را به پالت رنگ پیش‌فرض (گزینه #1) اضافه کنید یا همه رنگ‌های پیش‌فرض را با رنگ‌های دلخواه جایگزین کنید (گزینه #2).

// functions.php
add_filter( 'bricks/builder/color_palette', function( $colors ) {
  // Option #1: Add individual color
  $colors[] = [
    'hex' => '#3ce77b',
    'rgb' => 'rgba(60, 231, 123, 0.56)',
  ];

  // Option #2: Override entire color palette
  $colors = [
    ['hex' => '#3ce77b'],
    ['hex' => '#f1faee'],
    ['hex' => '#a8dadc'],
    ['hex' => '#457b9d'],
    ['hex' => '#1d3557'],
  ];

  return $colors;
} );

توجه

اگر رنگ‌های سفارشی را با سازنده ذخیره کرده‌اید، باید تنظیمات جهانی خود را بازنشانی کنید تا رنگ‌های پیش‌فرض جدیدتان اعمال شوند.