编辑屏幕：使更新或发布按钮跟随页面

时间：2012-11-20 作者：Dwayne Charrington

The Problem:

我目前正在完成一个我一直在开发的高级主题，一切都很好。对于页面，我有一些自定义的元框，用于添加幻灯片和其他页面内容，并发现编辑屏幕现在相当长。

由于垂直高度较大，您会发现自己在底部更改了一些内容，然后必须滚动回顶部以单击“发布”或“更新”。编辑两页后会很累。

（请参见下图以直接查看问题，单击放大）

enter image description here

The Question:

是否有办法使发布/更新元框跟随页面，使“发布”和“更新”按钮始终可访问和可见，而无需一直滚动到顶部？

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

基于的解决方案this StackOverflow Q&A.<嗯，与其说是什么，不如说是概念的证明。。。以惰性方式打印样式和脚本。

添加固定的Scroll to top div链接到Publish 按钮

add_action( \'admin_head-post.php\', \'scroll_to_top\' );

function scroll_to_top() 
{
    ?>
    <style>#box {
      /* Position absolutely, 30px down from the top */
      position: absolute;
      top: 30px;

      /* In my case I\'m centering it in the window; do what you like */
      margin-left: -100px;
      left: 50%;
      width: 200px;

      /* These are just for my example */
      height: 1.25em;
      border: 1px solid #bbb;
      text-align: center;
    }
    </style>

    <script type="text/javascript">
        jQuery(window).load( function() {   
            jQuery(\'<div id="box"><a href="#top">Scroll to top</a></div>\').appendTo("#wpbody-content");         
            jQuery(\'<a name="top" id="top"></a>\').appendTo("#visibility");

            function getScrollTop() {
            if (typeof window.pageYOffset !== \'undefined\' ) {
              // Most browsers
              return window.pageYOffset;
            }

            var d = document.documentElement;
            if (d.clientHeight) {
              // IE in standards mode
              return d.scrollTop;
            }

            // IE in quirks mode
            return document.body.scrollTop;
          }

          window.onscroll = function() {
            var box = document.getElementById(\'box\'),
                scroll = getScrollTop();

            if (scroll <= 28) {
              box.style.top = "30px";
            }
            else {
              box.style.top = (scroll + 2) + "px";
            }
          };
        });

    </script>
    <?php
}

SO网友:Milo

您可能可以使用一些CSS来实现这一点。以下是通过webkit inspector进行的快速黑客攻击：

#side-sortables {
    margin-top: 230px;
}
#submitdiv {
    position: fixed;
    z-index: 99;
    margin-top: -230px;
}
但这不能处理UI处于单列模式的情况。

SO网友:R Reveley

我找到了一个更简单的解决方案

将此添加到您的函数中。php

// Update CSS within in Admin
function admin_style() {
  wp_enqueue_style(\'admin-styles\', get_template_directory_uri().\'/admin.css\');
}
add_action(\'admin_enqueue_scripts\', \'admin_style\');
并将其指向主题文件夹中的CSS文件

@media (min-width: 850px) {
    .post-php #postbox-container-1 {
    position: fixed;
    top: 100px;
    z-index: 999999;
    right: 320px;
    }
}

结束
标签： metabox   editor   publish   buttons   小码农  

相关推荐

当POST_STATUS=PUBLISH时，向POST编辑页面添加按钮

问题：在“编辑帖子”管理页面上，可以使用什么挂钩将自定义按钮添加到“发布”元框中用例我有一个手动滚动的自定义帖子类型，名为ash_newsletter. 我想在post.php?post={$post->ID}&action=edit 此帖子类型的管理页面。该按钮仅在帖子发布后出现。该按钮只能单击一次。按钮将位于；“发布”；代谢箱。我的想法是，当单击按钮时，脚本将检查当前的post状态，并检查post\\u meta，ash\\u ready\\u ran==false。如果两个条件都通过，