Tại sao bạn cần chủ đề WordPress? Làm cách nào để thêm cài đặt trong WordPress? Tùy chỉnh chủ đề - Cài đặt tích hợp
Chúng tôi đã phát hành một cuốn sách mới, Tiếp thị nội dung trên mạng xã hội: Cách thu hút người theo dõi và khiến họ yêu thích thương hiệu của bạn.
Hoạt động của các chủ đề con (“con gái”) dựa trên mối quan hệ của chúng với các chủ đề gốc (“cha mẹ”). Điều quan trọng cần lưu ý là các chủ đề miễn phí và trả phí ban đầu đều là cha mẹ, do đó, con gái sao chép các tham số và thuộc tính của chúng, đồng thời nhận được một bộ chức năng tiêu chuẩn của nó. Trong tương lai, có tính đến nhu cầu của một tài nguyên Internet cụ thể, tập hợp các tùy chọn này có thể được mở rộng.
Nếu chúng ta đề cập đến thuật ngữ này, thì chúng ta đang nói về một chủ đề đặc biệt mang ý nghĩa của một chủ đề khác, đóng vai trò là cha mẹ. Tại sao chúng được tạo ra? Để sửa đổi các chủ đề WordPress hiện có và do đó tăng số lượng của chúng.
Đâu là sự khác biệt giữa "con gái"
Chủ đề con WordPress cho phép bạn thực hiện các thay đổi và điều chỉnh cần thiết. Tiếp theo chúng ta sẽ xem cách tạo nó, nhưng trước đó chúng ta sẽ xem xét những điểm khác biệt chính của nó:
- Những thay đổi được thực hiện đối với sửa đổi cha mẹ không ảnh hưởng đến sửa đổi con. Từ đó, sau khi phát triển, chúng độc lập với nhau.
- Các hàm phái sinh chỉ hoạt động nếu phần tử gốc được cài đặt và việc kích hoạt nó diễn ra sau đó.
- Các công ty con chỉ gắn liền với cơ sở của chúng và không được kết nối với nhau.
Làm việc có thuận tiện không
Một chủ đề con WordPress là một ý tưởng tuyệt vời với nhiều lợi ích. Cá nhân, chúng tôi khuyên bạn nên sử dụng nó làm tiêu chuẩn cho các sản phẩm cao cấp. Chúng ta hãy liệt kê một số lợi thế:
- Họ tự động lưu các điều chỉnh được thực hiện. Nhờ đó, bạn có thể thực hiện các điều chỉnh trực tiếp đối với mã mà không có nguy cơ bị mất hoặc mất cài đặt trong quá trình cập nhật.
- Làm việc với họ là sự chuẩn bị tuyệt vời để chuyển sang viết mã chính cho các biến thể gốc.
- Cải thiện quy trình làm việc. Chỉ với một khung chủ đề theo ý của bạn, bạn có thể tạo các trang web có độ phức tạp và chức năng khác nhau.
Vì đây là phần tiếp theo của phiên bản gốc nên tập hợp các tính năng và chức năng ở đây giống hệt nhau. Các thành phần chính:
- Thư mục (thư mục/vị trí của các thành phần tệp).
- “style.css”, trong đó các thuộc tính chính và bổ sung được chỉ định.
- “functions.php”, nơi viết định nghĩa của hàm.
Không có hạn chế nào trong việc thêm mẫu, nhưng các thành phần được liệt kê bắt buộc phải có trong bất kỳ mẫu nào.
Hoạt động
“Daughters” được bản địa hóa trong thư mục riêng của chúng và có “functions.php” và “style.css” riêng biệt. Bạn luôn có thể ghi các tệp phụ trợ, nhưng cặp này chịu trách nhiệm hoạt động bình thường - không gặp sự cố hoặc sự cố.
Nếu sử dụng đúng các định dạng này, bạn có thể chỉnh sửa hầu hết mọi tham số ban đầu, bao gồm kiểu, mục bố cục riêng lẻ, tập lệnh, v.v.
Thiết bị chủ đề tương tự như các lớp biên tập của trình chỉnh sửa ảnh. Nếu người dùng truy cập tài nguyên Internet của bạn, một "con gái" sẽ mở ra trước mặt anh ta, sau đó các tùy chọn và kiểu còn thiếu sẽ được tải từ cấp độ gốc. Cuối cùng, hầu hết mã được truyền lại từ cấp độ gốc, nhưng nó cần được sửa đổi để phù hợp với cài đặt của trẻ trước khi có thể sử dụng.
Làm thế nào để tạo ra
Trước tiên, hãy kiểm tra xem bạn có mọi thứ bạn cần theo ý của mình hay không. Cụ thể là truy cập FTP hoặc trình quản lý tệp, mở quyền truy cập vào chính bảng điều khiển WordPress. Vậy hãy bắt đầu.
Bước số 1. Tạo một chủ đề con WordPress
Đây là một quá trình khá đơn giản. Nếu bạn làm theo hướng dẫn chi tiết, bất kỳ người dùng nào cũng có thể thành thạo nó.
Trước hết, chúng ta tạo một thư mục cho con gái mình trong thư mục chuẩn. Để thư mục có trật tự và nội dung được hệ thống hóa, tốt nhất nên đặt tên thư mục theo ví dụ “Tên thư mục gốc + con cuối cùng”. Để thuận tiện, bạn có thể thêm tên của một dự án cụ thể mà chúng tôi đang tạo chủ đề. Điều chính là tên thư mục không có khoảng trắng, nếu không điều này có thể dẫn đến lỗi. Trình quản lý tệp hoặc ứng dụng khách FTP sẽ giúp bạn tạo thư mục mới. Ngày nay, một ứng dụng khách FTP như FileZilla đã chứng tỏ được khả năng của mình.
Ví dụ: chúng ta hãy lấy “Hai mươi mười bảy” quen thuộc với nhiều người làm cơ sở. Tôi thích làm việc với Trình quản lý Tệp hơn, vì vậy đường dẫn đến thư mục đã tạo của tôi trông như thế này:
Chúng tôi làm như sau:
Chắc chắn bạn tin rằng sáng tạo là một quá trình dễ dàng. Bạn chỉ cần thực hiện đúng theo hướng dẫn và làm việc với phương pháp phù hợp.
Bước số 2. Cài đặt
Để bắt đầu, sửa đổi, bổ sung, điều chỉnh “con gái” theo yêu cầu và yêu cầu của trang web của bạn, bạn cần thực hiện cài đặt chính xác. Chúng ta sẽ giải quyết nó theo thứ tự.
- Đầu tiên bạn cần tùy chỉnh giao diện.
Để thực hiện việc này, chúng tôi sẽ thực hiện các điều chỉnh đối với “custom.css”, nằm trong thư mục. Việc này có thể được thực hiện thông qua ứng dụng khách FTP, trình soạn thảo văn bản thông thường, trình quản lý tệp hoặc trình chỉnh sửa WordPress đặc biệt (bạn có thể tìm thấy nó bằng cách mở “Giao diện”, sau đó là “Trình chỉnh sửa”). Ở đây bạn sẽ cần ít nhất kiến thức tối thiểu về các quy tắc sử dụng CSS, cũng như kỹ năng kiểm tra các thành phần trang web thông qua trình duyệt. Ví dụ: để thay đổi màu nền trong "style.css", chúng tôi viết quy tắc CSS sau:
Hình ảnh sau đây cho thấy thiết kế trang web sẽ thay đổi như thế nào sau khi thực hiện điều chỉnh. Nền trở thành màu xanh nhạt:
Bằng cách này, bạn có thể chỉnh sửa bất kỳ thành phần hiện có nào trên trang web.
2. Làm việc với các hàm.
Việc sử dụng và làm việc với “con gái” cũng mang lại lợi ích là có thể duy trì hai “functions.php” độc lập. Hãy để chúng tôi nhắc bạn rằng những tệp này được sử dụng để loại bỏ các chức năng cũ và thêm các chức năng mới. Nếu chúng có sẵn, bạn không phải lo lắng về sự an toàn hay các vấn đề trong quá trình vận hành tài liệu. Ngay cả khi cơ sở được cập nhật, nó sẽ không thay đổi.
Để thêm tùy chọn mới, mã PHP mới cũng được ghi vào tệp. Ví dụ: mã bên dưới sẽ xóa tùy chọn tìm kiếm WordPress.
Các dịch vụ đặc biệt giúp công việc của nhà phát triển dễ dàng hơn
Bạn có thể làm cho quá trình tạo dễ dàng hơn bằng cách sử dụng một số plugin đặc biệt. Thư viện WordPress có nhiều lựa chọn plugin, hầu hết đều miễn phí sử dụng. Việc sử dụng plugin giúp đơn giản hóa đáng kể quá trình phát triển. Hãy xem xét các plugin phổ biến nhất.
- Trẻ em Themify.
Đây là plugin đơn giản và dễ sử dụng nhất với giao diện trực quan. Nhiều cài đặt ở đây có thể được thực hiện chỉ bằng một nút bấm.
2. Cấu hình chủ đề con.
Tại đây, bạn cũng có thể tạo một “con gái” và việc này sẽ chỉ mất một vài cú nhấp chuột. Trình chỉnh sửa CSS ở đây khá mạnh mẽ, cho phép bạn định cấu hình chức năng nâng cao. Plugin tự động xác định các quy tắc CSS chính và không ảnh hưởng đến chúng khi chỉnh sửa.
3. _Bản phác thảo chủ đề con.
Dưới đây là các mẫu làm sẵn để hình thành “con gái”. Mẫu được đặt tên đơn giản - “_child” - và được thiết kế đặc biệt để đơn giản hóa công việc. Mẫu cung cấp một chủ đề trực quan và chỉ yêu cầu bạn cung cấp liên kết đến “mẹ”. Loại mẫu này cho phép bạn tạo các tùy chọn chuyên nghiệp - 2 tệp tạo sẵn đã được tạo ở đây, “functions.php” và “style.css” tiêu chuẩn.
Cái đầu tiên có một chức năng đặc biệt gọi là “aa_enqueue_styles()”. Tùy chọn này cho phép bạn tạo một hàng các biểu định kiểu, trong đó các biểu định kiểu gốc sẽ xuất hiện trước tiên và sau đó là các biểu định kiểu con. Kết quả là phong cách của người sau luôn được quyết định bởi người trước.
Hầu hết các nhà phát triển liên kết các bảng này với nhau trong CSS, nhưng điều này có hại nhiều hơn là có lợi. Trình duyệt mất nhiều thời gian để tải trang web, vì trước tiên bạn cần tải kiểu từ "mẹ" và sau đó từ kiểu phái sinh. Nếu bạn đặt các style sheet riêng biệt thì tác vụ của trình duyệt sẽ dễ dàng hơn và tốc độ tải sẽ tăng lên.
Đây là mã mà bạn có thể thêm tùy chọn này:
Tệp thứ hai có tiêu đề cơ bản chứa thông tin đặc biệt. Thông tin này cho phép WordPress nhận ra nó là biểu định kiểu “con”. Vì vậy, việc viết mã cho “style.css” là đặc biệt quan trọng:
Hãy tóm tắt
Việc bạn có trình độ lập trình hay kinh nghiệm với WordPress không quan trọng. Tạo một chủ đề con WordPress rất dễ dàng và không có nguy cơ cài đặt sẽ bị xóa sau khi thoát. Bằng cách viết một đoạn mã nhỏ hoặc thực hiện các thay đổi đối với những gì bạn đã viết và thực hiện những việc đơn giản với thư mục, bạn có thể thay đổi trang web của mình. Điều chính là làm theo hướng dẫn, dần dần chuyển từ điểm này sang điểm khác. Đừng quên những điều sau: nếu có các bản cập nhật cho “cha mẹ” thì “con gái” không thay đổi, quy tắc này áp dụng cho những thay đổi được thực hiện đối với nội dung, cài đặt, v.v.
Hãy thử nghiệm, thử các lựa chọn khác nhau và tìm kiếm lựa chọn tốt nhất cho chính mình.
Hôm nay, chúng ta sẽ xem xét chi tiết quá trình tạo trang cài đặt cho chủ đề WordPress, sử dụng WooFramework tuyệt vời làm ví dụ.
Sau đó, chúng tôi sẽ phức tạp hóa nhiệm vụ một chút, sử dụng sức mạnh của jQuery, chúng tôi sẽ cải thiện một chút chức năng của trang.
WordPress cho đến nay là hệ thống quản lý nội dung (CMS) phổ biến nhất. Nhiều nhà phát triển chọn WordPress làm CMS của họ, bất kể loại dự án.
Hệ thống này rất dễ sử dụng nhưng bạn có thể làm cho nó dễ dàng hơn nữa bằng cách bật bảng điều khiển bổ sung cho người dùng. Thay vì mở tệp mẫu PHP và thao tác mã, người dùng có thể sử dụng trang cài đặt thông thường trong bảng điều khiển để quản lý chủ đề WordPress của bạn.
Ví dụ: nếu chủ đề của bạn có bảng màu đỏ, xanh lam và xanh lục, mỗi bảng có một tệp CSS cụ thể, sẽ dễ dàng hơn nhiều nếu người dùng có thể chọn màu họ muốn từ danh sách thả xuống. Vì vậy, hôm nay, bạn sẽ hướng dẫn quy trình tạo và cải thiện trang cài đặt bổ sung cho bảng quản trị WordPress của mình.
Bước 1
Trước khi bắt đầu tạo trang tổng quan, chúng ta sẽ cần một chủ đề. Do đó, hãy tải xuống , với các tập tin nguồn. Bạn sẽ thấy một chủ đề WordPress cổ điển được sửa đổi một chút. Sao chép thư mục “nettuts” (đó là tên chủ đề của chúng tôi) vào thư mục wp-content/themes. Thư mục phải chứa các tệp sau:
- hàm.php (trống)
- chỉ mục.php
- bình luận.php
- chân trang.php
- tiêu đề.php
- rtl.php
- thanh bên.php
- phong cách.css
- ảnh chụp màn hình.png
- thư mục chứa hình ảnh chứa hai tập tin
Hầu hết mã của chúng tôi sẽ nằm trong tệp tin.php.
Chủ đề có thể tùy ý sử dụng tệp chức năng nằm bên trong thư mục chủ đề có tên là Hàm.php. Tệp này hoạt động giống như một plugin và nếu được bao gồm trong chủ đề của bạn, nó sẽ tự động được tải trong quá trình khởi tạo WordPress (cả trang bên ngoài và bảng quản trị).
Tập tin này được cho là sẽ được sử dụng cho:
- mô tả về các chức năng được sử dụng trong các tệp mẫu khác nhau của chủ đề của bạn
- Cài đặt bảng điều khiển bổ sung cho phép người dùng tùy chỉnh màu sắc, kiểu dáng và các khía cạnh khác trong chủ đề của bạn.
Bước 2
Bây giờ, sau khi bạn đã tải xuống và cài đặt chủ đề được đề xuất, hãy truy cập trang “Giao diện” - “Chủ đề” và kích hoạt chủ đề nettuts của chúng tôi.
Bây giờ, chúng ta cần nghĩ về đánh dấu html cho bảng điều khiển của mình. Chúng ta sẽ sử dụng cấu trúc này:
Hãy để tôi giải thích mọi thứ cho bạn ở đây. Các nhóm cài đặt sẽ được gói trong một khối có lớp “rm_wrap”, sau đó nằm trong một khối có lớp “rp_opts”. Sau đó, bên trong các khối này, chúng tôi mở thẻ biểu mẫu, bên trong đó sẽ đặt tất cả các đầu vào cần thiết. Mỗi phần cài đặt (Cài đặt cơ bản, Cài đặt trang chủ, Cài đặt blog, v.v.) sẽ được đặt trong một khối riêng biệt với tên lớp “rm_section”. Khối này sẽ chứa tên (đối với phần cài đặt) và một số khối có đầu vào. Sử dụng các lớp đặc biệt cho các khối, chẳng hạn như
Phần quan trọng nhất của tất cả những điều này là chúng ta sẽ không phải tạo tất cả mã này bằng tay - chúng ta sẽ sử dụng sức mạnh của PHP bất cứ khi nào có thể. Chẳng ích gì khi viết mã bằng tay khi chúng ta có sẵn các vòng lặp.
Bước 3
Mở tệp tin.php bằng trình soạn thảo mã yêu thích của bạn (tôi sử dụng NotePad++) và dán đoạn mã sau:
Đây là hai biến PHP chứa tên chủ đề của bạn (trong trường hợp của chúng tôi là Nettuts) và bí danh bạn chỉ định (trong ví dụ của chúng tôi là nt). Bí danh được sử dụng làm tiền tố cho tên của tất cả cài đặt chủ đề và thường là duy nhất cho mỗi chủ đề.
Tiếp theo, chúng tôi sẽ tạo một vài dòng mã để tự động tạo danh sách các danh mục WordPress, thay vì buộc người dùng nhập ID của họ theo cách thủ công. Dán đoạn mã sau ngay sau đoạn mã trước:
$categories = get_categories("hide_empty=0&order_by=name"); $wp_cats = mảng(); foreach ($categories as $category_list)( $wp_cats[$category_list -> cat_ID] = $category_list -> cat_name; ) array_unshift($wp_cats, "Select Category");
Đoạn mã này sử dụng hàm get_categories tích hợp sẵn của wordpress để lấy tất cả các danh mục, sau đó sử dụng vòng lặp foreach để lưu trữ chúng trong biến $wp_cats. Sau đó, tùy chọn “chọn danh mục” sẽ được thêm vào mảng.
Bước 4
Bây giờ là lúc tạo danh sách cài đặt cho chủ đề của chúng tôi. Dán đoạn mã sau vào tệp tin.php của bạn:
$options = array(array("name" => "Settings", "type" => "title"), array ("name" => "Cài đặt cơ bản", "type" => "section"), array ( "type" => "open"), mảng ("name" => "Bảng màu", "desc" => "Chọn bảng màu chủ đề", "id" => $shortname . "_color_scheme", "type" = > "select", "options" => mảng ("blue", "red", "green"), "std" => "blue"), array ("name" => "Logo URL", "desc" => "Nhập liên kết tới hình ảnh logo", "id" => $shortname . "_logo", "type" => "text", "std" => ""), array ("name" => " CSS tùy chỉnh ", "desc" => "Bạn có muốn sử dụng mã CSS của riêng mình không? Dán nó vào trường này", "id" => $shortname . "_custom_css", "type" => "textarea", "std " => "" ), mảng ("type" => "close"), mảng ("name" => "Trang chủ", "type" => "section"), mảng ("type" => "open "), mảng ( "name" => "Hình ảnh trong tiêu đề, trên trang chính", "desc" => "Nhập URL của hình ảnh sẽ được sử dụng trong tiêu đề", "id" => $shortname ."_header_img", "type" => " text", "std" => ""), mảng ("name" => "Danh mục trang chủ", "desc" => "Chọn danh mục chứa bài viết đã xuất bản", "id" => $shortname ." _feat_cat", "type" => "select", "options" => $wp_cats, "std" => "Chọn danh mục"), mảng ("loại" => "đóng"), mảng ("name" => "Footment", "type" => "section"), mảng ("type" => "open"), array("name" => "Copyright text", "desc" => "Nhập nội dung sẽ được dán ở phía bên phải tầng hầm. Bạn có thể sử dụng HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array("name" => "Mã Google Analytics", " desc " => "Tại đây bạn có thể đặt mã Google Analytics hoặc bất kỳ bộ đếm nào khác", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "name" => "Favicon", "desc" => "Favicon là biểu tượng pixel đại diện cho trang web của bạn. Chèn URL vào hình ảnh có phần mở rộng .ico", "id" => $shortname."_favicon ", "type " => "text", "std" => get_bloginfo("url") ."/favicon.ico"), array("name" => "Feedburner URL", "desc" => "Feedburner là một dịch vụ của Google kiểm soát nguồn cấp dữ liệu RSS. Dán URL Feedburner của bạn vào đây để cho phép người đọc nhìn thấy nó trên trang web của bạn", "id" => $shortname."_feedburner", "type" => "text", "std" = > get_bloginfo("rss2_url")), array("type" => "close"));
Đây là một đoạn mã khá lớn cần được làm rõ một chút. Vì thế:
- Biến $options PHP lưu trữ toàn bộ danh sách cài đặt cho chủ đề của chúng tôi.
- Danh sách cài đặt bao gồm một số mảng, mỗi mảng chứa một phím “loại” để xác định loại cài đặt và cách hiển thị.
- Danh sách cài đặt của chúng tôi bắt đầu bằng mảng “type” => “title” - mảng này sẽ được sử dụng để hiển thị tên và tiêu đề chủ đề trong tiêu đề trang.
- Mỗi phần (Cài đặt cơ bản, Trang chủ, Chân trang) đều có danh sách cài đặt riêng.
- Chúng ta bắt đầu một phần mới bằng cách đóng bất kỳ phần nào trước đó và khai báo phần mới bằng cách sử dụng mảng(“name” => “Footer”, “type” => “section”).
- Mỗi tùy chọn có thể chứa các cài đặt sau:
tên: Tên của trường văn bản.
mô tả: Một mô tả ngắn gọn về trường cho người dùng.
nhận dạng: Id trường, có tiền tố là bí danh. Điều này sẽ được sử dụng để ghi lại cài đặt và truy cập nó.
kiểu: loại đầu vào - văn bản, chọn hoặc vùng văn bản
tùy chọn:được sử dụng để khai báo một mảng cài đặt cho trường danh sách thả xuống.
tiêu chuẩn: Giá trị mặc định của trường, được sử dụng nếu không có giá trị nào khác được chỉ định.
Bước 5
Hãy thử đăng nhập vào bảng điều khiển WordPress của bạn. Bạn sẽ không tìm thấy cài đặt mà chúng tôi đã chỉ định ở bất kỳ đâu, vậy làm cách nào chúng tôi có thể hiển thị chúng? Thêm mã sau vào tệp tin.php.
Hàm mytheme_add_admin())( toàn cầu $themename, $shortname, $options; if($_GET["page"] == basename(__FILE__))( if("saved" == $_REQUEST["action"])( foreach ( $options as $value)( update_option($value["id"], $_REQUEST[$value["id"]]); ) foreach ($options as $value)( if(isset ($_REQUEST[$value [ "id"]]))( update_option($value["id"], $_REQUEST[$value["id"]]); )else( delete_option($value["id"]); ) ) header( " Vị trí: admin.php?page=functions.php&saved=true"); die; ) ) else if("reset" == $_REQUEST["action"])( foreach($options as $value)( delete_option($ value ["id"]); header("Vị trí: admin.php&page=functions.php&reset=true"); die add_menu_page($themename, $themename, "administrator", basename(__FILE__), "mytheme_admin" ) hàm mytheme_add_init() ( )
Chức năng này được sử dụng để tự cập nhật cài đặt và thêm trang vào bảng điều khiển. Nếu cài đặt đã được lưu (được xác định bằng lưu biến ẩn), thì tất cả cài đặt sẽ được cập nhật với các giá trị đã chỉ định. Tuy nhiên, nếu cài đặt được đặt lại (được xác định bằng cách đặt lại biến ẩn khác), thì tất cả cài đặt sẽ bị xóa.
Dòng cuối cùng của hàm thêm một trang menu - các tham số theo thứ tự: tên và tiêu đề, cấp độ quyền của người dùng để xem trang, lưu trang và chức năng được sử dụng để hiển thị/lưu cài đặt (trong ví dụ của chúng tôi gọi là mytheme_admin).
Lưu ý rằng hàm mytheme_add_init trống? Bây giờ hãy để nó như vậy, chúng ta sẽ quay lại sau.
Bước 6
Trang cài đặt trong bảng điều khiển vẫn không xuất hiện? Tuy nhiên, chúng tôi vẫn chưa hoàn thành hàm mytheme_admim đã được đề cập ở trên. Để tạo hàm này, chúng ta sẽ cần mã từ bước 6,7 và 8. Hãy bắt đầu.
Hàm mytheme_admin())( toàn cầu $themename, $shortname, $options; $i = 0; if($_REQUEST["action"] == "save") echo "
cài đặt chủ đề ". $themename." Đã được cứu
cài đặt chủ đề ". $themename." đã được thiết lập lại
Cài đặt
Để quản lý chủ đề thuận tiện hơn, bạn có thể sử dụng menu bên dưới
Vòng lặp foreach PHP được sử dụng ở đây, mỗi loại cài đặt được xác định riêng cho từng trường hợp. Để làm điều này chúng ta sẽ sử dụng câu lệnh switch. Biến trong câu lệnh switch là loại tham số hiện tại, case là loại tham số dự kiến. Bạn có thể nhận thấy biểu thức “break” sau mỗi trường hợp? Biểu thức này được sử dụng để ngăn điều kiện được xử lý không chính xác. Khi giá trị trường hợp khớp với một biến, tất cả các trường hợp tiếp theo cũng sẽ được thực thi. Nghĩa là, nếu chúng ta đã xác định case3, thì ngoài nó, case4, case5, v.v. cũng sẽ được thực thi. Nhưng chúng ta không cần điều này nên chúng ta sử dụng break để kết thúc câu lệnh switch.
Nếu giá trị hiện tại của tham số là “mở” thì không có gì xảy ra. Nếu giá trị hiện tại là “đóng”, hai khối đóng sẽ được đặt. Giá trị của tham số “tiêu đề” chỉ được sử dụng một lần - trong văn bản giới thiệu trước cài đặt chủ đề. Đối với mỗi loại “văn bản” (loại đầu vào=”văn bản”), “chọn” (danh sách thả xuống) và “văn bản” (tên nói lên chính nó), đầu vào tương ứng sẽ được hiển thị. Hãy chú ý đến khối
Bước 8
Chúng ta sắp kết thúc tính năng khá lớn này. Dán đoạn mã sau:
Trường hợp "chọn" : ?>
/functions/images/trans.gif" class="không hoạt động" alt=""/>
!}
Đối với kiểu thiết lập “phần”, chúng tôi sử dụng biến đếm $i. Điều này cho phép bạn theo dõi số phần và kết nối nó với tên nút gửi, do đó đặt cho mỗi nút một tên duy nhất. Ngoài ra, một biểu mẫu được thêm vào cuối phần để đặt lại tất cả cài đặt. Hình ảnh sẽ được sử dụng để sửa đổi jQuery thêm. Đây là đoạn mã cuối cùng sẽ đưa các hàm của chúng ta vào hoạt động:
Add_action("admin_init", "mytheme_add_init"); add_action("admin_menu", "mytheme_add_admin");
Mã này thêm một trang bổ sung vào bảng điều khiển WordPress.
Bước 9
Tuyệt vời, giờ chúng ta đã có trang quản lý riêng, với mục menu riêng. Tuy nhiên, khi truy cập trang này, chúng tôi thấy rằng không phải mọi thứ đều tốt như chúng tôi mong muốn. Nhưng điều đó không thành vấn đề, chúng tôi có một trợ thủ đắc lực - CSS! Tạo một thư mục “functions” mới bên trong thư mục nettuts. Trong thư mục này, tạo một tệp mới – Hàm.css và dán đoạn mã sau vào đó:
Rm_wrap( width:740px; ) .rm_section( border:1px solid #ddd; border-bottom:0; nền:#f9f9f9; ) .rm_opts nhãn( font-size:12px; font-weight:700; width:200px; display :block; float:left; ) .rm_input ( đệm:30px 10px; viền-dưới:1px rắn #ddd; viền-top:1px rắn #fff; ) .rm_opts nhỏ( display:block; float:right; width:200px ; color:#999; ) .rm_opts đầu vào, .rm_opts select( width:280px; font-size:12px; đệm:4px; color:#333; line-height:1em; nền:#f3f3f3; ) .rm_input đầu vào: tiêu điểm, .rm_input textarea:focus( nền:#fff; ) .rm_input textarea( width:280px; chiều cao:175px; cỡ chữ:12px; đệm:4px; màu:#333; chiều cao dòng:1.5em; nền: #f3f3f3; ) .rm_title h3 ( con trỏ:con trỏ; cỡ chữ:1em; chuyển đổi văn bản: chữ hoa; lề:0; font-weight:bold; color:#232323; float:left; width:80%; đệm: 14px 4px; ) .rm_title( con trỏ:con trỏ; viền-dưới:1px rắn #ddd; nền:#eee; đệm:0; ) .rm_title h3 img.inactive( lề:-8px 10px 0 2px; chiều rộng: 32px; chiều cao:32px; nền:url("images/pointer.png") không lặp lại 0 0; nổi:trái; -moz-biên giới-bán kính:6px; đường viền:1px rắn #ccc; ) .rm_title h3 img.active( lề:-8px 10px 0 2px; chiều rộng:32px; chiều cao:32px; nền:url ("hình ảnh/con trỏ.png") không lặp lại 0 -32px; float:trái; -moz- bán kính đường viền:6px; -webkit-border-bán kính:6px; đường viền:1px Solid #ccc ) .rm_title h3:hover img( border:1px Solid #999; ) .rm_title span.submit( display:block; float: bên phải; lề: 0; chiều rộng: 15%; phần đệm: 14px 0; .clearfix( clear:both; .rm_table th, .rm_table td( border:1px Solid #bbb; buffer:10px; text-align:center; ). rm_table th, .rm_table td.feature( border-color:#888; )
Tôi nghĩ đoạn mã này không yêu cầu bất kỳ lời giải thích nào, mọi thứ đều cực kỳ đơn giản và rõ ràng. Tất nhiên bạn có thể thay đổi nó theo ý thích của bạn.
Bước 10
Bây giờ chúng ta đã có sẵn tệp CSS, làm cách nào để kết nối nó với trang nếu chúng ta không có quyền truy cập trực tiếp vào phần tài liệu?
? Hãy nhớ rằng chúng ta đã tạo một hàm trống mytheme_add_init()? Cô ấy là người sẽ giúp chúng ta. Thay đổi nó như sau:Hàm mytheme_add_init() ( $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all"); )
Mã này sẽ bao gồm tệp tin.css trong phần tài liệu
. Vị trí tệp được xác định bởi thư mục mẫu.
Bước 11
Hãy nhìn vào trang của chúng tôi. Nó trông khá ổn, tất cả những gì còn lại là thêm chức năng cho các biểu tượng dấu cộng trong tiêu đề phần. Đối với điều này, chúng tôi sẽ sử dụng jQuery. Tạo một tệp mới rm_script.js bên trong thư mục nettuts/functions/folder. Dán đoạn mã sau:
JQuery(document).ready(function())( jQuery(".rm_options").slideUp(); jQuery(".rm_section h3").click(function())( if(jQuery(this).parent() .next (".rm_options").css("display")==="none") ( jQuery(this).removeClass("inactive").addClass("active").children("img").removeClass (" inactive").addClass("active"); ) else ( jQuery(this).removeClass("active").addClass("inactive").children("img").removeClass("active").addClass (" không hoạt động"); ) jQuery(this).parent().next(".rm_options").slideToggle("slow" ) ));
Mã này làm gì? Sau khi DOM được tải, tất cả các khối có lớp “rm_options” sẽ được thu gọn. Sau đó, khi bạn nhấp vào biểu tượng dấu cộng, lớp “không hoạt động” sẽ bị xóa và lớp “hoạt động” sẽ được thêm vào, thay thế biểu tượng bằng dấu trừ. Khi bạn nhấp lại vào biểu tượng này, quá trình ngược lại sẽ xảy ra. Để thu gọn/mở rộng các khối, một hàm slideToggle jQuery khá đơn giản được sử dụng. Để kết nối tập lệnh này với trang, chúng ta sẽ sử dụng hàm mytheme_add_init() mà chúng ta đã quen thuộc, thay đổi nó như sau:
Hàm mytheme_add_init() ( $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/functions/script.js", false, "1.0" )
Sau này, kịch bản sẽ hoạt động. Kiểm tra xem nó trông như thế nào trên trang:
Bước 12
Bây giờ trang cài đặt của chúng tôi đã hoàn toàn sẵn sàng, vẫn còn phải nói một chút về việc sử dụng chính các cài đặt đó. Mã để sử dụng các tham số trông như thế này:
$var = get_option("nt_colur_scheme");
Với sự trợ giúp của nó, chúng tôi sẽ có thể thay đổi cách phối màu của trang web. Nó khá đơn giản:
/* Thay đổi tệp CSS tùy theo màu đã chọn */ /.css" /> /*Xuất văn bản ở chân trang, bạn có thể sử dụng thẻ HTML */
Phạm vi ứng dụng chỉ bị giới hạn bởi trí tưởng tượng của bạn.
Nếu bạn muốn trang web WordPress của mình trở nên đầy hứa hẹn thì trước tiên bạn nên nghĩ đến việc tạo một chủ đề độc đáo cho nó. Quá trình này khá tốn nhiều công sức vì nó liên quan trực tiếp đến nhiều loại mã hóa và tập lệnh khác nhau. Hãy nhìn vào nó từ đầu.
Hầu hết mọi chủ đề WordPress đều được cài đặt trong thư mục wp-content/themes và bao gồm 3 loại tệp:
- tập tin bảng định kiểu;
- các tập tin chức năng bổ sung;
- tập tin mẫu.
Các tập tin bảng định kiểu là style.css. Họ chịu trách nhiệm về màu sắc, kích thước, phông chữ và các thông số khác của các thành phần trang web. Mỗi trang chỉ có 1 file style.css. Nếu bạn mở tệp này, ở trên cùng, bạn có thể thấy thông tin về tiêu đề, tác giả và mô tả ngắn gọn về chủ đề. Khi tạo chủ đề của riêng mình, bạn có thể nhập thông tin về bản thân vào style.css.
Danh mục tiếp theo là các tệp có chức năng bổ sung. Chúng bao gồm hàm.php, nguyên tắc làm cho nó trông giống như một plugin. Nhờ tệp này, bạn có thể tùy chỉnh trực quan chủ đề trực tiếp trong bảng quản trị. Thông thường, danh sách cài đặt không rộng lắm (tên trang web, màu sắc điều hướng và bảng điều khiển bên của trang web, v.v.). Nếu chủ đề đa chức năng thì danh sách cài đặt sẽ rộng hơn nhiều.
Bây giờ hãy chuyển sang các tập tin mẫu. Chức năng chính của chúng là tạo các trang theo yêu cầu của khách truy cập trang web. Tệp mẫu có phần mở rộng ".php". Hầu hết các chủ đề đơn giản chỉ có thể chứa một tệp mẫu có tên là index.php. Trong trường hợp này, tất cả các trang của trang web sẽ giống hệt nhau. Thiết kế này thường được sử dụng để tạo tài nguyên Internet bằng cơ sở dữ liệu khi thiết kế không đóng vai trò chính.
Nếu trước đây bạn chưa từng tạo một thiết kế nào, trước tiên bạn nên thử tạo một chủ đề đơn giản. Để nó hoạt động bình thường, bạn sẽ cần ít nhất 2 trong số các tệp sau: style.css và index.php.
Như bạn hiểu, các tệp chức năng bổ sung có thể không được sử dụng trong trường hợp này. Trong số các tệp mẫu, index.php là một trong những tệp linh hoạt nhất. Nó có thể tạo các tiêu đề, khối khác nhau, phần dưới cùng (chân trang), nội dung và các thành phần khác của trang web một cách độc lập.
Điều đáng chú ý là những tham số không được tạo bởi tệp index.php sẽ được tạo bởi các tệp tiêu chuẩn. Ví dụ: nếu chủ đề của bạn chỉ bao gồm 2 trong số các tệp trên, nhưng người dùng cần tạo một biểu mẫu để thêm nhận xét, thì comments.php tiêu chuẩn sẽ thực hiện chức năng này. Do đó, nếu bạn muốn chủ đề của mình độc đáo hơn, bạn nên tạo thêm các tệp mẫu. Chúng ta hãy nhìn vào những cái chính.
- Để thêm nhận xét, như bạn có thể đoán, mẫu comments.php sẽ được sử dụng.
- Nếu bạn muốn tạo một cửa sổ bật lên có nhận xét, thì với mục đích như vậy, bạn sẽ cần comments-popup.php.
- Để tạo trang chủ, home.php được sử dụng.
- Tệp single.php chịu trách nhiệm hiển thị các bài viết trên trang web. Nếu bạn không có tệp như vậy thì index.php sẽ thực hiện chức năng của nó.
- Tệp page.php tạo ra các trang riêng lẻ của trang web.
- Để hiển thị thông tin về tác giả, bạn sẽ cần Author.php.
- Category.php chịu trách nhiệm về các danh mục.
- Việc hiển thị lưu trữ, ngày tháng và tìm kiếm được thực hiện lần lượt bởi các tệp archive.php, date.php và search.php.
- Để trang web của bạn hiển thị trang lỗi 404 duy nhất, bạn sẽ cần thêm 404.php.
- Phần trên cùng và dưới cùng của trang web được tạo bởi các tệp header.php và footer.php tương ứng.
Tạo một chủ đề độc đáo theo cách thủ công từ đầu
Đầu tiên bạn cần cài đặt một mẫu phù hợp. Nó có thể được tìm thấy cả trên trang web chính thức wordpress.org và trên bất kỳ trang web nào khác. Bạn nên sử dụng trang web chính thức vì bất kỳ trang web nào của bên thứ ba đều có thể chứa các tệp độc hại và liên kết bị hỏng.
Sau khi lựa chọn, bạn có thể bắt đầu tải xuống kho lưu trữ. Khi kết thúc quá trình, bạn sẽ cần giải nén nó và tải các tệp lên một số thư mục nhất định trên trang web (kho lưu trữ thường chứa các hướng dẫn nhỏ). Việc tải xuống có thể được thực hiện bằng chương trình FileZilla hoặc trực tiếp từ máy chủ lưu trữ, nếu nó hỗ trợ tùy chọn như vậy. Bây giờ, tất cả những gì bạn phải làm là đi tới phần “Chủ đề”, chọn phần bạn đã tải xuống và nhấp vào nút “Kích hoạt”.
Bạn cũng có thể chọn nó trực tiếp trong bảng quản trị WordPress. Tuy nhiên, bạn không cần phải tải xuống. Bạn chỉ cần nhấp vào nút “Cài đặt” và sau đó “Kích hoạt”. Nên xem trước trước khi cài đặt.
Bây giờ chủ đề đã được kích hoạt, bạn có thể chuyển sang việc độc đáo hóa nó. Điều đầu tiên bạn nên nghĩ đến là phần trên cùng của trang web (tiêu đề). Đây là điều đầu tiên sẽ thu hút sự chú ý của khách truy cập, vì vậy bạn nên làm điều đó một cách có trách nhiệm. Thông thường, tiêu đề bao gồm tên trang web, logo và thông tin ngắn gọn về nội dung. Tiêu đề có thể được tạo trong bất kỳ trình soạn thảo đồ họa nào. Ngay cả trong Paint tiêu chuẩn. Các nhà thiết kế cao cấp hơn sử dụng Adobe Photoshop.
Tên trang web phải nhỏ và dễ nhớ. Trong Adobe Photoshop bạn có thể chọn nhiều phong cách khác nhau cho nó. Khi tạo logo, bạn có thể cần các hình dạng khác nhau. Chúng có thể được tải xuống từ trang web chính thức của Adobe Photoshop.
Sau khi tạo bản vẽ tiêu đề trong trình chỉnh sửa đồ họa, bạn sẽ cần tải nó lên trang web của mình. Sau khi quá trình tải xuống hoàn tất, một URL sẽ xuất hiện ở bên phải hình ảnh mà bạn cần phải sao chép. Sau đó, bạn sẽ cần đi tới phần “Trình chỉnh sửa” và chọn tệp chịu trách nhiệm tạo tiêu đề (header.php). Trong đó, bạn sẽ cần tìm URL của hình ảnh hiện tại và thay thế nó bằng URL bạn nhận được khi tải hình ảnh tiêu đề lên. Sau này, bạn sẽ cần phải cập nhật tập tin. Bây giờ bạn có thể tiến hành kiểm tra việc hiển thị tiêu đề.
Nếu tiêu đề của bạn có các tham số khác với tham số tiêu chuẩn thì bạn có thể điều chỉnh chúng trong header.php. Chiều rộng được kiểm soát bởi thuộc tính chiều rộng và chiều cao được kiểm soát bởi thuộc tính chiều cao. Cài đặt có thể được thực hiện bằng pixel và tỷ lệ phần trăm. Vì vậy, nếu bạn chỉ muốn kéo dài giới hạn thì hãy đặt nó thành 100%.
Nếu muốn, bạn có thể thêm các liên kết hoạt động đến các trang của trang WordPress vào tiêu đề. Điều này có thể được thực hiện bằng cách sử dụng các dịch vụ khác nhau. Có khá nhiều trong số họ trên Internet. Hầu hết chúng đều hoạt động theo cùng một nguyên tắc. Bạn khoanh tròn khu vực mong muốn của tiêu đề, khu vực này sẽ được phân bổ cho liên kết và dịch vụ sẽ cung cấp cho bạn mã cần thiết. Sau đó, bạn sẽ cần thêm mã này vào tệp header.php của mình. Hãy cẩn thận khi thêm nó. Mọi điểm đều quan trọng. Nếu bạn thêm mã sai vị trí, các liên kết hoạt động sẽ không xuất hiện trong tiêu đề.
Sau khi thay thế tiêu đề tiêu chuẩn, bạn có thể bắt đầu thay thế nền tiêu chuẩn của trang WordPress, tiện ích, điều hướng, phần dưới cùng (chân trang) và các thành phần khác của trang WordPress. Chúng cũng có thể được vẽ bằng bất kỳ trình chỉnh sửa đồ họa nào và tải lên trang web dưới dạng bản vẽ.
Bạn nên lưu ý rằng nó không nên sáng. Hầu hết các quản trị web thích sử dụng nền trắng. Nó không làm đau mắt và không làm mất tập trung vào nội dung chính.
Để tạo điều hướng chất lượng ngay từ đầu, bạn sẽ cần một chút kiến thức về các thẻ như
