アフィーロード

アフィリエイトがあるじゃないか!

*

TinyMCE Advancedを導入してブログ記事の作成を捗らせよう

    2016/05/21

TinyMCEAdvanced-thum

ビジュアルエディタは楽で良いですね。

テキストエディタだと、コードとテキストがごちゃ混ぜになって、見づらい上に完成した姿が見れないので不便です。

そんなビジュアルエディタをもっと便利にするのが今回のテーマになります。

投稿画面のエディタを使いこなしたい

ブログ記事を書く場合、キーワードを強調したり、画像や動画を挿入したり、表を使ったり、リンクを貼ったりと文章を書く以外にも色々とする事があります。そもそも文章も<p>タグ<h2>タグで囲ってやる必要があります。

そんな煩わしい作業を楽にしてくれるのが、エディタです。

特にビジュアルエディタは便利で、強調や見出しやリストなどもクリック一発で挿入してくれます。ソースコードもビジュアルエディタに入力すると自動的に、「&lt;」と「&gt;」で囲ってくれるので手間が省けて本当に助かります。

そんな訳で、作業を始める前にWordPressのエディタ機能を確認してみると、最低限のものしか用意されていない様なので、足らない機能を追加したいと思いTinyMCE Advancedプラグインを導入する事にしました。

TinyMCE Advancedプラグインとは

WordPressのエディタに足らない機能を追加するプラグインです。

投稿画面の初期状態はこんな感じです。最低限の物はあるようですが画像映像やテーブルの挿入がないので追加したいです。TinyMCE Advanced1

TinyMCE Advancedを導入する

プラグインを追加する

  1. 管理画面のプラグインから新規追加をクリックします。
  2. 検索窓にプラグイン名「TinyMCE Advanced」を入力してEnter。
  3. 見つかったら、いますぐインストールをクリック。
  4. プラグインを有効化をクリック。

設定方法

管理画面の設定TinyMCE Advancedが追加されているのでクリックします。

Editor Settingsという画面です。TinyMCE Advanced2

めぼしい所では、画像の挿入・動画の挿入・テーブル・背景色・顔文字・検索置換・フォントサイズ・ソースコード辺りでしょうか。また、ドラッグ&ドロップで好きなように並べ替える事も出来ます。

また、上部にあるEnable the editor menuにチェックを入れると、全ての機能がドロップダウンリストから使用できます。

ついでにAdvanced Optionsという所も設定してみます。英語で書かれているのでよく分からない所もありますが以下の3箇所にチェックを入れておけばいいでしょう。TinyMCE Advanced4

Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.
CSSの設定をビジュアルエディタに反映させるという意味で、プレビューによる確認の手間を省けそうなので設定します。
Stop removing the <p> and <br /> tags when saving and show them in the Text editor
WorsPressが勝手にテキストエディタの<p> と <br />を消す現象を防止します。直接HTMLを編集したい時に<p>タグが見えないと不便なので助かります。
Replace font size settings
フォントサイズをpx単位に統一してくれます。

最後に右下のSave Changesをクリックして設定保存するのを忘れずに。

足らないタグとかを追加するには

元々あるタグだけでは、まだ足りませんよね。独自のCSSとかもクリックするだけで追加されると便利そうです。

足らない物については、AddQuicktagというプラグインがあるので、AddQuicktagプラグインでタグ打ちをとことん手抜きしようの記事を参考にしてください。

まとめ

クリック一発でHTMLを埋め込んでくれるのは楽です。

記事もクリック一発で書いてくれると楽なんですけどねw

 - WordPress, プラグイン

Message

メールアドレスが公開されることはありません。

  関連記事

リビジョンは便利機能だけど、溜まり続けるので何とかするプラグイン「Revision Control」と「Delete Revision Manager」

記事を書いていると、保存する前にうっかりページを移動したり、閉じてしまう事があり …

ブログのファビコンを変更しました

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることに …

挿入画像のデフォルト値を変更して無駄な手間を省こう

WordPressで画像を挿入する時の話しですが、気が付いたら毎度ブログに表示す …

Google Analytics Dashboard for WPを導入してWordPressで解析確認!エラーが出た時の対処方法あり

Google Analyticsでアクセスを確認したいけど、その度にログインする …

アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!

記事の先頭に画像があると、見栄えが良さそうだなと思います。 しかし、アイキャッチ …

AddQuicktagプラグインでタグ打ちをとことん手抜きしよう

TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …

ビジュアルエディタのレイアウトをブログと同じにする

記事を書いてはプレビュー、また書いてはプレビュー・・・・・ 少々几帳面なのか、文 …

WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテー …

変更不可能なWordPressのログインIDを変えてセキュリティアップする方法

ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …