怎么用WordPress Customize API添加原生設置?-WordPress開發

    為主題添加原生的設置選項。不用框架,

    也許大部分主題是使用相關的設置框架。如果我們的主題只有幾個選項呢?可以在主題的自定義里面配置。這一節就教大家如何制作主題的設置選項。

    本站下載該頁歷史版本

    customizer-custom-controls-master

    提取碼:無
    解壓碼:無

    我開發的博客主題Mirages就是使用這個方法來進行主題的設置??梢韵螺d下來看看(新年前發布?)。

    設置 API是在 2.7 版本中加入的新功能。它令包含設置表單的管理頁面實現“半自動工作”,允許您定義整個管理頁面、選項區域,甚至具體的欄目。

    本站下載:

    [zrz_file link="https://n.getimg.net/www/2019/01/10eca19b133531.zip" name="colormag.1.3.4" code=""]

    在主題的functions.php文件中底部添加如下代碼:

    //面板、設置節、設置,控件
            //添加一個設置面板
    		$wp_customize->add_panel( 'npcink_options',             //ID=npcink_options
    		array(          
    			'capabitity'  => 'edit_theme_options',              //根據用戶的權限級別顯示或隱藏該部分。默認為edit_theme_options 
    			'description' => __( 'Npcink出品', 'npcink' ),      //可選。顯示在面板頂部的描述隱藏在幫助圖標后面。
    			'priority'    => 30,                               //優先級,可選。這將控制此部分在Theme Customizer側欄中的顯示順序。
    			'title'       => __( 'Lifet主題設置', 'npcink' ),    //面板的可見名稱。
    		) );
    		 
    
    		//添加第一個設置節(文本節)
    		$wp_customize->add_section('sections_text_demo',       //id = sections_1
    		array(                
    			'title'     => '第一個設置節',               //設置的可見名稱。
    			'description' => '第一個設置節詳細補充',      //設置的詳細信息
    			'panel' => 'npcink_options',                 //加入第一個設置面板'npcink_options'  => 50//優先級
    		) );
    		/////////////////////////////////////////////////////////////////////////////////////////////////
    		//添加第一個設置節的第一個設置
            $wp_customize->add_setting('aaa',
            	array(
            		'default' => 'Npcink出品',    //默認值
            	)
            );
            //添加第一個設置節的第一個設置控件
            $wp_customize->add_control('aaa',
            	array(
            		'label' => '第一個設置節的第一個設置標題',
            		'section' => 'sections_text_demo',    //填入設置節的ID
            		'type' => 'text',
            	)
            );
    		
    		///////////////////////////////////////////////////////////////////////////////////////////////////
    		//添加第一個設置節的第二個設置
            $wp_customize->add_setting( 'bbb',    //(必填)用作ID的唯一類似slug的字符串。默認值:無
            	array(
            		'default' => '',                          //可選。如果數據庫中沒有值,則關聯控件中的默認值。默認值:空白
    				'transport' => 'refresh',                 //可選。定義實時預覽的更新方式。默認值:刷新。
    				'type' => 'theme_mod',                   // 可選 'theme_mod' or 'option'. 默認: 'theme_mod'
            	//	'sanitize_callback' => 'skyrocket_text_sanitization'   //可選的。在將輸入數據保存到數據庫之前將用于清除輸入數據的函數的名稱
            	)
            );
            //添加第一個設置節的第二個設置的控件
            $wp_customize->add_control( 'bbb',//必填:自定義控件對象或**與此控件關聯的設置的ID**。默認值:無
            	array(
            		'label' => __( '第一個設置節的第二個設置標題' ),          //可選:將顯示設置的標題,默認:空白
            		'description' => esc_html__( '可以輸入的格式見代碼注釋' ),//可選:描述
            		'section' => 'sections_text_demo',               // 必填:填入設置節的ID
            		'priority' => 10,                       // 必填:確定控件在該部分中的顯示順序。默認值:10
            		'type' => 'text',                      // 必填:要顯示的控件類型。類型可以是文本,電子郵件,URL,數字,隱藏或日期。默認值:"文本"
            		'capability' => 'edit_theme_options', // 可選:根據用戶的權限級別顯示或隱藏控件。通常從設置的功能派生。默認值為"edit_theme_options"
            		'input_attrs' => array(              // 可選:控件輸出的定制輸入屬性列表。僅用于文本區域和輸入字段。默認值:空白
            			'class' => 'my-custom-class',
            			'style' => 'border: 1px solid rebeccapurple',
            			'placeholder' => __( 'Enter name...' ),
            		),
            	)
            );
                
    		///////////////////////////////////////////////////////////////////////////////////////////////////
    
    		
    		//添加第二個設置節(文本節)
    		$wp_customize->add_section('sections_demo',       
    		array(                
    			'title'     => '第二個設置節',             
    			'description' => '第二個設置節詳細補充',     
    			'panel' => 'npcink_options',                 
    		) );
    		/////////////////////////////////////////////////////////////////////////////////////////////////
    		//添加第二個設置節的第一個設置
            $wp_customize->add_setting('ccc',
            	array(
            		'default' => 'Npcink',
            	)
            );
            //添加第二個設置節的第一個設置控件
            $wp_customize->add_control('ccc',
            	array(
            		'label' => '第二個設置節的第二個設置標題',
            		'section' => 'sections_demo', 
            		'type' => 'text',
            	)
            );

    有啥規律?

    面板 → 節 → 設置、控件

    怎么設置?

    請您在主題的自定義中進行設置。

    怎么使用呢?

    在你需要的地方添加如下代碼:

    <?php echo get_theme_mod( 'aaa', 'Npcink榮譽出品' ); ?>
    <br>
    <?php echo get_theme_mod( 'bbb', 'Npcink榮譽出品' ); ?>
    <br>
    <?php echo get_theme_mod( 'ccc', 'Npcink榮譽出品' ); ?>
    怎么用WordPress Customize API添加原生設置?-WordPress開發

    支持哪些控件?

    • 輸入控件
    • 復選框控件
    • 選擇控件
    • 單選按鈕控件
    • 下拉頁面控件
    • Textarea控件
    • 顏色控件
    • 媒體控件
    • 圖像控件
    • 裁剪圖像控件
    • 日期時間控件

    添加更多類型請看這里:

    需要更多?

    怎么用WordPress Customize API添加原生設置?-WordPress開發-Npcink
    怎么用WordPress Customize API添加原生設置?-WordPress開發-Npcink

    如何在您自己的主題中利用主題定制器

    需要簡單的設置框架?

    怎么用WordPress Customize API添加原生設置?-WordPress開發-Npcink
    怎么用WordPress Customize API添加原生設置?-WordPress開發-Npcink

    Codestar Framework - 簡約實用的wordpress主題選項框架

    怎么用WordPress Customize API添加原生設置?-WordPress開發-Npcink
    怎么用WordPress Customize API添加原生設置?-WordPress開發-Npcink

    WordPress開發 - Options Framework輕量級后臺框架使用設置舉例

    怎么添加QQ、微博、Twitter、Facebook的社交分享鏈接? - wordpress開發

    2020-5-10 13:50:30

    php

    self關鍵字詳解(parent、static和this) - PHP

    2022-8-26 17:37:19

    ??
    Npcink上的部份代碼及教程來源于互聯網,僅供網友學習交流,若您喜歡本文可附上原文鏈接隨意轉載。
    無意侵害您的權益,請發送郵件至 1355471563#qq.com 或點擊右側 私信:Muze 反饋,我們將盡快處理。
    2 條回復 A文章作者 M管理員
    1. 穩,老哥,支持支持

      • 謝謝支持

    ?
    個人中心
    購物車
    優惠劵
    今日簽到
    有新私信 私信列表
    搜索
    主站蜘蛛池模板: 久久久91精品国产一区二区| 91视频国产一区| 一区二区三区日本电影| 亚洲线精品一区二区三区影音先锋| 免费视频精品一区二区| 亚洲av乱码一区二区三区香蕉 | 无码人妻一区二区三区免费看| 91香蕉福利一区二区三区| 日本一区二区高清不卡| 亚洲AV无码一区二区三区系列| 久久精品免费一区二区喷潮 | 国产一区二区三区精品视频| 亚洲va乱码一区二区三区| 国产亚洲一区二区手机在线观看| 国产在线一区二区三区av| 日韩人妻无码一区二区三区久久| 国产精品久久亚洲一区二区| 一区二区三区精品| 久久99热狠狠色精品一区| 亚洲av区一区二区三| 国产在线一区二区三区在线| 韩国资源视频一区二区三区| 中文字幕AV无码一区二区三区| 人妻无码一区二区三区AV| 国产一区二区三区夜色| 福利一区国产原创多挂探花| 无码日韩AV一区二区三区| 国内精品一区二区三区在线观看| 一区二区三区四区免费视频| 一区二区视频传媒有限公司| 精品一区二区三区免费毛片| 国产伦精品一区二区三区免.费| 日韩精品一区二区三区毛片| 人妻少妇精品视频三区二区一区 | 熟妇人妻系列av无码一区二区| 日韩精品一区二区三区在线观看l| 国产精品亚洲一区二区三区在线观看 | AA区一区二区三无码精片| 91视频一区二区三区| 日韩免费一区二区三区| 精品女同一区二区|