web-dev-qa-db-ja.com

編集画面：[更新]ボタンまたは[公開]ボタンをページに従って作成する

問題：

私は現在、私が開発してきたプレミアムテーマの仕上げ段階にあり、すべてが大体うまくいきました。スライドショーやその他のページコンテンツを追加するためのカスタムメタボックスがページにいくつかあり、編集画面がかなり長くなっていることがわかりました。

垂直方向の高さが大きいため、一番下の部分を変更してから、上部にスクロールして[公開]または[更新]をクリックする必要があります。 2ページを編集した後、これは面倒になります。

（問題を直接確認するには下の画像を参照、クリックして拡大）

enter image description here

質問：

「公開」ボタンと「更新」ボタンが常に一番上までスクロールすることなくアクセス可能で表示されるように、公開/更新メタボックスをページに沿って移動させる方法はありますか。

metaboxeditorpublishbuttons
3
Dwayne Charrington

this StackOverflow Q&A に基づく解決策。
さて、何よりも概念の証明...怠惰な方法で印刷されているスタイルとスクリプト。

Publishボタンの近くにアンカーにリンクされた固定のScroll to top divを追加します。

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
}
3
brasofilo

あなたはおそらくいくつかのCSSでこれを行うことができます。これがWebkitのインスペクタによる簡単なハックの仕事です。

#side-sortables {
    margin-top: 230px;
}
#submitdiv {
    position: fixed;
    z-index: 99;
    margin-top: -230px;
}

ただし、これはUIがシングルカラムモードの場合を処理しません。

0
Milo

もっと簡単な解決策を見つけました

これをあなたのfunctions.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;
    }
}
0
R Reveley