web-dev-qa-db-fra.com

Écran d'édition: bouton Créer ou Mettre à jour Suivez la page

Le problème:

Je suis actuellement en train de terminer un thème premium que j'ai développé et tout va bien pour la plupart. Pour les pages, j'ai quelques méta-boîtes personnalisées pour l'ajout de diaporamas et d'autres éléments supplémentaires du contenu de la page et j'ai constaté que l'écran d'édition est maintenant assez long.

En raison de la grande hauteur verticale, vous modifiez quelque chose en bas, puis vous devez revenir au début de la liste pour cliquer sur "publier" ou "mettre à jour". Cela devient fatiguant après l'édition de 2 pages.

(voir l'image ci-dessous pour voir le problème de première main, cliquez pour agrandir)

 enter image description here 

La question:

Existe-t-il un moyen de faire en sorte que la méta-boîte de publication/mise à jour suive la page de sorte que les boutons "Publier" et "Mettre à jour" soient toujours accessibles et visibles sans avoir à faire défiler tout le chemin jusqu'au sommet?

metaboxeditorpublishbuttons
3
Dwayne Charrington

Solution basée dans ce StackOverflow Q & R .
Bien, plus une preuve de concept qu'autre chose ... Le style et les scripts sont imprimés paresseux.

Ajoutez un div Scroll to top fixe lié à une ancre près du bouton 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
}
3
brasofilo

Vous pouvez probablement le faire avec certains CSS. Voici un travail rapide de piratage via l'inspecteur webkit:

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

Cela ne gère toutefois pas le cas où l'interface utilisateur est en mode colonne unique.

0
Milo

J'ai trouvé une solution plus simple

Ajoutez ceci à votre 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');

et pointez-le vers un fichier CSS dans votre dossier de thème avec cette

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