Bắt đầu với WordPress Child Themes

Bài viết được viết bởi:
  • WordPress
  • Cập nhật: Tháng bảy 27, 2013

Vì vậy, bạn tưởng tượng rằng đang bắt đầu các tinh chỉnh của mình trong thế giới WordPress và bạn đã tìm thấy rất nhiều chủ đề tuyệt vời. Bạn thậm chí tìm thấy rất nhiều chủ đề cao cấp và hầu hết trong số chúng thực sự đáng giá (một vài cuốn sách cho một cái nhìn chuyên nghiệp và mã). Và hầu hết các chủ đề bạn tìm thấy là rất gần, nhưng không ai là chính xác những gì bạn muốn. Nó sẽ là tốt để có thể di chuyển thanh trình đơn một chút, để thay thế phông chữ, để thêm một khối văn bản mới.

Vâng, nếu điều này nghe có vẻ quen thuộc, hướng dẫn này là dành cho bạn. Ở đây chúng ta sẽ đi sâu vào thế giới chủ đề trẻ em, nơi bạn có thể làm hầu hết mọi thứ bạn muốn mà không phá vỡ chủ đề tuyệt vời mà bạn đã mua hoặc mất các bản cập nhật trong tương lai vì mọi thứ bạn làm sẽ được hoàn tác.

Chỉnh sửa giao diện mà không sửa đổi các tệp chủ đề

Tóm lại, đó là những gì Child chủ đề là về: Tùy biến mà không sửa đổi các tập tin gốc. Một chủ đề con về cơ bản sẽ có các chức năng giống nhau và nhìn về chủ đề chính của bạn (cha mẹ), trừ khi bạn nói một cách rõ ràng khác.

Nó sẽ chứa ít nhất các tệp 2, tệp style.css và tệp functions.php, tất cả các tệp khác sẽ được lấy từ chủ đề gốc, trừ khi bạn tạo tệp mới trong thư mục chủ đề con bạn sẽ sử dụng tệp gốc.

Chúng tôi có rất nhiều khả năng ở đây, nhưng lợi thế chính là bạn có thể di chuyển trở lại chủ đề ban đầu một cách dễ dàng và vì vậy bạn cũng có thể cập nhật chủ đề chính mà không mất bất kỳ chỉnh sửa nào vì chúng được hoàn thành trong một thư mục hoàn toàn khác.

Hãy để tay của chúng ta bẩn

Vì vậy, bước đầu tiên là tạo một thư mục chủ đề con mới trong thư mục / wp-content / themes / của bạn. Hãy gọi nó là "Hai mươi-con", và chúng ta hãy tạo tập tin styles.css cơ bản của chúng tôi:

/ * Tên chủ đề: Twenty Child Theme URI: http://www.webrevenue.co Mô tả: Học chủ đề trẻ em ngay bây giờ Tác giả: Rochester Oliveira Tác giả URI: http://www.webrevenue.co/author/rochester/ Mẫu: twentytwelve * / / * Gọi tập tin CSS chủ đề chính * / @import ("../ twentytwelve / style.css"); / * Thêm bất cứ điều gì bạn muốn dưới đây * /

Các tham số (trong số các tham số tùy chọn khác bị bỏ qua):

  • Tên chủ đề: Tên bạn sẽ thấy trong màn hình lựa chọn chủ đề
  • URI chủ đề: Liên kết sẽ được hiển thị ở đó
  • Mô tả: Mô tả ngắn gọn để bạn nhớ điều này là về
  • Tác giả: Ai đã tạo chủ đề con
  • URI tác giả: Nếu bạn muốn liên kết đến trang web của tác giả
  • Mẫu: Thư mục chủ đề chính (vì vậy nếu bạn muốn sử dụng một chủ đề khác làm chủ đề chính, chỉ cần thay thế thông số này)

Khi bạn thêm mã này, bạn sẽ thấy Chủ đề con trong WP admin> Giao diện> Chủ đề. Bạn có thể chọn nó ngay bây giờ và tất cả các thay đổi được thực hiện sẽ được nhìn thấy trong trang web của bạn.

Chỉnh sửa chủ đề trẻ em 101

Điều này có thể vô ích nếu bạn không có kiến ​​thức CSS, phải không? Sai rồi! CSS thực sự khá dễ dàng và bạn có thể tìm thấy rất nhiều đoạn mã để giúp bạn ở đó. Dưới đây là một vài mẹo đơn giản để giúp bạn trong các tùy chỉnh của bạn.

#1 Cài đặt Firebug

Rất nhiều người chỉ yêu thích Chrome và Safari (tôi cũng vậy!), Nhưng với tôi thì FireFox tốt hơn rất nhiều cho sự phát triển. Vì vậy, nếu bạn muốn sử dụng nó, tôi khuyên bạn cũng nên cài đặt firebug, một công cụ tuyệt vời để hiểu tất cả các bộ chọn đang hoạt động trong phần tử hiện tại.

Sau khi cài đặt, bạn có thể nhấn F12 hoặc nhấp chuột phải vào một nơi nào đó trong trang và chọn "Kiểm tra phần tử". Bạn sẽ thấy một cửa sổ mới với trang HTML và CSS hiện tại (và rất nhiều tab khác hữu ích, có thể chúng ta có thể nói về chúng sau này).

Trong hộp CSS, bạn sẽ thấy từ trên xuống dưới tất cả các quy tắc CSS được áp dụng cho phần tử hiện tại và quy tắc "cụ thể" hơn ở trên cùng. Thật tuyệt, nhưng hãy xem bạn có thể làm gì với thông tin này

#2 Xem xét độ đặc hiệu của CSS (hoặc trọng lượng bộ chọn)

Mỗi quy tắc CSS có bộ chọn, thuộc tính và giá trị. Nhưng khi trình duyệt tìm thấy 2 hoặc nhiều quy tắc sẽ ảnh hưởng đến cùng một yếu tố, nó phải chọn cái nào trong số đó phù hợp hơn. Chúng tôi thường có "quy tắc" này để hiểu những gì sẽ được xem xét:

  • ! tuyên bố quan trọng sẽ ghi đè mọi thứ khác
  • CSS nội tuyến sẽ ghi đè bất cứ điều gì nhưng! quy tắc quan trọng
  • ID (#header, #footer, # container…) đáng giá các điểm 100
  • Các lớp (.main, .nav, .box) có giá trị điểm 10
  • Thẻ (body, div, p, a) có giá trị điểm 1
  • Universal selector và pseudo classes (*,: hover,: after) có giá trị 0 nhưng chúng sẽ áp dụng nếu có một “tie”

Ok, chúng ta hãy xem một ví dụ để hiểu rõ hơn về điều này. Nhấp chuột phải vào tiêu đề trang web của bạn bằng cách sử dụng hai mươi hai mươi và bạn sẽ thấy rằng CSS đầu tiên xuất hiện là:

.site-header {padding: 1.71429em 0; } bài viết, sang một bên, chi tiết, figcaption, con số, footer, tiêu đề, hgroup, nav, phần {display: block; }

Bộ chọn đầu tiên có các điểm 10 (vì nó là một lớp), và điểm thứ hai có mỗi điểm 1 (vì dấu phẩy chỉ tách các bộ chọn khác nhau), đó là lý do tại sao nó xuất hiện ở trên cùng. Nếu bạn có thứ gì đó giống như #header div thì bộ chọn đó chắc chắn sẽ là người đầu tiên xuất hiện.

Tại sao điều này lại quan trọng đến vậy?

Bởi vì để chỉnh sửa chủ đề chính mà không cần chỉnh sửa các tệp CSS của nó, bạn sẽ cần LUÔN LUÔN sử dụng các quy tắc có nhiều điểm hơn các quy tắc được xác định trong chủ đề chính. Và bạn có thể thông minh về điều này và sử dụng mã đơn giản. Ví dụ để ghi đè thuộc tính này:

.site-header {padding: 1.71429em 0; }

Bạn có thể thêm điều này vào CSS chủ đề con, nhưng bạn không nên:

.site-header {padding 15px 0! quan trọng; }

Bởi vì đây là mã xấu, và nó là cách khó khăn hơn để ghi đè lên một lần nữa nếu bạn cần phải thay đổi điều đó trong một trang duy nhất, ví dụ. Vì vậy, bạn có thể sử dụng đơn giản này:

body .site-header {padding: 15px 0; }

Bộ chọn này có các điểm 11, lớn hơn 10 gốc và vì vậy mã này sẽ được áp dụng.

#3 Sử dụng tốt các chức năng

Tệp functions.php con là tệp duy nhất sẽ được tải trong BỔ SUNG vào tệp gốc. Đó là một cách giải quyết thông minh được thực hiện bởi nhóm WP, vì vậy bạn có thể giữ chức năng ban đầu và thêm các chức năng của riêng bạn. Việc nắm bắt được, các chức năng chủ đề trẻ em sẽ được nạp đầu tiên và nhà phát triển theme PHẢI làm một cái gì đó như thế này để tránh xung đột khi khai báo các hàm:

if (! function_exists ('top_menu')) {function top_menu () {// cool code here} add_action ('wp_head', 'top_menu'); }

Đó là bởi vì nếu bạn xác định một chức năng trong tệp chủ đề con của mình, nó có thể ghi đè lên chức năng ban đầu. Nếu nhà phát triển chủ đề không làm theo cách này, bạn sẽ gặp phải một lỗi PHP xấu xí (vì cùng một chức năng đang được tạo hai lần).

#4 Tìm hiểu một số thuộc tính CSS

Bạn có biết rằng bạn có thể ẩn và thêm nội dung bằng cách sử dụng CSS không? Bạn sẽ cần phải cài đặt firebug để tìm đúng bộ chọn, nhưng bạn có thể ẩn một mục bằng cách thêm mã này:

body {display: none}

Để thêm nó phức tạp hơn, vì bạn chỉ có thể thêm văn bản nhỏ, nếu bạn muốn một văn bản "Bán!" Sau một thẻ giá, ví dụ bạn có thể sử dụng mã này:

.price del: sau {color: red; nội dung: "Đang bán!"; }

Bạn nghĩ gì?

Bạn nghĩ gì về hướng dẫn này? Bạn sẽ xem xét sử dụng các chủ đề trẻ em? Bạn đã sử dụng nó chưa? Hãy cho chúng tôi biết bằng cách sử dụng phần bình luận bên dưới!

Giới thiệu về Olive Oliveira

Tôi là một nhà thiết kế web và doanh nhân từ Itajubá (MG), Brasil. Tôi thích viết về những chủ đề tối nghĩa và làm một số thứ hay ho.

Kết nối: