第16回 記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ
今回は記事の投稿時にHTMLなどを記述する必要がある際でも、だれでも簡単にできるように投稿作業を便利にするカスタマイズ方法をいくつか紹介していきたいと思います。投稿画面内にもスタイルを適用される「editor-style.css」の設定方法や投稿時の自由に入力したい情報をボタンとして投稿できる「AddQuicktag」やビジュアルエディタのボタンを拡張する「TinyMCE Advanced」の使い方を見ていきます。
解説:(有)ムーニーワークス ハヤシユタカ
WordPressではスタイルシートは基本は「style.css」に記述して作業していきます。記事を投稿する画面上では、何もしないとそのまま原稿や画像がそのまま表示されてしまいます。
Webデザイナーの人達はそれで全く問題ないですが、運用を担当されるWeb系以外の方ですと単純な文章だけの日記的なページ以外に、少し複雑なコードになると投稿画面が少し見にくくなったります。
また少しタグを入力する作業やclassを設定したり、テーブルで表組みなどを投稿にいれるとなるとHTMLの知識が必要となってきます。そこで、そういった部分を見やすくしたり、定型文として決まったソースコードをすぐに記述できるようなプラグインなどを紹介していきたいと思います。
●投稿画面にCSSを適用させるeditor-style.css
たとえば、サンプルサイトのセミナー情報のページでこのようなページの場合を見てみます。
http://wordpress-book.webdesignmatome.com/news/seminar/semi003/
これを投稿画面のビジュアルエディタで見てみるとこのようになります。
そこで、この本文投稿入力欄に実際のデザインで設定したスタイルを設定して反映させることができるのが「editor-style.css」になります。
このファイル名で設定したCSSファイルは入力欄に反映することができます。ですので、実際に作成したデザインと同じCSSをコピーしてeditor-style.cssとして保存してアップロードします。
アップロードしたファイルを反映されるには「functions.php」に次の文章を追加します。
●投稿画面によく使うコードを登録するプラグイン「AddQuicktag」
それをWeb制作の知識のない人が運用する場合はマニュアルを作成したり、簡単なHTMLを勉強したりということが必要となってきますが、会社などではWeb担当者が変更になった場合に、また別の人が再度勉強するなどが起きてしまいます。
そこで制作時によく使う表現をHTMLのコード毎にまとめてボタンを押せば呼び出せるように登録すると、簡単な指示で誰にでもサイト運用ができるようになります。
そこで便利なプラグインとしてコードを登録して投稿画面にボタンとして配置ができる「AddQuicktag」を使用します。
○「AddQuicktag」の設定方法
「AddQuicktag」の設定方法ですが、まずはh4タグを呼び出す場合にこのように記述します。
次に「開始タグ」と「終了タグ」がありますが、今回のようにタグの開始タグと閉じタグがあり、中の文章は記事毎に毎回いれるという場合はこのように分けて設定します。すると一度目にボタンを押したときに<h4>が追加され、2度目には</h4>が表示されるようになります。
右側にはボタンを表示させるページにチェックを入れます。
「post」は「投稿」で投稿するページの投稿画面に、「page」は固定ページで投稿するページの投稿画面に表示されます。また「ビジュアルエディタ」にチェックを入れるとボタンではなく、プルダウンメニューとして呼び出すことができます。
○実際の使い方の流れ
この場合は開始タグのみにコードをまとめていれるとそこにいれて内容が入ります。
まとまったコードを呼び出して、中のテキスト内容を変えて使える場合などに便利です。
カスタムフィールド機能を使用して細かく投稿画面をカスタマイズすることも可能ですが、「AddQuicktag」でこのように使うことも簡単です。
●ビジュアルエディタにさまざまな機能をボタンとして追加するプラグイン
「TinyMCE Advanced」
サンプルサイトでは表組みとしてtable関係をカスタマイズする部分を取り入れました。
空いています。
その下にあるボタン郡がざまざまな機能のボタンです。
○「TinyMCE Advanced」の使用方法
サンプルサイトの会社概要ページのように表組みを使用する場合を想定して使い方を見てみたいと思います。
http://wordpress-book.webdesignmatome.com/company/
投稿画面時のテーブルのボタン郡の一番左にあるのがテーブルの挿入ボタンになります。
ボタンを押すとテーブルの列や行やその他の設定が選べます。
Webデザイナーにとっては記事をHTMLを用いて更新していくことは簡単ですが、企業のWeb担当者やHTMLなどの知識を持っていない人には難しいものです。運用更新を便利にする機能などは見た目には見えない部分ですが、「だれでも簡単に」「作業効率をよくする」ことが重要なので、ただ作るだけでなく管理画面にもこだわってつくっていきたいですね。
今回は以上になります。
今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。
どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますのでWordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。
URL:http://www.html5-memo.com/other/wordpress-book/
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス(http://www.moonyworks.com/)を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile:http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)