WordPress Customize API - 添加第一個自定義選項

    允許用戶修改和配置主題選項,同時還為他們提供這些更改的實時預覽。WordPress Settings API旨在為主題開發(fā)人員提供一個標準界面,供他們在主題內提供自定義選項時使用

    這個WordPress Customize API是wordpress自帶的為開發(fā)者準備的一套API,通過這個,wordpress開發(fā)者們可以開發(fā)出不同的主題或是插件設置選項,方便您的主題用戶自定義主題。那么這樣一個東西該如何使用呢?這一節(jié)的wordpress開發(fā)教程我們就一起來交流下。

    WordPress Customize API - 添加第一個自定義選項
    背景圖片

    介紹:

    WordPress定制器允許用戶修改和配置主題選項,同時還為他們提供這些更改的實時預覽。定制程序旨在為主題開發(fā)人員提供一個標準界面,供他們在主題內提供自定義選項時使用。

    首先,你現在一定比較懵,沒關系,我們先看看這個所謂的WordPress Customize API可以做哪些事情吧,下面這張圖是我制作的一個例子:

    WordPress Customize API - 添加第一個自定義選項
    WordPress Settings API功能演示

    如果你開發(fā)的wordpress主題需要的功能不多,那么這些選項足夠我們使用了。

    正文開始:

    我們先明白一些概念,面板、節(jié)、設置和控件,他們的關系類似這樣:

    WordPress Customize API - 添加第一個自定義選項
    WordPress Settings API - 面板、節(jié)、設置和控件關系圖

    面板

    面板展示在自定義面板的首頁,也就是這里:

    WordPress Customize API - 添加第一個自定義選項
    WordPress Settings API - 面板

    節(jié)

    那么,什么是節(jié)呢?根據上圖可知,節(jié)在面板下面,如圖:

    WordPress Customize API - 添加第一個自定義選項
    WordPress Settings API - 節(jié)

    那么設置和控件呢?

    設置和控件是在一起的好搭檔,可以這么理解,“設置”先挖洞,然后“控件”把“功能”,埋進去,一個“設置”只能挖一個洞,而一個控件只能把一個功能埋進去。這就是設置與控件間的關系了。

    設置和控件是在節(jié)的下面,而且設置和控件是待在一起的。說了那么多,來實戰(zhàn)吧。

    實戰(zhàn)

    以wordpress自帶的2019主題為例子,在2019主題根目錄下的functions.php文件的<?下面添加以下代碼:

    //添加自定義設置選項
    function npcink_customize_register( $wp_customize ) {
    	//給相關設置項目加小鉛筆
    
    	if ( isset( $wp_customize->selective_refresh ) ) {
    
    	//One
    	$wp_customize->selective_refresh->add_partial( 'npcink_sections_text_one', array(
    		'selector'        => '.1-1',
    		'render_callback' => 'lifet_customize_partial_npcink_sections_text_one',
    	) );
    
    	//Two
    		$wp_customize->selective_refresh->add_partial( 'npcink_sections_text_two', array(
    			'selector'        => '.1-2',
    			'render_callback' => 'lifet_customize_partial_npcink_sections_text_two',
    		) );
    		
    	}
    	
    
    	//-----------------------------------------------------------------------------
    	//添加主題設置面板,ID = npcink_options
    	$wp_customize->add_panel( 'npcink_options',
    	array(
    		'title' => __( '我是面板 - Npcink', 'npcink' ),
    		'description' => __( 'Npcink首發(fā),Muze原創(chuàng)', 'npcink' ),
    		'priority'    => 30,
    		'capabitity'  => 'edit_theme_options',
    	) );
    
    	//添加文本設置節(jié),ID = npcink_sections_text
    	$wp_customize->add_section('npcink_sections_text',
    	array(                
    		'title'     => '節(jié) - Npcink',
    		'description' => '主題的文本設置',     
    		'panel' => 'npcink_options',
    	) );
    
    	//文字設置:one,ID = npcink_sections_text_one
    	$wp_customize->add_setting('npcink_sections_text_one',
    		array(
    			'default' => 'Npcink 榮譽出品',
    		)
    	);
    	$wp_customize->add_control('npcink_sections_text_one',
    		array(
    			'label' => '文本設置:One',
    			'section' => 'npcink_sections_text',
    			'type' => 'text',
    		)
    	);
    
    	//文字設置:two,ID = npcink_sections_text_two
    	$wp_customize->add_setting('npcink_sections_text_two',
    		array(
    			'default' => 'Npcink 榮譽出品',
    		)
    	);
    	$wp_customize->add_control('npcink_sections_text_two',
    		array(
    			'label' => '文本設置:Two',
    			'section' => 'npcink_sections_text',
    			'type' => 'text',
    		)
    	);
    
    }
    add_action( 'customize_register', 'npcink_customize_register' );

    保存上面的代碼,我們就可以在網站后臺 → 外觀 → 自定義中看到我們添加的新選項:我是面板 - Npcink。

    為了方便看到演示效果,我們在主題根目錄下的header.php文件底部添加以下代碼:

    <dl style="padding: 1em;">
        <dd class="1-1">1-1:<?php echo get_theme_mod( 'npcink_sections_text_one', 'Npcink榮譽出品' ); ?></dd>
        <dd class="1-2">1-2:<?php echo get_theme_mod( 'npcink_sections_text_two', 'Npcink榮譽出品' ); ?></dd>
    </dl>

    保存上面的代碼,刷新下自定義,您就可以在自定義中看到這個效果:

    WordPress Customize API - 添加第一個自定義選項
    WordPress Settings API - 節(jié)和控件

    到這里為止,您已經知道了WordPress Customize API的面板、節(jié)、設置和控件之間的關系,知道了如何跟著教程做出一個設置出來并調用了,那么上面中添加的代碼都有啥用呢?迫于篇幅就不在此處提及,請看下文。

    推薦:

    這個原生設置框架優(yōu)點是體積小,輕量,能用,如果您需要更加豐富和專業(yè)的功能,那么您可以嘗試這款wordpress設置框架:

    WordPress Customize API - 添加第一個自定義選項-Npcink
    WordPress Customize API - 添加第一個自定義選項-Npcink

    Kirki - wordpress設置框架

    教程

    文章詳情頁下載內容美化記錄 - WordPress美化B2主題

    2020-9-7 0:08:00

    網站

    NodeBB論壇-下一代討論平臺

    2019-3-15 18:57:15

    ??
    Npcink上的部份代碼及教程來源于互聯網,僅供網友學習交流,若您喜歡本文可附上原文鏈接隨意轉載。
    無意侵害您的權益,請發(fā)送郵件至 1355471563#qq.com 或點擊右側 私信:Muze 反饋,我們將盡快處理。
    0 條回復 A文章作者 M管理員
      暫無討論,說說你的看法吧
    ?
    個人中心
    購物車
    優(yōu)惠劵
    今日簽到
    有新私信 私信列表
    搜索
    主站蜘蛛池模板: 精品久久久久久无码中文字幕一区 | 国产一区二区三区亚洲综合| 天堂一区人妻无码| 青娱乐国产官网极品一区 | 中文字幕一区二区三区5566| 国产精品无码一区二区三区毛片| 91福利一区二区| 中文字幕一区二区人妻| 亚洲AV日韩精品一区二区三区| 日韩一区二区视频| 亚洲第一区视频在线观看| 无码人妻AⅤ一区二区三区 | 国产日本亚洲一区二区三区| 国产av一区二区三区日韩| 制服中文字幕一区二区| 三上悠亚国产精品一区| 国产福利电影一区二区三区,日韩伦理电影在线福 | 国产精品高清视亚洲一区二区 | 中文字幕亚洲乱码熟女一区二区 | 亚洲国产成人久久一区WWW| 国产日韩精品一区二区三区 | 国产91大片精品一区在线观看 | 亚洲国产精品成人一区| 动漫精品专区一区二区三区不卡| 波多野结衣一区二区三区88 | 国产日韩精品视频一区二区三区 | 精品国产一区二区三区香蕉事| 亚洲色精品VR一区区三区| 国产小仙女视频一区二区三区| 国产精品一区二区毛卡片| 暖暖免费高清日本一区二区三区| 日韩精品一区二区三区中文版| 国产在线一区视频| 国产激情无码一区二区三区 | 加勒比精品久久一区二区三区| 国产乱码精品一区二区三区香蕉 | 少妇激情AV一区二区三区| 中文字幕一区二区三区5566| 激情无码亚洲一区二区三区| 一区二区三区在线视频播放| 国产精品视频一区二区三区无码|