[Lập trình theme WordPress] Thêm chức năng Theme Options [NEW]



Một trong những yêu cầu của các chủ đề WordPress ngày nay để làm cho nó thân thiện hơn với người dùng là tích hợp một khu vực tùy chỉnh và cài đặt chủ đề (được gọi là Tùy chọn Chủ đề). Ví dụ: bạn có thể cho phép người dùng thay đổi thủ công logo, màu phông chữ, v.v. trong chủ đề thông qua tính năng Tùy chọn chủ đề này.

Để thực hiện Tùy chọn chủ đề, bạn có thể sử dụng chức năng API Cài đặt có sẵn trong WordPress hoặc sử dụng khung / tập lệnh riêng cho việc này. Trong khuôn khổ bài viết này, mình sẽ hướng dẫn các bạn tích hợp Theme Options vào theme của series Lập trình Theme WordPress thông qua Redux Framework – một framework rất nổi tiếng trong việc tạo Theme Options cho WordPress, rất chuyên nghiệp và miễn phí.

Bước 1. Tích hợp kích hoạt plugin TGM

Kích hoạt plugin TGM Tôi đã giới thiệu bản thân mình nơi đây, nó là một script PHP giúp bạn thêm tính năng buộc người dùng phải cài đặt các plugin bắt buộc khi kích hoạt theme. Lý do chúng ta phải sử dụng TGM Plugin Activation ở đây là Redux Framework hiện đã hoạt động như một plugin WordPress, điều này sẽ giúp người dùng luôn sử dụng phiên bản Redux Framework mà không cần phải đợi cập nhật từ bạn. .

Tải xuống Kích hoạt plugin TGM nơi đâygiải nén nó và sao chép tệp class-tgm-plugin-activation.php đi đến thư mục / themes / thachpham / core. Sau đó mở tệp init.php trong cùng một thư mục và thêm cái này:


<?php
/* Plugin Activation */
require_once dirname( __FILE__ ) . ‘/class-tgm-plugin-activation.php’;

Sau đó, tạo một tệp khác có tên plugins.php trong cùng một thư mục cốt lõi và thêm đoạn mã này:


<?php
function thachpham_plugin_activation() {

// Khai bao plugin can cai dat
$plugins = array(
array(
‘name’ => ‘Redux Framework’,
‘slug’ => ‘redux-framework’,
‘required’ => true
)
);

// Thiet lap TGM
$configs = array(
‘menu’ => ‘tp_plugin_install’,
‘has_notice’ => true,
‘dismissable’ => false,
‘is_automatic’ => true
);
tgmpa( $plugins, $configs );

}
add_action(‘tgmpa_register’, ‘thachpham_plugin_activation’);
?>

Và thêm phần sau vào tệp init.php cho tệp plugins.php này được gọi.


require_once dirname( __FILE__ ) . ‘/plugins.php’;

Kết quả sau khi thêm Kích hoạt plugin TGM:

[Lập trình theme WordPress] Thêm chức năng Theme Options [NEW]

Thông báo về cài đặt plugin bắt buộc

Hãy nhấn nút Bắt đầu cài đặt plugin để cài đặt plugin Redux Framework này để chúng ta làm việc sau này.

Bước 2. Cài đặt Redux Framework

Sau khi cài đặt plugin Redux Framework trên trang web, nó sẽ hiển thị một thông báo như thế này trên trang web.

laptrinhtheme-themeoptions-02

Tuy nhiên, chúng tôi sẽ không sử dụng tệp cấu hình mẫu của Redux Framework vì nó chứa rất nhiều trường tùy chọn mà bạn không cần, bạn sẽ mất rất nhiều công để chỉnh sửa, nhưng chúng tôi sẽ tạo một tệp tùy chọn riêng chứa cài đặt riêng của chúng tôi. . cần thiết, nhu cầu.

Nếu bạn muốn tự mình tìm hiểu về mã Redux Framework, hãy mở tệp sample-config.php trong thư mục plugin Redux Framework để xem hoặc tệp barebone-config.php để xem cấu trúc của một tệp tạo tùy chọn chủ đề hoàn chỉnh từ khuôn khổ này.

Bước 3. Lên kế hoạch tạo Tùy chọn chủ đề

Trước khi bắt đầu viết mã để tạo các tùy chọn trong Theme Options, chúng ta cần biết những tùy chọn nào chúng ta sẽ tạo để người dùng sử dụng. Trong khuôn khổ bài viết này, mình sẽ lấy làm ví dụ về các option cơ bản trong theme như:

  • Bật / tắt chức năng sử dụng hình ảnh làm logo.
  • Chỉnh sửa / xóa hình ảnh làm logo.
  • Thay đổi màu liên kết trong chủ đề.
  • Thêm phông chữ từ Google Fonts.

Bước 4. Viết mã để tạo các tùy chọn cho Tùy chọn chủ đề

4.1) Tạo một tệp chứa mã tùy chọn (options.php)

Bây giờ vào thư mục / themes / thachpham / core / và tạo một tệp có tên options.php. Sau đó, mở tệp init.php và chèn phần sau để cho phép tệp options.php hoạt động:


/* Theme Options */
require_once dirname( __FILE__ ) . ‘/options.php’;

Trong options.phpchúng ta khai báo một lớp để chứa các tùy chọn như sau:


<?php
if ( ! class_exists( ‘ThachPham_Theme_Options’ ) ) {

/* class ThachPham_Theme_Options sẽ chứa toàn bộ code tạo options trong theme từ Redux Framework */
class ThachPham_Theme_Options {

}
/* Kích hoạt class ThachPham_Theme_Options vào Redux Framework */
global $reduxConfig;
$reduxConfig = new ThachPham_Theme_Options();
}

Và từ bây giờ, chúng ta sẽ viết mã để tạo từng vùng tùy chọn và từng tùy chọn bên trong class ThachPham_Theme_Options.

4.2) Khai báo mã cần thiết trong lớp ThachPham_Theme_Options.

Tất cả mã bên dưới phải được viết bên trong cặp class ThachPham_Theme_Options {}.

Đầu tiên, bạn phải khai báo lại các biến toàn cục mà Redux Framework sử dụng để chúng ta có thể sử dụng lại chúng.


/* Tái tạo các biến có trong Redux Framework */
public $args = array();
public $sections = array();
public $theme;
public $ReduxFramework;

Tiếp theo là thêm mã để kích hoạt Redux Framework.


/* Load Redux Framework */
public function __construct() {

if ( ! class_exists( ‘ReduxFramework’ ) ) {
return;
}

// This is needed. Bah WordPress bugs. ;)
if ( true == Redux_Helpers::isTheme( __FILE__ ) ) {
$this->initSettings();
} else {
add_action( ‘plugins_loaded’, array( $this, ‘initSettings’ ), 10 );
}

}

Ngoài ra, trong lớp ReduxFramework nó có một số phương thức mà nếu muốn sử dụng bạn sẽ phải khai báo nó trong một phương thức khác có tên là initSettings. Chúng ta có đoạn mã sau để khai báo các phương thức chúng ta cần sử dụng:


/**
Thiết lập các method muốn sử dụng
Method nào được khai báo trong này thì cũng phải được sử dụng
**/
public function initSettings() {

// Set the default arguments
$this->setArguments();

// Set a few help tabs so you can see how it’s done
$this->setHelpTabs();

// Create the sections and fields
$this->setSections();

if ( ! isset( $this->args[‘opt_name’] ) ) { // No errors please
return;
}

$this->ReduxFramework = new ReduxFramework( $this->sections, $this->args );
}

Đó là, chúng ta sẽ cần sử dụng 3 phương pháp:

  • setArguments: Phương pháp này sẽ thiết lập một số tùy chọn cho Tùy chọn chủ đề.
  • setHelpTabs: Phương pháp này tạo một hướng dẫn ngay bên trong màn hình Tùy chọn Chủ đề.
  • setSections: Đây là phương thức quan trọng nhất, dùng để phân chia các tùy chọn trong Theme Options và chúng ta cũng sẽ khai báo các trường tùy chọn bên trong phương thức này.

Ok, bây giờ chúng ta sẽ viết mã cho từng phương pháp một.

4.3) Viết mã cho initSettings. phương pháp

Như tôi đã nói ở trên rằng phương thức này sẽ được sử dụng để khai báo một số tùy chọn chung cho khu vực Tùy chọn chủ đề, chúng ta có đoạn mã sau (nhớ đặt nó bên trong lớp ThachPham_Theme_Options {}):


/**
Thiết lập cho method setAgruments
Method này sẽ chứa các thiết lập cơ bản cho trang Options Framework như tên menu chẳng hạn
**/
public function setArguments() {
$theme = wp_get_theme(); // Lưu các đối tượng trả về bởi hàm wp_get_theme() vào biến $theme để làm một số việc tùy thích.
$this->args = array(
// Các thiết lập cho trang Options
‘opt_name’ => ‘tp_options’, // Tên biến trả dữ liệu của từng options, ví dụ: tp_options[‘field_1’]
‘display_name’ => $theme->get( ‘Name’ ), // Thiết lập tên theme hiển thị trong Theme Options
‘menu_type’ => ‘menu’,
‘allow_sub_menu’ => true,
‘menu_title’ => __( ‘TP Theme Options’, ‘thachpham’ ),
‘page_title’ => __( ‘TP Theme Options’, ‘thachpham’ ),
‘dev_mode’ => false,
‘customizer’ => true,
‘menu_icon’ => ”, // Đường dẫn icon của menu option
// Chức năng Hint tạo dấu chấm hỏi ở mỗi option để hướng dẫn người dùng */
‘hints’ => array(
‘icon’ => ‘icon-question-sign’,
‘icon_position’ => ‘right’,
‘icon_color’ => ‘lightgray’,
‘icon_size’ => ‘normal’,
‘tip_style’ => array(
‘color’ => ‘light’,
‘shadow’ => true,
’rounded’ => false,
‘style’ => ”,
),
‘tip_position’ => array(
‘my’ => ‘top left’,
‘at’ => ‘bottom right’,
),
‘tip_effect’ => array(
‘show’ => array(
‘effect’ => ‘slide’,
‘duration’ => ‘500’,
‘event’ => ‘mouseover’,
),
‘hide’ => array(
‘effect’ => ‘slide’,
‘duration’ => ‘500’,
‘event’ => ‘click mouseleave’,
),
),
) // end Hints
);

Tôi đã viết lời bình trong mỗi đoạn, vì vậy bạn có thể đọc nó trong lòng.

4.4) Viết mã cho phương thức setHelpTabs:

Tab Trợ giúp là một tính năng rất hữu ích để bạn viết hướng dẫn và có thể tìm thấy bằng nút Trợ giúp ở góc trên bên phải của trang Tùy chọn Chủ đề:


/**
Thiết lập khu vực Help để hướng dẫn người dùng
**/
public function setHelpTabs() {

// Custom page help tabs, displayed using the help API. Tabs are shown in order of definition.
$this->args[‘help_tabs’][] = array(
‘id’ => ‘redux-help-tab-1’,
‘title’ => __( ‘Theme Information 1’, ‘thachpham’ ),
‘content’ => __( ‘<p>This is the tab content, HTML is allowed.</p>’, ‘thachpham’ )
);

$this->args[‘help_tabs’][] = array(
‘id’ => ‘redux-help-tab-2’,
‘title’ => __( ‘Theme Information 2’, ‘thachpham’ ),
‘content’ => __( ‘<p>This is the tab content, HTML is allowed.</p>’, ‘thachpham’ )
);

// Set the help sidebar
$this->args[‘help_sidebar’] = __( ‘<p>This is the sidebar content, HTML is allowed.</p>’, ‘thachpham’ );
}

4.5) Tạo vùng tùy chọn với setSection:

Đây là phương thức quan trọng nhất, nó dùng để khai báo phần tùy chọn và các tùy chọn bên trong mỗi phần.

Đầu tiên, tôi có mã ban đầu sau đây để tạo một phần trước:


/**
Thiết lập từng phần trong khu vực Theme Options
mỗi section được xem như là một phân vùng các tùy chọn
Trong mỗi section có thể sẽ chứa nhiều field
**/
public function setSections() {

// Home Section
$this->sections[] = array(
‘title’ => __( ‘Header’, ‘thachpham’ ),
‘desc’ => __( ‘All of settings for header on this theme.’, ‘thachpham’ ),
‘icon’ => ‘el-icon-home’,
‘fields’ => array()
); // end section

}

Ngay tại đoạn mã trên, từ đoạn //Home Section đến // end section là mã tạo một vùng tùy chọn, có các tham số sau:

  • title: Tên của phần
  • desc: Mô tả của phần
  • icon: đường dẫn hoặc tên của biểu tượng (trong bộ Biểu tượng khó nắm bắt http://elusingicons.com/icons/).
  • fields: Các đoạn mã tạo ra các tùy chọn cho phần này

Ngay sau khi hoàn thành đoạn mã trên, bạn có thể vào Bảng điều khiển để xem phần Tùy chọn chủ đề đã được hiển thị.

laptrinhtheme-themeoptions-03

Bây giờ ngay tại tham số fields Trong phần tạo phần trên, chúng ta sẽ tạo ra hai tùy chọn là tùy chọn bật chức năng hiển thị logo dưới dạng ảnh và trường tải ảnh lên dưới dạng logo. Chúng ta phải thêm mã sau vào tham số các trường:


‘fields’ => array(
// Mỗi array là một field
array(
‘id’ => ‘logo-on’,
‘type’ => ‘switch’,
‘title’ => __( ‘Enable Image Logo’, ‘thachpham’ ),
‘compiler’ => ‘bool’, // Trả về giá trị kiểu true/false (boolean)
‘desc’ => __( ‘Do you want to use image as a logo?’, ‘thachpham’ ),
‘on’ => __( ‘Enabled’, ‘thachpham’ ),
‘off’ => __(‘Disabled’)
),

array(
‘id’ => ‘logo-image’,
‘type’ => ‘media’,
‘title’ => __( ‘Logo Image’, ‘thachpham’ ),
‘desc’ => __( ‘Image that you want to use as logo’, ‘thachpham’ ),
),
)

Trong đoạn trên, tôi rõ ràng có hai mảng bên trong tham số fields, vì vậy điều này tương đương với việc có 2 lựa chọn. Trong mã tạo tùy chọn ở trên, các tham số này dành cho từng loại trường trong ReduxFramework, vì vậy tốt hơn bạn nên xem các tùy chọn của từng loại trường trong ReduxFramework tại đây.

Trong đoạn mã để tạo các tùy chọn, bạn cần lưu ý nhất tham số id, là tên của mỗi trường để sau này chúng ta có thể gọi giá trị của nó bên ngoài chủ đề trong kiểu $opt_name['field_id']. Biến đổi $opt_name là thông số opt_name trong phương pháp setArguments().

Sau khi đặt mã để tạo tùy chọn khác trong phần Header mà chúng ta đã tạo ở trên, khi vào Theme Options chúng ta sẽ thấy như sau:

laptrinhtheme-themeoptions-04

Bây giờ để có thể đưa dữ liệu ra ngoài, trước tiên bạn hãy vào Theme Options và thử chọn bất kỳ tùy chọn nào để nó gán giá trị cho cơ sở dữ liệu, sau đó nhấp lại vào Save Changes để lưu lại.

Như bạn đã biết, trong phương pháp setArgrument Chúng tôi đã sử dụng tham số opt_name để khai báo một biến để giữ dữ liệu mảng cho mỗi tùy chọn. Trong bài viết này, tôi đã gán nó với tên tp_optionsthì chúng ta phải đặt biến này thành toàn cục trong tệp mà chúng ta muốn gọi giá trị như thế này:


<?php
global $tp_options;
echo ‘<pre>’;
print_r( $tp_options );
echo ‘</pre>’;
?>

Bạn có thể thử đặt đoạn mã trên ở đầu tệp header.php để chúng tôi có thể thấy các giá trị trong các tùy chọn:

laptrinhtheme-themeoptions-05

Dựa trên giá trị gỡ lỗi đó, chúng ta có thể lấy giá trị dựa trên tên của từng khóa trong mảng đó.

Bây giờ bạn mở tệp functions.php lên, tìm chức năng thachpham_logo() như thế này:


if (!function_exists(‘thachpham_header’)) {
function thachpham_header() { ?>
<div class="site-name">
<?php
global $tp_options;

if( $tp_options[‘logo-on’] == 0 ) :
?>
<?php
if ( is_home() ) {
printf( ‘<h1><a href="%1$s" title="%2$s">%3$s</a></h1>’,
get_bloginfo(‘url’),
get_bloginfo(‘description’),
get_bloginfo(‘sitename’) );
} else {
printf( ‘<p><a href="%1$s" title="%2$s">%3$s</a></p>’,
get_bloginfo(‘url’),
get_bloginfo(‘description’),
get_bloginfo(‘sitename’) );
}
?>

<?php
else :
?>
<img src="<?php echo $tp_options[‘logo-image’][‘url’]; ?>" />
<?php endif; ?>
</div>
<div class="site-description"><?php bloginfo(‘description’); ?></div><?php
}
}

Những gì chúng ta cần làm là thêm mã kiểm tra tùy chọn bật biểu trưng có hình ảnh, sau đó thêm mã để hiển thị biểu trưng nếu tùy chọn Bật hình ảnh biểu trưng đang Bật (giá trị là 1):


/**
@ Thiết lập hàm hiển thị logo
@ thachpham_logo()
**/
if ( ! function_exists( ‘thachpham_logo’ ) ) {
function thachpham_logo() {?>
<?php
global $tp_options;
?>

<?php if ( $tp_options[‘logo-on’] == 1 ) : ?>

<div class="logo">
<img src="<?php echo $tp_options[‘logo-image’][‘url’]; ?>">
</div>

<?php else : ?>

<div class="logo">

<div class="site-name">
<?php if ( is_home() ) {
printf(
‘<h1><a href="%1$s" title="%2$s">%3$s</a></h1>’,
get_bloginfo( ‘url’ ),
get_bloginfo( ‘description’ ),
get_bloginfo( ‘sitename’ )
);
} else {
printf(
‘<a href="%1$s" title="%2$s">%3$s</a>’,
get_bloginfo( ‘url’ ),
get_bloginfo( ‘description’ ),
get_bloginfo( ‘sitename’ )
);
} // endif ?>
</div>
<div class="site-description"><?php bloginfo( ‘description’ ); ?></div>

</div>

<?php endif;
}
}

Bây giờ bạn có thể thử vào Tùy chọn chủ đề và thiết lập bật chức năng hiển thị logo, tải hình ảnh muốn làm logo lên và chúng ta có kết quả sau khi bật:

laptrinhtheme-themeoptions-06

4.6) Tiếp tục tạo một phần cho Tùy chọn chủ đề:

Trong phần này, chúng ta sẽ tạo thêm một phần là Typography trong phần Theme Options, tại đây chúng ta sẽ cho phép người dùng thiết lập font chữ và màu chữ, màu liên kết:

Ngay tại phương thức setSection, chúng ta sẽ thêm một phần mới như sau:


// Typography Section
$this->sections[] = array(
‘title’ => __( ‘Typography’, ‘thachpham’ ),
‘desc’ => __( ‘All of settings for themes typography’, ‘thachpham’ ),
‘icon’ => ‘el-icon-font’,
‘fields’ => array()
); // end section

Kết quả:

laptrinhtheme-themeoptions-07

Ngay tại thông số fieldschúng tôi có một số tùy chọn như sau:


‘fields’ => array(
// Main typography
array(
‘id’ => ‘typo-main’,
‘type’ => ‘typography’,
‘title’ => ‘Main Typography’,
‘output’ => array( ‘body’ ),
‘text-transform’ => true,
‘default’ => array(
‘font-size’ => ’14px’,
‘font-family’ => ‘Helvetica Neue, Arial, sans-serif’,
‘font-color’ => ‘#333333’,
),
),
)

Đồng thời, bạn phải khai báo thêm Google API Key để Google Font hoạt động. Hãy thêm tham số này vào phương thức setArguments:

‘google_api_key’ => ‘XXXXXXXXXXX’,

Trong đó, XXX là Khóa API Google của bạn, hãy xem thêm hướng dẫn về cách lấy Khóa API tại https://developers.google.com/fonts/docs/developer_api#Auth. Hoặc bạn có thể sử dụng tạm thời AIzaSyAs0iVWrG4E_1bG244-z4HRKJSkg7JVrVQ để kiểm tra.

Ngay trong các trường trên, tôi có các tham số cơ bản trong một tùy chọn, nhưng bạn cần lưu ý tham số ouput. Tham số ouput có nghĩa là chúng ta sẽ khai báo vùng chọn để nó tự tạo CSS, ví dụ: trên khai báo vùng chọn nội dung, nó sẽ tạo CSS với kiểu body {....} để hiển thị các giá trị.

Tham số mặc định là chúng ta sẽ khai báo các giá trị mặc định nếu kiểu chữ không được chọn. Vì vậy, hãy truy cập tệp style.css, tìm vùng chọn nội dung và xóa các giá trị CSS liên quan đến tham số mặc định để nó không bị xung đột.

Kết quả sau khi tạo tùy chọn:

laptrinhtheme-themeoptions-08

Hãy thử chọn các tùy chọn bạn thích và sau đó nhấp vào Lưu. Bây giờ khi xem nguồn của trang web, bạn sẽ thấy các tùy chọn đã được tạo dưới dạng đoạn mã CSS với lựa chọn là tham số đầu ra.

laptrinhtheme-themeoptions-09

Tôi nhắc lại, nếu bạn tạo tùy chọn Kiểu chữ cho bất kỳ vùng chọn nào, hãy đảm bảo rằng bạn xóa tất cả CSS liên quan đến vùng chọn đó trong tệp style.css vì nếu nó vẫn ở đó, CSS trong tệp style.css sẽ có. sẽ được ưu tiên.

Bây giờ bạn có thể áp dụng để tạo thêm các tùy chọn kiểu chữ cho các lựa chọn khác mà bạn thích.

Phần kết

Trong bài viết dài này, tôi đã nói rất chi tiết về việc sử dụng Redux Framework để tạo các tùy chọn chủ đề và cách thêm các tùy chọn cơ bản. Như mình đã nói ở trên, bài viết này mình chỉ lướt qua Redux Framework nên nếu có gì chưa hiểu các bạn hãy xem Tài liệu về Redux để hiểu thêm về framework này.

Tải xuống toàn bộ mã sau khi hoàn thành hướng dẫn này nơi đây.

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện