BLOG

ブログ

BRANDING / TRENDKILL

クライアントに優しいWordPressサイトを作るためのTIPS

前田 大地

前田 大地

wordpress

セブンシックスでは、主に中小企業向けのコーポレートサイト制作を手掛けています。と、いうことは、つまり小規模のWordPressサイトを、専門知識を持たないクライアント担当者でも日々更新しやすいように、ちょっとした工夫を散りばめて作っているということです。今回は、そんなセブンシックスのWordPress構築TIPSをいくつか紹介します。

目次

クライアント側で更新するコンテンツを明確にする

まずはサイトを作る前に、クライアント側で更新作業をするコンテンツを明確にします。同じ更新していくコンテンツでも、誰が更新するかによって、デザインやテーマファイルなどの作り方が変わってきます。

  • クライアント側で更新するコンテンツ
  • 制作者側で更新するコンテンツ
  • 更新しないコンテンツ

例えば、「ブログ」は、クライアントで更新していく代表的なコンテンツです。また、「制作実績」や「お客様の声」などのコンテンツがあるなら、クライアント側で随時更新できたほうが便利かもしれませんね。ただし、プロが写真撮影やインタビューを行うなど中身を作り込みたい場合は、クライアント側ですべて対応するのは無理でしょう。おとなしく制作者側で更新したほうが良いケースもあります。

また、当然ですが、クライアント側で更新できるよう配慮して構築するほうが工数がかかります(=制作費が高くなります)。何でもかんでもクライアント側で更新できるようにするのではなく、更新頻度が低いコンテンツなどはどうするべきか事前にきちんと検討したほうが良いですね。

デザイン段階で気をつけること

クライアントが更新する箇所は、デザインする段階から気をつけなくてはなりません。なぜなら、クライアントは素材を作り込めないからです。

そのため、デバイスフォントとアップロードされた未加工の写真だけで「様になる」ようなデザインが求められます。今の時代、ウェブフォントやCSSでかなり表現面での融通がきくようになりましたが、何ができて何ができないのかをデザイナは把握しておく必要があります。

また、文字数が増えたり減ったりしたときに破綻するデザインではいけません。数行にわたるテキストを入れてほしい箇所に、1単語しか打ち込んでもらえない可能性だってあります。特に紙媒体を中心としているデザイナは、テキスト量の変化を計算に入れるのが苦手な印象があるので注意してください(あと、ついでに、画面幅によっても破綻しないデザインをお願いしますね)。

HTMLコーディングで気をつけること

クライアントがテキストを入力する箇所や写真をアップする箇所は、デザイン段階と同じく、HTMLコーディングの段階でも十分に注意しなければなりません。

テキストであれば、文字数が増えたり減ったりしたときに表示が崩れてしまってはアウトです。

写真も同様です。クライアントは写真をアップする前にグラフィックソフトで縦横比を編集するなど到底不可能です。どんな写真が入ってもデザインが崩れないようにあらかじめ計算してコーディングを行う必要があります。

ブログ記事の本文となる部分のマークアップも、ブロックエディタとの親和性を考慮した場合、H2を大見出し、H3を中見出し、H4を小見出しにしておくと選択しやすく便利です。

サイト管理用と更新用の2つのユーザーを用意する

WordPressは、ログインするユーザーごとに権限を選択できます。セブンシックスでは、クライアントの担当者がひとりの場合でも、サイト管理用に「管理者権限」のユーザーと、日々の更新用に「編集者権限」の2種類のユーザーを用意しています。

  • 編集者権限・・・日々の更新用
  • 管理者権限・・・サイト管理用

これにより、クライアントが日々の更新の中でWordPress全体の「設定」メニューをいじったり、操作を誤ってサイトをぶっ壊す確率が劇的に下がります。

固定ページの中身はテーマファイルに書く

固定ページは、それぞれテーマファイル「page-xxx.php」を用意して、エディタではなく、PHPファイルの中にコンテンツを記述するようにします。こうすることで、管理画面の固定ページ編集画面から誤ってコンテンツをめちゃくちゃにすることがなくなります。

カスタムフィールドを活用する

Advanced Custom Fieldsなどのプラグインを使うことで、クライアントが管理画面から必要な項目だけを分かりやすく更新できるようになります。セブンシックスではAdvanced Custom FieldsのPRO版を使用しています。

ACF Pro

固定ページの内容そのものはテーマファイル内に記述して、クライアントに編集させたい項目だけを、カスタムフィールドとしてその固定ページの編集画面内に表示させてあげる方法が分かりやすいです。

オプションページを活用する

Advanced Custom Fields PROには、独自に作成したオプションページからの入力を特定の固定ページのカスタムフィールドとして保存できる機能があります。

例えば、「沿革」というオプションページを作り、「年月」「内容」のリピーターフィールドを用意したとします。これを、会社概要ページのカスタムフィールドとして保存できます。そうすることで、固定ページの編集画面をさわらずに、必要な箇所の更新ができるようになります。また、入力した値を会社概要ページのループ内で簡単に呼び出すことができます。

ただしデメリットもあります。オプションページだとリビジョンが操作できません。

ACF | Option Page

不要なブロックを削除

ブログ投稿をする際のブロックエディタ「Gutenberg」ですが、あらかじめ用意されているブロックの数が多くてわかりづらいです。正直、「見出し」「段落」「画像」「リスト」「引用」「テーブル」「ショートコード」「埋め込み」「カスタムHTML」くらいあれば事足ります。

WordPress:Gutenbergでデフォルト表示されているブロックを非表示にする方法

必要なブロックを追加

標準のブロックでやりくりするのが難しいときはカスタムブロックを追加します。旧エディタでいうところのAddQuicktagみたいなことをやりたい場合、と言えばピンとくるでしょうか。ブロックの追加は、Lazy Blocksプラグインを使うとカンタンです。

雛形のHTMLコードを渡して、「これをコピーしてカスタムHTMLブロックにペーストして・・・」とかやってもらうくらいなら、新しいブロックを作ってあげたほうが親切ですよね。

Lazy Blocks – Gutenbergのカスタムブロックが管理画面から作成できるWordPressプラグイン

投稿のスラッグから日本語を除外

WordPressのデフォルトでは、投稿のスラッグはタイトルをもとに作られます。日本語の記事の場合、下書きして保存すると、スラッグがけっこう大変なことになっていたりします。

日本語URLを効果的に使用するサイトもありますが、スラッグの編集は見落としやすい上に公開後に気付いて変更したらページのURLが変わってしまいます。ここはキッパリ日本語のURLを使わないルールにしましょう。

パーマリンク構造を投稿IDに決め打ちしてもいいのですが、「%postname%」を使ってスラッグを自由に設定できたほうが融通がききます。ですから、スラッグに日本語が含まれていたら自動的に書き換えるような記述をfunctions.phpに書きます。これで、スラッグに日本語が含まれていたら自動的に「post-246」のようになります。

WordPress の投稿スラッグを自動的に生成する

WordPressからのメール送信をSMTPにする

WordPressからメールが送信される際、デフォルトではPHPのmail関数が使用されます。特に問題ないケースが多いですが、念のためSMTP方式にしておくことで「送信元を偽装したメール」と判断されてメールが届かないトラブルを未然に防ぐことができます。

SMTP方式でメール送信するためのプラグインはいくつかありますが、「WP Mail SMTP by WPForms」が有名です。

Yoast SEOプラグインの導入

Yoast SEOプラグインは、日々の更新を便利にしてくれる様々な機能を提供してくれます。

WordPress SEOプラグインの定番「Yoast SEO」の使い方

プライマリカテゴリ

記事が複数のカテゴリに属する場合に、メインのカテゴリを指定できるようになります。ページタイトルやパンくずリストにカテゴリ名をひとつだけ出したい場合などに重宝します。

meta title、descriptionのルール設定

Yoast SEOプラグインを導入すると、meta titleやmeta descriptionを自由に入力できるようになります。それだけではなく、ポストタイプやタクソノミの形式ごとに「記事名 | カテゴリ名 | サイト名」のようなルールをあらかじめ設定しておけるため、クライアントがわざわざ記事ごとにmetaタイトルなどを入力しなくても済むようになります。

自動でOGPタグを出力

SNSなどで記事がシェアされたときに引用されるタイトルや説明文などの情報をOGPタグとして自動で出力してくれるようになります。URLをシェアしたときに、アイキャッチ画像などが表示されるようになり、アクセスアップに効果的です。

sitemap.xmlの自動生成

サイト内のページのリストがsitemap.xmlとして自動で生成されます。Googleのサーチコンソールなどにsitemap.xmlを登録しておくことで、スムーズなインデックスを促すことができます。

自動バックアップ

専門知識の少ないクライアントに更新を任せるのですから、何らかのリスクヘッジは必要です。そこでおすすめなのが、WordPressサイトの自動バックアッププラグインです。それらを導入することで万一のときの復旧ができるようになります。

プラグインによって機能はまちまちです。データの保管先は、WordPressの設置されているサーバだけでなく、サーバ自体がクラッシュしたときのために外部ストレージを指定できると安心です。

UpdraftPlus

wp-contentフォルダとDBを自動でバックアップしてくれます。

UpdraftPlus WordPress Backup Plugin

Duplicator PRO

サイト全体のファイルとDBを自動でバックアップしてくれます。

Duplicator PRO

フォームのスパム対策

Contact Form 7などのメールフォームプラグインを使用する場合は、スパム対策をしないと大量の迷惑メールが送られてきてやる気を削がれます。

Contact Form 7のスパム(迷惑メール)対策あれこれ2019

Akismet

Akismetプラグインは、有料ですがまず第一に導入を検討すべき選択肢です。

Akismet Anti-Spam

reCAPTCHA

reCAPTCHA v3を導入すれば、人間かロボットかを自動的に見極めてスパムをブロックしてくれます。Contact From 7への導入もカンタンです。

reCAPTCHA v3

オリジナル画像サイズのリサイズ

クライアントはたいてい、デジカメで撮影した写真をそのままのサイズで容量など気にせずアップロードしようとします。サーバ容量や通信量を抑えるためにも、オリジナル画像の自動リサイズ設定はやっておいたほうが良いでしょう。

Imsanity

ネーミングセンス抜群のこのプラグインは、オリジナル画像が大きいとき、指定したサイズまでリサイズします。このプラグインの良いところは、投稿画面からアップロードしたときと、メディアからアップロードしたときで設定を変えられるところです。

クライアントが普段使用する投稿画面からのアップロードはデザイン上のコンテンツ幅くらいにしておき、どうしても大きなサイズの画像をアップしたいイレギュラー時にメディアのメニューを使用する方法がおすすめです。

Imsanity

EWWW Image Optimizer

こちらは画像のロスレス圧縮プラグインですが、アップロード画像の最大サイズも指定できます。単体でも使えますし、Imsanityと組み合わせてもOKです(ちゃんとImsanityを認識してくれます)。

EWWW Image Optimizer

あとがき

WordPressはそのままでも使いやすいCMSですが、ちょっとした配慮でさらに使いやすくなります。制作会社さんによっても持っているノウハウは千差万別でしょう。セブンシックスも、今回紹介したTIPS以外にたくさん、使いやすくするための工夫を導入したり、試行錯誤しています。この記事が、あなたのWordPress構築のお役に立てたら嬉しいです。

前田 大地

Developer / Designer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

関連記事

SEVENSIX NOTESEVENSIX NOTE