web-dev-qa-db-ja.com

挿入するショートコード<！ - nextpage - >

Wordpressには、投稿やページにコマンドを追加するためのメニューアイコン（別名「ユーザーフレンドリー」）の方法がないため、これを行うためのショートコードを作成しようとしています。

しかし、論理がそれを持っているであろうように、それはそれほど簡単ではありません。ショートコードを使用してこれを実行すると、マークアップに挿入されます。これはワードプレスでは前処理で置き換えられるため、前処理ではなく後処理です。

これをどのように行うことができるかについて誰かが光を当てることはできますか？

phpshortcodetinymcevisual-editornextpage
4
N2Mystic

次のページの機能を作者にとってよりユーザーフレンドリーにすることが基本的に達成したいことのための最善の解決策はあなたのためにこれをするTinyMCEボタンを追加することです。これは少し複雑かもしれませんので、帽子を持ってください。この答えが論文の長さであることを避けるために、私はあなたがそれぞれの機能が何をするのか理解するのを助けるためにすべてのコードの中にコメントを加えました。

まず、あなたのテーマフォルダに、adminという名前のフォルダを追加し、その中に、コードでファイルclass.new_tinymce_btn.phpを作成します。

<?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
?>

このコードはビジュアルエディタにカスタムボタンを追加します。

次に、あなたのテーマフォルダにこれらのフォルダadminjs/buttonsを作成し、その中にこのJSファイルnextpage.jsをコードで作成します。

(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);
})();

ボタンの画像を追加する必要があります（/images/btn_nextpage.png）。上記のコードは、ボタンが押されたときに何が起こるのかを表す、かなり単純なJavaScript関数です。

これをあなたの関数ファイルに追加してこのボタンクラスをロードする必要があります：

//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');

この問題をさらに複雑にするために、ビジュアルエディタを使用していて、<!--nextpage-->がJavascriptによってhtml/textに追加されている場合は、ページを更新または更新するまで視覚的に表示されません。これはもちろん、更新までは分離がどこにあるかを視覚的に確認できないユーザーにとっては混乱を招く可能性があるため、このショートコード[next_page_button]をミックスに追加しました。ボタンをクリックすると追加されます。

それで、あなたは尋ねるかもしれません、それは何をしますか？それでは決定しましょう。あなたの関数にこのコードを追加してください：

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

return ''に注目してください。 何もしない ！それで、それはユーザーのために視覚的に別のものを追加するためのただのダミーのショートコードです。

5
Christine Cooper

これは、<!-- next-page -->ボタンの後に<!-- more -->を挿入するためのワードプレスエディタTinyMCEにボタンを追加するための代替手法です。このコードは、既存のmce_buttonsボタンの直後にwp_pageボタンを挿入するためにwp_moreフィルターを使用します。

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;
}

http://codex.wordpress.org/TinyMCE_Custom_Buttons も参照してください。

コメントからワンライナーっぽさ：

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