More than 5 years have passed since last update.

Wordpressの編集画面をいじりたい

Posted at 2016-02-07

雑ですみません。

序章

ある日来た仕事は、Wordpressで特定のページを簡単に作れるようにしろ、という要件だった。

たとえばQ&Aのページを作るなら、規定のフォーマットに沿うよう書けるようにしろ、Q&Aのタイトルはテキストのみで本文はHTMLを許可するなどの入力規則を設けろ、とかそんな感じ。
フォームを用意してそれに値を埋めさせて記事として表示させる例はたくさんあるし、なんだちょろいなとか思ってた。

が、Google Siteみたいに見た通りのまま編集できるようにしてほしい、という要件が加わって雲行きが怪しくなる。フォームで必要項目を埋める形では、記事になったときのイメージができないからよくないとのこと。

そんな感じで、これらを満たせるようなプラグインもないし、これは自分で作るしかないのでは、と思い、頑張っている次第であります。

1はテンプレートエンジンなり、htmlのclassの命名規則とjavascriptでフォーマットを決めて、入力させる箇所をcontenteditableにすればよさそう。(入力規則がめんどくさいけど。)

2はTinyMCEなりYUI-Editorを使えば良さそう。画像の貼り付けは頑張る。(wordpressに画像をuploadできるAPIを書いて、DnDでいい感じにやる。ハウスキープも考えないと・・・)

3についてはwordpressはさっぱりで全然わからない。今回はここを少し頑張った、という話。

自分のアイディアとしては・・・

編集画面のプレビューをiframe(子フレーム)で出して、
プレビュー内のコンテンツをJavaScriptでcontenteditableにし、
親フレームの保存ボタンをadmin-barに置いておき、子フレーム中の記事部分(the_content()で表示させる部分)のDOMを切り取ってHTMLとして保存する。(.entry-contentでとれるかなーと。)

完全にwordpressから切り離して考えたかったのだけど、その場合はガッツリwordpressのロジックは触る事になるか、独自のCMSを作るようなものになるのではと怖くなったので、既存の編集画面を奪うことにした。

まずはここまでやってみる・・・成果物はgistに捨てておきます。
プラグインとしてぶっこむと新規投稿・編集でいきなりプレビュー画面が出てきます。(動作を見るときのコードが残っているので、ゴミもいくつか出る。)

利用したフックのメモ。

編集画面のフック
- admin_headとadmin_footerがあり、これにページのファイル名を付けると、管理者がそのページにアクセスしたときのみhead/footerの部分に作用するフックを仕込める
  - (例)新規投稿時のheadに何か仕込みたい場合
  - 新規投稿画面はpost-new.phpなので、add_action('admin_head-post-new.php', '実行するfunction名') みたいな書き方。気持ち悪い
- 新規(post-new.php)と編集(post.php)であるが、画面の作りはかなり似ている
プレビュー画面のフック
- プレビュー時は is_preview() で判定できる。
- これを真似てwp_head/wp_footerでプレビュー時のみ処理するactionフックを書く
- プレビューのリンク先は esc_url( get_preview_post_link( $post ) ); で作られる

見たところ、色々フックを書ける場所があるので、ある場所にこれを表示させたい、というのは意外と簡単なのかもしれない。
(Page Builderとか似たようなことやってる。)

Front-end-editorは、やりたいことにかなり近かったが、1,2の要件を満たせないのと、コードが多すぎて見たくなかったので、見送っている。

後は時間と努力で解決できるでしょう・・・きっと。