Cách tạo kiểu cho WordPress Visual Editor

Nếu bạn đã dành thời gian để mặc cho chủ đề tùy chỉnh của mình trong một bộ lễ phục và áo sơ mi cài cúc, thì bạn nên xem xét đặt một chiếc nơ trên trình chỉnh sửa trực quan của WordPress.
Nói cách khác, vẻ đẹp mà bạn triển khai trên giao diện người dùng cũng sẽ tồn tại — dù sao thì ở một mức độ nào đó — trong giao diện người dùng cuối của WordPress. Ít nhất, cần chú ý một chút đến trình soạn thảo WP.

Giả sử bạn đã thiết kế một chủ đề cho phép sử dụng tất cả 9 định dạng bài đăng tiêu chuẩn: sang một bên, thư viện, liên kết, hình ảnh, trích dẫn, trạng thái, video, âm thanh và trò chuyện.

Trong quản trị viên WordPress, trình soạn thảo trực quan (WYSIWYG) sẽ không tôn trọng bạn, chúng tôi sẽ nói, các chỉ thị “trực diện” trừ khi bạn yêu cầu. Kiểu chữ sẽ mặc định là phông chữ serif không cân đối / không theo kiểu / được coi là…

Giả sử rằng tối thiểu, khi soạn bài đăng, chúng tôi muốn loại / phông chữ chúng tôi thấy trong trình chỉnh sửa WP phù hợp với giao diện / chúng trông như thế nào trên giao diện người dùng. Nếu chúng ta sử dụng một chiếc H2, nó sẽ giống, nếu không phải là gương, thì giao diện người dùng của chúng ta h2 sẽ trông như thế nào. Tương tự đối với các đoạn văn, thẻ mạnh và dấu ngoặc kép.

Xác định kiểu quản trị viên

Hoặc: Cách làm cho W hat Y ou S ee thực sự bằng W hat Y ou G et
May mắn thay, có một chức năng cho điều này! Chức năng này cho phép bạn sử dụng CSS tùy chỉnh để tạo kiểu cho trình chỉnh sửa trực quan WordPress TinyMCE.

Trong functions.php, chúng tôi chỉ cần thêm chức năng sau:

add_editor_style();

Tiếp theo, chúng ta tạo một tệp CSS có tên editor-style.css và lưu nó trong thư mục chủ đề. Bây giờ chúng tôi đã sẵn sàng để bắt đầu xác định phong cách quản trị viên của mình.

Nhắm mục tiêu Trình chỉnh sửa trực quan WYSIWYG

Mục tiêu kinh doanh đầu tiên của chúng tôi là đảm bảo bất cứ điều gì chúng tôi viết trong trình soạn thảo không bao giờ rộng hơn 650px (giống như chúng tôi đã xác định trong style.css phần đầu của mọi thứ).

Đầu tiên, chúng ta cần nhắm mục tiêu phần rất cụ thể của trang và của trình chỉnh sửa trực quan WordPress. Lớp CSS “.mceContentBody” được WordPress gán cho phần nội dung của trình soạn thảo WYSIWYG. Đó là lớp chúng tôi sẽ nhắm mục tiêu.

Để làm như vậy, trong tệp editor-style.css mà chúng ta vừa tạo, chúng ta thêm các khai báo kiểu sau:

html .mceContentBody {
	max-width: 650px;
}

Với điều đó, mọi thứ đã bắt đầu thành hình. Bây giờ, chúng ta có thể tạo kiểu cho các tiêu đề, đoạn văn và dấu ngoặc kép để phù hợp với style.css của chúng ta bằng cách sao chép / dán các quy tắc CSS.

MẪU VẬT EDITOR-STYLE.CSS

Kiểu trình chỉnh sửa trực quan cho ngôn ngữ RTL

Trong khi chúng tôi đang ở đó, chúng tôi cũng có thể định kiểu trình chỉnh sửa cho các ngôn ngữ từ phải sang trái. Nếu bạn không viết bằng ngôn ngữ RTL, bạn vẫn có thể đưa ra quyết định trực quan về cách mọi thứ sẽ trông như thế nào. Trong mọi trường hợp, nó đủ dễ dàng. Các phần tử được định vị và thả nổi cũng như danh sách và bảng là những yếu tố chính cần xem xét xác định lại cho RTL. Ở mức tối thiểu, chúng tôi sẽ muốn nhắm mục tiêu lớp .mceContentBody và đặt hướng văn bản / văn bản thành RTL (đây là CSS hơn và không hoàn toàn dành riêng cho WordPress). Trong thư mục chủ đề, hãy tạo một tệp CSS có tên editor-style-rtl.css và bao gồm định nghĩa CSS sau:
html .mceContentBody {
	direction: rtl;
	unicode-bidi: embed;
}
Sau đó, hãy xem các kiểu bạn đã xác định editor-style.css và ghi đè lên tất cả các thuộc tính định vị ngang mà bạn đã đặt.

Ví dụ: nếu bên trong editor-style.css bạn có:

li {
   text-align: left;
   float: right;
   clear: left;
}

trong editor-style-rtl.css, bạn sẽ có những thứ sau:

li {
  text-align: right;
  float: left;
  clear: right;
}

Sau đó, bạn có thể xem qua và thêm các quy tắc tương tự cho danh sách định nghĩa, bảng, chú thích, v.v.

*** tệp biên tập mẫu-rtl.css ***

Nếu bạn muốn có tất cả các kiểu của mình trong một thư mục CSS, hãy tiếp tục và di chuyển editor-style.css vào đó.

Quay lại và điều chỉnh chức năng bạn đã xác định trước đó để phản ánh sự thay đổi này để WordPress có thể tìm và sử dụng các kiểu.functions.phpadd_editor_style()

add_editor_style('css/editor-style.css');

Nhiều hơn 1 biểu định kiểu

Các add_editor_style() chấp nhận một $stylesheet tham số đó là hoặc là một chuỗi với một đường dẫn đến một kiểu duy nhất hoặc một mảng các đường dẫn đến nhiều stylesheets. Trong ví dụ trên, chúng ta chỉ có một biểu định kiểu nên chúng ta đã hoàn tất. Tuy nhiên, nếu bạn muốn thêm một tệp CSS khác, bạn sẽ làm như vậy trong một mảng như sau:
add_editor_style( array( 'css/editor-style.css', ‘path-to-another-css-file.css’ ) );

Google / Phông chữ Tùy chỉnh

Giả sử bạn đang sử dụng phông chữ Google trên giao diện người dùng và muốn sử dụng phông chữ đó trong trình chỉnh sửa trực quan WordPress.
Google Fonts API cung cấp một URL duy nhất cho một tệp CSS có thể bao gồm nhiều biến thể của một mặt loại, được phân tách bằng dấu phẩy. Dấu phẩy trong URL cần được mã hóa trước khi chuỗi có thể được chuyển đến add_editor_style. - codex
Chúng tôi cần xác định URL phông chữ Google “phức tạp” trong một hàm riêng biệt, sau đó gọi hàm đó như một phần của add_editor_style() mảng của chúng tôi .

Để xác định đường dẫn đến biểu định kiểu của Google và mã hóa URL, chúng tôi thêm phần sau vào tệp functions.php của chúng tôi:

function twentyfourteen_font_url() {
$font_url = '';
/*
* Translators: If there are characters in your language that are not supported
* by Lato, translate this to 'off'. Do not translate into your own language.
*/
if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {
$font_url = add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), "//fonts.googleapis.com/css" );
}

return $font_url;
}

Simpler ???

function my_theme_add_editor_styles() {
$font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style( str_replace( ',', '%2C', $font_url ) );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Khi chúng ta đã định nghĩa hàm, chúng ta phải quay lại hàm add_editor_style () và bao gồm nó như sau:

add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url() ) );

Với điều đó, bạn có thể chỉ cần sử dụng phông chữ như bình thường. Ví dụ: nếu h2 chủ đề của chúng tôi sử dụng Lato với trọng lượng 700, bên trong editor-style.css bạn sẽ có:

h2 {
font-family: Lato, sans-serif;
font-weight: 700;
}

Cách tiếp cận nhanh chóng / lười biếng / giảm thiểu

Trái ngược với việc xác định các quy tắc CSS mới và sao chép chúng, khi bạn tiếp tục, với các quy tắc style.css của mình, bạn có thể chỉ cần @import toàn bộ phong cách của mình vào editor-style.css

Ở đầu editor-style.css tệp, thêm lệnh gọi để nhập style.css như sau:

@import “style.css”;

Đảm bảo rằng đường dẫn đến style.css là chính xác. ví dụ: nếu bạn đã di chuyển editor-style.css bên trong thư mục CSS, bạn sẽ cần điều chỉnh đường dẫn đến …/style.css

Tại thời điểm này, trình chỉnh sửa trực quan có thể sẽ bị xáo trộn. Từ đây, bạn sẽ phải nhắm mục tiêu một cách chiến lược và điều chỉnh bất kỳ quy tắc CSS nào đang khiến mọi thứ trong trình chỉnh sửa trở nên khó hiểu.

Tôi chỉ đề xuất cách tiếp cận đơn giản này nếu bạn chỉ muốn thiết lập và chạy nhanh chóng vì việc ghi đè các quy tắc CSS một lần có thể khá tẻ nhạt, chưa kể đến việc nhập toàn bộ biểu định kiểu nhưng chỉ chủ động sử dụng rất ít trong số đó chỉ phải gánh chịu chi phí không cần thiết và làm chậm thời gian tải. Tuy nhiên, đó là một lựa chọn.

Tạo kiểu cho trình chỉnh sửa dựa trên Loại bài đăng

Nếu bạn đã xác định và đang sử dụng Loại bài đăng tùy chỉnh, bạn nên tạo kiểu cho chúng - như bạn đã làm trong giao diện người dùng - trong trình chỉnh sửa trực quan / back-end. Giả sử bạn có nhiều loại bài đăng tùy chỉnh, tất cả đều được tạo kiểu khác nhau, điều đầu tiên bạn cần làm là tạo một biểu định kiểu khác nhau cho từng loại bài đăng và lưu nó trong thư mục chủ đề.

Hàm chúng tôi sẽ triển khai sẽ mong đợi các bảng định kiểu có tên phù hợp với kiểu bài đăng mà chúng [được cho là tạo kiểu] tức là editor-style-{post_type}.css. Vì vậy, nếu bạn đã tạo 3 loại bài đăng, chẳng hạn như khách hàng, mèo và chó, thì bạn sẽ cần ba bảng định kiểu cho giống nhau: editor-style-client.css, editor-style-cat.css và editor-style-dog .css.

Khi chúng ta đã tạo các bảng định kiểu đó và xác định các quy tắc CSS mong muốn của chúng ta, thì chúng ta cần xác định hàm. Mở functions.php và thêm phần sau:

function my_theme_add_editor_styles() {
global $post;
$post_type = get_post_type( $post->ID );
$editor_style = 'editor-style-' . $post_type . '.css';
add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );