アフィーロード

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

*

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

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

  関連記事

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

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

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …

「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに …

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

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

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

STINGER5
STINGER5をWordPressのテーマに選んでみた

WordPressをインストールして、まずやるべきは記事を書くことではなく、ブロ …

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

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

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …

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

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

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

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