wordpressセブンシックスでは、主に中小企業向けのコーポレートサイト制作を手掛けています。いうことは、つまり小規模のWordPressサイトを、専門知識を持たないクライアント担当者でも日々更新しやすいように、ちょっとした工夫を散りばめて作っているということです。今回は、そんなセブンシックスのWordPress構築TIPSをいくつか紹介します。自動バックアップフォームのスパム対策オリジナル画像サイズのリサイズクライアント側で更新するコンテンツを明確にするまずはサイトを作る前に、クライアント側で更新作業をするコンテンツを明確にします。同じ更新していくコンテンツでも、誰が更新するかによって、デザインやテーマファイルなどの作り方が変わってきます。クライアント側で更新するコンテンツ制作者側で更新するコンテンツ更新しないコンテンツ例えば、「ブログ」は、クライアントで更新していく代表的なコンテンツです。「制作実績」や「お客様の声」などのコンテンツがあるなら、クライアント側で随時更新できたほうが便利かもしれませんね。プロが写真撮影やインタビューを行うなど中身を作り込みたい場合は、クライアント側ですべて対応するのは無理でしょう。おとなしく制作者側で更新したほうが良いケースもあります。当然ですが、クライアント側で更新できるよう配慮して構築するほうが工数がかかります(=制作費が高くなります)。何でもかんでもクライアント側で更新できるようにするのではなく、更新頻度が低いコンテンツなどはどうするべきか事前にきちんと検討したほうが良いですね。デザイン段階で気をつけることクライアントが更新する箇所は、デザインする段階から気をつけなくてはなりません。クライアントは素材を作り込めないからです。そのため、デバイスフォントとアップロードされた未加工の写真だけで「様になる」ようなデザインが求められます。今の時代、ウェブフォントやCSSでかなり表現面での融通がきくようになりましたが、何ができて何ができないのかをデザイナは把握しておく必要があります。文字数が増えたり減ったりしたときに破綻するデザインではいけません。数行にわたるテキストを入れてほしい箇所に、1単語しか打ち込んでもらえない可能性だってあります。紙媒体を中心としているデザイナは、テキスト量の変化を計算に入れるのが苦手な印象があるので注意してください(あと、ついでに、画面幅によっても破綻しないデザインをお願いしますね)。HTMLコーディングで気をつけることクライアントがテキストを入力する箇所や写真をアップする箇所は、デザイン段階と同じく、HTMLコーディングの段階でも十分に注意しなければなりません。テキストであれば、文字数が増えたり減ったりしたときに表示が崩れてしまってはアウトです。クライアントは写真をアップする前にグラフィックソフトで縦横比を編集するなど到底不可能です。どんな写真が入ってもデザインが崩れないようにあらかじめ計算してコーディングを行う必要があります。ブログ記事の本文となる部分のマークアップも、ブロックエディタとの親和性を考慮した場合、H2を大見出し、H3を中見出し、H4を小見出しにしておくと選択しやすく便利です。サイト管理用と更新用の2つのユーザーを用意するWordPressは、ログインするユーザーごとに権限を選択できます。サイト管理用これにより、クライアントが日々の更新の中でWordPress全体の「設定」メニューをいじったり、操作を誤ってサイトをぶっ壊す確率が劇的に下がります。固定ページの中身はテーマファイルに書く固定ページは、それぞれテーマファイル「page-xxx.php」を用意して、エディタではなく、PHPファイルの中にコンテンツを記述するようにします。することで、管理画面の固定ページ編集画面から誤ってコンテンツをめちゃくちゃにすることがなくなります。Fieldsなどのプラグインを使うことで、クライアントが管理画面から必要な項目だけを分かりやすく更新できるようになります。FieldsのPRO版を使用しています。Pro固定ページの内容そのものはテーマファイル内に記述して、クライアントに編集させたい項目だけを、カスタムフィールドとしてその固定ページの編集画面内に表示させてあげる方法が分かりやすいです。PROには、独自に作成したオプションページからの入力を特定の固定ページのカスタムフィールドとして保存できる機能があります。リピーターフィールドを用意したとします。これを、会社概要ページのカスタムフィールドとして保存できます。することで、固定ページの編集画面をさわらずに、必要な箇所の更新ができるようになります。入力した値を会社概要ページのループ内で簡単に呼び出すことができます。デメリットもあります。オプションページだとリビジョンが操作できません。Page不要なブロックを削除ブログ投稿をする際のブロックエディタ「Gutenberg」ですが、あらかじめ用意されているブロックの数が多くてわかりづらいです。リスト」「引用」「テーブル」「ショートコード」「埋め込み」「カスタムHTML」くらいあれば事足ります。標準のブロックでやりくりするのが難しいときはカスタムブロックを追加します。旧エディタでいうところのAddQuicktagみたいなことをやりたい場合、と言えばピンとくるでしょうか。Blocksプラグインを使うとカンタンです。雛形のHTMLコードを渡して、「これをコピーしてカスタムHTMLブロックにペーストして・・・」とかやってもらうくらいなら、新しいブロックを作ってあげたほうが親切ですよね。Gutenbergのカスタムブロックが管理画面から作成できるWordPressプラグイン投稿のスラッグから日本語を除外WordPressのデフォルトでは、投稿のスラッグはタイトルをもとに作られます。日本語の記事の場合、下書きして保存すると、スラッグがけっこう大変なことになっていたりします。日本語URLを効果的に使用するサイトもありますが、スラッグの編集は見落としやすい上に公開後に気付いて変更したらページのURLが変わってしまいます。ここはキッパリ日本語のURLを使わないルールにしましょう。パーマリンク構造を投稿IDに決め打ちしてもいいのですが、「%postname%」を使ってスラッグを自由に設定できたほうが融通がききます。スラッグに日本語が含まれていたら自動的に書き換えるような記述をfunctions.phpに書きます。これで、スラッグに日本語が含まれていたら自動的に「post-246」のようになります。投稿スラッグを自動的に生成するWordPressからのメール送信をSMTPにするWordPressからメールが送信される際、デフォルトではPHPのmail関数が使用されます。問題ないケースが多いですが、念のためSMTP方式にしておくことで「送信元を偽装したメール」と判断されてメールが届かないトラブルを未然に防ぐことができます。WPForms」が有名です。SEOプラグインは、日々の更新を便利にしてくれる様々な機能を提供してくれます。SEO」の使い方プライマリカテゴリ記事が複数のカテゴリに属する場合に、メインのカテゴリを指定できるようになります。ページタイトルやパンくずリストにカテゴリ名をひとつだけ出したい場合などに重宝します。descriptionを自由に入力できるようになります。サイト名」のようなルールをあらかじめ設定しておけるため、クライアントがわざわざ記事ごとにmetaタイトルなどを入力しなくても済むようになります。自動でOGPタグを出力SNSなどで記事がシェアされたときに引用されるタイトルや説明文などの情報をOGPタグとして自動で出力してくれるようになります。URLをシェアしたときに、アイキャッチ画像などが表示されるようになり、アクセスアップに効果的です。sitemap.xmlの自動生成サイト内のページのリストがsitemap.xmlとして自動で生成されます。Googleのサーチコンソールなどにsitemap.xmlを登録しておくことで、スムーズなインデックスを促すことができます。自動バックアップ専門知識の少ないクライアントに更新を任せるのですから、何らかのリスクヘッジは必要です。そこでおすすめなのが、WordPressサイトの自動バックアッププラグインです。それらを導入することで万一のときの復旧ができるようになります。プラグインによって機能はまちまちです。データの保管先は、WordPressの設置されているサーバだけでなく、サーバ自体がクラッシュしたときのために外部ストレージを指定できると安心です。UpdraftPluswp-contentフォルダとDBを自動でバックアップしてくれます。PROサイト全体のファイルとDBを自動でバックアップしてくれます。7などのメールフォームプラグインを使用する場合は、スパム対策をしないと大量の迷惑メールが送られてきてやる気を削がれます。7のスパム(迷惑メール)対策あれこれ2019AkismetAkismetプラグインは、有料ですがまず第一に導入を検討すべき選択肢です。v3を導入すれば、人間かロボットかを自動的に見極めてスパムをブロックしてくれます。7への導入もカンタンです。v3オリジナル画像サイズのリサイズクライアントはたいてい、デジカメで撮影した写真をそのままのサイズで容量など気にせずアップロードしようとします。サーバ容量や通信量を抑えるためにも、オリジナル画像の自動リサイズ設定はやっておいたほうが良いでしょう。Imsanityネーミングセンス抜群のこのプラグインは、オリジナル画像が大きいとき、指定したサイズまでリサイズします。このプラグインの良いところは、投稿画面からアップロードしたときと、メディアからアップロードしたときで設定を変えられるところです。クライアントが普段使用する投稿画面からのアップロードはデザイン上のコンテンツ幅くらいにしておき、どうしても大きなサイズの画像をアップしたいイレギュラー時にメディアのメニューを使用する方法がおすすめです。Optimizerこちらは画像のロスレス圧縮プラグインですが、アップロード画像の最大サイズも指定できます。単体でも使えますし、Imsanityと組み合わせてもOKです(ちゃんとImsanityを認識してくれます)。OptimizerあとがきWordPressはそのままでも使いやすいCMSですが、ちょっとした配慮でさらに使いやすくなります。制作会社さんによっても持っているノウハウは千差万別でしょう。セブンシックスも、今回紹介したTIPS以外にたくさん、使いやすくするための工夫を導入したり、試行錯誤しています。この記事が、あなたのWordPress構築のお役に立てたら嬉しいです。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。