記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ | デザインってオモシロイ -MdN Design Interactive-

記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ

2019.2.20 WED

第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」に次の文章を追加します。
editor-style.cssを適用させるコード

editor-style.cssを適用させるコード

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

投稿画面にスタイルを適用できる


 

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

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

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

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

そこで便利なプラグインとしてコードを登録して投稿画面にボタンとして配置ができる「AddQuicktag」を使用します。
プラグイン検索で「AddQuicktag」を探していインストール (▲クリックして拡大)

プラグイン検索で「AddQuicktag」を探していインストール (▲クリックして拡大)

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

 

○「AddQuicktag」の設定方法

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

「AddQuicktag」の設定画面 (▲クリックして拡大)

「AddQuicktag」の設定画面 (▲クリックして拡大)

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

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

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

「post」は「投稿」で投稿するページの投稿画面に、「page」は固定ページで投稿するページの投稿画面に表示されます。また「ビジュアルエディタ」にチェックを入れるとボタンではなく、プルダウンメニューとして呼び出すことができます。
「AddQuicktag」での登録画面

「AddQuicktag」での登録画面


 

○実際の使い方の流れ
実際の使い方の流れ

実際の使い方の流れ

また、このようにタグを登録するだけでなく、まとまったコードを登録することもできます。
この場合は開始タグのみにコードをまとめていれるとそこにいれて内容が入ります。
まとまったコードを呼び出して、中のテキスト内容を変えて使える場合などに便利です。
まとめたコードの登録例

まとめたコードの登録例

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

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


 

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

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

サンプルサイトでは表組みとしてtable関係をカスタマイズする部分を取り入れました。
プラグイン検索で「TinyMCE Advanced」を探していインストール (▲クリックして拡大)

プラグイン検索で「TinyMCE Advanced」を探していインストール (▲クリックして拡大)

こちらもインストールした後に有効化すると、「設定」メニュー内に設定画面が追加されます。
プラグイン検索で「TinyMCE Advanced」を探していインストール (▲クリックして拡大)

プラグイン検索で「TinyMCE Advanced」を探していインストール (▲クリックして拡大)

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

その下にあるボタン郡がざまざまな機能のボタンです。
テーブルタグ関連を拡張するボタン郡

テーブルタグ関連を拡張するボタン郡

赤枠のTableという領域を上のグレー部分にドラックするとボタンとして投稿画面内に追加されます。
拡張されたビジュアルエディタの投稿画面

拡張されたビジュアルエディタの投稿画面

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

 

○「TinyMCE Advanced」の使用方法


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

サンプルサイトはこちらからご覧になれます。
http://wordpress-book.webdesignmatome.com/company/


投稿画面時のテーブルのボタン郡の一番左にあるのがテーブルの挿入ボタンになります。
ボタンを押すとテーブルの列や行やその他の設定が選べます。
テーブルタグの設定画面

テーブルタグの設定画面

設定するとこのようにテーブルが見えます。
テーブルの枠組みが点線で表示されます

テーブルの枠組みが点線で表示されます

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

テーブルの設定をヘッダに変更

中にテキストをいれると表組みができあがります。
日々の更新でレポート系の表を多用するサイトなどで、自由に表の行と列をアレンジできるので、更新が簡単にできて便利です。

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


 

今回は以上になります。

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

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

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



本連載で使用しているサンプルサイトをゼロから作成できる書籍

本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。

サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 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)
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

2.11-2.17