タグ別アーカイブ: ワードプレス

WordPressで構築する製品情報システム(製品情報CMS)

drw-0

多品種多品目を扱う企業WEBサイトでは、製品や商品、サービスを紹介するための「製品(商品)情報システム」が組み込まれているケースが多い。
「製品情報システム」と聞くと、一から手作りする「スクラッチ開発」で構築する傾向にあるが、当社では、WordPressを「製品情報CMS」に仕立て、比較的短かい納期で、質の高い製品情報システムを数多く提供してきた。
ここでは、過去の導入事例から「製品情報CMS」で実現した要件や解決できた課題を紹介しよう。

WordPressベースの製品情報CMSとスクラッチ開発

drw-1

当社では、WordPressを製品情報システムのベースとすることで、スクラッチ開発では避けて通れない開発工程の一部を省いてきた。いや、「省いた」のではなく実際には「意識しなくてもよくなった」と表現する方が正しいかもしれない。

その工程とは、
・データベース(テーブル)設計/構築
・管理画面の設計/プログラミング
である。

データベースについてはWordPressの構造をそのまま利用するため、開発の段階においては、データベースの存在を意識することはなく、WordPressに標準装備されている機能を呼び出したり、足らずはプラグインをインストールし、そのプラグインが持つ機能を通じてデータベースを呼び出す形になる。
管理画面についても同様に、ログインユーザー管理はもちろん、プラグインが自動生成する入力フォームを利用し、製品情報の入力画面としている。管理画面については、ほぼノンプログラミングに近い。
これらの工程が省かれることが、工数の削減と、この工程で入り込む不具合の排除に寄与しているといえるだろう。

以降では、WordPressベースで製品情報CMSを構築した過去の事例を紹介しよう。
いずれの事例もWordPress標準のカテゴリーと「Advanced Custom Fields」プラグインを駆使して実現したものだ。

製品ごとに仕様項目が異なる製品情報システム

このクライアントは、特定の業界に対応した製品群を製造販売している企業ではあるものの、製品のカテゴリーごとに全く異なるスペック項目を有している。それらの込み入った内容をHTMLに触れることなく誰でも編集したいというのがクライアントから提示された要件であった。

スペック表のような細かなテーブルは、いろいろな方法でWEBサイトに掲載する方法がある。
例えば、
  ・スペック表の部分だけを抜き出してHTMLファイルで記述し、表示処理で組み込んで掲載する。
  ・テキスト入力欄を1つ設けて、そこにHTMLでテーブルを入力する。
  ・リッチテキストエディタの入力欄を1つ設けて、そこにExcel上で作ったテーブルを張り付ける。
  ・スペック表に則した入力項目を準備し、スペック内容だけを入力する。
などが挙げられる。
いずれの方法も、当社で過去に構築したことのある方法であるが、クライアントのWEBサイト運用スキル(HTML知識の有無など)とコストを鑑みてどの方法を採用するかを決定している。
今回のクライアントは、4つ目の「スペック表に則した入力項目を準備し、スペック内容だけを入力する」方法を採用した。

実はこの製品情報CMSに関するコラムは、既に執筆済みなので、詳しくは以下のページを参照されたい。
WordPressでCMS:仕様項目まで更新可能、運用コストを低減

詳細ページに関連情報を集約する製品情報システム

せっかく製品情報システムを作るのだから、できるだけ多くの情報を掲載したい。
たいていのクライアントが異口同音に発するフレーズだ。
我々もそれに応えるべく知恵を絞り、構築作業に勤しむが、忘れてはいけないことがある。
それは、「初期はもちろん、日々の運用でもそれだけ多くの情報を入力しなければならない」ということだ。

クライアントからも、日々の運用負担を考慮し、以下のような要件が提示された。
  ・Q&A1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・アクセサリー1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・既登録の製品を選択するだけで関連製品を登録したい。

Q&Aとアクセサリーは、ほぼ同じ画面構成で以下のようなイメージで管理画面を準備した。
これによって、同じ内容のQ&Aやアクセサリーの情報を製品ごとに登録する手間が省けてクライアントには好評を得た。

drw-2

関連製品の登録は、以下のようなイメージで管理画面を準備した。
「行を追加する」を押下すれば、ひとつの製品に複数の製品を関連付けが可能だ。

drw-3

複数の切り口から製品にたどり着ける製品情報システム

製品情報システムでありがちなのが、「製品カテゴリー(分類)」に従って製品詳細までたどらせる方法。
この「製品カテゴリー」は、製品を提供する側の都合で体系付けされていて、サイト訪問者にとってはピンとこない場合が多い。
サイト訪問者は往々にして、何かの目的を果たしたい、ある課題を解決したい、などいったニーズをもってWEBサイトにやってくるが、そのとき示される入口の情報が「製品カテゴリー」だけでは、自分のニーズがどの製品で満足されるのか頭の中で変換しながら試行錯誤し、製品を探すことになる。

そこで、このクライアントでは、「製品カテゴリー」とは別に「製品用途」と「対応業種」を追加し、3系統の製品体系を準備し、利便性の向上を図った。

以下のようなイメージで複数体系を登録する管理画面を準備した。
この例では1つの製品情報の中で、製品カテゴリーは1つ、用途と業種は複数を設定可能にしている。

drw-4

WordPressでCMSを構築する際の注意点

drw-5

以上、いろいろとWordPressで構築するCMSの利点や管理画面の作りを紹介してきたが、WordPressが万能だとは決して言っていない。例えば製品情報システムの機能としてありがちな「キーワード全文検索」や「複数条件を組み合わせた絞り込み検索」などは、当社でもスクラッチによる開発で実現し、WordPressを用いたCMSでは構築していない。なぜなら、これらの機能はWordPressでも実現できなくはないが、得意ではないからだ。その理由は、データベースのデータの持ち方に起因する。

スクラッチで開発するような製品情報システムの場合、基本は1製品で1レコードの情報を持つことになるが、WordPressの場合、データ構造に柔軟性を持たせるため、1製品で複数レコードを持つことになってしまう。例えば製品情報の項目が20項目あった場合、20レコード以上のレコードが生成されてしまうことになる。また、他にも付属の情報があった場合、それらは1つのテーブルの中に詰め込まれてしまう。
なぜ1製品の情報を複数レコードに持つことが良くないのか?
データベースを用いてシステムを開発することのある読者ならわかると思うが、製品検索の絞り込みで3つの条件を設定して絞り込む場合、少なくとも3回は、データが格納されているテーブルをフルスキャンすることになる。その上、フルスキャンするテーブルには、製品数の項目数倍のレコード数がある(実際は、さらにその2,3倍は格納されている)。否応なく、検索に時間がかかるし、サーバーにも負荷をかけてしまう。そのため、複数の訪問者が同時に検索をかけた場合、相応に待たせてしまうことにもなる。

したがって、WordPressを製品数が数千点以上になるような製品情報システムのCMSとして用いるには無理がある。せいぜい500点以下に留める方がよいだろう。

WordPressは使いよう

drw-6

人に得手不得手があるように、WordPressにも不得手がある。人と同じようにWordPressの得手をほめて伸ばしてあげるように利用すれば、WordPressはその真価を発揮してくれるのではないだろうか。

筆者が最近構想することに、「WordPressとスクラッチ開発のハイブリッドシステム」がある。
製品情報の管理機能であるバックエンドの部分はWordPressで構築し、WEBサイトから直接アクセスされるフロントエンドの部分はスクラッチ開発で検索機能を構築するのである。そして、WordPressのデータベースとスクラッチ開発のデータベースの間に「本番公開機能」を設けてWEBサイトの情報を更新するのだ。なかなかいいアイデアだと思うが、まだ実現には至っていない。

初心者が、WordPressでコーポレートサイトを作る全手順-1

初心者が、WordPressでコーポレートサイトを作る全手順

WordPressは、初心者でも十分に扱える優秀なCMSツールだ。
一般的にはブログソフトと認知されているが、カスタマイズ次第で、社長を納得させるだけのコーポレートサイトを構築できるほどの能力を持っている。

筆者がWordPressを採用する理由は、かんたんにコーポレートサイトを作れるからというだけではない。
WEBサイトは作ることを目的とすべきではなく、運用し、ビジネスに貢献させることこそ、企業が行うべきことだという信念があるからだ。

WEB制作プロダクションの筆者が言うのもおかしな話だが、多額な費用をかけ、きらびやかなWEBサイトを作っただけでは、ビジネスに貢献することなどあり得ない。
自社製品やサービスを紹介するコンテンツを作り、修正し、また加えていく。その繰り返しをねばり強く重ねていく企業だけがネットで強くなっていく。

このコーポレートサイトの運用に、最適といえるツールがWordPressなのだ。
WordPressは検索エンジンとの親和性が高い。これは世界的に証明されている。すなわち、集客を行ううえで有利だということだ。

社長から突然自社サイトを作れと命じられた。自社サイトにあまりコストをかけられない。あなたが、こんな事情を持つ担当者なら、この記事を参考にしながら、自社サイトの構築に取り組んでほしい。半年後、なるほど!と思えることが起こるはずだ。

WordPressを企業WEBサイトに仕上げるための作業ポイント

残念ながら、いくらWordPressがすごいと言っても、インストールしただけで企業WEBサイトとしての体裁は整わない。最低限の見栄えと構成を備えるべきだ。

この記事では、プログラミングはもちろん、HTMLやCSSを編集することなく、WordPressの管理画面だけを操作して企業WEBサイトへ仕上げていく手順を紹介することがテーマだ。

  • WEBサイトの構成を考える
  • コーポレートサイトに適したテーマを選ぶ
  • コーポレートサイトには不要なWordPressの機能や表示を削除する
  • WordPressでグローバルナビゲーション(サイトメニュー)を作る
  • WordPressでTOPページ(HOME)を作る
  • WordPressで会社案内ページを作る
  • WordPressで事業内容ページを作る
  • WordPressでお問い合わせページを作る
  • WordPressで最新のお知らせページを作る
  • ヘッダー画像を差し替える

WEBサイトの構成を考える

WordPressに手を加える前にやるべきは、サイトの構成を考えること。「周到な準備があれば、レースはスタートする前に決まっている」多くのスポーツ選手が口にする言葉だ。
企業WEBサイトのミニマム構成は、おおよそ以下のようなサイトマップになる。

コーポレートサイトのミニマム・サイトマップ

WordPressには、「固定ページ」という文字通り更新を行わない定型ページと、随時更新を行っていく「投稿ページ」という概念がある。上記のサイトマップを2つの概念を使って構築していく。

青枠で囲われている

  • TOPページ(HOME)
  • 会社案内
  • 事業内容
  • お問い合せ

については、WordPressの「固定ページ」を用いて制作。

赤枠で囲われている

  • お知らせ
  • お知らせ詳細

については、更新を重ねていくコンテンツなので、WordPressの「投稿ページ」を用いて制作する。

コーポレートサイトに適した「テーマ(フォーマット)」を選ぶ

WordPressの初期状態

WordPress4.1.1(2015年4月6日現在)のインストールが完了した直後は、次のようなページが表示される。
なんだこりゃ?と感じるほど、何の趣向もないページだ。

WordPressのインストールは、先に優秀なコンテンツが存在するので、そちらを参考にされたい。
「WordPress インストール」と検索するだけで、詳細な記事がいくつも見つかるのは、最も普及しているCMSツールである証拠でもある。あなたがWordPressに関して、分からないことが出てきても、いくらでも助けてくれる人たちがいるのは何とも心強い。これも筆者がWordPressをおすすめする理由のひとつだ。

「WordPress インストール」でGoogle検索してみる

WordPressの初期状態画面

WordPressの「テーマ」を選択しよう

本格的な作業に着手する前に、WordPressのテーマを選び直す。テーマとは、デザインフォーマットのことだ。
先ほど画面キャプチャで示したテーマは、WordPressのバージョン4.1.1の初期設定で選択されているテーマだが、ページの左側に機能が集中しており企業WEBサイトとしては、なじみのないものだ。思い切って、「コーポレートサイト」っぽくなりそうな、他のテーマに切り替えよう。

管理画面にログインし、[外観]-[テーマ]を選択すると、標準でインストールされているテーマが表示される。
今回は、この中から「Twenty Thirteen」を使用する。
自分好みのテーマをネットで探し、インストールすることも可能だが、ひとまず「Twenty Thirteen」を選択してみよう。

テーマを切り替えるのは、デザインキャプチャの下に表示されている「有効化」ボタンを押すだけだ。

WordPressのテーマ一覧画面

「Twenty Thirteen」を有効にした後、サイトのTOPページ(HOME)を表示した状態。

テーマ変更後のTOPページ(HOME)

初心者が、WordPressでコーポレートサイトを作る全手順-1、後半は

次ページは「WordPressから、コーポレートサイトには不要な機能や表示を削除する」

初心者が、WordPressでコーポレートサイトを作る全手順-2

初心者が、WordPressで企業サイトを作る全手順-2

初回の「初心者が、WordPressで企業サイトを作る全手順-1」では、企業サイトの体裁をおおよそ完成させた。

第2回目となる今回は、各セクションの体裁をどうするか、どうやって更新していくかについて紐解いていこうと思う。

数あるCMSツールのなかでも、WordPressは実は初心者にとっても扱いやすいもので、なおかつ極めようと思えば、その意思に応えてくれる奥深さも備えている。

「初心者が」のキモは、あらかじめテンプレートが準備されているCMSツールを活用することによって、HTMLやCSSといった、いわゆるWEB制作の知識がなくても、WEBサイトとしてある程度の体裁を整えられることだ。

少し馴れてきたら、WordPressを使って、試行錯誤しながらでもWEBサイトにあなたのオリジナリティを組み入れていくことにもチャレンジしてほしい。

最新のお知らせを掲載する

お知らせの最新5件をページの右側(サイドバー)に表示する。
管理画面の[外観]-[ウィジェット]の「副ウィジェットエリア」に「最近の投稿」を設定すればよい。
「最近の投稿」をクリックし、「副ウィジェットエリア」をチェック、「ウィジェットを追加」をクリックする。

最新のお知らせ1 ウィジェット追加

続いて「副ウィジェットエリア」に追加された「最近の投稿」のサイト上の表示文字を変更する。
「副ウィジェットエリア」の「タイトル」欄に、表示したい文字を入力すれば変更できる。ここでは「最新のお知らせ」とした。
最新の表示件数を増やしたいのであれば、「表示する投稿数」を希望する件数に変更しておこう。

最新のお知らせ2 ウィジェット編集

ここまでの作業で、ページの右サイドバーに「最新のお知らせ」欄が追加された。

最新のお知らせ3 TOPページ

サイトのTOPページ(HOME)を作る

ここから固定ページの内容の入力を進めていく。
まずは、サイトTOP(HOME)だ。

現状は、サイトTOPには、投稿ページで入力されている最新の記事が表示される設定になっている。
ページの内容を入力する前に、サイトTOPに固定ページで作った「サイトTOP(HOME)」が表示されるように変更する。
操作は、管理画面の[設定]-[表示設定]の「フロントページの表示」を変更すればよい。
「固定ページ」をチェックし、「フロントページ」から「TOPページ」を選び保存する。

TOPページ TOPを固定ページに設定

ここまでの作業でサイトのTOP(HOME)には固定ページで作成した「TOPページ」が表示されるようになった。ここで、1点気になることが・・・。それは「TOPページ」と固定ページのタイトルが表示されていることだ。
会社案内や事業内容であればこれでいいが、サイトのTOPに「TOPページ」とは、なんともセンスがない。

TOPページ タイトル不恰好

これを解消するには、テーマを改造する方法もあるが、ここでは固定ページのタイトルをHTMLのコメント化(コメントアウト)し、表示させなくすることで回避しておく。
操作は、管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。
そして、タイトルをHTMLのコメント記述ルールに従って修正する。HTMLのコメントは、表示したくない文字列を「<!ーー」と「ーー>」で囲めばよい。
今タイトルに入力されている「TOPページ」を「<!ーーTOPページーー>※」と修正し、更新する。

※本来は半角で記述すべき。

TOPページ タイトルコメント化

サイトのTOPページを確認すると、固定ページのタイトルは表示されなくなった。

HOME

次にTOPページの内容を入力していこう。
まずTOPページに何を掲載するかを考える。
無難なところで、

  • 事業内容をイメージできるビジュアル画像
  • 企業メッセージ

で構成する。

まず、ビジュアル画像を準備する。WordPressの管理画面の中で画像のリサイズや切り出しなどの編集も可能だが、今回は幅600px高さ200pxの画像を事前に準備した。
操作としては、先ほどと同様に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。そして、仮の入力内容を消去後、「メディアを追加」から準備したビジュアル画像を選択する。

TOPページの内容を入力

「メディアを追加」をクリックすると「メディアを追加」画面がポップアップするので、「ファイルを選択」から表示されるダイアログで準備しておいたビジュアル画像ファイルを選択する。

TOPページ

選択したビジュアル画像を開くと、画像をアップロードの後、以下のような画面になる。
「添付ファイルの表示設定」の中の「サイズ」をフルサイズにして「固定ページに挿入」をクリックすれば、固定ページの入力画面に組み込まれる。

TOPページ メディアを追加

以下が固定ページの入力画面に組み込まれた状態だ。

TOPページ ファイル選択

次にビジュアル画像の下に企業メッセージを掲載する。
ビジュアル画像の下あたりをクリックし、Enterキーを押すとカーソルが表示されるので、メッセージを入力して、更新する。

TOPページ ファイル挿入

TOPページを見てみよう。

TOPページ 挿入後

会社案内ページを作る

次に会社案内のページを制作する。
会社案内に関しては、次の手順で制作する。

  • MS-Excelで内容を入力
  • MS-Excelのセルをコピー、WordPressの固定ページ入力画面にペースト

この方法を用いると、HTMLを知らなくても表組みで内容の掲載が可能になる。

まず、MS-Excel上で会社案内の内容を入力する。おおよそ以下のような内容だろう。

会社案内ページ Excel

次に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「会社案内」を編集で開く。
そして、先ほどのMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「会社案内」の編集画面でペーストすれば完了だ。

会社案内ページ ペースト

会社案内ページを見てみよう。
表組みされているので項目名と内容がきれいに面一で揃っている。
画像では見難いが罫線も入っている。

会社案内ページ

初心者が、WordPressでコーポレートサイトを作る全手順-2、後半は

「事業内容ページを作る」へ

初心者が、WordPressでコーポレートサイトを作る全手順-3

初心者が、WordPressで企業サイトを作る全手順-3

初心者でも、WordPressなら企業サイトを構築できる。前回の記事では、この命題を実現できることを証明した。

全3回でお届けする、「初心者でも企業サイトを」の最終回の今回は、もう少しWEBサイトの内容をそれっぽいものにできるような工夫を凝らしていく。

Googleがスマホサイトに対応していないWEBサイトの検索順位を下げると宣言し、戦々恐々としている担当者も多いかもしれない。しかし、もう少しだけ努力すれば、レスポンシブデザインさえカバーすることができる。もうスマホ化の心配など無用になるのだ。

前回の記事では、企業サイトのおおよその体裁を整えることに注力した。各セクションのページを作ってきたわけだが、企業サイトのツールとして必要なのは、情報の更新「お知らせページ」を設けることだ。WordPressをCMSとして使う大きな理由でもある。

WordPressで最新のお知らせページを作る

お知らせの掲載はWordPressの機能「投稿ページ」で制作する。
初期状態では「Hello World!」が1件登録されているので、「Hello World!」を削除してから新たに「コーポレートサイトをリニューアルしました。」記事を登録しておこう。

管理画面の[投稿]で投稿ページの一覧が表示されるので、タイトルが「Hello World!」のページを「ゴミ箱」へ送る。

Hello World削除

続いて「新規追加」で「コーポレートサイトをリニューアルしました」ページを作成する。
要領は、固定ページの作成と同じなので、前回の記事を参考にしてほしい。

記事入力

作成した「コーポレートサイトをリニューアルしました」ページをチェックしてみよう。
少しタイトルが大きいので、スタイルシート(CSS)に修正を加える必要がある。ただし、細かな調整はもう少し後にして、今はこのままにしておこう。

「コーポレートサイトをリニューアルしました」ページ

お知らせの一覧を見てみよう。
「未分類」と表示されるのが気になる。
「未分類」を「お知らせ」に変更しよう。

未分類気になる

管理画面の[投稿]-「カテゴリー」で現在登録されている投稿ページのカテゴリーの一覧が、ページの右側に表示される。
初期状態では、「未分類」1つが登録されている状態だ。
「編集」をクリックし、名前を「お知らせ」、スラッグを「news」に修正しておこう。

カテゴリー
カテゴリー編集

お知らせの一覧をチェックすると、「未分類」が「お知らせ」変更されている。

お知らせになった

ヘッダー画像を差し替える

企業サイト作りも、ようやく終盤にさしかかっている。こんどは、ヘッダーの背景画像とタグライン(メッセージ)を変更しよう。

管理画面の[外観]-「ヘッダー」でヘッダーのデザインなどが編集できるようになる。そのなかの「ヘッダー画像」でヘッダーの背景画像を変更する。「新規画像を追加」から任意の画像を選んで設定する。

ヘッダー画像差し替え

「ファイルをアップロード」で新たな画像ファイルをアップロードして使用する。
「ファイルを選択」から表示されるダイアログで

アップロード

ファイルのアップロードが正常に終わると「選択して切り抜く」から、ヘッダーのサイズに合った部分を指定し「画像切り抜き」で切り抜く。

切り抜き

「保存して公開」でヘッダー画像の変更は完了だ。

保存

トップページをチェックすると、ヘッダー背景が変更されている。

TOPページ

次にタグライン(メッセージ)を変更し、文字色も同時に調整しておこう。

管理画面の[外観]-「ヘッダー」でヘッダーのデザインなどが編集できるようにする。そのなかの「サイトタイトルとキャッチフレーズ」でタグライン(メッセージ)を修正する。

メッセージ変更

同様に、「色」でテキストの表示色を変更する。
「保存して公開」をクリックすれば完了だ。

文字色変更

完成したサイトを見てみよう

ここまでの作業で制作したページを見てみよう。

TOPページ

会社案内

事業内容

お問い合せ

お知らせ

スマホサイトを見てみよう

ちなみに、今回のサイト構築で利用したWordPressのテーマ(フォーマット)は、レスポンシブにも対応しており、実は、裏側ではすでにスマホサイトができあがっている。
以下にスマホページのキャプチャをいくつか紹介する。

スマホサイト・トップページ

スマホサイト・会社案内

スマホサイトのグローバルナビ

WordPressがあれば、初心者でも十分に企業サイトを構築できる

ここまでの作業でようやく企業WEBサイトを完成させることができた。ミニマムな構成であれば初心者でも企業WEBサイトが作れることが理解していただけたと思う。

もちろん、この仕上がりが最善だとは筆者は考えてはいない。しかし、企業サイトにとってほんとうに大切なことは、訪問者に対して有益な情報を提供し、それによって実現する「集客」であるはずだ。

たったこれだけのサイトであっても、訪問者が「助かった」と感じてくれるほどの有益な情報が掲載されているサイトであれば、検索エンジンも高い順位を差し出してくれる。

これを実現するためには、WordPressで構築したWEBサイトの強みを活かし、更新を怠らず、あなたの顧客候補が何を求めているかを模索し続けよう。検索エンジンのクローラーがあなたの新しいWEBサイトを巡回してくれる日は近い。

WordPressで改行や段落を挿入するには

WordPressで改行や段落を挿入するには

当社が制作するWEBサイトには、ニュースやトピックスのコンテンツ管理にWordPressを導入するケースが多い。本公開後、クライアントがニュースを掲載しようとするときによくある質問が「改行すると、行間が広くあいてしまうんだけど・・・」というもの。
WordPress初心者が感じる疑問のひとつだ。ふだん、業務で使い慣れているMS-Wordとは挙動が違うので戸惑ってしまうわけだ。

慣れてしまえばどうってことはないが、質問を受けることが多いので、今回は、WordPressの投稿画面で改行や段落を挿入するときのコツを紹介しておこう。

「CMSで改行すると、行間が広くあいてしまうんだけど・・・」

この質問の「改行」、おそらくこのクライアントは文章の途中で次の行にカーソルを移したくて「Enter」キーを打ち込んでいると思われるが、この操作は「改行」ではなく「改段落」の操作をしてしまっていることをご存じだろうか?
では、改行はどうするのか?
「Shift+Enter」キーを打ち込むことで「改行」させることができる。実は、この考え方はMS-Wordでも同じなのだ。MS-Wordの例を下に示しておく。

WordPressでの改行位置

ここでは話が混乱するので、もっと詳しく知りたい方は以下のページなどを参考にしてほしい。

「改行=Enter」じゃないって知ってた? 皆が知らないWordとPowerPointの罠!

WordPressでは、改行にならない「Enter」キーの正体

WordPressの投稿画面では、「Enter」キーを打ち込むとその前のテキストの塊をひとつの段落としてまとめ「pタグ」で括るようにHTMLが自動展開されている。下の画像では、赤ラインの部分にカーソルを位置させ「Enter」キーを打ち込んだ場合の見え方と自動展開されるHTMLを示している。

WordPressでは、改行にならない「Enter」キーの正体

「Enter」キーを打ち込むと、カーソル位置で「改段落」され、次の段落との間に規定された余白が作られる。

改行

改行

HTMLは、以下のように生成されている。

改行したあと

WordPressで改行したければ「Shift+Enter」キーを打ち込むべし

先に触れたように文章中で次の行に「改行」したければ、「Shift」キーを押しながら「Enter」キーを打てば、不意な余白が発生することなく改行することができる。下の画像では、その状態を示す。

WordPressでは、改行にならない「Enter」キーの正体

改行させたいところにカーソルを位置させ、「Shift」キーを押しながら「Enter」キーを打つ。

余白はない

HTMLは、pタグではなく改行を指示する「brタグ」が追加されている。

「brタグ」が追加されている

以上が、「Enter」キーだけを打ち込んだ場合と「Shift+Enter」キーを打ち込んだ場合のWordPressの挙動の違いだ。「挙動を逆にすればいいのに」と思ったりもするが、こればっかりは慣れてもらうしかない。

段落と段落の間を調整したい

見た目に凝りだすと段落と段落の間を「もう少し広く」などと調整したくなると思うが、残念ながらWordPressの管理画面上にはその部分を簡単に修正できる機能を備えていない。この場合は、先ほど説明した「Enter」キーを打ち込んで自動展開される「pタグ」に対してスタイルシート(css)の「マージン(margin)」を調整する必要があるが、これは、制作会社に依頼するかスタイルシートに詳しい方に作業してもらう方がいいだろう。

読みやすいページは余白がきれい

読みやすいWEBサイトは、文章自体の読みやすさはもちろんだが、ページ全体の余白の使い方が上手い。筆者は、技術情報を求めて日に何十回と検索をかけ、何十とページを読むが、そのさい行間が詰まっていて段落が取られていないページだと読む気がせず、次の検索結果から違うページに進むことがよくある。

上記のことは、訪問者が読むニュースやトピックスについても同じことがいえる。このコラムの読者には、改行と段落を上手く使いこなしてもらい、読みやすいページ作りを心がけてほしい。

WordPressのフックを利用し、記事保存時に処理を追加

WordPressのフックを利用し、記事保存時に処理を追加

WordPressでCMSを構築する際、投稿(記事)の保存のタイミングで何らかの処理を実行させたいときがある。
そういったときのためにWordPressには「フック」とよばれる機能が備わっている。
「フック」とは、日常用語からも想像できるように「引っ掛ける」という意味で、WordPressの処理のタイミングにオリジナルの処理を引っ掛けておき、同時に実行してもらう仕組みのことをいう。

WordPressが備えているフックは、投稿(記事)の保存のタイミングだけでなく、管理画面にログインした際、ログアウトした際など、多くのタイミングで「フック」が準備されている。

プラグイン API/アクションフック一覧

今回は、そのなかでも「投稿(記事)の保存のタイミング」にオリジナルの処理を「フックする」ことにフォーカスする。

1. 当社の事例

当社の事例

いきなり技術的な説明に入っても、WordPressのカスタマイズ作業に携わる人以外はピンとこないはずなので、過去に当社が実装した事例を先に紹介しておこう。

1-1. 投稿保存と同時にアップロードしたExcelの内容をインポートする

せっかくCMSを導入しても、情報入力に手間がかかるようであれば、日々の運用の効率化には寄与しない。とくに一覧表で表現されるような情報をブラウザ上で入力するのは、骨の折れる作業の代表である。
そこで当社がよく採用する手法が、Excelの定形フォーマットに事前に情報を記載してもらい、その情報を投稿(記事)の保存のタイミングでインポートする方法である。

以下は、この手法で情報を登録した例だ。

  • メーカーコーポレートサイトの製品スペックの登録
  • 不動産物件検索サイトの物件詳細の登録

ここでは、「製品スペックの登録」についてもう少し詳しく紹介しておこう。

1-2. 製品スペックの登録

当社のクライアントにはメーカー企業が多い。そのため、WEBサイト制作において必然的に製品検索機能を実装することになる。常に課題となるのは、一つ一つの製品スペックをどのようにCMSで登録させるか。扱う製品によっては、スペック項目が20~30項目にもおよび、そのうえ、製品のカテゴリーごとにスペック項目が異なるのが常である。
もちろん管理画面には、それらを加味してカスタムフィールドを駆使したカスタマイズを施すが、これだけの項目数を全製品について管理画面上から入力するには相当な労力が予想されるため、以下のように実装している。

  • スペックの項目と内容をExcel上に記載してもらう
  • CMSの管理画面上でそのExcelをアップしてもらう
  • 製品情報を保存するタイミングでその内容をカスタムフィールドにインポートする
  • サイトの表示には、カスタムフィールドにインポートされた情報をもとにレンダリングする

この機能の実装によって、とくに初期データ入力が格段に楽になった。もちろん、インポートされたスペックの内容は、管理画面上で再編集することも可能だ。

インポートするスペックExcelシートのイメージ

(インポートするスペックExcelシートのイメージ)

WEBサイト上に表示された状態

(WEBサイト上に表示された状態) ※値が未入力の項目は非表示としている。

2. 実装方法

実装方法

「投稿(記事)の保存のタイミング」には、もう少し細かなタイミングでいくつかのフックが準備されている。例えば、更新時に呼び出されるフック(pre_post_update、edit_post、post_updated)や、新規保存時に呼び出されるフック(wp_insert_post)、全ての保存時に必ず呼び出されるフック(save_post)などが存在する。

いずれのフックも実装する要領は同じである。フックはテーマフォルダーのなかにある「functions.php」に記載すればいい。以下に、何かしら記事が保存されれば、ある特定のメールアドレスにメールを送信する例を紹介しておく。

add_action( 'save_post', 'savepost_mailsend' );
function savepost_mailsend($post_ID){

    mail('dummy@dummydomain', '記事が更新されました', 'WordPressで記事の内容が更新されました。');

}

「add_action」関数が、WordPressの処理にアクションを追加(フック)する関数である。第一引数にある「save_post」が独自の処理を実行するタイミングで、さらに第二引数にある「savepost_mailsend」が独自処理が記載されている関数名。第一引数は、WordPressで決められているフックの名前(文字列)を記述し、第二引数の関数名は自由に決定すればよい。
上記の例を簡単に説明すると「記事が保存される save_post のタイミングに独自処理 savepost_mailsend をフックするので呼び出してね」とWordPressにお願いしているということだ。

「function」以降に続く記述が独自処理の内容になる。ここでは、単純にメールを発信しているだけだが、要件によってはもっと複雑な処理を記述することになる。引数には「$post_ID」が渡されるので、更新のあった記事の内容を呼び出してその内容に沿った処理を記述することも可能だ。

3. WordPressは、フックの活用で機能拡張も自由自在

WordPressは、フックの活用で機能拡張も自由自在

WordPressには、WEBサイトの開発者が欲しい関数やフック、フィルターとよばれる機能がふんだんに準備されていて、機能拡張が比較的しやすい。もちろん、WEBサイトの開発者の希望をもれなくカバーしてくれているわけではないが、バージョンアップを重ねるたびにその充実が図られている。

WEBサイトのすべてのシステム要件がWordPress上で実現可能とはいわない。当社でもスクラッチでデータベースの設計から手がけるシステムも存在する。しかし筆者は、WordPressに準備されている関数やフック、フィルターを利用することで十分にWEBサイトのCMSとしてクライアントの要望に応えられる可能性が高いと感じている。
読者のなかには、クライアントの要求仕様を見ただけで、WordPressの採用をあきらめた経験を持つ方もいると思うが、今いちどその要件をWordPressのフックと照らし合わせて考え直してみてはどうだろう。いいアイデアが浮かぶ可能性があるはずだ。

WordPressのログインURLを変え、セキュリティアップ

WordPressのログインURLを変え、セキュリティアップ

WordPressは、世界的に人気がありCMSとしても多く活用されている。それが故に攻撃の対象になりやい。攻撃者たちは、インターネットに公開されているサイトに無作為に攻撃を仕掛け、WordPressの穴をついて無理やりにでも入り込もうとアタックを仕掛けてくる。特に存在が明らかになったログイン画面へのアタックは、執拗に繰り返される。

以前に当コラムにおいて、ログインアタック対策に有効なプラグインとして「Limit Login Attempts」を紹介した。このプラグインは、ログイン認証に規定回数以上失敗した場合にログイン処理をロックするというものであった。

今回は、アタックの対象となるログイン画面の存在を隠してしまう「Login rebuilder」について紹介しよう。

ログイン画面のURLは、バレるものと考える

ログイン画面のURLは、バレるものと考える

WordPressのログイン画面は、ただ単にインストールした状態であれば「インストール先/wp-login.php」もしくは「インストール先/wp-admin」をURLに指定すれば簡単に表示させることが可能だ。WordPressで記事を入力したことのある読者であれば容易に想像がつくだろう。

「当社のサイトは大丈夫。インストール先を複雑な文字にしているから」

なんて思っているのであれば、それはまったく無意味なこと。ブラウザの機能でソースを表示すれば、インストール先はちゃんと書かれている。HTMLが読める程度の知識があれば難なく知ることができるのだ。

そのうえ、攻撃者たちは、そんなことは百も承知だ。
あなたのWEBサイトのすべてのページを解析して、機械的に、瞬時に調べ上げる。ログイン画面が攻撃者の目の前に表示されるのは、おそらく1時間とかからないだろう。
攻撃者の前に明らかになったログイン画面は、攻撃対象リストに組み入れられ、連日連夜、執拗なログインアタックを受けることになる。

プラグイン「Login rebuilder」でログイン画面を隠す

プラグイン「Login rebuilder」でログイン画面を隠す

Login rebuilderは、ログイン画面のファイル名(URL)を標準の「wp-login.php」から任意のファイル名に変更することができるプラグイン。「そもそもログイン画面のURLを知られなければ、ログインアタックの対象にもならないでしょ」というロジックだ。

Login rebuilderでログイン画面のファイル名を十分に長い推測不可能なファイル名に変更すれば、ログインアタックに対するセキュリティは、数段強化されることになる。

Login rebuilder のインストールと設定

1.入手とインストール

(図)有効化

Login rebuilderはWordPress.org(リンク先:https://wordpress.org/plugins/login-rebuilder/) からダウンロードすることができる。
インストールは、ダウンロードした圧縮ファイルを解凍後、[/wp-content/plugins」へアップロードし、管理画面の「プラグイン」から「有効化」すれば完了だ。
ただし、実際に機能させるためには、いくつかの設定と作業を施す必要がある。

2.Login rebuilderの設定

(図)ログインページ

Login rebuilderの設定は管理画面の「設定」-「ログインページ」から行う。

以下がLogin rebuilderの設定内容だ。

(図)設定の全容

3.新しいログイン画面用ファイルの設置

Login rebuilderを機能させるには、「新しいログインファイル」を準備する必要がある。新しいログインファイルは、ログイン画面のURLの一部となる。

新しいログインファイルを設置する方法は以下の通りだ。

まず、新しいログインファイルのためのファイル名を決め、管理画面の中の「新しいログインファイル」をそれに合わせて変更する。この時、「新しいログインファイル」は、推測が困難なできるだけ長いファイル名とすること。この例では、「new-login_b3ljohwpk8mxsra3.php」として新しいログインファイルを作成した。

そして次に、「新しいログインファイル」の記述に従って、実際のファイルを準備する。
変更した「新しいログインファイル」欄の直下に格納するパス示されるので、最終的に新しいログインファイルは、このパスに保存する。このとき、元々のログインファイルである「wp-login.php」を削除する必要はない。処理的には一旦新しいログインファイルを通過させてから、「wp-login.php」の処理を実行させる形を取るからだ。

新しいログインファイルには、さらにその下に示されるソースコードをコピーして貼り付け、先ほど決定した「新しいログインファイル」のファイル名で保存し、サーバーの指定パスにアップロードするだけである。

(図)新しいログインファイル

4.標準のログインファイルにアクセスがあったときの挙動

新しいログインファイルを設置しても、標準のログインファイル「wp-login.php」へのアクセスが止むことはないが、そこにはもうログイン画面は表示されない。Login rebuilderの設定には、標準のログインファイル「wp-login.php」にアクセスがあったときの挙動(応答)を指定できる。

正規の編集者や管理者であれば、新しいログイン画面のURLを知っているはずなので、標準のログインファイル「wp-login.php」へアクセスがあった場合は、「403ステータス」すなわち「アクセスが禁止されています」として応答すればいいだろう。「無効なリクエスト時の応答」には「403ステータス」を指定すればOKだ。

「サイトトップへリダイレクト」は、サイトの負荷を上げることにもなるのでお勧めしない。

(図)標準のログインファイルへのアクセス設定

5.稼働開始:驚くべきセキュリティ効果を体験せよ

基本的な設定は以上である。
「ステータス」を「稼働中」に設定し、「変更を保存」をクリックすれば導入完了だ。
たったこれだけの手間で、あなたが長い間不安に感じていたログインアタックから解放される。今日からあなたはログインアタックについての心配の種はなくなるし、上長にも胸を張ってセキュリティ対策の効果をアピールできるようになる。

ただし、ログインURLが変更になったことを運用担当者に忘れずに連絡しておこう。さもないと、せっかくのあなたの努力が社内からのクレームの嵐で水泡に帰してしまう。

(図)本稼働設定

セキュリティの確保は運用者の責任

セキュリティの確保は運用者の責任

不可解な目的を持ってアタックを仕掛けてくる攻撃者は、非難されてしかるべきだし、もっての外であるが、そのことを声を大にして叫んだところで攻撃者の耳に届くことはない。WEBサイトの運用者や担当者は、可能な限り対処できる対策を粛々と打つしか方法はないのである。

今回紹介したプラグインは、新しいログインファイルを準備するなど、少し作業が必要だが、ぜひ導入にトライしてもらいたい。ログイン画面が露呈しているのと、いないのとではあなたのWEBサイトのセキュリティに雲泥の差がでてくる。Login rebuilderを活用し、今日からログインアタックを気にしない余裕のWEBサイト運営者になろうではないか。

WordPessをスムーズに移行するための安全策

WordPessをスムーズに移行するための安全策

WordPressをCMSとして活用した環境を移行する際に、注意すべきポイントがいくつかある。カスタマイズを加えたWordPressのモジュールやデータベースの扱いだ。
たとえば、リニューアル時の開発用サーバーから本番サーバーへ、新しいサーバーの乗り換えでも慎重に移行を進めなければならない。

コーポレートサイト構築の際に、トピックス(お知らせ、新着情報)や製品検索などのCMSとしてWordPressを活用するケースは多い。
この記事では、WordPressをサーバー移行する際の、データベースの扱いについて、注意点について紹介しておく。スムーズかつ安全に異なる環境にWordPress一式を移行するための参考にしてほしい。

ドメインをデータベースに抱え込んでしまうWordPress

ドメインをデータベースに抱え込んでしまうWordPress

WordPressは、非常によく考えられて、よく作り込まれたソフトウェアであるが、約7年前にWordPressを扱い始めてから今日までずっと不満でならないことが1つだけある。

それは「データベースにドメインを抱え込む」ことだ。

WordPressは、記事のテキスト情報と一緒に記事中に掲載した画像へのリンクをドメインを含めて記録してしまっているのだ。たとえば「http://www.samplesite.ac/img/photo.jpg」の様に、絶対パスで記憶してしまっている。
ひと工夫すれば、絶対パスで記録しなくてもいいようにできそうなものだが、いまだに絶対パスのままだ。
この状態のまま、本番サーバーにデータベースを移行してしまうと、画像ファイルなどは、開発サーバーを参照してしまうことになる。

「WordPress お引越し」や「WordPress サーバー移行」などでネットを検索すると、プラグインを用いたり、データベースにSQLでパッチをあてたりと、いくつかの方法を見つけられるが、当社ではデータベースのエクスポートファイルを直接書き換えることで対応している。
テキストエディタの一括置換で済むこの方法が最も時間がかからず、お手軽だ。

以下に、簡単な手順を紹介しておこう。

テキストエディタの一括置換

テキストエディタの一括置換

  1. mysqldumpコマンドか、phpMyAdminからWordPressで使用しているデータベースをエクスポートする。
    通常、なにも指定しなければSQLで構成されたダンプファイルとして作成される、
  2. 次の吐き出されたダンプファイルをテキストエディタで一括置換する。
    旧サイトが「「http://www.samplesite.ac/」で表示されていた場合、「www.samplesite.ac」の部分を「www.newsite.ac」に文字列置換すればよい。
  3. あとは、再びmysqlコマンドか、phpMyAdminで本番サーバーのデータベースへインポートすれば完了だ。

HTMLの記事、固定ページをインポート

HTMLの記事、固定ページをインポート

当社の制作するWEBサイトは、サイト全体をWordPressで完結させることは稀で、更新頻度の少ないページは、静的HTMLで制作している。しかし、更新頻度が少ないページのなかでも定期的に更新が必要なページは、WordPressの「固定ページ」に入力して、その内容をクライアント自身で編集可能な形にしている。

固定ページとして入力する際、ページデザインに図表が組み込まれていることが多いため、HTMLの形式で入力しているが、このHTML入力はサーバー移行の際に手を焼かせてくれる。

前項で紹介したとおり、移行に際してデータベースをphpMyAdminでエクスポートすると、通常はSQL文の塊としてダンプファイルが生成される。このダンプファイルを本番サーバーでインポートする際、記事や固定ページにHTMLが記述されているとエラーを起こすことがある。

ただ、すべてのケースでエラーが起きるわけではない。エクスポートする際のダブルクォーテーションやシングルクォーテーションの処理に不具合があるか、インポートする際の解釈に問題があるかでエラーを起こすことがあるのだ・・・。

これが本番公開を間近に控えた本番サーバーへの移行作業の際に判明すると「データベースが移行できない!!」と焦ってしまうことになるのだ。しかしこの記事を読んでいるあなたは、もう心配することはない。エクスポートする際に、ひと工夫するだけで回避できるので安心してほしい。

そのひと工夫とは、phpMyAdminでデータベースをエクスポートする際に「XML」形式でエクスポートするだけだ。インポートの際は、phpMyAdminが自動的に認識してくれるので何も気にする必要はない。

エクスポート指定

WordPressの移行用プラグインも

WordPressの移行用プラグインも

WordPressの開発者がどこまで考慮しているかは不明だが、一度構築したWordPressの環境一式を移行する部分については、いまひとつ配慮に欠ける部分があるのは事実だ。

しかし心配することはない。今回紹介した方法は、まだサーバー移行のプラグインが充実していない頃からWordPressを扱っていた筆者が実行してきた方法のひとつであるし、今では、サーバー移行用のプラグインをいくつか見つけることができる。そのなかでも「Duplicator」が使い勝手が良さそう思われるので、機会があれば実務で使用し、次回はレポートとして紹介しようと考えている。

WordPressでPDFを取り込む方法と、気をつけるポイント

WordPressでPDFを取り込む方法と、気をつけるポイント

CMS導入がコーポレートサイト構築時の機能要件として必須となったいま、対象となることが多いのがニュース、トピックス、新着情報などと呼ばれるセクションだ。
このセクションの機能として、多いリクエストはPDFの掲示だろう。もっとも、情報の根幹となるテキストの整形、写真の挿入機能などを省いてのことではあるが。

この記事では、CMSとしてWordPressを採用しているコーポレートサイトにおいて、特別なプラグインをインストールすることなくPDFを掲示する方法をお伝えする。

予算の関係でそこまでの作り込みが依頼できなかった、もしくはWEB制作会社の配慮がなかったために、PDFを掲示するための機能が盛り込まれていないCMSをご利用のWEB担当者の参考になれば幸いだ。

あなたがWordPress初心者であっても問題ない。
カスタマイズされていない管理画面で、なおかつWordPress標準のエディターを利用するだけ、という条件でPDFを掲示できるようになるポイントを紹介しているからだ。

PDFの掲示で、おさえておきたいこと

PDFの掲示で、おさえておきたいこと

WordPressの操作方法の説明に入る前に、PDF改ざんの可能性について確認しておこう。

コーポレートサイトで注意すべきことのひとつに、ファイル改ざんのリスクがある。
PDFファイルは、リードオンリー(書き込み不可)の電子ドキュメントとの認識している方がいるが、PDFは簡単に書き換え可能な電子ドキュメントなのだ。
Adobe社のAcrobatやサードパーティのソフトが手元にあれば、内容の書き換え、編集など簡単にできてしまう。それなのに、重要な決算情報やニュースリリースに書き込み不可とするセキュリティをかけていないPDFドキュメントが多いのが現実なのだ。

オウンドメディアとしてWEBサイトで情報をダイレクトに発信するにあたっては、インターネットの怖さ、悪意の第三者から身を守る最低限のリテラシーを持ち合わせておくべきだ。

書き込み不可にするセキュリティ設定は、前述のAdobe社「Acrobat」を利用しよう。
まず、「ファイル」>「プロパティ」>「セキュリティ」タブから表示される画面を表示させ、図で示す設定を行う。たったこれだけの手間をかけるだけで、あなたの会社のセキュリティレベルは格段にアップする。

大量のPDFファイルに対してセキュリティ設定を施す場合は、「アドバンスト」>「文書処理」>「バッチ処理」からバッチ処理で一括処理することも可能だ。

Acrobatのセキュリティ設定

WordPressでPDFを取り込む方法と、気をつけるポイント、後半は

次ページ「PDFファイルへのリンク方法」へ