Settings API repeater fields

时间:2013-11-27 作者:Slatiner

我是WP设置API的新手,也是一个相当新手的PHP开发人员。为了开始,我遵循了这个很棒的教程

并根据我的需要进行定制。一切都很顺利。

遗憾的是,我找不到有关创建用户动态重复字段的在线参考,例如幻灯片放映中的“添加新幻灯片”。我觉得我真的很接近,但我不知道如何注册新内容。我会感谢你给我的建议或指引我正确的方向。

1 个回复
SO网友:Paresh Radadiya

完成以下文章后,只需几行代码就可以从管理员那里添加和获取选项。本文将为WordPress主题创建选项。

Titan Framework(WordPress option framework)

 Add new theme option

function.php

 if (!class_exists(\'TitanFramework\')) {
        require_once( get_template_directory() . \'/titan-framework/titan-framework.php\' );
    }

    $child_titan = TitanFramework::getInstance(\'child\');

    $adminPanel = $child_titan->createAdminPanel(array(
        \'name\' => \'Child Theme\',
        \'parent\' => \'rtpanel\'
            ));

    /* Home Tab */
    $homeTab = $adminPanel->createTab(array(
        \'name\' => __(\'General Settings\', \'Child Theme\'),
        \'title\' => __(\'Slider\', \'Child Theme\'),
        \'id\' => \'slider\',
            ));

    if (isset($_REQUEST[\'images_amount\'])) {
        $images_amount = $_REQUEST[\'images_amount\'];
        update_option("images_amount", $images_amount);
    } else {
        $images_amount = 2;
    }

    if (!get_option("images_amount")) {
        add_option("images_amount", $images_amount);
    } else {
        $images_amount = get_option("images_amount");
    }


    for ($x = 1; $x <= $images_amount; $x++) {
        $homeTab->createOption(array(
            \'name\' => \'Choose Slider Image \' . $x,
            \'id\' => \'slider_img_\' . $x,
            \'type\' => \'upload\',
        ));
    }

    /**
     * Save Home Settings
     */
    $homeTab->createOption(array(
        \'type\' => \'save\',
    ));

    /**
     * Add control for handling no of images inside slider
     */
    function add_image_amount_field() {
        wp_enqueue_script(\'rtp-theme-options\', get_stylesheet_directory_uri() . \'/js/rtp-theme-options.js\', \'rtp-admin-scripts\');

        if (!isset($_REQUEST[\'tab\']) || $_REQUEST[\'tab\'] == "slider") {
            global $images_amount;
            echo "<input type=\'number\' id=\'images_amount\' name=\'images_amount\' value=\'" . $images_amount . "\'/>";
        }
    }

    add_action("tf_admin_page_table_start_child", "add_image_amount_field");

rtp-theme-options.js

/**
 * Theme Options Scripts
 */

jQuery(function($) {

   $("#images_amount").change(function() {
    var lastIndex = $(".tf-heading").prev().find("input[name^=child_slider_img_]").attr("name").replace(\'child_slider_img_\', \'\');
    var images_amount = $(this).val();
    if (lastIndex < images_amount) {
        $(".tf-heading").before("<tr valign=\'top\' class=\'even first\'><th scope=\'row\' class=\'first last\'><label for=\'child_slider_img_" + images_amount + "\'>Choose Slider Image " + images_amount + "</label></th><td class=\'first last second tf-upload\'><div class=\'thumbnail tf-image-preview\'></div><input name=\'child_slider_img_" + images_amount + "\' placeholder=\'\' id=\'child_slider_img_" + images_amount + "\' type=\'hidden\' value=\'\'></td></tr>");
    } else {
        $(".tf-heading").prev().remove();
    }
});

});

Use Theme option

function rtp_theme_slider() {

    // $slider_image = \'\';
    $slider_pagination = true;
    $slider_html = \'<div class="row welcome-note"><div class="large-8 columns slider"><div class="rtp-orbit-slider-row"><ul data-orbit id="rtp-orbit-slider" data-options="timer_speed:2500; bullets:false;">\';
    $titan = TitanFramework::getInstance(\'child\');

    // The value may be a URL to the image (for the default parameter)
    // or an attachment ID to the selected image.

    for ($x = 1; $x <= get_option("images_amount"); $x++) {
        $imageID = $titan->getOption(\'slider_img_\' . $x);
        $imageSrc = $imageID; // For the default value
        if (is_numeric($imageID)) {
            $imageAttachment = wp_get_attachment_image_src($imageID, \'large\');
            $imageSrc = $imageAttachment[0];
            $imageDetail = wp_get_attachment($imageID);
        }

        $slider_html .= \'<li>\';
        $slider_html .= \'<img src = "\' . $imageSrc . \'" />\';

        $slider_html .= "<div class=\'orbit-caption\'>";
        $slider_html .= $imageDetail[\'caption\'];
        $slider_html .="</div>";


        $slider_html .= \'</li>\';
        $slider_pagination = true;
    }




    $slider_html .= \'</ul></div></div>\';

    echo $slider_html;


    wp_reset_postdata();
}

结束

相关推荐