記事を簡単に編集できるWordPressプラグイン「Front-end Editor」

2013年3月23日
Wordpress

次のプロジェクトで「クライアントが管理ページに行かずに簡単に編集できる方法」を探していたところ、「Front-end Editor」というなんとも便利なプラグインを発見しました！ログインした状態でサイトに行くと、管理画面に行かなくても直接コンテンツを修正できるという優れもの。ということで早速Front-end Editorを紹介します！WordPressを利用している方、クライアントがWordPressを利用する予定の方、ぜひぜひ実装してみてください！

Front-end Editorをインストールする

まずはインストール。自動インストールする場合はWordPressの管理画面のプラグイン欄にある「新規追加」をクリック。Front-end Editorで検索してインストールします。インストール後、有効化すれば完了。マニュアルインストールの場合はFront-end Editorのページからプラグインをダウンロードし、展開後「plugin」フォルダにアップロード。管理画面のプラグイン欄にある「インストール済」をクリックし、Front-end Editorを有効化します。

さっそく使ってみましょう

ログインした状態で自分のWordPressサイトへ行ってみましょう。見た目は変わりませんが、カーソルをタイトルやコンテンツの上にのせると編集可能な部分の背景が黄色くなり、「Double-click to edit」の文字が。

タイトルにカーソルをのせるとこんな感じに黄色くなります。

黄色くなったところをダブルクリックするとテキストフィールドが現れ、ここから変更できます。

コンテンツエリアをダブルクリックすると、文字色や大きさなども変えられます。右端のHTMLアイコンをクリックすると管理画面に行かなくてもHTMLが変更できます。

画像をダブルクリックするとファイル選択画面が表示され、ここからアップロードして画像の変更も可能！

タグやカテゴリーの名前など、他の箇所（サイドバーやフッターなど）でも使用している部分を変更すると…

こんな感じで同じ要素の箇所を全て変更してくれます。

ただし変更したいところが他ページへリンクする文字・画像である場合、クリックするとリンク先へ移動してしまうため、修正できないようです…。

よくある間違い

Front-end Editorのページに注意書きが書かれていたので翻訳してみます。下記のような場合はうまく動作しないようです。

wp_footer() を呼んでいない

JavaScriptファイルを読み込むために、wp_footer() を記述する必要があります。footer.php ファイルに下記コードがあるか確かめてください。

<?php wp_footer(); ?>

the_title() が間違った場所に使われている

下記のようなコード

<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>

ではなく、かわりに the_title_attribute() を使ってください。

<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

ダイナミックサイドバーにIDとクラスがない

ウィジェットのテキストを変更可能にするには

register_sidebar(array('name' => 'My Sidebar',
	'before_widget' => '',
	'after_widget' => '',
	'before_title' => '<h4>',
	'after_title' => '</h4>',
));

↑こうなっているところを

register_sidebar(array('name' => 'My Sidebar',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget' => '</div>',
	'before_title' => '<h4>',
	'after_title' => '</h4>',
));

↑こんな感じで変更してください。

ぜひ試してみてください！