Chặn trong wordpress
|
Gutenberg là bộ soạn thảo mới của WordPress từ phiên bản 5. 0, quản lý nội dung bài viết bằng các khối. Bài viết này sẽ hướng dẫn các bạn tạo 1 Block cho riêng mình ngoài các Block được hỗ trợ sẵn của Gutenberg WordPress Editor Show 1. Đăng kí 1 block vào file functions. php 'gutenberg-examples-01',
) );
}
add_action( 'init', 'gutenberg_vinasupport_sample_01_register_block' );2. Tạo tập lệnh xử lý nội dung của BlockTạo 1 khối có tên là “Ví dụ. H1“. Nội dung xử lý là chèn nội dung “Xin chào thế giới, chúng tôi là nhóm hỗ trợ vina” trong thẻ H1 vào bộ soạn thảo của WordPress Tạo tệp js có đường dẫn /src/assets/gutenberg-examples-01. js trong chủ đề của WordPress. Bạn có thể đặt đường dẫn tệp này ở bất kỳ đâu Nội dung file /src/assets/gutenberg-examples-01. js as after ( function( blocks, element ) {
var el = element.createElement;
var blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
blocks.registerBlockType( 'gutenberg-examples/example-01', {
title: 'Example: H1',
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'h1',
{ style: blockStyle },
'Hello World, we are vinasupport team.'
);
},
save: function() {
return el(
'h1',
{ style: blockStyle },
'Hello World, we are vinasupport team.'
);
},
} );
}(
window.wp.blocks,
window.wp.element
));Kết quả. You made to public Block  Sau khi nhấp vào Chặn “Ví dụ. H1” 3. Tạo tập lệnh xử lý nội dung động cho KhốiGiờ chúng ta tạo 1 tập lệnh xử lý phức tạp hơn cho Block. Tạo khối với 1 bộ thảo luận cho dự án Wordpress version 5. 0, mặc định Gutenberg sẽ là trình soạn thảo mới cho nền tảng WordPress. Cái tên Gutenberg được đặt tên theo Johannes Gutenberg. Khác với một trình soạn thảo văn bản, hình ảnh truyền thống, Gutenberg sử dụng các khối nội dung giống như nhiều trình tạo trang hiện đại Gutenberg không tạo ra các mã ngắn và HTML mà tất cả đều được đơn giản hóa hơn thành một số công cụ có sẵn, phù hợp cho người mới bắt đầu sử dụng WordPress Ưu điểm của Gutenberg
Nhược điểm của Gutenberg
Hướng dẫn tắt (vô hiệu hóa) Gutenberg?Để tắt, bạn có thể sử dụng plugin Classic Editor https. //wordpress. org/plugins/classic-editor/ Hoặc bạn cũng có thể chèn thêm đoạn mã sau vào hàm tệp. php của chủ đề đang được sử dụng Chúc bạn thành công Để bắt đầu, chúng ta cần cài đặt NPM và Node. js. NPM là một gói quản lý gói cho Node. js. Vì vậy, sau khi cài đặt Node. js, bạn cũng sẽ có quyền truy cập để sử dụng NPM. Bạn cũng có thể thích thú với Yarn 2. Các công cụ có sẵnWe are could create a Gutenberg block from the start. Có nghĩa là chúng ta sẽ tự cài đặt, tùy chỉnh cấu hình webpack, Babel, v. v. nhưng để làm cho việc phát triển đơn giản nhất có thể, mình sẽ sử dụng các công cụ dưới đây để tạo khối Gutenberg Chúng ta có 3 công cụ cung cấp môi trường cho việc phát triển Block Gutenberg dễ dàng hơn
Tất cả những công cụ này đều rất tốt để tạo ra một khối mẫu Gutenberg. Tuy nhiên, kính chào các bạn nên sử dụng create-guten-block hoặc @wordpress/block để phát triển Mình thường dùng tạo-guten-block nên mình sẽ chỉ giới thiệu về tools này, còn 2 cái kia các bạn tự tìm hiểu nhé 3. Tạo Gutenberg Block với tạo-guten-blocktạo-guten-block là một công cụ tuyệt vời để phát triển Gutenberg Block. create-guten-block được phát triển bởi ahmadawais Với tạo-guten-block, bạn không cần phải cấu hình gì nữa, vì công cụ này đã thiết lập môi trường webpack, babel,… từ a-z cho bạn rồi. To started
Gõ lệnh Lưu ý. Lệnh tạo một plugin WordPress với tên plugin mà bạn đã cung cấp Ví dụ. Mình tạo plugin tên là my-block
sau đó vào thư mục plugin my-block để bắt đầu phát triển
to build production thì you used ________số 8 Các tệp và thư mục bạn cần quan tâm nằm trong thư mục src nha, đây là thư mục chính để phát triển các khối của bạn Như các bạn có thể thấy, trong thư mục src này có 3 tệp và 1 thư mục
Một khối khi được đăng ký sẽ có cấu trúc như thế này Để plugin có thể chạy được, bạn cần phải tạo các tệp js, scss bằng cách sau
In dev mode, you run ( function( blocks, element ) {
var el = element.createElement;
var blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
blocks.registerBlockType( 'gutenberg-examples/example-01', {
title: 'Example: H1',
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'h1',
{ style: blockStyle },
'Hello World, we are vinasupport team.'
);
},
save: function() {
return el(
'h1',
{ style: blockStyle },
'Hello World, we are vinasupport team.'
);
},
} );
}(
window.wp.blocks,
window.wp.element
));1 or ( function( blocks, element ) {
var el = element.createElement;
var blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
blocks.registerBlockType( 'gutenberg-examples/example-01', {
title: 'Example: H1',
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'h1',
{ style: blockStyle },
'Hello World, we are vinasupport team.'
);
},
save: function() {
return el(
'h1',
{ style: blockStyle },
'Hello World, we are vinasupport team.'
);
},
} );
}(
window.wp.blocks,
window.wp.element
));2Sau đó kích hoạt plugin lên và kiểm tra khối vừa tạo có hoạt động không nhé Ở bài viết tiếp theo mình sẽ giới thiệu cho các bạn chi tiết hơn về biến, thuộc tính, cài đặt khối, thành phần được khai báo |
