Tạo Customize cho giao diện

Tùy chỉnh giao diện nâng cao

Bạn đang xem bài viết cuối cùng trong serie hướng dẫn Starter Theme trên Thạch Phạm Blog được trình bày bởi Sáu Hỉ. Trong bài viết này Sáu sẽ up cho bạn 1 video hướng dẫn quá trình chỉnh sửa và hoàn thiện giao diện, bạn có thể xem thêm để hiểu rỏ hơn về HTML5 Blank.

Hôm nay Sáu sẽ trình bày với bạn cách tạo Customize cho giao diện, giúp hạn chế việc chỉnh sửa code trực tiếp trong quá trình sử dụng. Đối với WordPress thì kể cả plugin và theme thì chúng ta cũng nên viết code hướng đến người dùng, làm sao cho mọi người khi sử dụng sẽ cảm thấy dễ dàng và hài lòng nhất.

Tham khảo: Tìm hiểu về hàm tạo Customize

Tạo customize cho giao diện

Tạo customize cho giao diện

Vì điều kiện không cho phép nên trong bài viết đôi lúc sẽ có sự thay đổi về tên tập tin cũng như một vài thông tin liên quan đến CSS và bố cục của giao diện, do vậy Sáu khuyến khích các bạn là đọc để hiểu và tự làm theo chứ không phải sao chép nguyên văn nhằm tránh lỗi không đáng có xảy ra.

Tạo customize cho giao diện

Đầu tiên thì bạn mở tập tin custom-function.php bên trong thư mục con (sau) và thêm vào dòng code bên dưới:


class STheme_Customize {
	public static function register ( $wp_customize ) {
		$wp_customize->add_section( 'stheme_options_section', array(
			'title' => __( 'Cài đặt giao diện', 'html5blank' ),
			'priority' => 35,
			'capability' => 'edit_theme_options',
			'description' => __('Cài đặt tùy chọn cho giao diện.', 'html5blank'),
			)
		);
		$wp_customize->add_setting( 'stheme_options[logo_url]', array(
			'default' => '',
			'type' => 'option',
			'capability' => 'edit_theme_options',
			'transport' => 'postMessage',
			)
		);
		$wp_customize->add_control( 'stheme_logo_url', array(
			'label' => __( 'Logo Url', 'html5blank' ),
			'section' => 'stheme_options_section',
			'settings' => 'stheme_options[logo_url]',
			'priority' => 10,
			)
		);

		$wp_customize->add_setting( 'stheme_options[banner_url]', array(
			'default' => '',
			'type' => 'option',
			'capability' => 'edit_theme_options',
			'transport' => 'postMessage',
			)
		);
		$wp_customize->add_control( 'stheme_banner_url', array(
			'label' => __( 'Banner Url', 'html5blank' ),
			'section' => 'stheme_options_section',
			'settings' => 'stheme_options[banner_url]',
			'priority' => 10,
			)
		);

		$wp_customize->get_setting( 'stheme_options[logo_url]' )->transport="postMessage";
		$wp_customize->get_setting( 'stheme_options[banner_url]' )->transport="postMessage";
	}
}
add_action( 'customize_register' , array( 'STheme_Customize' , 'register' ) );

Đoạn code trên sẽ tạo ra một class với tên là STheme_Customize, trong class này sẽ chứa hàm register nhằm khai báo các giá trị của customize.

Chúng ta sẽ thêm action này vào giao diện của WordPress bằng hàm sau:

add_action( 'customize_register' , array( 'STheme_Customize' , 'register' ) );

Như các bạn thấy bên trên, trong hàm register sẽ chứa 3 thông tin chính bao gồm section, setting và control.

1. Section: Đóng vai trò là một nhóm cài đặt nào đó, bên trong mỗi section sẽ chứa nhiều control đảm đương nhiệm vụ thiết lập cho 1 setting nào đó.


$wp_customize->add_section( 'stheme_options_section', array(
			'title' => __( 'Cài đặt giao diện', 'html5blank' ),
			'priority' => 35,
			'capability' => 'edit_theme_options',
			'description' => __('Cài đặt tùy chọn cho giao diện.', 'html5blank'),
			)
		);

Code bên trên có nghĩa là chúng ta sẽ tạo ra một section với ID là stheme_options_section, và section này chúng ta sẽ đặt tiêu đề là: Cài đặt giao diện, chỉ cho phép các tài khoản người dùng được cấp quyền chỉnh sửa giao diện xem được.

2. Setting: Đóng vai trò đảm nhiệm một cài đặt nào đó mà bạn muốn thiết lập trên giao diện, ví dụ thông tin cài đặt về tài khoản mạng xã hội, hay cài đặt được dẫn logo,…


$wp_customize->add_setting( 'stheme_options[logo_url]', array(
			'default' => '',
			'type' => 'option',
			'capability' => 'edit_theme_options',
			'transport' => 'postMessage',
			)
		);

Đoạn code bên trên chúng ta sẽ tạo ra 1 setting với ID là: stheme_options[logo_url], giá trị mặc định là rỗng và kiểu setting này là option được cấp cho các tài khoản có quyền chỉnh sửa giao diện xem được. Bạn để ý, id ở đây Sáu làm theo kiểu mảng, có nghĩa là trong cơ sở dữ liệu sẽ lưu một dòng với key là stheme_options, và trong key này sẽ có nhiều giá trị cài đặt khác nhau, giá trị logo_url là một trong số đó.

3. Control: Đây là một textbox hoặc một textarea, hoặc selectbox,… cho phép bạn nhập giá trị vào cho setting, phần control sẽ hiển thị ra bên ngoài cho bạn thấy và nhập liệu.


$wp_customize->add_control( 'stheme_logo_url', array(
			'label' => __( 'Logo Url', 'html5blank' ),
			'section' => 'stheme_options_section',
			'settings' => 'stheme_options[logo_url]',
			'priority' => 10,
			)
		);

Một control phải được khai báo nằm trong section nào và nó đại diện cho setting nào. Như bạn thấy được bên trên thì control stheme_logo_url thuộc về section stheme_options_section và đại diện cho setting stheme_options[logo_url].

Lấy giá trị từ Customize

Bạn đã tạo ra chức năng cho phép người dùng nhập vào tùy chọn cài đặt cho giao diện, do vậy để các tùy chọn này có hiệu lực thì bạn phải viết code để cập nhật lại giao diện khi người dùng thay đổi tùy chọn.

Để lấy được tùy chọn thì chúng ta sẽ dùng hàm với cú pháp như sau:

get_option($key);

Biến $key ở đây chúng ta đã đặt là stheme_options nên bây giờ mình sẽ dùng hàm sau để lấy options và lấy thông tin đường dẫn của logo từ options này nhé.

Bạn mở tập tin header.php của giao diện lên và tìm tới dòng sau:

<!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->

Thay đoạn code sau:


<!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img">

Thành đoạn code sau:


<!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
<?php $logo = get_template_directory_uri().'/sau/images/logo.png'; ?>
<?php $options = get_option('stheme_options'); ?>
<?php if($options) : ?>
<?php if($options['logo_url']) : ?>
<?php $logo = $options['logo_url']; ?>
<?php endif; ?>
<?php endif; ?>
<img src="<?php echo $logo; ?>" alt="Logo" class="logo-img">

Đoạn code trên Sáu sẽ gán một đường dẫn của hình ảnh logo mặc định là hình logo.png trong thư mục /sau/images của giao diện.

<?php $logo = get_template_directory_uri().'/sau/images/logo.png'; ?>

Sau đó lấy thông tin tùy chọn từ cơ sở dữ liệu, nếu như giá trị trả về là có đường dẫn thì chúng ta sẽ cập nhật lại đường dẫn mới của logo.

Hoàn tất giao diện

Đến đây thì giao diện của bạn đã được hoàn thành, để giao diện có phần đẹp hơn trong phần quản lý giao diện của WordPress thì chúng ta sẽ cập nhật một hình ảnh screenshot của giao diện.

Hình ảnh demo mặc định của giao diện

Hình ảnh demo mặc định của giao diện

Bạn mở phần mềm photoshop hoặc một phần mềm xử lý ảnh bất kỳ, tạo một tập tin ảnh mới với kích thước là 600×450. Sau đó bạn có thể chụp hình giao diện và bỏ vào bên trong file này.

Lưu tập tin này lại với tên là screenshot.png, sau đó sao chép đè lên tập tin cũ trong thư mục gốc của giao diện, sau khi hoàn thành bạn vào lại trang quản lý giao diện của WordPress xem nào.

Hình ảnh demo giao diện HTML5 Blank mới

Hình ảnh demo giao diện HTML5 Blank mới

Kết luận

Bạn vừa hoàn thành xong serie viết giao diện cho WordPress với Starter Theme, cụ thể ở đây là HTML5 Blank. Hy vọng rằng các bài viết của Sáu sẽ phần nào giúp ích được bạn trong quá trình làm quen và nghiên cứu chuyên sâu về WordPress.

Nếu có điều kiện thì Sáu khuyên bạn nên mua giao diện, đừng nên tìm mấy giao diện premium nhưng share lại plublic trên mạng, rất có thể trong này đã chứa mã độc. Nếu các bạn muốn tìm giao diện miễn phí của WordPress thì cũng có thể lựa nhiều trang cung cấp uy tín, đó là không kể đến WordPress.org.

Sáu cũng khuyến khích bạn nên tự viết giao diện nếu không có điều kiện mua giao diện premium, điều này sẽ giúp ích bạn rất nhiều trong bước đường đi đến thành công với WordPress bởi khi viết giao diện nó sẽ làm tăng thêm đam mê và nhiệt huyết cho bạn. Ngay bây giờ bạn cũng có thể tải bản giao diện sau khi hoàn thành bài viết này về máy tính để so sánh với những gì bạn đã làm.

Link tải: html5blank_final.zip

Nguồn: Tạo Customize cho giao diện | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Hostgator khuyến mãi giảm giá 75% cho ngày “tận thế”
Chèn nhanh nhạc và video tại Nhaccuatui, Zing và Nhacso
Tác giả

Bình luận

KRestual

We always create unique interiors , giving attention to conditions safety and functionality . Cooperate with customer on of all stages do detailed analysis of features dwellings ,perform advance calculations.You are interested in any questions .
Our firm DLARYW Mount Hope make $6000 kitchen remodel in fixed deadlines and rates.
In the organization Partnership RUTEIO Rosedale Arverne work masters, exactly they all understand about Major kitchen remodel.
The Organization carries first class 1970s kitchen remodel by affordable tariffs . Experienced Masters with great experience work help one hundred percent kitchen room in a few weeks perform inexpensive reconstruction . The price depends on selected package of services, scope of work .

Any room apartments, houses, cottages or other housing Vinegar Hill unique and carries its own high-functional load. This especially to be relevant to modern kitchens.

1930s kitchen remodel Barum Hill : kitchen renovation manhattan

MSNYCestual

How are things?.
Our Famous Holding in Long Island City over six years, during this period we working exclusively female workers, on Local house cleaning service and Housemaid. Maid service at home ensures order and cleanliness in houses according to certain . In our headquarters in oll trained Housemaid, ready to take on Wall and ceiling washing of the most varied complexity and produce it fast and good. When it comes to about a huge private house, employees of our company provide client required for you number State. You can buy not only experienced personnel , at the same time prices affordable for each customer for Maid service in my area в Staten Island. With the purpose of place an order Cleaning my house and Maid service in my area recommend all of you look at our site in Civic Center. The Tidying up Garden cleaning с Maid service every time more pleasant in Bronx

We provide specialist apartment cleaning service nyc for personal clients. Using European tools and also certified tools, we accomplish optimal outcomes and also provide cleaning in a short time.

Our pleasant team uses you to obtain acquainted with desirable regards to participation for company customers. We sensibly approach our activities, tidy utilizing specialist cleansing items and specific equipment. Our staff members are educated, have clinical publications as well as are familiar with the nuances of eliminating facility and also hard-to-remove dust from surface areas.

JoshuaBem

New-York erotic – queens body rub

Good day! We those who make your life much easier . Famous company that operates more than 6 years.

Distinctive specificity our Shirodara salon is not an enforced setting. We create social profiles to advertising.
Recommended for you personally check very different method massage techniques soon. Go to portal and explore, see details.

Forexkale

ისწავლეთ Forex Trading UK. https://ge.forex-is.com

econah

Купить септик для частного

Автономная канализация в частном помещении – лучший выбор от компанииСборка септика – изрядно непростой процесс, предполагающий не только лишь строительство, но и дополнительно выбор нужной системы.
Обеспечиваем лучший завершающий результат
Это в целом предоставляет вам гарантию того момента, что автономная канализация работает без перебоев в течение многих лет.
Максимальное внимание к клиенту
Септики – это несложная сборка с специфической конструкцией перелива, фильтрации и сложной электроникой

Lolita.tikhonofaml8b

Perfect update of captchas solving software “XRumer 19.0 + XEvil”:

Captcha regignizing of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Hotmail, Mail.Ru, SolveMedia, Steam,
and more than 12000 another categories of captcha,
with highest precision (80..100%) and highest speed (100 img per second).
You can use XEvil 5.0 with any most popular SEO/SMM software: iMacros, XRumer, SERP Parser, GSA SER, RankerX, ZennoPoster, Scrapebox, Senuke, FaucetCollector and more than 100 of other software.

Interested? There are a lot of impessive videos about XEvil in YouTube.

FREE DEMO AVAILABLE!

See you later!
P.S. A Huge Discount -30% for XEvil full version until 15 Jan is AVAILABLE! 🙂

XEvil Net

Leave a Message

Registration isn't required.

NguyenLp LarTheme