WordPressのリライト(記事の修正)を記事ページからそのまま行う便利プラグイン

Front-end Editor for WordPress
ぼくが使用しているテーマ、storkでは使えませんでした…

ブログ記事書いたけど内容が薄いから更新しよう!

と思ったことありませんか?いわゆるリライトというやつです。

ぼくも昔書いた何記事かリライトしましたが、軒並みGoogleの順位が上がっているのを確認できたので、結構重要な作業だと思うんですよね。

しかしながら、ブラウザでこの作業すると非常にめんどくさい

記事更新→プレビュー→ちょっと直すところ多いからもう1回更新→以後繰り返し…

ですからね。

さらに、WordPressはリビジョン(下の画像)機能が発動してサーバーに無駄なものが溜まっていくのです。

WordPressの記事投稿画面にあるリビジョン
リビジョン:WordPressの自動バックアップ機能。更新を間違えたら前書いた文章に戻せる便利だけど溜まり続けるやつ

今回は

  • 記事からそのままサクッと記事をリライトしたい
  • なんどもプレビュー繰り返すのめんどくさい
  • 無料でやりたい

と考えてる人にぴったりのオススメWordPressプラグインをご紹介。Web制作を行ったクライアントさんにご要望をいただいたときに導入したんですが、好評でしたよ〜。

使っているテーマによっては利用できない場合もありますが、リライトをサクッと一度試してみてください。

カスタマイズ方法もおまけで書きました。

SPONSORED LINK

記事を見ながらリライトが簡単にできる「Front-end Editor for WordPress」

そのプラグインの名は「Front-end Editor for WordPress」です。

Front-end Editor for WordPress

タイトル、本文が簡単に変えられる

プラグインをインストール
→有効化
→投稿画面を開いて「投稿の編集」をクリック

これだけで記事が編集モードに切り替わって、記事画面のまま編集ができます。ちなみに、訪問者には保存するまで通常通り見えるので安心。

そのままWordPressの管理画面で編集する場合は、

  • 管理画面の一覧から編集する
  • キーボードの「command」ボタンを押しながら「投稿の編集」をクリック

いずれかの方法を使えば通常の編集画面に移動します。

Front-end_Editor_for_WordPressの実演1

記事本文だけでなく、タイトルも変えられるようになっててリライトのためのプラグインだ!と感じました。素晴らしい。

Front-end Editor for WordPressを使用するには「WordPress Rest API」というものも必要です。インストールしてなかったら管理画面にお知らせが表示されるのでインストールしてください。

太字、リンク、写真の貼り付けができる!カスタマイズすれば他にも追加可能

太字やリンク、写真の貼り付けなど、必要な機能も揃っています。

SPONSORED LINK
Front-end_Editor_for_WordPressの実演2 Front-end_Editor_for_WordPressの実演4

写真1枚目左から

  • 太字
  • 斜字
  • 打ち消し線
  • リンク
  • カスタマイズの展開
  • 文字色 ※カスタマイズが必要
  • 見出し
  • リスト
  • 番号リスト
  • 引用

といった機能が利用できます。

保存はワンクリック

プラグインをインストールすると、画面下に「公開」ボタンが表示されるので、そこを押せば更新完了です。めちゃくちゃ楽です。

Front-end_Editor_for_WordPressの実演3

 

文字色を増やすカスタマイズ方法

Front-end Editor for WordPressでは、太字などのコア機能は簡単にカスタマイズで追加できるのですが、文字色などのPluginが必要なものはちょっとややこしくなります。

参考:TinyMCE | Editor Control Identifiers

ここからは中級者向けになりますが、例として文字色の変更を可能にするカスタマイズ方法を解説します。

class-fee.phpファイルを編集

まずは、FTPでプラグインの「wp-front-end-editor」フォルダのclass-fee.phpファイルを以下のように編集します(14行目、25行目に追加)。

vendorフォルダ内にtextcolor.jsをコピーする

次にこちらの一番下にある「Download TinyMCE Dev Package」をダウンロードして

plugins > textcolor > plugin.js

をコピーします。

それを「vendor」フォルダ内に入れて名前を「textcolor.js」に変更すれば準備OKです。

CSSで表示の調整を行う

ぼくの場合、このまま使ってもカラー選択表示がバグってしまったので、以下のCSSを適用して表示を調整しました。

成功すると、以下のようにテキストの色変更もできるようになりました。結構難しいかな〜…

Front-end_Editor_for_WordPressの実演2

 

リライトがすっごく楽になるのでオススメ

記事を見ながらリライトできて、どんな見え方になるかまでしっかり見られるので、リライトがすっごく楽になります。

ぼくのテーマでは使えなくて残念でしたが、WordPressの規約に沿った作り方をしているテーマであれば対応していることが多いので、気になった方は使ってみてください!

SPONSORED LINK
Front-end Editor for WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です