Theme Support

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/

Các Khối mới bao gồm hỗ trợ cơ bản trong tất cả các chủ đề, các cải tiến để chọn tham gia và khả năng mở rộng và tùy chỉnh.

Có một số khái niệm mới cần xem xét khi xây dựng chủ đề:

Editor Color Palette –Một bộ màu mặc định được cung cấp, nhưng các chủ đề có thể đăng ký riêng của chúng và tùy chọn khóa người dùng chọn từ bảng màu đã xác định.
Editor Text Size Palette – Một tập hợp kích thước mặc định được cung cấp, nhưng các chủ đề có thể đăng ký riêng của chúng và tùy chọn khóa người dùng chọn từ các kích thước đã chọn trước.
Responsive Embeds – Chủ đề phải chọn tham gia nhúng đáp ứng.
Frontend & Editor Styles – Để tận dụng tối đa các khối, tác giả chủ đề sẽ muốn đảm bảo các kiểu Core trông đẹp và chọn tham gia, hoặc viết các kiểu riêng để phù hợp nhất với chủ đề của họ.
Block Tools –Chủ đề có thể chọn tham gia một số công cụ khối như chiều cao dòng, đơn vị tùy chỉnh.
Core Block Patterns – Chủ đề có thể chọn không tham gia các mẫu khối mặc định.

Theo mặc định, các khối cung cấp kiểu của chúng để hỗ trợ cơ bản cho các khối trong chủ đề mà không có bất kỳ thay đổi nào. Họ cũng cung cấp các phong cách tùy ý chọn tham gia. Chủ đề có thể thêm / ghi đè các kiểu này hoặc chúng có thể không cung cấp kiểu nào cả và hoàn toàn dựa vào những gì mà các khối cung cấp.

Một số tính năng khối nâng cao yêu cầu hỗ trợ chọn tham gia trong chính chủ đề vì khối khó cung cấp các kiểu này, chúng có thể yêu cầu một số cấu trúc của chính chủ đề để hoạt động tốt.

Để chọn tham gia một trong những tính năng này, hãy gọi add_theme_support trong tệp functions.php của chủ đề. Ví dụ:

function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => esc_attr__( 'strong magenta', 'themeLangDomain' ),
            'slug' => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name' => esc_attr__( 'light grayish magenta', 'themeLangDomain' ),
            'slug' => 'light-grayish-magenta',
            'color' => '#d0a5db',
        ),
        array(
            'name' => esc_attr__( 'very light gray', 'themeLangDomain' ),
            'slug' => 'very-light-gray',
            'color' => '#eee',
        ),
        array(
            'name' => esc_attr__( 'very dark gray', 'themeLangDomain' ),
            'slug' => 'very-dark-gray',
            'color' => '#444',
        ),
    ) );
}
 
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

Opt-in features #

Default block styles #

Các khối cốt lõi bao gồm các kiểu cấu trúc mặc định. Chúng được tải trong cả trình chỉnh sửa và giao diện người dùng theo mặc định. Một ví dụ về các kiểu này là CSS hỗ trợ khối cột. Nếu không có các quy tắc này, khối sẽ dẫn đến bố cục bị hỏng không chứa cột nào cả.

Trình chỉnh sửa khối cho phép các chủ đề chọn tham gia vào các phong cách phù hợp hơn một chút cho giao diện người dùng. Một ví dụ về các kiểu này là thanh màu mặc định ở bên trái của các dấu ngoặc kép. Nếu bạn muốn sử dụng các kiểu cố định này trong chủ đề của mình, hãy thêm hỗ trợ chủ đề cho các kiểu wp-block-styles:

add_theme_support( 'wp-block-styles' );

Wide Alignment: #

Một số khối chẳng hạn như khối hình ảnh có khả năng xác định căn chỉnh “rộng” hoặc “đầy đủ” bằng cách thêm tên lớp tương ứng vào trình bao bọc của khối (căn chỉnh toàn bộ hoặc căn chỉnh). Chủ đề có thể chọn tham gia tính năng này bằng cách gọi:

add_theme_support( 'align-wide' );

Wide Alignments and Floats #

Có thể khó khăn để tạo một bố cục đáp ứng chứa hình ảnh rộng, thanh bên, cột ở giữa và các phần tử nổi nằm trong cột ở giữa đó.

Trình chỉnh sửa khối thêm đánh dấu bổ sung vào các hình ảnh nổi để tạo kiểu cho chúng dễ dàng hơn.

Đây là phần đánh dấu cho Hình ảnh có chú thích:

Here’s the markup for an Image with a caption:

<figure class="wp-block-image">
    <img src="..." alt="" width="200px" />
    <figcaption>Short image caption.</figcaption>
</figure>

Đây là đánh dấu cho một hình ảnh nổi bên trái:

<div class="wp-block-image">
    <figure class="alignleft">
        <img src="..." alt="" width="200px" />
        <figcaption>Short image caption.</figcaption>
    </figure>
</div>

Block Color Palettes #

Các khối khác nhau có khả năng tùy chỉnh màu sắc. Trình chỉnh sửa khối cung cấp bảng màu mặc định, nhưng chủ đề có thể ghi đè lên nó và cung cấp bảng màu riêng:

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => esc_attr__( 'strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => esc_attr__( 'light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
    array(
        'name' => esc_attr__( 'very light gray', 'themeLangDomain' ),
        'slug' => 'very-light-gray',
        'color' => '#eee',
    ),
    array(
        'name' => esc_attr__( 'very dark gray', 'themeLangDomain' ),
        'slug' => 'very-dark-gray',
        'color' => '#444',
    ),
) );

tên là nhãn có thể đọc được của con người (đã trình bày ở trên) xuất hiện trong chú giải công cụ và cung cấp mô tả có ý nghĩa về màu sắc cho người dùng. Nó đặc biệt quan trọng đối với những người dựa vào trình đọc màn hình hoặc nếu không sẽ gặp khó khăn trong việc cảm nhận màu sắc. slug là một mã định danh duy nhất cho màu và được sử dụng để tạo các lớp CSS được sử dụng bởi bảng màu của trình chỉnh sửa khối. màu là mã thập lục phân để chỉ định màu.

Một số màu thay đổi tự động - chẳng hạn như màu "Chính" và "Phụ" - chẳng hạn như trong chủ đề Twenty Nineteen và không thể được mô tả theo chương trình. Mặc dù vậy, vẫn nên cung cấp các tên có ý nghĩa cho ít nhất các giá trị mặc định khi có thể.

Các màu sẽ được hiển thị theo thứ tự trên bảng màu và không có giới hạn về số lượng có thể được chỉ định.

Chủ đề chịu trách nhiệm tạo ra các lớp áp dụng màu sắc trong các ngữ cảnh khác nhau. Các khối cốt lõi sử dụng ngữ cảnh “màu sắc” và “màu nền”. Vì vậy, để áp dụng chính xác "màu đỏ tươi mạnh mẽ" cho tất cả các ngữ cảnh của các khối cốt lõi, một chủ đề phải triển khai các lớp sau:

.has-strong-magenta-background-color {
    background-color: #313131;
}
.has-strong-magenta-color {
    color: #f78da7;
}

Tên lớp được xây dựng gắn thêm ‘has-‘, theo sau là tên lớp bằng cách sử dụng kebab case và kết thúc bằng tên ngữ cảnh.

Block Gradient Presets #

Các khối khác nhau có khả năng chọn từ danh sách các gradient được xác định trước. Trình chỉnh sửa khối cung cấp các cài đặt trước gradient mặc định, nhưng một chủ đề có thể ghi đè chúng và cung cấp:

add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'     => esc_attr__( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
        array(
            'name'     => esc_attr__( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
            'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
        ),
        array(
            'name'     => esc_attr__( 'Light green cyan to vivid green cyan', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
            'slug'     => 'light-green-cyan-to-vivid-green-cyan',
        ),
        array(
            'name'     => esc_attr__( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
            'slug'     => 'luminous-vivid-amber-to-luminous-vivid-orange',
        ),
        array(
            'name'     => esc_attr__( 'Luminous vivid orange to vivid red', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
            'slug'     => 'luminous-vivid-orange-to-vivid-red',
        ),
    )
);

name là một nhãn mà con người có thể đọc được (đã trình bày ở trên) xuất hiện trong chú giải công cụ và cung cấp mô tả có ý nghĩa về gradient cho người dùng. Nó đặc biệt quan trọng đối với những người dựa vào trình đọc màn hình hoặc nếu không sẽ gặp khó khăn trong việc cảm nhận màu sắc. gradient là một giá trị CSS của một gradient được áp dụng cho hình nền của khối. Chi tiết về các loại gradient hợp lệ có thể được tìm thấy trong tài liệu mozilla. slug là một mã định danh duy nhất cho gradient và được sử dụng để tạo các lớp CSS được sử dụng bởi trình chỉnh sửa khối.

Chủ đề chịu trách nhiệm tạo các lớp áp dụng các gradient. Vì vậy, để áp dụng chính xác "Màu xanh lục lam sống động đến màu tím sống động", một chủ đề nên triển khai lớp sau:

.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: linear-gradient(
        135deg,
        rgba( 6, 147, 227, 1 ) 0%,
        rgb( 155, 81, 224 ) 100%
    );
}

Block Font Sizes: #

Các khối có thể cho phép người dùng định cấu hình kích thước phông chữ mà họ sử dụng, ví dụ: khối đoạn văn. Khối cung cấp một bộ kích thước phông chữ mặc định, nhưng một chủ đề có thể ghi đè lên nó và cung cấp:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => esc_attr__( 'Small', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => esc_attr__( 'Large', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),
        'size' => 50,
        'slug' => 'huge'
    )
) );

Các kích thước phông chữ được hiển thị trên bộ chọn kích thước phông chữ theo thứ tự chủ đề cung cấp chúng.

Chủ đề chịu trách nhiệm tạo các lớp áp dụng các kiểu kích thước phông chữ chính xác. Tên lớp được xây dựng gắn thêm ‘has-‘, theo sau là tên cỡ phông chữ sử dụng chữ hoa kebab và kết thúc bằng -font-size.

Ví dụ về kích thước phông chữ thông thường, một chủ đề có thể cung cấp lớp sau.

.has-regular-font-size {
    font-size: 16px;
}

Disabling custom font sizes #

add_theme_support( 'disable-custom-font-sizes' );

Disabling custom colors in block Color Palettes #

add_theme_support( 'disable-custom-colors' );

Disabling custom gradients #

add_theme_support( 'disable-custom-gradients' );

Supporting custom line heights #

add_theme_support( 'custom-line-height' );

Support custom units #

Ngoài pixel, người dùng có thể sử dụng các đơn vị khác để xác định kích thước, khoảng đệm… Các đơn vị có sẵn là: px, em, rem, vh, vw. Chủ đề có thể tắt hỗ trợ cho tính năng này bằng mã sau:

add_theme_support( 'custom-units', array() );

Chủ đề cũng có thể lọc các đơn vị tùy chỉnh có sẵn.

add_theme_support( 'custom-units', 'rem', 'em' );

Disabling the default block patterns. #

remove_theme_support( 'core-block-patterns' );

Editor styles #

Trình chỉnh sửa khối hỗ trợ các kiểu trình chỉnh sửa của chủ đề, tuy nhiên, nó hoạt động hơi khác so với trình chỉnh sửa cổ điển.

Bạn không cần phải thay đổi kiểu trình chỉnh sửa của mình quá nhiều; hầu hết các chủ đề có thể thêm đoạn mã ở trên và nhận được kết quả tương tự trong trình chỉnh sửa cổ điển và bên trong trình chỉnh sửa khối.

Enqueuing the editor style #

Sử dụng hàm add_editor_style để xếp hàng và tải CSS trên màn hình trình chỉnh sửa. Đối với trình chỉnh sửa cổ điển, đây là chức năng duy nhất cần thiết để thêm kiểu cho trình chỉnh sửa. Đối với trình chỉnh sửa khối mới, trước tiên bạn cần add_theme_support ('editor-styles'); đã đề cập ở trên.

add_editor_style( 'style-editor.css' );

Basic colors #

Bạn có thể tạo kiểu cho trình chỉnh sửa giống như bất kỳ trang web nào khác. Dưới đây là cách thay đổi màu nền và màu phông chữ thành màu xanh lam:

Changing the width of the editor #

/* Main column width */
.wp-block {
    max-width: 720px;
}
 
/* Width of "wide" blocks */
.wp-block[data-align='wide'] {
    max-width: 1080px;
}
 
/* Width of "full-wide" blocks */
.wp-block[data-align='full'] {
    max-width: none;
}

Responsive embedded content #

Các khối nhúng tự động áp dụng các kiểu cho nội dung được nhúng để phản ánh tỷ lệ khung hình của nội dung được nhúng trong iFrame. Một khối được tạo kiểu với các kiểu đáp ứng tỷ lệ khung hình sẽ trông giống như sau:

<figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio">...</figure>

Để thay đổi kích thước nội dung và giữ nguyên tỷ lệ co của nó, phần tử cần có lớp wp-embed-responsive . Điều này không được đặt theo mặc định và yêu cầu chủ đề chọn tham gia tính năng nhúng đáp ứng:

add_theme_support( 'responsive-embeds' );

Spacing control #

Some blocks can have padding controls. This is off by default, and requires the theme to opt in by declaring support:

add_theme_support('custom-spacing');

Link color control #

Hỗ trợ liên kết đã được thực hiện ổn định như một phần của WordPress 5.8. Nó là sai theo mặc định và các chủ đề có thể kích hoạt nó thông qua tệp theme.json:

{
    "version": 1,
    "settings": {
        "color": {
            "link": true
        }
    }
}

Ngoài ra, với plugin Gutenberg đang hoạt động, hỗ trợ cũ add_theme_support('experimental-link-color') cũng sẽ hoạt động. Dự phòng này sẽ bị xóa khi plugin Gutenberg yêu cầu WordPress 5.8 là phiên bản tối thiểu.

Khi người dùng đặt màu liên kết của một khối, một kiểu mới sẽ được thêm vào dưới dạng:

.wp-elements-<uuid> a {
    color: <link-color> !important;
}

<uuid> is a random number
<link-color> is either var(--wp--preset--color--slug) (nếu người dùng đã chọn giá trị đặt trước) hoặc giá trị màu thô (nếu người dùng đã chọn giá trị tùy chỉnh)

PreviousFrequently Asked Questions (ok)NextRegister a New Format

Last updated 3 years ago