WordPress ライティングエディタに文字サイズボタンを追加する

Last Updated:2020年04月23日| | 4のコメント

WordPress 基本書くエディタでは、文字サイズを変更したり、蛍光ペンのような機能がない文を作成するために不便かもしれません。 WordPressで文字のサイズを変更するには、[書き込み]画面で[段落]ドロップダウンの下の[タイトル1]、[タイトル2]...などを使用することを検討してください。 別の方法で TinyMCEの高度 Pluginを使用して文字サイズのオプションを追加することができます。

2020年の更新: WordPress バージョン5に更新され WordPress デフォルトのエディタが古典的なエディタでブロックエディタ(Gutenberg)に変わりました。 最新バージョンの WordPressをご使用の場合、ブロックエディタをご利用ください。 ブロックエディタが最初に少し不安でしたが WordPressが継続的に更新され、機能が大幅に改善されました。 」WordPress 5.4 アップデート - ボタン&ソーシャルアイコンブロック、スピードアップなど「を参考にしてください。

WordPressでタイトル、本文などの文字サイズを調整したい場合」WordPress 文字サイズの変更方法(タイトル、本文など)「参照できます。ブロックエディタでは、段落単位で文字サイズを変更できます。

WordPress ライティングエディタに文字サイズボタンを追加する方法

TinyMCEの高度 Pluginをインストールして有効にした後 設定> TinyMCE Advancedで、次の図のようにしたいボタンを上向きにドラッグします。

TinyMCEの高度 Plugin - WordPress ライティングエディタに文字サイズボタンを追加

文字サイズだけでなく、背景色(蛍光ペン)、上付き、下付きなどの他のボタンも追加することができます。 上記のように文字サイズボタンを追加すると、:

WordPress Editor Font Size button  -  WordPress エディタ文字サイズボタン

その後、図のように文字サイズを調整することができるボタンが追加されます。 しかし、文字を選択することができる文字サイズオプションがあまりないですね。 より多くの文字のオプションを追加することをご希望の場合は、次のような関数を関数ファイルに追加するだけです。 ここで文字サイズ、スタイルは修正/追加してください。

add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {

if ( !empty($url) )
$url .= ',';

// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( plugin_dir_url(__FILE__) ) . '/editor-styles.css';

return $url;
}

/**
* Add "Styles" drop-down
*/
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );

function tuts_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}

/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );

function tuts_mce_before_init( $settings ) {

$style_formats = array(
array(
'title' => 'Font 9',
'inline' => 'span',
'styles' => array(
'font-size' => '9px'
)
),
array(
'title' => 'Font 10',
'inline' => 'span',
'styles' => array(
'font-size' => '10px'
)
),
array(
'title' => 'Font 11',
'inline' => 'span',
'styles' => array(
'font-size' => '11px'
)
),
array(
'title' => 'Font 12',
'inline' => 'span',
'styles' => array(
'font-size' => '12px'
)
),
array(
'title' => 'Font 14',
'inline' => 'span',
'styles' => array(
'font-size' => '14px'
)
),
array(
'title' => 'Font 16',
'inline' => 'span',
'styles' => array(
'font-size' => '16px'
)
),
array(
'title' => 'Font 18',
'inline' => 'span',
'styles' => array(
'font-size' => '18px'
)
),
array(
'title' => 'Font 20',
'inline' => 'span',
'styles' => array(
'font-size' => '20px'
)
)
);

$settings['style_formats'] = json_encode( $style_formats );

return $settings;

}

/* Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats */

/*
* Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
*/
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');

/*
* Enqueue stylesheet, if it exists.
*/
function tuts_mcekit_editor_enqueue() {
$StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file
wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}

上記のコードは、 このページのコードを応用したものです。 上記のコードを適用してみると次のように文字サイズを追加するドロップダウンボタンが追加されます。 (WordPress 基本エディタでのみ可能。)

Add font size styles in WordPress - ライティングの文字サイズを適用

チャイルドテーマを作ってチャイルドテーマ(サブテーマ)の関数ファイルに上記のコードを追加する必要が今後のテーマの更新時に追加事項が消えません。

注:Visual Composerなどのページビルダーと一緒に、このプラグインを使用する場合、正常に動作しない可能性があります。 この場合、 この記事に記載されているプラ​​グインを利用してみることができます。

メモ:


4のコメント

コメント

  1. こんにちは。 あげてくださったcssをどのパスの関数ファイルに追加する必要がされているんですか?

    応答
  2. MH Magazine liteテーマを書いているstyle cssでbodyのサイズをいくら修正をみても変わらないんですよ黒ㅠ2時間以上あれこれヘボダガだめ放棄チュウムワールドクラッカー様があげこの記事を見て、プラグインをインストールした。サイズは変わった私の好きな分かち合いゴシックフォントを使用することがないですねㅠ第テーマに文字サイズマ変えることができる方法はないでしょうか? 以上 WordPress 極初心者の質問でした。 読んでくれてありがとうございます

    応答
割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy