BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. WordPress・その他CMS
  5. Wordpressの投稿画面を色々カスタマイズ
by 漢ムラタ 漢ムラタ

WordPressの投稿画面を色々カスタマイズ

WordPressの投稿画面を色々カスタマイズ

オッス、オラムラタ。

今回はWordpressのタイトル下やらエディター下など色々な場所に要素を追加してみたいと思います。

投稿の際の注意書きを入れたりマニュアルへのリンクを貼ったりすることでクライアントにも優しい投稿画面が仕上がるのではないでしょうか?

目次

  1. アクションフック
  2. タイトル直前で実行「edit_form_top」
  3. タイトル直後で実行「edit_form_after_title」
  4. エディター直下で実行「edit_form_after_editor」
  5. オプション要素の最後で実行「edit_form_advanced」
  6. 独自のボックスを追加「add_meta_box」
  7. 投稿タイプによって内容を変更させる
  8. 最後に

アクションフック

WPでは管理画面を開いた時や投稿画面を開いた時、プラグインを停止させた時など様々なタイミング(アクション)にフックを使い任意の処理を実行することができます。

今回はその中で投稿画面で使用できるフックに注目していきます。

タイトルの直前で実行「edit_form_top」

まず記事タイトルを出力する直前に実行させたい場合は「edit_form_top」を使用します。

試しにテーマディレクトリ内のfunctions.phpに下記の記述をしてみます。

これで投稿画面での出力結果は以下のようになります。

01

はい、これでクライアントにコピーコンテンツを投稿させない注意喚起ができました。

でもこれだけだとちょっと注意喚起としては弱いかもですね。
当然画像だって貼れちゃうので画像を貼って目立たせてみましょう。

はい、とっても賑やかになりましたね。

03

ここまでしておけばどんな人でもコンテンツをコピーしようなんて思わないはずです。

タイトル直後で実行「edit_form_after_title」

長くなっちゃいましたが次はタイトル下に出力させる「edit_form_after_title」です。厳密にはタイトルしたというよりパーマリンク下ですが。

クライアントによっては無駄にタイトルを無駄に長くしてしまわれる方もいらっしゃると思います。
そんなクライアントのためにここでも注意を促していきましょう。

タイトルの長さが30文字を超えた場合下からニョキッとお兄さんが驚きながら注意してくれるようにしました。

で、こうなります。
アニメーションがカクついて分かりにくいかもしれませんが実際にはスムーズにお兄さんが下からニョキッと出てきます。

04

ちなみにニョキったお兄さんを引っ込ませる処理は書いていないのでこれを利用される奇特な方はご自分で引っ込ませる動きを加えてください。

エディター直下で実行「edit_form_after_editor」

いい感じにごちゃついてきましたね。
次はエディターの真下で実行させる「edit_form_after_editor」です。

ここに何を入れるか悩んだのですが、とりあえず「抜粋」や「カスタムフィールド」「リビジョン」などのエディター以降の要素に対してスクロールするメニューでも入れちゃいましょう。

ページ内スクロールとリンクをロールオーバーすることでリンク先の説明文を表示させるようにしたので微妙に長くなってしまいました。

cssまで一緒に書いてると長くなりすぎるので、管理画面のhead要素内で実行される「admin_head」を利用して独自のcssを読み込んできてそこに記述しています。

出力結果はこんな感じです。

04

リンクをロールオーバーするとaタグ内「data-desc」属性の内容が、上のテキスト部分に表示されるというわけです。
例えば「抜粋」に合わせるとこんな感じ。

05

オプション要素の最後で実行「edit_form_advanced」

「抜粋」や「カスタムフィールド」などのオプション要素群の最後に実行されるのが「edit_form_advanced」になります。
今回はここにページの先頭に戻るボタンでも置いてみましょう。

これでページを少し下にスクロールするとページ右下からキリンさんがひょこっと顔を出してページ先頭(てっぺん)へと誘ってくれます。

06

まぁこの処理だと別にこのフックじゃなくてもいいんですけどね。

独自のボックスを追加「add_meta_box」

「add_meta_box」を使用することで独自のメタボックスを表示することができます。
メタボックスというのはこういうボックスのことです。

07

タイトルをクリックで開閉ができ、その下にコンテンツがあるボックスです。
「公開」や「カテゴリー」等もそうですね。

さっそく投稿画面のサイドカラム「公開」ボックスの上に「マニュアル」ボックスを追加してみましょう。

「add_meta_box」のパラメーターのよって出力させる投稿タイプや場所などを変更できます。
詳しくは下記のページをご覧ください。

後はcssでごにょごにょして…
こんな感じになりました。

右カラムの先頭に猫の兄貴によるマニュアルの導線ができました。
htmlやpdfなどでマニュアルを作成しておいてそこにリンクさせてやればいいと思います。

投稿タイプによって内容を変更させる

ちなみに今回の記述だとブログ記事投稿画面だけでなく固定ページやカスタム投稿タイプの投稿ページにも表示されます。

それだとちょっと困るって方は引数に「$post」を指定して、現在の投稿画面がどの投稿タイプなのかで分岐させてあげましょう。

例えば最初の「edit_form_top」だとこんな感じ。

これでブログの投稿画面だけ出力されるようになりました。
投稿タイプに合わせて色々出力内容を変えてあげるといいですね。

最後に

今回色々と画像を表示させていますが、実際画像を追加される方は現在のWordpressの管理画面はレスポンシブ対応になっているのでその辺を考慮しておかないと表示がえらいことになっちゃいますのでご注意ください。

ページの先頭に戻る