web-dev-qa-db-fra.com

Shortcode à insérer <! - page suivante ->

Wordpress n'ayant pas d'icône de menu ("convivial") permettant d'ajouter la commande à un message ou à une page, j'essaie de créer un shortcode pour le faire.

Cependant, comme le voudrait la logique, ce n’est pas si facile. Faire cela avec un shortcode insère simplement dans le balisage, ce qui est post-traitement, pas pré-processus comme wordpress le fait substitution dans pré-processus.

Quelqu'un peut-il expliquer comment cela peut être fait?

phpshortcodetinymcevisual-editornextpage
4
N2Mystic

La meilleure solution pour ce que vous voulez accomplir, qui consiste essentiellement à rendre la page suivante plus conviviale pour vos auteurs, consiste à ajouter un bouton TinyMCE qui le fera pour vous. Cela peut être un peu compliqué alors tenez votre chapeau. Pour éviter que cette réponse ne soit la longueur d'une thèse, j'ai ajouté des commentaires dans tous les codes pour vous aider à comprendre le rôle de chaque fonction et je vous recommande vivement de les lire et de les comprendre à fond.

Tout d'abord, dans votre dossier de thèmes, ajoutez un dossier nommé admin et à l'intérieur, créez le fichier class.new_tinymce_btn.php avec le code:

<?php
//class start
class add_new_tinymce_btn {

public $btn_arr;
public $js_file;
/*
 * call the constructor and set class variables
 * From the constructor call the functions via wordpress action/filter
*/
function __construct($seperator, $btn_name,$javascrip_location){
  $this->btn_arr = array("Seperator"=>$seperator,"Name"=>$btn_name);
  $this->js_file = $javascrip_location;
  add_action('init', array(&$this,'add_tinymce_button'));
  add_filter( 'tiny_mce_version', array(&$this,'refresh_mce_version'));

}
/*
 * create the buttons only if the user has editing privs.
 * If so we create the button and add it to the tinymce button array
*/
function add_tinymce_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     //the function that adds the javascript
     add_filter('mce_external_plugins', array(&$this,'add_new_tinymce_plugin'));
     //adds the button to the tinymce button array
     add_filter('mce_buttons', array(&$this,'register_new_button')); 
   }
}
/*
 * add the new button to the tinymce array
*/
function register_new_button($buttons) {
   array_Push($buttons, $this->btn_arr["Seperator"],$this->btn_arr["Name"]);
   return $buttons;
}
/*
 * Call the javascript file that loads the 
 * instructions for the new button
*/
function add_new_tinymce_plugin($plugin_array) {
   $plugin_array[$this->btn_arr['Name']] = $this->js_file;
   return $plugin_array;
}
/*
 * This function tricks tinymce in thinking 
 * it needs to refresh the buttons
*/
function refresh_mce_version($ver) {
  $ver += 3;
  return $ver;
}

}//class end
?>

Ce code ajoutera des boutons personnalisés à l'éditeur visuel.

Ensuite, dans votre dossier de thèmes, créez ces dossiers adminjs/buttons et à l'intérieur, créez ce fichier JS nextpage.js avec le code:

(function() {
    tinymce.create('tinymce.plugins.nextpage', {
        init : function(ed, url) {
            ed.addButton('nextpage', {
                title : 'Next Page Button',
                image : url+'/images/btn_nextpage.png',
                onclick : function() {                    
                    var Prompt_text = "<!--nextpage-->";
                    var caret = "caret_pos_holder";
                    var insert = "<p>" + Prompt_text + " [next_page_button]</p> <span id="+caret+"></span>";
                     ed.execCommand('mceInsertContent', false, insert);
                     ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                     ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('nextpage', tinymce.plugins.nextpage);
})();

Vous devrez ajouter une image pour le bouton (/images/btn_nextpage.png). Le code ci-dessus est une fonction JavaScript assez simple pour ce qui se passe lorsque le bouton est enfoncé.

Maintenant, vous devrez charger cette classe de boutons en l'ajoutant à votre fichier de fonctions:

//load custom buttons class
require_once (TEMPLATEPATH . '/admin/class.new_tinymce_btn.php');
//create an instance of the class
$t = new add_new_tinymce_btn('|','nextpage',get_bloginfo('template_url').'/adminjs/buttons/nextpage.js');

Pour rendre ce problème encore plus compliqué, si vous êtes dans l'éditeur visuel et que <!--nextpage--> est ajouté par Javascript dans le code HTML/texte, il n'apparaîtra pas visuellement jusqu'à ce que vous ayez actualisé la page ou mis à jour. Ceci peut bien sûr être déroutant pour vos utilisateurs qui ne peuvent pas voir visuellement où se trouve la séparation jusqu'à une actualisation. J'ai donc ajouté ce shortcode [next_page_button] au mélange. Il sera ajouté lorsque vous cliquerez sur le bouton.

Alors vous pouvez demander, qu'est-ce que ça fait? Eh bien, déterminons cela. Ajoutez ce code dans vos fonctions:

function christine_post_next_page_button() { 
return '';
 }
add_shortcode('next_page_button', 'chrstine_post_next_page_button');

Faites attention à return ''. Il fait rien ! Il ne s'agit donc que d'un shortcode factice pour ajouter un visuel distinct pour l'utilisateur.

5
Christine Cooper

Voici une autre technique permettant d’ajouter un bouton à l’éditeur wordpress TinyMCE pour insérer <!-- next-page --> après le bouton <!-- more -->. Ce code utilise le filtre mce_buttons pour insérer le bouton wp_page juste après le bouton wp_more existant.

Ajouter à functions.php:

// add <!-- next-page --> button to tinymce
add_filter('mce_buttons','wysiwyg_editor');
function wysiwyg_editor($mce_buttons) {
    $pos = array_search('wp_more',$mce_buttons,true);
    if ($pos !== false) {
        $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
        $tmp_buttons[] = 'wp_page';
        $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
    }
    return $mce_buttons;
}

Voir aussi http://codex.wordpress.org/TinyMCE_Custom_Buttons

one-liner-ish à partir des commentaires:

function my_mce_buttons($buttons) { $buttons[] = 'wp_page';  return $buttons; }
add_filter('mce_buttons', 'my_mce_buttons');
4
here