記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ｜WordPressでビジネスサイトをつくろう【第16回】

今回は記事の投稿時にHTMLなどを記述する必要がある際でも、だれでも簡単にできるように投稿作業を便利にするカスタマイズ方法をいくつか紹介していきたいと思います。

投稿画面内にもスタイルを適用される「editor-style.css」の設定方法や投稿時の自由に入力したい情報をボタンとして投稿できる「AddQuicktag」やビジュアルエディタのボタンを拡張する「TinyMCE Advanced」の使い方を見ていきます。

管理画面をカスタマイズして運用を簡単にしよう

WordPressではスタイルシートは基本は「style.css」に記述して作業していきます。

記事を投稿する画面上ではなにもしないとそのまま原稿や画像がそのまま表示されてしまいます。

Webデザイナーの人達はそれで全く問題ないですが、運用を担当されるWeb系以外の人ですと単純な文章だけの日記的なページ以外に少し複雑なコードになると投稿画面が少し見にくくなったります。

また少しタグを入力する作業やclassを設定したり、テーブルで表組みなどを投稿にいれるとなるとHTMLの知識が必要となってきます。

そこでそういった部分を見やすくしたり、定型文として決まったソースコードをすぐに記述できるようなプラグインなどを紹介していきたいと思います。

投稿画面にCSSを適用させるeditor-style.css

まず文章を投稿する入力画面ではタイトル、本文、抜粋、カスタムフィールドなどいくつかの入力欄がありますが、メインは本文に記事を投稿していきます。

たとえば、サンプルサイトのセミナー情報のページでこのようなページの場合を見てみます。

実際のサンプルサイトはこちらになります。
セミナー記事サンプルページ

これを投稿画面のビジュアルエディタで見てみるとこのようになります。

サンプルではページの構成がシンプルですが、リスト要素がデフォルト状態であったり、画像の回り込みなども投稿によってみにくいものとなってしまいます。

そこで、この本文投稿入力欄に実際のデザインで設定したスタイルを設定して反映させることができるのが「editor-style.css」になります。

このファイル名で設定したCSSファイルは入力欄に反映することができます。

ですので実際に作成したデザインと同じCSSをコピーしてeditor-style.cssとして保存してアップロードします。

アップロードしたファイルを反映されるには「functions.php」に次の文章を追加します。

こうすることで投稿画面内にもスタイルが適用でき、簡易プレビュー的に投稿する文章に対して制作したデザインがあてられますので、HTMLやCSSを知らない人でも作業中に完成イメージがつきやすくなり便利です。

投稿画面によく使うコードを登録するプラグイン「AddQuicktag」

テキストと画像をそのまま記述するだけのブログのようなものではよいですが、複数のページのデザインフォーマットが違うビジネスサイトでは投稿の際にいろいろなタグを使用したり、classなどをあてたりする機会が多くなります。

それをWeb制作の知識のない人が運用する場合はマニュアルを作成したり、簡単なHTMLを勉強したりということが必要となってきますが、会社などではWeb担当者が変更になった場合にまた別の人が再度勉強するなどが起きてしまいます。

そこで製作時によく使う表現をHTMLのコード毎まとめてボタンを押せば呼び出せるように登録することによって簡単な指示で誰にでもサイト運用ができるようになります。

そこで便利なプラグインとしてコードを登録して投稿画面にボタンとして配置ができる「AddQuicktag」を使用します。

インストールしてプラグインを有効化すると左側の「設定」メニューの中に「AddQuicktag」の設定画面が表示されます。

「AddQuicktag」の設定方法

設定方法ですが、まずはh4タグを呼び出す場合にこのように記述します。

まず、「ボタン名」では画面上に表示されるボタンの名称を設定します。

次に「開始タグ」と「終了タグ」がありますが、今回のようにタグの開始タグと閉じタグがあり、中の文章は記事毎に毎回いれるという場合はこのように分けて設定すると一度目にボタンを押すと<h4>が追加され、2度目には</h4>が表示されるようになります。

右側にはボタンを表示させるページにチェックを入れます。

「post」は「投稿」で投稿するページの投稿画面に、「page」は固定ページで投稿するページの投稿画面に表示されます。

また「ビジュアルエディタ」にチェックを入れるとボタンではなく、プルダウンメニューとして呼び出すことができます。

実際の使い方の流れ

また、このようにタグを登録するだけでなく、まとまったコードを登録することもできます。

この場合は開始タグのみにコードをまとめていれるとそこにいれて内容が入ります。

まとまったコードを呼び出して、中のテキスト内容を変えて使える場合などに便利です。

サンプルでは、ECサイトなどですべての記事にアイテム詳細情報を入れる場合の例としましたが、このようにタイプとサイズの中身を変えて使えるような簡易フォーマットとしても使えます。

カスタムフィールド機能を使用して細かく投稿画面をカスタマイズすることも可能ですが、「AddQuicktag」でこのように使うことも簡単です。

ビジュアルエディタにさまざまな機能をボタンとして追加するプラグイン「TinyMCE Advanced」

「AddQuicktag」では自分で使う機能をどんどん追加していく形になりますが、さまざまな機能をボタンとして追加していく形で投稿画面をカスタマイズしていくプラグインとして「TinyMCE Advanced」があります。

サンプルサイトでは表組みとしてtable関係をカスタマイズする部分を取り入れました。

こちらもインストールした後に有効化すると、「設定」メニュー内に設定画面が追加されます。

上部のエリアの4つの部分が追加されているボタンです。デフォルトでは下の2つがグレーになっていて空いています。

その下にあるボタン郡がざまざまな機能のボタンとなっています。

赤枠のTableという領域を上のグレー部分にドラックするとボタンとして投稿画面内に追加されます。

ボタンの使い方などは別途マニュアルなどは必要かもしれませんが、慣れてくるとHTMLの知識がなくてもタグを追加していくことができますので、少し複雑なレイアウトになってしまった場合などに活用したいプラグインです。

「TinyMCE Advanced」の使用方法

サンプルサイトの会社概要ページのように表組みを使用する場合を想定して使い方を見てみたいと思います。

実際のサンプルサイトはこちらになります。
会社概要サンプルページ

投稿画面時のテーブルのボタン郡の一番左にあるのがテーブルの挿入ボタンになります。

ボタンを押すとテーブルの列や行やその他の設定が選べます。

設定するとこのようにテーブルが見えます。

そのままですと両方共tdタグになっているので、左側を見出しとしてthタグに変えたい場合は、左から3番目のボタン「セルのプロパティ」ボタンを押すとその中に「セルの種類」として「ヘッダー」があり、こうすることでthタグに切り替えられます。

中にテキストをいれると表組みができあがります。

るので簡単に更新ができて便利です。

Webデザイナーにとっては記事をHTMLを用いて更新していくことは簡単ですが、会社のWeb担当者やHTMLなどの知識を持っていない人には難しいですので、運用更新を便利にする機能などは見た目には見えない部分ですが、「だれでも簡単に」「作業効率をよくする」ことができますので、ただ作るだけでなく管理画面にもこだわってつくっていきたいですね。

今回は以上になります。

今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。

どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますのでWordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。

http://www.html5-memo.com/other/wordpress-book/