Front-End Editorをインストールするだけじゃなく、さらに便利に使う

とほ

Front-End Editorは自分のホームページを見たまま編集できるという画期的なプラグインです。
プラグインをインストールして有効化するだけで充分便利に使える素晴らしいプラグインですが、もう一歩踏み込んでさらに効果的に使う方法をご紹介します。

基本的な操作については以下のブログなどを参考にしてみてください。

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

AD

入力内容を選択式にする

Front-End Editorではタイトル(the_title())や本文(the_content())は何もしなくても編集可能となりますが、カスタムフィールドの場合は以下のように「editable_post_meta」と記述する必要があります。

これで編集可能になりますが、カスタムフィールドは処理を判別するキーに使ったりするので決められた内容以外を入力してほしくないケースがあります。そのような場合は以下のように記述すると、通常のテキスト入力欄ではなくドロップダウンが出現します。

valuesのキーがoptionのvalue、値が実際に表示される項目名(optionのinnerHTML)です。

テンプレート自体を編集させる

Front-End Editorでは投稿記事だけでなく、テンプレート内の指定箇所を編集することも可能です。
Dreamweaverで言うならdwtファイルそのものを編集するという感じでしょうか。

テンプレートのテキスト部分を編集させる

投稿した記事ではなく、テンプレートとしてつくっている部分を編集させたい場合もあるでしょう。その場合は編集させたい箇所を以下のようにテンプレートファイル内に記述します。

keyは判別用のものなのでほかとかぶらないものなら何でもいいです。
typeは

input(一行のテキストボックス)
select(ドロップダウン)
textarea(複数行テキストボックス)
rich(WYSWYGエディタ)

ドキュメントにはcheckboxと記述があるものの、有効にならない・・・

が選択可能です。selectの場合は以下のように「values」に入力値を持たせます。

テンプレートの画像部分を編集させる

ヘッダー画像なども同様にフロントエンドから編集させることが可能です。ヘッダー画像であったりずっとフッターに表示させている店舗の写真などで使えます。

上記のように記述している部分を以下のように書き換えます。

編集するときはどうなるか、というと以下のように画像アップロード時のインターフェイスが呼び出されます。

ちなみに、上記でアップロードした画像はどの記事にも添付されていない画像となります。
そして古い画像は削除されることなく残りますので、場合によっては手作業で削除する必要があるかもしれません。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。