サポート » 使い方全般 » テキストモードでも文字色変更がしたい!

  • 解決済 nao1127

    (@nao1127)


    投稿・固定ページを編集の際、

    ビジュアルモードにある文字色の変更機能を、
    テキストモードでも使用したいと思っています。

    <span style=””></span>というタグを付けて
    色番号を探して~という作業がとても手間がかかったのと、編集中に
    テキストモードとビジュアルモードの切り替えをしたくなかったので・・・。

    color picker系のプラグインを探してみましたが、
    テキストモードでもカラーピッカーが使用できそうな
    ca-colorpickerというプラグインはダウンロード元が見つかりませんでした。

    wp-color-pickerというものも、導入方法が書いてあるサイトを見ましたが、
    コードを具体的にどこに書くかまでは書いていなかったので断念してしまいました。

    例えば、WordPress上ではなく、Windows上で最前面に表示して機能する
    color pickerのフリーソフトも探してみようかとも思いましたが、
    何か良さげなものをご存知でしたら教えていただけますでしょうか?

    もちろん、本来の目的はWordPressのテキストモードでの文字色の変更
    (color picker)の導入ですので、そちらの技術的なご指導をお願いしたい次第です。

    また、ビジュアルモードの拡張プラグインTiny MCE Advancedのようなもので
    テキストモードも拡張できるプラグインがあれば教えていただけますよう
    お願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • テキストエディタで、タグを確認しながら作業するタイプなんですね。

    ビジュアルモードの拡張プラグインTiny MCE Advancedのようなもので
    テキストモードも拡張できるプラグイン

    長年定番とされているプラグインが有りますよ。
    https://wordpress.org/plugins/addquicktag/

    トピック投稿者 nao1127

    (@nao1127)

    う~ん・・・
    なるほど~、長年定番のプラグインがあったのですね;
    これでテキストモードで文字の色を指定するタグ定型文ボタンがつくれそうですね。
    맹조さま、貴重な情報をありがとうございました。

    現段階ではこれも一つの解決ではありますが、
    本来の目的の、WordPressのテキストモードでの
    文字色の変更機能(color picker)の導入を目指して、
    皆様からの技術的なご指導も引き続き募集させていただきます。

    これは、ビジュアルモードの文字色選択機能color pickerの手順が
    私のサイトでは大変便利であり、作業の効率向上のために
    テキストモードでも是非欲しいと思っています。

    どうか引き続き、情報並びに技術的ご指導を宜しくお願い致します。

    こんにちは
    4年前なので、そのままでは動きませんが、
    https://ja.forums.wordpress.org/topic/5015?replies=6

    jQuery( 'body.theme-editor-php .fileedit-sub' ).append(

    jQuery( 'body.post-php #wp-content-media-buttons, body.post-new-php #wp-content-media-buttons' ).append(

    等に変更すれば、使えます

    トピック投稿者 nao1127

    (@nao1127)

    nobitaさま、貴重な情報をありがとうございます。
    リンク先の内容を見ながら
    nobitaさまのご指示いただいた通りに変更した記述をfunctions.phpと、
    admin-script.js テーマフォルダにアップロードしてみました。

    投稿・固定ページの編集画面で、色変更のエディタ欄と、
    [色を選択]ボタンは表示されますが、カラーピッカーが表示されませんでした;

    jQueryが機能していないのか、原因はまだわかりませんが、
    試行錯誤しております。

    お礼の返答が遅くなってはいけないと思い
    追記いたしました。

    色の選択ボタンを押すと、カラーピッカーが表示されます。
    色を選択したら、本文の必要な場所で、クリックしてみてください。

    トピック投稿者 nao1127

    (@nao1127)

    nobitaさま、再度ご返信ありがとうございます。

    現在、色の選択ボタンを押してもカラーピッカーが表示されない状況で
    原因を探しています。

    当方、未熟者でせっかくご教示いただいた事も満足に行えず
    大変申し訳なく思う次第です。

    ブラウザの開発者ツールを使用してみたところ、
    色の選択ボタンを押すと、1pxほどの何かが表示されているようなのですが、
    これがカラーピッカーだとすると、jQueryには問題はなく、
    参考にしたURLに記載されている何かを変更しないと
    私のWordPressテキストモードでのカラーピッカー実装は不可能なのかと
    試行錯誤しながら修正箇所を探っています。

    + ‘<div id=”colorPickerDiv” style=”z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;”></div>’
    );

    太字の場所がスタイルの指定箇所っぽいのでこちらを少しづつ変更してみて
    どうなるか試している段階です。素人の的外れっぽい考えで場当たりですが・・・^^;

    さすがに情報が古すぎるのではないかと……。

    調べてみると、『colpick Color Picker』というものを見つけたのでこれを使ってみます。

    WordPress 4.1.1
    Twenty Fifteen 1.0
    において動作を確認しています。

    colpickをダウンロードしてjsとcssをテーマがあるディレクトリに入れておきます(今回だとwp-content/themes/twentyfifteen以下)。

    functions.phpに以下のコードを追記します。

    function admin_enqueue_scripts_wp_colpick(){
    
    	wp_enqueue_style( 'wp-colpick', get_template_directory_uri() . '/colpick/css/colpick.css' );
    
    	wp_enqueue_script( 'wp-colpick-js', get_template_directory_uri() . '/colpick/js/colpick.js' );
    
    }
    add_action( 'admin_enqueue_scripts', 'admin_enqueue_scripts_wp_colpick' );
    

    スクリプトを読みこませる記述なので、パスは適宜変えてください。
    さらに以下を追記します。

    function qt_add_wp_colpick_script(){
    
    ?>
    <script type="text/javascript">
    
    jQuery(function(){
    
    	if ( typeof(QTags) != 'undefined' ){
    
    		var colpick_qt_id = 'colpick';
    		var colpick_button_id = '#qt_content_' + colpick_qt_id;
    
    		QTags.addButton( colpick_qt_id, 'colpick', function(){} );
    
    		jQuery(colpick_button_id).colpick({
    			submitText: 'ADD COLOR',
    			onSubmit: function( col, hex, rgb, el ){
    
    				QTags.insertContent('#'+hex);
    
    				jQuery(colpick_button_id).colpickHide();
    
    			},
    			onShow: function( cal ){
    
    				jQuery(cal).css({ top: ( parseInt(jQuery(cal).css('top').replace('px','')) + 5 ) + 'px' });
    
    			}
    		});
    
    	}
    
    });
    
    </script>
    
    <?php
    
    }
    add_filter( 'after_wp_tiny_mce', 'qt_add_wp_colpick_script' );
    

    これで、テキストエディタに『colpick』というボタンが追加されるはずです。
    『ADD COLOR』ボタンをクリックすると、エディタのキャレット位置に16進数表記の色が挿入されます。

    ————————————–

    colpickのオプション、onBeforeShowにcolorスタイル付きspanタグを挿入するボタンを追加する処理を入れたものを以下に置きました。

    https://gist.github.com/x743/1f7a760957d6256796fc

    一応『タグを閉じる』ボタンも使えるので大丈夫だとは思います。
    ですが、かなり無理やりなのでWordpressの仕様変更ですぐに使えなるかも……。

    ※ACFなどでビジュアルエディタを複数使用している場合、デフォルト以外のテキストエディタでは恐らく使えません(未検証)

    トピック投稿者 nao1127

    (@nao1127)

    x743さん、大変貴重な情報をありがとうございました。

    ご教示いただいた通りに設定したところ、一発でカラーピッカーが表示されました。
    使ってみると、大手ブログサービスで記事を作成するのと同じように
    テキストモードで文字の色変更をスムーズにできました。

    先程まで試行錯誤して途方に暮れていただけに、
    目標が実現できて感謝しています。

    今回はご教示してくださった皆様のおかげで、大変勉強になりました。

    今後はWordPresに標準で
    テキストモードでも文字の色変更ができるようになることを願って
    これでトピックを解決済みにさせていただきます。
    本当にありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「テキストモードでも文字色変更がしたい!」には新たに返信することはできません。