web-dev-qa-db-fra.com

Tabindex sur la saisie de texte immédiatement après la saisie du titre WordPress

Le code suivant ajoute une entrée de texte pour un sous-titre à l'espace situé directement sous l'entrée de titre, via le crochet edit_form_after_title. Cependant, lors de l'édition du titre, appuyer sur tab déplace le curseur sur l'éditeur principal et je ne peux pas déterminer quel tabindex je devrais utiliser (ou une autre méthode si disponible) pour passer du titre à l'entrée du sous-titre.

add_action( 'edit_form_after_title', 'add_input' );

function add_input(){

    global $post;

    $options = get_option( 'kia_subtitle_options' );

    // only show input if the post type was not enabled in options
    if ( isset ( $options['post_types'] ) && in_array( $post->post_type, $options[ 'post_types'] ) ) {

        //create the meta field (don't use a metabox, we have our own styling):
        wp_nonce_field( plugin_basename( __FILE__ ), 'kia_subnonce' );

        //get the subtitle value (if set)
        $sub = get_post_meta( get_the_ID(), 'kia_subtitle', true );

        // echo the inputfield with the value.
        printf( '<input type="text" class="widefat" name="subtitle" placeholder="%s" value="%s" id="the_subtitle" tabindex="1"/>',
                __( 'Subtitle', 'kia-subtitle'   ),
                 esc_attr($sub) );
     }
}
custom-fieldpost-editor
6
helgatheviking

J'ai trouvé la dernière partie de @birgire répondre de la manière la plus utile, mais cela brise la possibilité de tab au contenu. En fait, je pense qu'il est normal de focaliser le contenu par clic sur l'onglet dans le champ sous-titre.

Pour ce faire, vous devez également faire attention si le contenu est affiché dans l'onglet "Texte" ou dans l'onglet "Visual" (TynyMCE).

Je mets le code en ligne, dans votre fonction, mais vous pouvez utiliser wp_enqueue_script ou l'ajouter à un fichier javascript déjà mis en file d'attente dans l'écran d'édition post.

add_action( 'edit_form_after_title', 'add_input' );

function add_input(){
  global $post;
  $options = get_option( 'kia_subtitle_options' );
  // only show input if the post type was not enabled in options
  if ( isset ( $options['post_types'] ) && in_array( $post->post_type, $options[ 'post_types'] ) ) {
    //create the meta field (don't use a metabox, we have our own styling):
    wp_nonce_field( plugin_basename( __FILE__ ), 'kia_subnonce' );
    //get the subtitle value (if set)
    $sub = get_post_meta( get_the_ID(), 'kia_subtitle', true );
    // echo the inputfield with the value.
    printf(
      '<input type="text" class="widefat" name="subtitle" placeholder="%s" value="%s" id="the_subtitle" tabindex="1"/>',
      __( 'Subtitle', 'kia-subtitle'   ), esc_attr($sub)
     );
  ?>

  <script>
  (function($) { $(document).on( 'keydown', '#title, #the_subtitle', function( e ) {
  var keyCode = e.keyCode || e.which;
  if ( 9 == keyCode){
    e.preventDefault();
    var target = $(this).attr('id') == 'title' ? '#the_subtitle' : 'textarea#content';
    if ( (target === '#the_subtitle') || $('#wp-content-wrap').hasClass('html-active') ) {
      $(target).focus();
    } else {
      tinymce.execCommand('mceFocus',false,'content');
    }
  }
  }); })(jQuery);
  </script>

<?php
} // endif
} // end function
2
gmazzap

Vous pouvez également essayer de jouer avec la méthode focusout Javascript event et la méthode focus():

Voici une démo Sous-titre plugin: /wp-content/plugins/subtitle/subtitle.php

<?php
/**
 * Plugin Name: Subtitle
 */

function custom_add_input()
{
   // your function code above ...
}

add_action( 'edit_form_after_title', 'custom_add_input' );

function subtitle_script( $hook )
{
        if( in_array( $hook, array( 'edit.php', 'post.php', 'post-new.php' ) ) )
        {
                wp_enqueue_script( 'subtitle-script', 
                                   plugins_url( 'js/script.js' , __FILE__ ), 
                                   array(), 
                                   '1.0.1', 
                                    FALSE 
                                 );
        }
}

add_action( 'admin_enqueue_scripts', 'subtitle_script' );

et voici par exemple une version non-jQuery pour votre fichier wp-content/plugins/subtitle/js/script.js:

// script.js

window.onload = function(){
    // Add event listener to the title input
    document.getElementById('title').addEventListener( 'focusout', focus_on_subtitle, false);

}

function focus_on_subtitle()
{
    document.getElementById( 'the_subtitle' ).focus();
}

Ma version initiale de jQuery _ ne fonctionnait pas, c'est pourquoi j'ai testé la version non-jQuery et cela fonctionne avec mon installation ;-)

Eh bien, cette version jQuery semble fonctionner:

jQuery(window).load( function() {
        jQuery('#title').focusout( function() {
                jQuery('#the_subtitle').focus();
        });
});

et ça

jQuery(document).ready( function( ){
            jQuery('#title').focusout( function() {
                    jQuery('#the_subtitle').focus();
            });
    });

Lorsque le champ de saisie titre perd le focus:

after pressing the TAB key

il va dans le champ de saisie sous-titre.

Mais c’est peut-être plus convivial} d’intercepter uniquement le keycode TAB dans le champ de saisie du titre. Avec une modification de ce code , on peut par exemple utiliser:

jQuery(document).on( 'keydown', '#title', function( event ) {
    var keyCode = event.keyCode || event.which;
    if ( 9 == keyCode){
        event.preventDefault();
        jQuery('#the_subtitle').focus();
    }
});
3
birgire