名称：它控制选项的显示名称。id：此参数分配一个唯一的名称，该名称在整个过程中用于检索保存的选项值。desc：此参数添加带有选项名称的简短描述。default：设置默认的 color 值。实时预览：（可选）它有助于显示主题定制器部分内更改的实时预览。css：（可选）当您在管理页面和/或主题定制器部分添加 color 选项时，它会自动生成 CSS。
createOption( array( 'id' => 'aa_color', // The ID which will be used to get the value of this option 'type' => 'color', // Type of option we are creating 'name' => 'My Color Option', // Name of the option which will be displayed in the admin panel 'desc' => 'This is our option', // Description of the option which will be displayed in the admin panel 'default' => '#fffff' // Default value of the option which will be displayed in the admin panel ) );
我在管理面板 $aa_panel 中创建了一个 color 类型选项。然后，通过 createOption() 函数，我添加了一个 color 类型选项，其 ID 为 aa_color。该函数采用选项类型支持的参数数组。因此，会相应地使用 id、type、name、desc 和默认参数。请注意 id 的值，即aa_color，应该始终是唯一的。
上面的屏幕截图显示了一个名为 My Color Option 的 color 选项在Neat Options管理面板中。
createOption( array( 'id' => 'aa_color_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option 'type' => 'color', // Type of option we are creating 'name' => 'My Color Option', // Name of the option which will be displayed in the admin panel 'desc' => 'This is our option', // Description of the option which will be displayed in the admin panel 'default' => '#fffff' // Default value of the option which will be displayed in the admin panel ) );
这次我在管理选项卡 $aa_tab1 内创建了一个 color 类型选项。该选项的 ID 为 aa_color_in_tab1_panel2，该 ID 应该是唯一的。
我将通过 getInstance() 函数获取一个实例，然后使用 getOption() 函数。在此函数（第 5 行）内，我输入 ID aa_color_in_tab1_panel2 作为其参数。最后，我创建了一个div并以文本形式打印了保存的值。
在前端显示结果
这次我选择了 #0bc47d 作为我的颜色值。因此，输出将像这样打印：
在 Metabox 内创建颜色类型选项
声明示例
createOption( array( 'id' => 'aa_mb_color', // The ID which will be used to get the value of this option 'type' => 'color', // Type of option we are creating 'name' => 'My Color Option', // Name of the option which will be displayed in the admin panel 'desc' => 'This is our option', // Description of the option which will be displayed 'default' => '#fffff' // Default value of the option which will be displayed ) );
现在，我将通过 createOption() 函数在元框 $aa_metbox 中创建一个 color 类型选项。该选项的 ID 为 aa_mb_color，用于检索保存的选项值。元框出现在所有帖子/页面编辑屏幕上。
接下来看第 19 行，我在 div 中使用了内联 CSS 样式。这意味着 color 类型选项的值在前端显示为颜色。
在前端显示结果
我选择 #ffff00 作为我的十六进制颜色值并发布了该页面。这是我得到的：
现在您可以在上面的屏幕截图中看到保存的值显示为颜色，并且整个 div 更改其背景颜色.
在主题定制器中创建颜色类型选项
声明示例
createOption( array( 'id' => 'aa_sec_body_bg_clr', // The ID which will be used to get the value of this option 'type' => 'color', // Type of option we are creating 'name' => 'Site Background Color',// Name of the option which will be displayed in the admin panel 'default' => '#fff' // Default value of our option ) );
createOption() 函数在主题定制器部分 $aa_section1 中添加 color 类型选项。该选项的ID是aa_sec_body_bg_clr，用于设置body背景颜色。
createOption( array( 'id' => 'aa_img_id', // The ID which will be used to get the value of this option 'type' => 'upload', // Type of option we are creating 'name' => 'My Upload Option', // Name of the option which will be displayed in the admin panel 'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel ) );
我将通过 createOption() 函数在管理面板 $aa_panel 中添加一个 upload 类型选项。该函数采用一系列参数，例如id、type、name和desc。保持您的 ID 唯一，因为这些 ID 将在整个过程中用于检索保存的值。所以，这里的 ID 是 aa_img_id。
createOption( array( 'id' => 'aa_img_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option 'type' => 'upload', // Type of option we are creating 'name' => 'My Upload Option', // Name of the option which will be displayed in the admin panel 'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel ) );
在管理选项卡 $aa_tab1 内创建 ID 为 aa_img_in_tab1_panel2 的 upload 选项。
您可以在管理面板Neat Options 2标签 1 内找到此选项/strong>.
用法示例
让我们获取保存的值。
getOption( 'aa_img_in_tab1_panel2' );/** * Print the value saved in option */$aa_img_in_tab1_panel2_URL_val= 'http://placehold.it/500x500';if ( is_numeric( $aa_img_in_tab1_panel2_val ) ) { $aa_img_in_tab1_panel2_attachment = wp_get_attachment_image_src($aa_img_in_tab1_panel2_val ); $aa_img_in_tab1_panel2_URL_val = $aa_img_in_tab1_panel2_attachment[0];} ?>
The image in Tab 1 is shown below:
<img src='' />
在前端显示结果
我再次上传了相同的图像并保存了它。在前端看起来像这样：
在 Metabox 内创建上传类型选项
声明示例
现在我将在元框中创建此选项。
createOption( array( 'id' => 'aa_mb_img', // The ID which will be used to get the value of this option 'type' => 'upload', // Type of option we are creating 'name' => 'My Upload Option', // Name of the option which will be displayed in the admin panel 'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel ) );
getOption( 'aa_mb_img', get_the_ID() );/** * Print the value saved in option */$aa_mb_img_URL_val= 'http://placehold.it/500x500';if ( is_numeric( $aa_mb_img_val ) ) { $aa_mb_img_attachment = wp_get_attachment_image_src($aa_mb_img_val ); $aa_mb_img_URL_val = $aa_mb_img_attachment[0];} ?>
The image in Metabox is shown below:
<img src='' />
在前端显示结果
我们在前端查看结果：
在主题定制器部分中创建上传类型选项
声明示例
最后，我将在定制器中创建一个图像上传器字段。
createOption( array( 'id' => 'aa_sec_img', // The ID which will be used to get the value of this option 'type' => 'upload', // Type of option we are creating 'name' => 'My Upload Option',// Name of the option which will be displayed in the admin panel 'desc' => 'This is our option' // Description of our option ) );
upload 类型选项显示在主题定制器部分 $aa_section1 内。它的 ID 是 aa_sec_img。
您可以在上图中的我的部分自定义面板中找到上传者字段。
用法示例
使用以下代码获取值：
getOption( 'aa_sec_img' );/** * Print the value saved in option */ $aa_sec_img_URL_val= 0;if ( is_numeric( $aa_sec_img_val ) ) { $aa_sec_img_attachment = wp_get_attachment_image_src($aa_sec_img_val ); $aa_sec_img_URL_val = $aa_sec_img_attachment[0];} ?>
给滚动元素平滑过渡 如何在滚动条属性（scrollleft）发生改变时为元素添加平滑的过渡效果？ 解决方案：scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码： click the button to slide right!…
微信扫一扫 
支付宝扫一扫 
