Hướng dẫn phát triển chủ đề con WordPress

Có một số lý do mà các nhà phát triển WordPress bắt đầu sử dụng các chủ đề con. Chúng cung cấp cho bạn cơ hội để tùy chỉnh bố cục độc đáo trên đầu trang của một chủ đề hiện có khác. Điều này là hoàn hảo cho những người mới bắt đầu muốn chơi xung quanh với việc xây dựng các chủ đề của riêng họ.

Ngoài ra, nhiều thiết kế cao cấp sẽ phát hành bản cập nhật mới theo thời gian. Nếu bạn đang thực hiện thay đổi đối với các tệp chủ đề cốt lõi, chúng sẽ bị ghi đè khi thực hiện cập nhật, nhưng các chủ đề con được tách biệt và gọn gàng. Điều này có nghĩa là bạn có thể xây dựng các chủ đề cao cấp hiện có và tiết kiệm nhiều thời gian trong quy trình.

Trong hướng dẫn này, tôi muốn giới thiệu các khái niệm cơ bản về xây dựng chủ đề con WordPress và tại sao đó là một ý tưởng hay.

Bắt đầu

Chủ đề trẻ em không khó như chúng có thể xuất hiện. Lợi ích của việc xử lý chủ đề gốc có nghĩa là bạn không cần phải viết tất cả HTML / CSS từ đầu. Một chủ đề con sẽ tự động sử dụng bất kỳ tệp mẫu nào bạn bao gồm, chẳng hạn như sidebar.php hoặc là chân trang.php. Nhưng nếu chúng bị thiếu, thì chủ đề con của bạn sẽ lấy các tệp tương tự từ cha mẹ của nó.

Chức năng này cung cấp một lượng lớn tự do để tùy chỉnh các mẫu đã có sẵn. Thật tuyệt vời khi chạm vào các khu vực xung quanh trang web của bạn cho các sự kiện đặc biệt, chẳng hạn như thêm các mẫu thiết kế cho Giáng sinh hoặc Năm mới.

Tập tin cần thiết của bạn

Bạn chỉ cần một biểu định kiểu .css để thiết lập một chủ đề con trong WordPress. Bạn cũng cần tạo một thư mục mới trong / wp-content / chủ đề thư mục sẽ chứa chủ đề con của bạn. Chú ý rằng bạn không tạo thư mục này bên trong chủ đề gốc, nhưng ngay bên cạnh nó trong cùng thư mục chủ đề.

Các nhà phát triển thường sẽ bao gồm một hàm.php và ảnh chụp màn hình trong cùng thư mục với tệp CSS mới của bạn. Ảnh chụp màn hình được hiển thị trong bảng quản trị WordPress của bạn và tệp chủ đề chức năng có thể được sử dụng cho hàng tấn thay đổi phụ trợ.

Nhưng bây giờ chúng ta nên tập trung vào biểu định kiểu chính. Cái này thường được đặt tên style.css và bao gồm một tiêu đề bình luận với thông tin meta quan trọng. Điều này rất quan trọng vì chủ đề của bạn sẽ chỉ hiển thị khi còn nhỏ nếu bạn bao gồm tên thư mục của cha mẹ. Dưới đây là một nhận xét tiêu đề ví dụ:

 / * Tên chủ đề: Twenty Eleven Child Theme URI: http: //example.com/ Mô tả: Chủ đề con cho thiết kế Twenty Eleven Tác giả: Jake Rocheleau Tác giả URI: http: //www.hongkiat.com/blog/ Bản mẫu: hai mươi Phiên bản: 0,1 * /

Giá trị cho bản mẫu nên là tên thư mục cho chủ đề phụ huynh đi kèm. Ngoài ra, tất cả các thẻ khác phải quen thuộc với chủ đề WordPress tiêu chuẩn.

Mặc dù tất cả các mẫu PHP cha sẽ được sử dụng, style.css gốc của cha mẹ sẽ không phải được nhập tự động. Nếu bạn muốn xử lý các kiểu gốc, bạn sẽ phải đưa nó vào đầu tài liệu style.css của con bạn. Dưới đây là một ví dụ bao gồm chủ đề WP Twenty Eleven.

 @import url ("Thẻ / toveneleven/style.css");

Thiết lập kiểu mới

Áp dụng các quy tắc CSS cho chủ đề của bạn cũng dễ như chỉnh sửa bản gốc. Nếu bạn biết những yếu tố nào bạn cần nhắm mục tiêu thì hãy sử dụng cùng các bộ chọn trong chủ đề con của riêng bạn.

Chúng tôi có thể demo với một số thay đổi thực sự dễ dàng đối với các liên kết và đoạn văn. Tôi đã sử dụng mã từ chủ đề Twenty Eleven ban đầu để nhắm mục tiêu các yếu tố khác nhau. Đôi khi cần phải sử dụng bộ chọn cụ thể hơn để ghi đè lên thiết kế cũ hơn.

 cơ thể đệm: 0 1,4em;  #page lề: 1.667em tự động; chiều rộng tối đa: 900px;  a màu: # 5281df; trang trí văn bản: không có; họ phông chữ: Calibri, Tahoma, Arial, sans-serif;  a: tập trung, a: hoạt động, a: hover text-trang trí: gạch chân;

Trong những thay đổi này, tôi đã giảm kích thước cơ thể tổng thể và cũng loại bỏ một số phần đệm khỏi các cạnh. Tất cả các bộ chọn này có thể được tìm thấy được liệt kê trong tài liệu .css gốc. Đáng chú ý là tôi cũng thay đổi một số thuộc tính cho tất cả các liên kết neo bao gồm một ngăn xếp phông chữ và lựa chọn màu khác nhau.

Những điều quan trọng

CSS có một tuyên bố đặc biệt để đánh dấu mức độ ưu tiên trên các kiểu khác. Cú pháp được hiển thị là !quan trọng bắt đầu bằng dấu chấm than và chấm dứt ở cuối thuộc tính CSS của bạn. Điều này là cần thiết nếu bạn có các kiểu xếp tầng từ chủ đề gốc đang ghi đè các quy tắc tùy chỉnh của riêng bạn.

 một màu: # 5281df! quan trọng; trang trí văn bản: không có; họ phông chữ: Calibri, Tahoma, Arial, sans-serif;

Ở trên tôi đã sao chép các thay đổi ban đầu của mình và chỉnh sửa màu văn bản neo với một mệnh đề quan trọng. Điều này sẽ được ưu tiên hơn tất cả các kiểu khác có cùng độ sâu chọn. Các yếu tố được xác định rõ hơn (như #access li: di chuột> a) thường sẽ giữ phong cách riêng của họ trừ khi màu vẫn được kế thừa từ bộ chọn ban đầu của chúng tôi. Trong trường hợp này, chủ đề gốc của chúng tôi không thiết lập thuộc tính gia đình phông chữ trên các liên kết neo, do đó chúng tôi không gặp phải bất kỳ vấn đề thừa kế nào.

Nếu bạn gặp khó khăn khi thực hiện các thay đổi của mình, hãy thử bật một trong những dấu hiệu quan trọng này vào cuối bản tuyên bố tài sản của bạn. Đây không phải là một sửa chữa hoàn hảo cho mọi vấn đề thừa kế, nhưng nó có ích thường xuyên hơn nhiều so với bạn nghĩ.

Chức năng nhân bản.php

Không giống như biểu định kiểu chính, chủ đề con của bạn sẽ tự động nhập các chức năng của cha mẹ. Điều này có nghĩa là bạn không cần phải sao chép bất kỳ mã PHP nào để nó vẫn hoạt động trong chủ đề mới của bạn. Tuy nhiên, nếu bạn muốn xác định lại một số chức năng, bạn có thể xây dựng một hàm.php khác và viết mã mới của mình với bất kỳ thay đổi nào.

Để làm ví dụ, tôi đã xây dựng một hàm phân tích một vài tệp JavaScript khi mẫu bắt đầu. Điều này sẽ xóa mọi phiên bản cũ hơn của các tập lệnh jQuery và SWFObject, đồng thời thêm các phiên bản mới nhất vào wp_head khu vực.

 // xếp hàng các tệp js cho hàm tải fantasyeme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', huyền thoại_js);

Tôi nên chỉ ra rằng nếu bạn đang nhập mã từ các hàm cha.php thì bạn sẽ phải sử dụng một tên hàm khác. Nếu không, PHP sẽ đưa ra một lỗi nghiêm trọng và bạn sẽ phải FTP vào máy chủ để sửa lỗi.

Làm việc với các tệp chủ đề

Danh mục chủ đề rộng nhất là xây dựng bố cục và loại trang tùy chỉnh. Theo mặc định, chủ đề con của bạn sẽ kế thừa tất cả các tệp chủ đề của cha mẹ. Nhưng bạn có tùy chọn tạo tệp chủ đề con mới và WP sẽ đăng ký những tệp này làm mẫu 'chính'.

Ví dụ archive.php và index.php được sử dụng để hiển thị lưu trữ bài đăng và màn hình trang chủ, tương ứng. Nếu có những thay đổi bạn muốn thực hiện yêu cầu chỉnh sửa HTML thì bạn sẽ an toàn hơn khi sao chép các tệp gốc và chỉnh sửa chúng trong thư mục chủ đề của trẻ em.

Mẫu trang tùy chỉnh

Trong khi chúng ta đang nói về các tệp mẫu, tôi cũng muốn giới thiệu một phần chức năng của WordPress mà nhiều người không quen thuộc. Bạn có thể xây dựng các mẫu trang và bài đăng có thể chọn từ bảng Quản trị khi tạo nội dung mới. Ngay cả khi chủ đề gốc không có tệp mẫu tùy chỉnh mới, WordPress vẫn sẽ sử dụng con thay cho trang.php hoặc là đơn.php.

Đầu tiên tạo một tệp mới có tên page-Offer.php. Đây sẽ là một “đề nghị đặc biệt” trang quảng cáo có chủ đề khác với tất cả các trang khác. Tại đây, bạn có thể sao chép mã trang gốc hoặc thậm chí xây dựng chủ đề hoàn toàn từ đầu. Mã duy nhất chúng ta cần cho WordPress biết về mẫu mới này là thiết lập nhận xét trong PHP.

Một cách khác cho phương pháp này là xây dựng các trang tùy chỉnh được đặt tên theo số ID duy nhất. Vì vậy, thay vì tải mặc định archive.php đối với các trang tác giả, bạn có thể tạo một tệp như tác giả-ID.php Trong đó ID là số ID WordPress duy nhất của người dùng. Mặc dù hệ thống này bị đánh thuế nhiều hơn vì bạn cần tạo tệp mẫu mới cho mỗi tác giả trên trang web của mình.

Nó trở nên hữu ích hơn nếu bạn có thể kết hợp hai kỹ thuật này với các tệp mẫu khác. Đáng chú ý là các danh mục và thẻ hoạt động tốt bằng cách sử dụng các tệp chủ đề của riêng họ. Ngoài ra nếu bạn liên kết đến tệp đính kèm trong nội dung của mình thì bạn sẽ muốn xem xét các bố cục mẫu có thể khác nhau cho từng loại mime. Tôi đã bao gồm hệ thống phân cấp mẫu bên dưới để đính kèm hình ảnh JPEG đơn giản:

hình ảnh
jpeg.php
hình ảnh_jpeg.php
file đính kèm.php

Công cụ WordPress hữu ích

Bản thân WordPress có một hệ thống plugin đa năng có thể quản lý rất nhiều tùy chỉnh. Vì các chủ đề con rất mới, nên chưa có sự phát hành nào của các bên thứ 3 (chưa). Tuy nhiên, có một số công cụ bạn có thể kiểm tra để làm cho thời gian phát triển của bạn ngắn hơn một chút.

Một đề cập rõ ràng là plugin One-Click Child Theme được xây dựng và thử nghiệm cho phiên bản WordPress 3.x mới nhất. Nó thêm một liên kết menu vào Admin của bạn “Chủ đề” phần để tự động xây dựng một đứa trẻ bằng cách sử dụng chủ đề hiện đang hoạt động của bạn. Điều này thật tuyệt vời nếu bạn không muốn gây rối với FTP và đang tìm cách chơi xung quanh với một số ý tưởng mới.

Nếu bạn dự định chỉnh sửa các tệp này trong bảng quản trị, bạn cũng sẽ tận hưởng việc tô sáng cú pháp rõ ràng hơn. Điều này không được cung cấp trong WordPress theo mặc định nhưng bạn có thể cài đặt Trình chỉnh sửa mã nâng cao cho một số chức năng được cải thiện nhiều. Điều này làm cho việc lội qua các khối mã PHP và HTML / CSS dễ quản lý hơn rất nhiều.

Tài nguyên bổ sung

Cùng với tất cả các mẹo trong hướng dẫn này, tôi muốn chia sẻ một tập hợp các liên kết quan trọng cho các nhà phát triển chủ đề. Đã có rất nhiều bài viết tuyệt vời và chủ đề trẻ em miễn phí, bạn có thể xem để nghiên cứu sâu hơn về chủ đề này. Tôi đã thêm một bộ sưu tập tuyệt vời các tài nguyên dưới đây:

8 chủ đề trẻ em miễn phí Twenty Eleven
Codex trực tuyến WordPress »Chủ đề trẻ em
Cách xây dựng Chủ đề con WordPress bằng cách sử dụng Móc và Bộ lọc
Một vài từ về chủ đề trẻ em
Cách tạo, sửa đổi và sử dụng chủ đề con trong WordPress

Phần kết luận

Tôi hy vọng quá trình xây dựng các chủ đề con WordPress sẽ rõ ràng hơn cho bạn sau khi đọc bài viết này. Tôi đã cố gắng giải thích làm thế nào các chủ đề con có thể kế thừa cả hai mẫu CSS và PHP từ cha mẹ. Ngoài ra, rất đơn giản để thao tác các tệp cụ thể và tạo chủ đề độc đáo của riêng bạn.