web-dev-qa-db-ja.com

TinyMCEでデフォルトのフォントサイズを変更し、不要なフォントサイズを削除する

私はTinyMCE Advanceプラグインを使います。私はプラグインのサポートフォーラムに質問を投稿しましたが、作者は現在サポートを提供していないようです。写真からわかるように、フォントサイズ12ptがデフォルトのフォントサイズです。 TinyMCE Advanceエディタを開くたびに、デフォルトの状態で12ptのサイズが表示されます。デフォルトのサイズを14ptに変更し、サイズ8pt、10pt、12ptを削除するにはどうすればよいですか。

私はいくつかの調査をしました、そして、それは私が行くことを勧められました：

wp-includes/js/tinymce/skin/wordpress/wp-content.css

サイズを変更

body {
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin: 9px 10px;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    overflow-wrap: break-Word;
    Word-wrap: break-Word; /* Old syntax */
}

この場合は、18ポイントに変更しましたが、機能しません。問題は、デフォルトの12ポイントサイズがまだそこにあるということです。テキストエディタ領域内をクリックしたときにだけ変化します。 12pt（デフォルトとして表示される）から14ptに変わります。しかし、実際にテキストを入力して公開すると、公開されたテキストのサイズは12ポイントで、14ポイントではありません。つまり、サイズ14ptを取得するには、ドロップダウンリストでフォントサイズ14ptを選択する必要があります。

enter image description here 

tinymcevisual-editorwp-editorfonts
1
Topy

これは一種の2者です。前半では、編集時にTinyMCE内のスタイルを変更する方法を説明します。後半はツールバーから物事を削除する方法を紹介します。

スタイルTinyMCE

WordPressは add_editor_style() と呼ばれるきちんとした小さな関数を与えてくれます。これはスタイルシートの配列をURLか相対パスのどちらかで受け取ります。 WordPressのデフォルトテーマは通常この機能を利用しており、最新の TwentySeventeenテーマ で見ることができます。まずスタイルシートを作りましょう。名前は関係ありませんが場所は関係ありません。

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

簡単にするために、これをeditor-style.cssと呼び、テーマに保存します。

/assets/css/editor-style.css

次に、WordPressにスタイルシートを使用するように指示する必要があります。そうすれば、テーマのfunctions.phpファイルを開いて、以下を追加します。

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {

    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

独自のTinyMCEを実装すると、ページビルダーのように一部のプラグインがこれを妨害する可能性があります。

ツールバーを修正

次に、TinyMCEを修正するために tiny_mce_before_initfilter hook を使うことができます。この場合、フォントサイズを上書きする場合に必要なことはすべてあります。 functions.phpファイルに次の関数を追加することができます。

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {

    $args['fontsize_formats'] = "14pt 18pt 24pt 36pt";

    return $args;

}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

$args配列は、スペースで区切られたフォントサイズのリストを受け取るインデックスを持ちます。 px、em、remは関係ありません。リストがスペースで区切られていて、有効なfont-size値であるということだけです。

1
Howdy_McGee

これが答えです、それは私のために働きます：

  1. functions.php内のthemesディレクトリのルートで/wp-content/themes/yourtheme/を探し、それを開いてphpタグの後に1行追加します。

    add_editor_style（ 'custom-editor-style.css'）;

  2. 同じディレクトリに、以下の行を含むcustom-editor-style.cssというファイルを作成します。

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}

ブラウザのキャッシュをクリアしてください。これはあなたが見るものです。

リンクを参照してください： https://blog.phi9.com/wordpress-editor-and-its-font/

0
Tony Ngo

私はこれだけを使います。わたしにはできる。このコードとあなたのコードの違いは何ですか？

// Customize TinyMCE editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
    function wpex_mce_text_sizes( $initArray ){
        $initArray['fontsize_formats'] = "14pt 18pt 24pt 36pt";
        return $initArray;
    }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
0
Topy