CKEditor for WordPressで「フォーマット」に出す項目を制限する方法

Wordpressのビジュアルエディタを強化するWYSISIGプラグインCKEditor for WordPress。標準のビジュアルエディタだと機能が少ないので、仕事でクライアントさまに納品する場合など重宝します。ただ、CKEditor for WordPressを入れてそのまま使おうとすると、範囲指定した箇所をタグ付けできる「フォーマット」がフリーダム過ぎて困る場合があるかと思います。

フォーマットは、デフォルトだと、「段落」「見出し1」「見出し2」…などがありますが、テーマ内でh1を使っている場合、記事内では「見出し1」を選択してもらいたくなかったりします。ただ、CKEditor for WordPressの管理画面ではGUIでそのあたりの制限をかける方法が見つかりませんでした。幸い、管理画面から設定ファイルを修正できるので、そこから修正して制限をかけることができます。

手順

  1. WordPressの管理画面→CKEditor→File Editor→ckeditor.config.jsを選択。
  2. config.toolbar_WordpressFullという配列があるので、その中の「Format」を「Styles」に変更。
    	// WordPress full toolbar
    	config.toolbar_WordpressFull = [
    			['Source'],
    			['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
    			['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
    			['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
    			'/',
    			['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    			['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    			['BidiLtr','BidiRtl'],
    			['Link','Unlink','Anchor'],
    			'/',
    			['Styles','Font','FontSize'], // ここ!
    			['TextColor','BGColor'],
    			['Maximize', 'ShowBlocks'],['MediaEmbed'],['Iframe']
    		 ];
    

    これで標準のフォーマットを無効化し、「スタイル」というプルダウンがエディタに出るようになります。ちなみに、この配列内の各項目を入れ替えたり消したりすることで、エディタに表示されるボタンを変更することもできます。

  3. 管理画面→CKEditor→File Editor→ckeditor.styles.jsを選択。Stylesプルダウンで表示される項目を設定する。初期でいろいろ入っているので不必要な設定はコメントアウトする。また、/* Block Styles */のとこが、フォーマットの初期値と同じです的なコメントがあるので、必要な物だけ有効可する。
    	// 段落、見出し3、見出し4だけを有効にしたい場合
    	{ name : '段落'			, element : 'p' },
    	{ name : '見出し 3'		, element : 'h3' },
    	{ name : '見出し 4'		, element : 'h4' },
    
  4. 管理画面→CKEditor→Basic Settings→Editor toolbarで「WordpressFull」を選択。

すると…

ckeditor

以上!

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく