Sự khác biệt giữa khối và trang trong WordPress là gì?

Trình chỉnh sửa WordPress tương đối mới, còn được gọi là Trình chỉnh sửa khối WordPress, luôn được phát triển thông qua plugin Gutenberg, đã đồng hành cùng chúng tôi từ năm 2018. Bạn có thể sử dụng trình chỉnh sửa khối trên bất kỳ chủ đề WordPress nào, miễn là chủ đề tải CSS mà các khối sử dụng. Nhưng có những chủ đề mới dựa vào Block Editor sâu hơn nhiều

Chủ đề khối WordPress cho phép bạn xây dựng toàn bộ trang web bằng cách sử dụng các khối, nghĩa là trách nhiệm của chủ đề chủ yếu là các nguyên tắc thiết kế và ít hơn về việc kiểm soát các trang và nội dung trên chúng. Điều này được gọi là Chỉnh sửa toàn trang trong WordPress và các chủ đề được xây dựng cho việc này được gọi là Chủ đề khối, vì bạn xây dựng mọi thứ bằng các khối

Hãy đào sâu vào tất cả những điều này

Tín dụng. WordPress. tổ chức

Mục lục

• Giới thiệu
• Thuật ngữ liên quan
• Sử dụng trình chỉnh sửa khối với các chủ đề cổ điển
• Giải phẫu của các chủ đề dựa trên khối
• Tạo chủ đề khối WordPress
• Cài đặt và kiểu toàn cầu (chủ đề. json)
• Phương pháp tiếp cận chủ đề khối WordPress
• Chặn các chủ đề hiện đang được sử dụng
• Chủ đề con khối xây dựng
• Vài suy nghĩ cá nhân
• Tài nguyên

Giới thiệu

Ngoại trừ những người theo dõi quá trình lặp lại phát triển hàng ngày của nó tại GitHub, hầu hết sự phát triển xung quanh trình chỉnh sửa khối phần lớn đều hiển thị cho người dùng — và đó không hẳn là một điều xấu. Cá nhân tôi đã cố gắng cập nhật trình chỉnh sửa khối thông qua các bài đăng trên WP Tavern và Gutenberg, đồng thời đã sử dụng cả trình chỉnh sửa kế thừa — hoặc trình chỉnh sửa “Cổ điển” — cũng như trình chỉnh sửa khối trong các trang web dự án học tập cá nhân của tôi

Sau khi đi đường vòng để tìm hiểu và trải nghiệm các trang web WordPress không đầu với khung Gatsby và Frontity, giờ đây tôi đã trở lại ngôi nhà WordPress gốc của mình

Mặc dù tôi đã biết kho lưu trữ GitHub thử nghiệm chủ đề WordPress được một thời gian — các chủ đề được tạo hoàn toàn từ các khối. — Gần đây tôi mới bắt đầu tìm hiểu các chủ đề khối. Trên thực tế, tôi đã sử dụng một chủ đề dựa trên khối thử nghiệm ở đây trong trang web dự án này

wordpress 5. 9 hiện đã ra mắt và cùng với đó là chủ đề dựa trên khối dành cho đại chúng. Bản phát hành này, được đặt tên là Joséphine, là phần giới thiệu chính thức về chỉnh sửa toàn bộ trang web WordPress và Chủ đề khối

Mặc dù chức năng chủ đề dựa trên khối đã có sẵn ở nhiều dạng lặp lại khác nhau trong các bản phát hành trước, nhưng đây là một vấn đề lớn đối với nền tảng WordPress và hệ sinh thái dựa trên nó. Tôi đã chạm tay vào nó và nghĩ rằng tôi sẽ chia sẻ những gì tôi đã học được về các chủ đề khối trong trải nghiệm thực tế của mình, cũng như một số suy nghĩ cá nhân về cách thức hoạt động của nó

từ chối trách nhiệm. Tôi không phải là một chuyên gia về chủ đề khối. Tôi thành thạo WordPress và là một fan hâm mộ lớn của hệ thống quản lý nội dung. Mục tiêu của tôi ở đây không phải là phê bình WordPress 5. 9 hoặc hướng bạn theo hướng bạn có nên thích hay muốn sử dụng nó hay không. Tôi chỉ đơn thuần xuất phát từ quan điểm của một người học hỏi cởi mở đang xây dựng các trang web cá nhân với sự hiểu biết khá sâu và quen thuộc với Trình chỉnh sửa khối WordPress

Thuật ngữ liên quan

Trước khi chúng ta đi sâu vào các chủ đề khối, tôi nghĩ rằng nên hình thành hiểu biết cơ bản về những gì chúng ta đang nói đến khi chúng ta xoay quanh các thuật ngữ, như khối và chỉnh sửa trang web, vì chúng cực kỳ mới và thú vị.

Trình chỉnh sửa khối

Đây thực sự là những gì chúng tôi muốn nói bất cứ khi nào chúng tôi đề cập đến “Trình chỉnh sửa WordPress. ” Chúng tôi gọi Trình chỉnh sửa WordPress là Trình chỉnh sửa khối vì nó cho phép chúng tôi tạo các trang và bài đăng trong đó từng thành phần— bao gồm văn bản, hình ảnh, video, đầu trang, chân trang, v.v. — được chèn vào bài đăng bằng cách sử dụng các khối có thể được sắp xếp theo mô-đun để hoàn thành bố cục trang. Nó phát triển từ cái mà ngày nay được gọi là trình chỉnh sửa “cổ điển”, trực tiếp hơn dựa trên việc nhập nội dung sẽ được xuất bản trên một trang hoặc bài đăng theo bố cục được xác định trước

WordPress Block Editor bao gồm bộ chèn khối (1), khu vực nội dung của trình chỉnh sửa khối (2) cũng như tài liệu và cài đặt khối (3)
Tín dụng. Sổ tay biên tập khối WordPress.

Nó giống như nội dung và bố cục kết hợp với nhau, trong đó cả hai được quản lý trong Trình chỉnh sửa WordPress. Vì vậy, nơi chúng ta thường dựa vào trình chỉnh sửa cho nội dung và (ít nhiều) mẫu chủ đề để xác định bố cục, cả hai đều có thể chỉnh sửa trực tiếp trong giao diện Trình chỉnh sửa WordPress

Bạn có thể tìm thêm chi tiết tại đây về cách sử dụng Trình chỉnh sửa khối

khối chủ đề

Như đã giải thích trong tài liệu WordPress

Chủ đề khối là một chủ đề WordPress với các mẫu hoàn toàn bao gồm các khối để ngoài nội dung bài đăng của các loại bài đăng khác nhau (trang, bài đăng,…), trình chỉnh sửa khối cũng có thể được sử dụng để chỉnh sửa tất cả các khu vực của trang web. đầu trang, chân trang, thanh bên, v.v.

Tài liệu WordPress này cung cấp tổng quan về chủ đề khối trong cơ sở kiến ​​thức của nó, bao gồm cách tạo chủ đề khối và kiểu dáng trong tài liệu hướng dẫn này

Điểm mấu chốt. Chủ đề khối khác với chủ đề WordPress “cổ điển”. Thay vì hoàn toàn dựa vào các tệp PHP tuân theo Phân cấp mẫu WordPress, Chủ đề khối WordPress bao gồm các mẫu HTML dựa trên khối — các nhóm khối được lắp ráp có thể được tạo kiểu và sắp xếp trong Trình chỉnh sửa trang web WordPress (sắp ra mắt tiếp theo).

Trình chỉnh sửa trang web

Đây là viên ngọc quý của WordPress 5. 9. Mặc dù được gọi chính thức là Trình chỉnh sửa trang web WordPress, nhưng phần lớn nó được gọi là Chỉnh sửa toàn trang** (FSE) trong quá trình phát triển và được mô tả là “trải nghiệm gắn kết cho phép bạn trực tiếp chỉnh sửa và điều hướng giữa các mẫu, phần mẫu khác nhau, . ” Phew, nhiêu đó

Tín dụng. Hỗ trợ WordPress

Trình chỉnh sửa trang web WordPress cho phép chúng tôi tạo và chỉnh sửa các mẫu được tạo từ các khối. Vì vậy, ý tưởng là chúng ta có thể tập hợp một nhóm các khối có thể được áp dụng trên toàn cầu cho một trang web. Giống như một thành phần tiêu đề, ví dụ. Điều đó có thể bao gồm các khối cho logo trang web, menu chính và dòng giới thiệu. Trình chỉnh sửa trang web cho phép chúng tôi tạo một chủ đề khối mới hoặc sửa đổi một chủ đề hiện có để mang lại cho giao diện toàn cầu của trang web một giao diện hoàn toàn mới mà không cần viết một dòng mã nào

Vì vậy, bạn có biết trước đây bạn đã phải xây dựng một chủ đề như thế nào với một loạt các mẫu PHP không? . Chủ đề “phát triển” hiện có giao diện người dùng có sẵn trực tiếp trong WordPress

Chi tiết hơn về cách sử dụng trình chỉnh sửa trang có trong tài liệu WordPress

Bảng thuật ngữ WordPress chính thức có các thuật ngữ và định nghĩa bổ sung mà bạn có thể muốn khám phá khi chúng tôi tìm hiểu sâu hơn về Chủ đề khối WordPress và FSE

Sử dụng trình chỉnh sửa khối với các chủ đề cổ điển

Trình chỉnh sửa khối WordPress có thể được sử dụng trong cả chủ đề cổ điển và khối. Khi dự án trình chỉnh sửa Gutenberg bắt đầu, trình chỉnh sửa dựa trên TinyMCE cổ điển đã được tách khỏi WordPress Core vào plugin Trình chỉnh sửa cổ điển. Miễn là plugin Classic Editor được cài đặt và hoạt động, việc viết nội dung diễn ra khá bình thường như trước khi các khối được giới thiệu

Trước khi giới thiệu chính thức các tính năng của trình chỉnh sửa khối, chúng tôi phải cài đặt plugin Gutenberg thử nghiệm. Chỉ cần chuyển đổi plugin, nội dung trang hoặc bài đăng riêng lẻ có thể được tạo bằng trình chỉnh sửa. WordPress 5. 0 đã giới thiệu trình chỉnh sửa khối cùng với chủ đề Twenty Nineteen mặc định, trình bày cách thêm các tính năng của trình chỉnh sửa khối và khám phá sức mạnh của nó

Nói cách khác, sự phát triển hướng tới FSE đã được xây dựng trong một thời gian. Và do đó, chúng tôi có thể tận hưởng mức độ tương thích ngược cao cho phép tất cả chúng tôi áp dụng các tính năng dựa trên khối khi chúng tôi tốt và sẵn sàng

Giải phẫu của các chủ đề dựa trên khối

Các chủ đề dựa trên khối thử nghiệm đã được phát triển từ đầu năm 2020. Tại thời điểm tôi viết bài này, kho lưu trữ thử nghiệm chủ đề GitHub liệt kê 12 chủ đề khối khám phá một số khía cạnh của việc tạo chủ đề bằng cách sử dụng khối hoặc mẫu khối

Nhưng có lẽ chủ đề Twenty Twenty-One là chủ đề “mặc định” đầu tiên tạo khối thành công dân hạng nhất, giới thiệu kiểu khối và mẫu khối, mặc dù các phiên bản cập nhật gần đây của Twenty Nineteen và Twenty Twenty cũng bao gồm khối đi kèm . Hiện tại, có hơn 130 chủ đề từ cộng đồng với các mẫu trình chỉnh sửa khối đi kèm, tính năng kiểu khối, bao gồm cả chủ đề Eksell yêu thích của tôi, Anders Noren

Với sự phát triển liên tục của các tính năng FSE của Trình chỉnh sửa khối WordPress, thậm chí nhiều chủ đề dựa trên khối hơn cũng đang được giới thiệu

Vì vậy, việc phát triển các chủ đề dựa trên khối có ý nghĩa gì đối với những người trong chúng ta, những người đã gắn bó sâu sắc với cách xây dựng các chủ đề WordPress “cổ điển”?

Cấu trúc tệp của chủ đề khối

Trong chủ đề dựa trên PHP cổ điển, các phần tử đánh dấu được tạo bằng PHP và JavaScript, trong khi ở chủ đề khối, các mẫu đó hoàn toàn bao gồm các khối HTML và CSS cấu trúc do trình chỉnh sửa khối cung cấp. Điều này nghe có vẻ đáng sợ đối với nhiều người, nhưng thật dễ dàng để tưởng tượng nó giải phóng như thế nào đối với những người khác vì nó hạ thấp tiêu chuẩn khi phát triển một chủ đề WordPress

Cấu trúc của một chủ đề khối khác rất nhiều so với Cấu trúc phân cấp mẫu WordPress cổ điển mà tất cả chúng ta đều quen thuộc. Trong các chủ đề dựa trên PHP cổ điển, đánh dấu thành phần trang phải được tạo bằng PHP và JavaScript, trong khi trong các chủ đề khối, WordPress Core cung cấp cả đánh dấu và kiểu dáng cơ bản. Ví dụ: chủ đề Twenty Twenty-One mặc định chứa 48 tệp PHP và 11 tệp JavaScript có trọng lượng là 4. 5 MB. Người anh em dựa trên khối của nó, chủ đề TT1 Blocks thử nghiệm, chỉ chứa bốn tệp PHP, một tệp JavaScript và tám tệp HTML ở mức 3. 5 MB

Thư mục chủ đề Twenty Twenty-One

Thư mục chủ đề TT1

Cấu trúc chủ đề khối có thể rất đơn giản chỉ với một vài tệp cần thiết.

    






    
    





    
    
Footer
    

3,

    






    
    





    
    
Footer
    

4 và

    






    
    





    
    
Footer
    

5. Sau đây là cấu trúc tệp chủ đề khối điển hình, được lấy từ Sổ tay Trình chỉnh sửa WordPress

#! basic block-theme structure
theme
|__ style.css
|__ functions.php
|__ index.php
|__ theme.json
|__ templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

• 
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  6. Chứa biểu định kiểu của chủ đề

• 
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  7. Chứa thiết lập chủ đề và có thể bao gồm các tệp bổ sung, bật biểu định kiểu trình chỉnh sửa và enqueue

  
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  4, nếu có bất kỳ

• 
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  3. Một tệp trống để chuyển sang tệp mặc định trong trường hợp chủ đề khối được kích hoạt mà không có Trình chỉnh sửa khối WordPress

• 
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  2. Tệp cấu hình tùy chọn được sử dụng để bật hoặc tắt các tính năng và đặt kiểu mặc định cho cả trang web và khối

• 
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  1. Chứa các mẫu trang bao gồm các khối. Các tệp này tuân theo cùng một hệ thống phân cấp mẫu như các chủ đề truyền thống

  • 
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    2. Mẫu chính để tạo bài đăng hoặc trang, tương tự như

    
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    3 trong các chủ đề cổ điển

  • 
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    4. Mẫu để tạo các bài đăng hoặc trang đơn lẻ

  • 
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    5. Mẫu để tạo danh sách lưu trữ các bài đăng

• 
  
  
  
  
      
  
  
  
  
  
  
      
      
  
  
  
  
  
      
      
  Footer
      
  
  

  6. Các bộ sưu tập phổ biến của các khối được sử dụng trong các mẫu khối

  • 
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    7. Khối tiêu đề toàn cầu

  • 
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    8. Khối chân trang toàn cầu

  • 
    
    
    
    
        
    
    
    
    
    
    
        
        
    
    
    
    
    
        
        
    Footer
        
    
    

    9. Một khối thanh bên toàn cầu tùy chọn

Danh sách các khối chủ đề bao gồm các khối dành riêng cho chủ đề khối có sẵn trong Sổ tay Trình chỉnh sửa khối WordPress

Mẫu và các bộ phận của mẫu

Các mẫu về cơ bản là một nhóm các khối được lắp ráp có thể bao gồm các phần khối có thể tái sử dụng, chẳng hạn như đầu trang hoặc chân trang. Các khối khác nhau được sử dụng để soạn mẫu trang. Ví dụ: đó có thể là danh sách các bài đăng trên blog, danh sách sản phẩm hoặc thậm chí là một tiện ích

Đây là một ví dụ về mẫu khối được lấy từ Sổ tay Trình chỉnh sửa khối WordPress

    






    
    





    
    
Footer
    

Tạo chủ đề khối WordPress

Trình chỉnh sửa trang web WordPress hiện là công cụ chính để xác định giao diện của trang web WordPress. Bạn có thể đã quen sử dụng Trình tùy chỉnh WordPress để thực hiện những việc này — và một số chủ đề đã khai thác rất nhiều vào điều đó để thực hiện những gì trình chỉnh sửa trang hiện được thiết kế để thực hiện

Vì vậy, không còn là trình chỉnh sửa khối cho các trang và bài đăng;

Tôi cho rằng nhiều người trong số các bạn đã sử dụng trình chỉnh sửa khối và không thực sự cần một bài học sâu về nó là gì hoặc cách sử dụng nó. Điều đó nói rằng, nó đáng để xem xét một chút vì nó là động lực cho mọi thứ liên quan đến chủ đề WordPress trong tương lai, bây giờ là WordPress 5. 9 là trong tự nhiên

Trên thực tế, khi chúng ta nói về chỉnh sửa khối và tạo chủ đề, vâng, chúng ta đang nói về trình chỉnh sửa khối. Nhưng thực sự những gì chúng ta đang nói đến là Trình chỉnh sửa trang web WordPress

Giao diện Trình chỉnh sửa trang web WordPress

Ngay cả khi là người đầu tiên sử dụng plugin Gutenberg, tôi thấy trải nghiệm của trình chỉnh sửa trang web thật đáng sợ và bực bội. Nó thay đổi thường xuyên và thường xuyên mạnh mẽ với mỗi bản phát hành mới. Tuy nhiên, tôi hy vọng rằng WordPress 5. 9 là một loại đường trên cát giúp ổn định cảm giác như đá

Trình chỉnh sửa trang web được truy cập giống như cách bạn đã sử dụng để truy cập Trình tùy chỉnh WordPress. Nó nằm dưới Giao diện trong menu bảng điều khiển, được gọi là Trình chỉnh sửa

Tùy chọn trình chỉnh sửa trang web chỉ khả dụng khi chủ đề khối được kích hoạt. Nếu bạn đang sử dụng một chủ đề cổ điển, thì bạn sẽ có giao diện người dùng cổ điển đi kèm với chủ đề đó

Hãy xem nhanh qua giao diện Trình chỉnh sửa mới

Đầu tiên, điều hướng đến trình chỉnh sửa trang bằng cách nhấp vào Giao diện → Trình chỉnh sửa từ menu quản trị viên WordPress. Mục menu đó có thể có nhãn “beta” màu đỏ trên đó, giống như hiện tại trong WordPress 5. 9

Điều đó sẽ đưa bạn đến trình chỉnh sửa trang web, hiển thị trang chủ của bạn hoặc kho lưu trữ bài đăng, tùy thuộc vào những gì bạn đã đặt trang chủ của mình trong Cài đặt → Đọc. Từ đó, nó trông giống như phiên bản toàn màn hình của trình chỉnh sửa khối khi tạo hoặc chỉnh sửa trang hoặc bài đăng. Nhưng nhấp vào biểu tượng WordPress ở phía trên bên trái màn hình và bảng điều khiển bên trái mở ra hiển thị Trình chỉnh sửa trang web WordPress và menu của nó để điều hướng giữa các phần khác nhau của trang web. Điều này bao gồm Trang web, Mẫu và Phần mẫu

Hãy nhấp vào Mẫu. Điều này hiển thị cho chúng tôi danh sách các mẫu có sẵn do chủ đề cung cấp, hoàn chỉnh với mô tả của từng mẫu và nơi đăng ký (e. g. chủ đề gốc hoặc chủ đề con)

Một cách khác để đến màn hình này là từ trang đầu tiên chúng tôi đã truy cập khi vào trình chỉnh sửa trang web. Nhấp vào tên của mẫu trong thanh quản trị trên cùng để hiển thị nút đưa bạn trực tiếp đến cùng một màn hình Mẫu

Bất kỳ mẫu nào cũng có thể được chỉnh sửa giống như bất kỳ trang hoặc bài đăng nào trong trình chỉnh sửa khối. Giả sử tôi không muốn có hình ảnh nổi bật trên trang chỉ mục của mình và muốn xóa hình ảnh đó. Chỉ cần xóa khối hình ảnh nổi bật và lưu mẫu

Phần quan trọng khác của giao diện người dùng trình chỉnh sửa trang là chế độ xem danh sách phác thảo các khối hiện tại được đặt trong mẫu. Đây là một tính năng trong WordPress kể từ khi giới thiệu trình chỉnh sửa khối, nhưng điểm mới lần này là bạn có thể mở và đóng các khối chính có chứa các khối con giống như đàn accordion. Không chỉ vậy, nó còn hỗ trợ kéo và thả các khối để thay đổi bố cục trực tiếp từ đó

Một điều nữa trong giao diện người dùng của trình chỉnh sửa trang web. bạn có thể xóa các tùy chỉnh chỉ bằng một nút bấm. Từ màn hình Mẫu, nhấp vào menu kebob bên cạnh mẫu và chọn tùy chọn Xóa tùy chỉnh. Đây là một cách hay để thiết lập lại và bắt đầu lại từ đầu, nếu bạn cần

Nhóm WordPress Core xuất bản các bản cập nhật thường xuyên về tính năng mới tại Make WordPress Core. Thật đáng để đánh dấu trang để cập nhật những thay đổi mới nhất đối với Trình chỉnh sửa khối WordPress và Trình chỉnh sửa trang web

Tạo mẫu và các phần mẫu

Như bạn đã biết, các mẫu là cốt lõi của chủ đề WordPress. Họ thực thi các bố cục nhất quán và có thể tái sử dụng. Điều đó không thay đổi trong WordPress 5. 9. Và thực tế là chúng ta có thể tạo các phần mẫu giống như các phần mô-đun có thể được sử dụng trong nhiều mẫu, chẳng hạn như truy vấn bài đăng nằm trong mẫu lưu trữ và mẫu trang chủ.

Có gì khác biệt trong WordPress 5. Thứ 9 là chúng được tạo và quản lý bằng trình chỉnh sửa trang chứ không phải các tệp PHP nằm trong thư mục chủ đề

Sổ tay Trình chỉnh sửa khối liệt kê ba cách để tạo mẫu và các phần mẫu. (a) thủ công, bằng cách tạo tệp HTML có chứa đánh dấu khối, (b) sử dụng trình chỉnh sửa trang và (c) sử dụng chế độ chỉnh sửa mẫu trong trình chỉnh sửa khối

Mô tả ngắn gọn về cách tạo mẫu trong trình chỉnh sửa trang web và chế độ chỉnh sửa mẫu có sẵn trong sổ tay Block Theme. WordPress 5. 9 cho phép tạo mẫu mới bằng chế độ chỉnh sửa

Sau đó, các mẫu tùy chỉnh có thể được xuất để đưa vào một chủ đề khối. Vì vậy, vâng, giờ đây chúng tôi có khả năng tạo một chủ đề WordPress hoạt động đầy đủ mà không cần viết một dòng mã nào. Thư mục đã xuất hiện không chứa tệp

    






    
    





    
    
Footer
    

2, tuy nhiên, có một đề xuất tại GitHub cho phép xuất cả chủ đề và kiểu khối

Nhưng đối với những người thích làm việc chặt chẽ hơn với mã, thì việc tạo các mẫu WordPress và các phần mẫu theo cách thủ công vẫn là một vấn đề. Bạn vẫn có thể mở trình chỉnh sửa mã và tạo các tệp HTML có chứa đánh dấu khối

Cài đặt và kiểu chung (

Footer

2)

Trong các chủ đề cổ điển, chúng tôi viết các quy tắc tạo kiểu trong tệp

    






    
    





    
    
Footer
    

4. Trong các chủ đề khối, việc tạo kiểu khó khăn hơn vì CSS đến từ các nguồn khác nhau (e. g. khối cốt lõi, chủ đề và người dùng). wordpress 5. 8 đã giới thiệu một khái niệm về Kiểu toàn cầu - về cơ bản là tệp

    






    
    





    
    
Footer
    

2 - theo tài liệu, hợp nhất “các API khác nhau liên quan đến kiểu vào một điểm duy nhất - tệp

    






    
    





    
    
Footer
    

2 phải được đặt bên trong thư mục gốc của thư mục chủ đề. “

Tệp

    






    
    





    
    
Footer
    

2 được cho là đã được thiết kế để cung cấp cấu trúc kiểu dáng chi tiết hơn cho các tác giả chủ đề với các tùy chọn để quản lý và tùy chỉnh các kiểu CSS đến từ nhiều nguồn gốc khác nhau. Ví dụ: tác giả chủ đề có thể đặt một số tính năng kiểu dáng nhất định bị ẩn khỏi người dùng, xác định màu mặc định, kích thước phông chữ và các tính năng khác có sẵn cho người dùng và cũng có thể đặt bố cục mặc định của trình chỉnh sửa. Ngoài ra,

    






    
    





    
    
Footer
    

2 cho phép bạn tùy chỉnh kiểu dáng trên cơ sở mỗi khối. Nó mạnh mẽ, linh hoạt và siêu dễ bảo trì

Trình chỉnh sửa khối dự kiến ​​sẽ cung cấp tất cả các kiểu dáng cơ bản mà tác giả chủ đề được phép tùy chỉnh kiểu dáng, như được xác định bởi tệp

    






    
    





    
    
Footer
    

2. Tuy nhiên, tệp

    






    
    





    
    
Footer
    

2 có thể khá dài đối với một chủ đề phức tạp và hiện tại không có cách nào để phân vùng tệp theo cách dễ tiêu hóa hơn. Có một vé GitHub để cơ cấu lại nó để các tệp

    






    
    





    
    
Footer
    

2 khác nhau ánh xạ tới một thư mục

    






    
    





    
    
Footer
    

30. Đó sẽ là một cải tiến tốt cho trải nghiệm của nhà phát triển

Chủ đề Twenty Twenty-Two mặc định là một ví dụ điển hình về cách các tính năng chỉnh sửa toàn trang của WordPress sử dụng

    






    
    





    
    
Footer
    

2 cho cài đặt chung và khối tạo kiểu

Phương pháp tiếp cận chủ đề khối WordPress

Có thể bạn đã luôn tạo các chủ đề WordPress từ đầu. Có lẽ bạn đã dựa vào chủ đề Dấu gạch dưới làm điểm bắt đầu. Hoặc có thể bạn có một chủ đề yêu thích mà bạn mở rộng bằng một chủ đề con. Các tính năng mới của Trình chỉnh sửa trang web WordPress thực sự thay đổi cách chúng tôi tạo chủ đề

Sau đây là một số chiến lược mới nổi để phát triển chủ đề dựa trên khối được tích hợp sâu với Trình chỉnh sửa trang web WordPress

chủ đề chung

Nhóm Automattic đã xây dựng một chủ đề phổ quát Blockbase được mệnh danh là một cách mới để xây dựng chủ đề, tương tự như chủ đề khởi động Underscores. Chủ đề Blockbase cung cấp các kiểu “ponyfill” tạm thời mà trình chỉnh sửa khối “chưa tính đến trên các thuộc tính ‘tùy chỉnh’ của

    






    
    





    
    
Footer
    

2” và điều đó cuối cùng có thể trở nên lỗi thời sau khi plugin Gutenberg hoàn thiện và được tích hợp vào WordPress Core

Sử dụng cách tiếp cận chủ đề gốc phổ biến, Automattic đã phát hành tám chủ đề con Blockbase và một số chủ đề khác đang được phát triển tại GitHub

chủ đề mặc định Twenty-Two-Two

Chủ đề mặc định Twenty-Two Two là một điểm khởi đầu tuyệt vời khác, vì đây thực sự là chủ đề WordPress đầu tiên đi kèm với WordPress được thiết kế để hoạt động với trình chỉnh sửa trang web

Theo tôi, chủ đề này rất tuyệt vời cho các nhà phát triển chủ đề đã quen thuộc với các tính năng của FSE để giới thiệu những gì có thể. Đối với những người dùng khác không phải là nhà phát triển và không quen thuộc với các tính năng của FSE, việc tùy chỉnh nó trong trình chỉnh sửa khối, sau đó xuất nó dưới dạng chủ đề con có thể gây khó chịu và choáng ngợp.

chủ đề lai

Khái niệm về chủ đề “Hybrid” trong ngữ cảnh của FSE được thảo luận trong vé GitHub này. Ý tưởng là cung cấp đường dẫn cho bất kỳ người dùng nào sử dụng trang web hoặc trình chỉnh sửa mẫu để ghi đè các mẫu chủ đề truyền thống

Justin Tadlock trong bài đăng trên WP Tavern này dự đoán bốn loại chủ đề — chỉ khối, phổ quát, kết hợp và cổ điển — và suy đoán rằng các tác giả chủ đề có thể phân chia giữa “chủ đề khối và sự kết hợp của các chủ đề cổ điển/kết hợp. ”

Bằng chứng trong bánh pudding được cung cấp bởi Frank Klein trong “Điều tôi đã học được khi xây dựng một chủ đề kết hợp”

Chủ đề kết hợp kết hợp cách tiếp cận theo chủ đề truyền thống với các tính năng chỉnh sửa toàn bộ trang web. Một thành phần quan trọng ở đây là tệp

    






    
    





    
    
Footer
    

2. Nó cung cấp nhiều quyền kiểm soát hơn đối với cài đặt của trình chỉnh sửa khối và đơn giản hóa các khối tạo kiểu. Một chủ đề kết hợp cũng có thể sử dụng các mẫu khối, nhưng đó là tùy chọn

Frank là tác giả của chủ đề Bosco dựa trên khối và đã mở rộng hơn nữa về “chủ đề kết hợp” là gì bằng cách tạo phiên bản kết hợp của chủ đề Twenty Twenty mặc định. Chủ đề có sẵn trên GitHub. Hiện tại, không có chủ đề kết hợp nào trong Thư mục chủ đề WordPress

Chủ đề cộng đồng WordPress

Tại thời điểm viết bài, có 47 chủ đề dựa trên khối với các tính năng FSE có sẵn trong thư mục chủ đề. Như mong đợi, cách tiếp cận này rất đa dạng

Ví dụ: trong bài đăng này, tác giả chủ đề khối Aino, Ellen Bower, thảo luận về cách họ chuyển đổi chủ đề cổ điển thành chủ đề khối, nêu chi tiết điều gì làm cho chủ đề trở thành chủ đề "khối". Cấu trúc tệp của phương pháp này trông khác với cấu trúc chủ đề khối tiêu chuẩn mà chúng tôi đã đề cập trước đó

Một chủ đề khối phổ biến khác, Tove của Andars Noren, được mô tả là một chủ đề cơ sở linh hoạt tuân theo cấu trúc tệp chủ đề khối tiêu chuẩn

Ngoài ra còn có một bằng chứng trang đơn rất đơn giản về chủ đề khái niệm của Carolina Nymark không chứa gì ngoài một

    






    
    





    
    
Footer
    

2 duy nhất có tên là Miniblock OOAK. Nó đã có sẵn trong thư mục chủ đề, cũng như một cái khác của Justin Tadlock đang trong quá trình hoàn thiện (và anh ấy đã viết quá trình của mình trong một bài viết riêng)

Ứng dụng Block Theme Generator

Mặc dù chúng tôi đã thiết lập các Chủ đề khối WordPress thân thiện như thế nào đối với những người không phải là nhà phát triển, vẫn có những công cụ giúp tạo các chủ đề khối hoàn chỉnh hoặc chỉ đơn thuần là một tệp

    






    
    





    
    
Footer
    

2 tùy chỉnh

David Gwyer, một kỹ sư Automattic, đang làm việc trên một ứng dụng tạo chủ đề Khối, tại thời điểm viết bài, ứng dụng này đang ở giai đoạn thử nghiệm và có sẵn để thử nghiệm theo yêu cầu

Trong thử nghiệm ngắn của tôi, ứng dụng chỉ cho phép tôi tạo tệp

    






    
    





    
    
Footer
    

2 tùy chỉnh. Nhưng Gwyer đã nói với WP Tavern rằng ứng dụng vẫn chưa hoàn thiện, nhưng các tính năng đang được bổ sung thường xuyên. Sau khi hoàn thành, đây có thể là một tài nguyên rất hữu ích cho các tác giả chủ đề để tạo các chủ đề khối tùy chỉnh

Chặn các chủ đề hiện đang được sử dụng

Chủ đề Twitter này từ Carolina Nymark hiển thị một số ví dụ về các chủ đề khối đang hoạt động và đang được sản xuất tại thời điểm viết bài này. Trong một bài báo gần đây trên Yoast, Carolina đã liệt kê một loạt các trang web cá nhân và doanh nghiệp sử dụng chủ đề khối

trang cá nhân

• nữ sáng tạo. com
• helen. Blog
• Tabor phong phú
• Lesly. pizza
• dimonacook. com
• lúa mạch đen. mã số

trang web kinh doanh

• chỉnh sửa toàn trang. com
• con ruồi. thì là ở
• wpvip. com
• Ainoblocks
• từng trang. com
• băng giá. com
• Quán rượu WP

Như tôi đã đề cập trước đó, tôi cũng đã sử dụng chủ đề khối cho một trong những trang web cá nhân của mình trong một thời gian. Chủ đề Twenty Twenty-Two mặc định hiện cũng hiển thị hơn 60.000 lượt cài đặt đang hoạt động, điều này cho tôi biết có rất nhiều ví dụ khác về triển khai chủ đề dựa trên khối trong tự nhiên

Chủ đề con khối xây dựng

Chủ đề trẻ em vẫn là một thứ trong kỷ nguyên mới này của các khối WordPress, mặc dù thứ gì đó vẫn còn trong những ngày đầu. Nói cách khác, không có cách tiếp cận rõ ràng nào để tạo một chủ đề con dựa trên khối và không có công cụ hiện có nào để trợ giúp vào lúc này

Điều đó nói rằng, một số cách tiếp cận để tạo chủ đề khối con WordPress đang nổi lên

Tạo plugin Chủ đề Blockbase

Nhóm Automattic đang làm việc trên một plugin có tên là Tạo chủ đề Blockbase. Điều này sẽ làm cho việc tạo các chủ đề con dựa trên chủ đề phổ quát Blockbase mà chúng ta đã nói trước đó trở nên khá đơn giản. Ben Dwyer đã thảo luận về cách các tác giả chủ đề có thể xây dựng các chủ đề con Blockbase với sáu bước đơn giản và không cần viết một dòng mã nào

Tôi đã thử nghiệm plugin trong môi trường cục bộ của riêng mình, chỉ thực hiện những thay đổi nhỏ đối với cài đặt chủ đề Blockbase của tôi và mọi thứ dường như hoạt động. Chỉ cần lưu ý rằng plugin vẫn đang thử nghiệm và đang được phát triển, mặc dù bạn có thể làm theo lộ trình để xem những gì đang diễn ra

Sử dụng tệp

    






    
    





    
    
Footer
    

2 thay thế

Kjell Reigstad, tác giả của chủ đề Twenty Twenty-Two mặc định của WordPress, trình bày cách hoán đổi một tệp

    






    
    





    
    
Footer
    

2 với một tệp

    






    
    





    
    
Footer
    

2 khác chứa các cấu hình kiểu khác nhau có thể thay đổi giao diện của thiết kế chủ đề dựa trên khối

Tuần trước, tôi đã tạo một bản trình diễn nhanh về cách thẩm mỹ hình ảnh của Hai Mươi Hai Mươi Hai có thể được thay đổi mạnh mẽ thông qua chủ đề của nó. cài đặt json. Ví dụ này hoán đổi tệp json mặc định cho một tệp có các giá trị phông chữ, màu sắc, hai tông màu và khoảng cách khác nhau. ảnh. Twitter. com/ab9tyGwLOS

– kjellr (@kjellr) ngày 22 tháng 10 năm 2021

Kjell đã mở một yêu cầu kéo hiển thị một số chủ đề con thử nghiệm có sẵn để thử nghiệm tại kho lưu trữ GitHub thử nghiệm chủ đề GitHub

Đồng thời, Ryan Welcher đang trong quá trình phát triển công cụ xây dựng

    






    
    





    
    
Footer
    

2 sẽ tạo tệp

    






    
    





    
    
Footer
    

2 tùy chỉnh để tạo điều kiện cho những người không phải là lập trình viên tạo các chủ đề con tương tự. Có thể tìm thấy nhiều hơn trong bài đăng WP Tavern này

Chủ đề con Framboise (có sẵn trong thư mục chủ đề) là một ví dụ ban đầu về cách tiếp cận đó chỉ bao gồm một tệp

    






    
    





    
    
Footer
    

2 duy nhất

Thậm chí có nhu cầu về chủ đề con không?

Rich Tabor đặt câu hỏi

Nếu một chủ đề bao gồm JSON và các mẫu khối có thể được sửa đổi thông qua Kiểu toàn cầu, thì chủ đề con dùng để làm gì?

– Tabor giàu có (@richard_tabor) ngày 25 tháng 10 năm 2021

Thật vậy, một tệp

    






    
    





    
    
Footer
    

2 duy nhất có thể tự đóng vai trò là một chủ đề con. Có một cuộc thảo luận đang diễn ra về việc cho phép các tác giả chủ đề gửi nhiều tệp

    






    
    





    
    
Footer
    

2 với các chủ đề khối cung cấp nhiều biến thể phong cách toàn cầu. Bằng cách này, người dùng WordPress có thể chọn một trong các biến thể để sử dụng trên trang web

Một số tính năng của các biến thể phong cách toàn cầu đã được đưa vào Gutenberg v12. 5 và dự kiến ​​sẽ có sẵn với WordPress 6. 0

Vài suy nghĩ cá nhân

Tôi thật thiếu sót khi kết thúc điều này mà không cân nhắc tất cả những điều này từ cấp độ cá nhân. Tôi sẽ làm điều này ngắn gọn trong một vài điểm

Chủ đề khối là câu trả lời của WordPress cho những lời chỉ trích về Jamstack

Những người đam mê Jamstack đã đưa ra những lời chỉ trích về nền tảng WordPress, đáng chú ý nhất là các chủ đề WordPress chứa đầy các tệp PHP. Chà, điều đó không còn xảy ra với WordPress Block Themes nữa

Trước đây chúng ta đã thấy toàn bộ chủ đề có thể là một tệp

    






    
    





    
    
Footer
    

2 duy nhất và một tệp

    






    
    





    
    
Footer
    

2 như thế nào. Không sưng lên ở đó. Và không có gì ngoài đánh dấu

Tôi nhớ Trình tùy chỉnh WordPress

Đặc biệt là khả năng tiêm mã tùy chỉnh. Từ đây trở đi, sẽ yêu cầu mức độ quen thuộc sâu sắc với Giao diện người dùng Trình chỉnh sửa trang web WordPress để thực hiện điều tương tự

Tùy chỉnh một trang web dễ dàng

Tùy chỉnh một chủ đề cổ điển — ngay cả những thứ tối thiểu như thay đổi phông chữ — có thể khó khăn nếu bạn không biết mình đang làm gì. Giờ đây, điều đó đã thay đổi với trình chỉnh sửa trang web và việc giới thiệu tệp

    






    
    





    
    
Footer
    

2, trong đó chủ đề có thể được tùy chỉnh (và thậm chí xuất. ) mà không cần viết một dòng mã nào

Tôi vẫn giữ quan điểm của mình, mặc dù giao diện trình soạn thảo của trang hơi khó hiểu. Tôi nghĩ trải nghiệm người dùng thú vị còn lâu mới đạt được nhưng mong chờ phiên bản WordPress 6 tiếp theo. 0 cho trải nghiệm người dùng tốt hơn

Rào cản thiết kế theme ngày càng thấp

Nó không nói nhiều về PHP và các tệp mẫu mà nhiều hơn về phát triển các mẫu và tạo nội dung. Nghe có vẻ chính xác những gì một hệ thống quản lý nội dung nên được thiết kế để làm. Tôi đã rất hào hứng với các tính năng mới đang được xem xét cho WordPress 6. 0 phát hành

Tài nguyên

Đã có rất nhiều bài viết khác đề cập đến Chủ đề khối WordPress, chỉnh sửa toàn bộ trang web và trình chỉnh sửa khối. Và nhiều trong số đó đã có trước WordPress 5. 9 đã được phát hành

Vì vậy, ngoài bài viết này, đây là bộ sưu tập các bài viết khác để bạn xem xét khi bắt đầu hoặc tiếp tục hành trình tạo khối WordPress và chỉnh sửa trang web

wordpress 5. 9

• Giới thiệu WordPress 5. 9 (video phát hành chính thức)
• Khám phá WordPress 5. 9 (video của Ann McCarthy)
• Khám phá khối điều hướng (video của Ann McCarthy)
• Giới thiệu Hai Mươi Hai Mươi Hai (Kjell Reigstad)
• Cách 5. 9 tạo nền tảng vững chắc cho tương lai (Gutenberg Times)
• Chỉnh sửa trang web đầy đủ (FSE) trong WordPress là gì?

Trình chỉnh sửa trang web và chủ đề khối

• Sổ tay biên tập khối WordPress
• Thư mục mẫu WordPress
• Thử nghiệm chủ đề WordPress (GitHub)
• Khái niệm cơ bản về khối WordPress Gutenberg (video của WP Apprentice)
• Giới thiệu về các chủ đề dựa trên Khối (video, Kjell Reigstad)
• Thiết kế trang web đơn giản với chỉnh sửa toàn bộ trang web (Tìm hiểu WordPress)
• Cách sử dụng các mẫu PHP trong chủ đề khối (Carolina Nymark)

Các bài blog chọn lọc

• Kỷ nguyên mới cho chủ đề WordPress (Anders Noren)
• Gutenberg Chỉnh sửa toàn bộ trang web và Chủ đề dựa trên khối (Dự án xuất bản)
• Vì vậy, bạn muốn tạo các mẫu khối? . tin tức tổ chức)
• chủ đề. đường chân trời json (Matia Ventura)
• Chuyển sang chủ đề dựa trên khối (Kelly Ryelle)

Các liên kết hữu ích khác

• Quán rượu WP. Trang web bao gồm các chủ đề khối, các bản phát hành Gutenberg và các plugin giúp người đọc tìm hiểu những gì mới trên World Press
• Thời báo Gutenberg. Trang web bao gồm các tin tức quan trọng của Gutenberg và các liên kết liên quan đến trình chỉnh sửa khối, chỉnh sửa toàn bộ trang web, hàng tuần
• Tạo chủ đề WordPress. Các ghi chú cuộc họp đã xuất bản về các chủ đề và chuỗi chủ đề Gutenberg +
• Tạo lõi WordPress. Xuất bản nội dung mới sau mỗi bản phát hành Gutenberg hai tuần một lần

---

Như mong đợi trong thử nghiệm beta, trình chỉnh sửa trang web vẫn còn khó hiểu và khó hiểu, tuy nhiên, tôi thấy thật thú vị khi làm việc với các chủ đề khối. Thật vậy, tôi đã sửa đổi Twenty Twenty-Two làm chủ đề con và dự định tạo các lựa chọn thay thế phong cách bằng cách sử dụng tệp

    






    
    





    
    
Footer
    

2 duy nhất

Bạn đã từng sử dụng các chủ đề khối trong dự án của mình chưa, nếu có, hãy chia sẻ kinh nghiệm và suy nghĩ của bạn;

Trang khối trên WordPress là gì?

Tại sao WordPress sử dụng các khối?

Các khối trên blog là gì?

Khi nào tôi nên sử dụng trình chỉnh sửa khối?