Toggle custom fields?

时间：2015-03-21 作者：Ruriko

我有一个自定义字段，我想切换一个特定的自定义字段。例如，我有两个名为“主题”和“分数”的自定义字段。查看单个帖子时，自定义字段“得分”数据将隐藏，直到用户单击按钮查看数据。如何实现这种切换效果？

2 个回复
最合适的回答,由SO网友:jimihenrik 整理而成

您可以使用jquery实现这一点。

我有一个类似的代码，您可以根据需要轻松编辑：

加载admin js（我也加载css，但您可以删除它）

function wpse181868_admin_css_js() {
    wp_register_style( \'bones_admin_css\', get_template_directory_uri() . \'/library/css/admin.css\', false );
    wp_enqueue_style( \'bones_admin_css\' );

    //adding scripts file in the footer
    wp_enqueue_script( \'admin_js\', get_stylesheet_directory_uri() . \'/library/js/admin.js\', array( \'jquery\' ), \'\', true );
}
add_action( \'admin_enqueue_scripts\', \'wpse181868_admin_css_js\' );
然后在js中根据需要检查并显示内容（我为不同的帖子格式显示不同的框）

jQuery(document).ready(function($) {
    function checkFormat() {
        $(\'#attachments-gallery_attachments\').hide();
        $(\'#featured_video\').hide();
        if($(\'input[name=post_format]:checked\', \'#formatdiv\').val() == "gallery") { $(\'#attachments-gallery_attachments\').show(); }
        if($(\'input[name=post_format]:checked\', \'#formatdiv\').val() == "video") { $(\'#featured_video\').show(); }
    }

    $(\'#formatdiv input[type="radio"]\').live(\'click\', checkFormat);
    checkFormat();
});
<小时>EDIT:在you主题的功能中。php添加此代码

function wpse181868_admin_js() { ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var $input = $(\'<input type="button" id="s_s" value="Show score" />\');
        $(\'input[name^="meta["]\').each(function(){
            var val = $(this).val();
            if(val == "score") {
                var valueTD = $(this).parent().siblings();
                $(valueTD.find(\'textarea\')).hide();
                $input.appendTo($(valueTD));
                $(\'#s_s\').click(function(){ $(valueTD.find(\'textarea\')).show(); $input.remove(); });
            }
        });
    });
    </script>
<?php }
add_action(\'admin_footer\', \'wpse181868_admin_js\');

SO网友:user114724

我不确定你是否还有这个问题，但最近我也有同样的挣扎。。。

这就是我发现的。

仅使用CSS切换。不过，我试着用JQuery最简单的方式向您展示这一点。

HTML（single.php或page.php等）---------------------

<?php if ( $post->Scores ): ?>
  <div class="menu">
    <label for="A">Scores</label>
    <input type="checkbox" id="A" class="B" />
    <div class="C">
      <?php echo nl2br( $post->Scores ); ?>
    </div>
  </div>
<?php endif; ?>
CSS--------------------

label {
    color: #3f3f3f;
    padding: 0px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
}

input[type="checkbox"].B{
    display: none;
}

.menu .C {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 5px;
}

input[type="checkbox"].B + .C{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].B:checked + .C{
    height: 200px;
}
请自定义CSS，如高度、边距、填充、颜色等。

希望这对你有帮助，并为你的网站工作。

结束
标签： customization   custom-field   小码农  

相关推荐

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件，但我的样式表没有包含在<head>.. 这是我的代码：add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register