適切なキーワードを選定することで検索エンジン経由での新たな顧客獲得につながり、またそのジャンルにおける検索エンジンからの評価獲得にもつながります。

今回はSEO対策において、キーワード選定が重要である理由についてお伝えしていきます。

キーワードを間違えると、すべて水の泡

まずもっとも認識しておきたいのは、キーワード選定を間違えると、その後にいくら頑張っても水の泡になってしまうということです。

たとえば商品の固有名詞のような即購入につながりそうなキーワードであったとしても、商品がまったく認知されていなければ、検索エンジンに商品名を入力して検索する人はいませんよね？

なのでいくら商品名をキーワードとして狙って記事を書いても、期待するような成果にはつながりません。

また多くのページビュー（PV）を獲得できるキーワードがあったとして、そういうキーワードはほとんどの場合、競合他社も狙っています。

そうすると当然、SEOでの上位獲得の難易度が高くなるわけで、ここばかり攻めても思うような結果にはならないでしょう。

あと誤解しやすいのが、「とりあえずPVだけ稼げればいい」と考えてキーワードを選定してしまうことです。

自分の商品を売りたいのに、まったく関係ない芸能人のゴシップネタで人を集めても意味がありません。

あくまでも商品に関心がありそうな人を、できるだけたくさん集めること。

キーワード選定においては、その軸をぶらしてはいけません。

理想の顧客に出会うための布石

キーワードを選ぶということは、どんなお客さんと出会いたいかのメッセージと考えてください。

たとえばホームページ制作会社が集客するとして、「ホームページ制作　格安」みたいなキーワードでSEO対策をしたとします。

そうすると当然、出会えるお客さんは「お金をかけずにホームページを作りたい」と考えている人ということになります。

つまりお客さんのニーズとしては、集客力や成約率などのホームページのパフォーマンスよりも、制作費用や維持費をできるだけ抑えることの方が重要だと予想できます。

そのため、もしこのホームページ制作会社がパフォーマンスを重視した制作を強みとしている場合、どんなにSEOを頑張っても理想のお客さんに出会うことが難しくなってしまうのです。

そうならないためにも、キーワード選定を行う際には、自分にとっての理想の顧客像をイメージし、その人が求めているであろう情報とか、抱えている問題・課題について理解を深めていく必要があります。

そのプロセスを経てたどり着いたキーワードと、なんとなくツールを使って収集したキーワードとでは、手にできる成果は段違いになるはずです。

ネットユーザーや検索エンジンからの認知獲得

一定の方向性をもってキーワード選定ができると、ネットユーザーや検索エンジンから「〇〇のサイト」として認知を獲得することができます。

あなたも自分の悩み・解決したいことについてネットで調べていたら、とあるサイトのページをよく目にするということがあるのではないでしょうか？

そうすると、そのサイトに親近感を持ったり、好意的な印象を持ったりしますよね。

これはザイアンス効果（単純接触効果）や返報性の原理などが働くことが理由で、人間は接触回数が多いものに好感度や関心が高まり、また他者から施しを受けると何かお返しをしたい気持ちになるわけです。

キーワード選定がうまくできていると、商品に関心を持ちやすいユーザーと何回も接触することになり、それだけで親近感・好印象を持ってもらえるようになります。

その上で記事によって有益な情報の提供を繰り返すことで、何かお返しをしたいという気持ちが高まり、商品を購入してくれやすい関係性を築くことができるわけですね。

またキーワード選定に一貫性があると、検索エンジンはそのサイトの専門性を高く評価するようになります。

「E-E-A-T」という言葉を聞いたことがあるかもしれませんが、これは「Experience（経験）」「Expertise（専門性）」「Authoritativeness（権威性）」「Trustworthiness（信頼性）」のことで、検索エンジンがサイトの品質を評価する際の基準となるものです。

キーワードに一貫性があれば専門性の向上につながりますし、キーワードに沿ったコンテンツを実体験を交えて発信することで、経験の評価につながります。

そして自身の専門性と経験に基づいた情報発信を継続することで信頼性を獲得し、その積み重ねが、その分野における権威性を構築していきます。

つまり、E-E-A-Tのはじめの一歩は、キーワード選定にあると言えるわけですね。

キーワード選定は適当にしないで

SEO対策というと、活発な情報発信によって、とにかくPVを集めようという意識になってしまいがちです。

でもその方向性が間違っていると、すべての努力が無駄になってしまいます。

キーワード選定は、これから自分がどの方向に船を漕ぎ出すかと決める重要な作業です。

何となくの浅い想像で選ぶのではなく、顧客になるであろう人（＝自分の商品で問題解決できる人）の悩みや欲求を理解し、気持ちに寄り添った上でキーワードを選んでいくことが大切になります。

しかし、あまりツールに頼りすぎるのはおすすめできません。

今回は、SEOキーワード選定の際にツールに頼りすぎるリスクと、それを回避して効果的にツールを活用する方法についてお伝えしたいと思います。

キーワード選定ツールに依存するリスク

キーワード選定ツールは月間検索ボリュームや競合の強さ、関連キーワードなどを一瞬で表示してくれる非常に便利なツールです。

ですがその反面、競合が少なく成約につながりやすい、いわゆる「お宝キーワード」を見つけるのには不向きだったりします。

そのもっとも大きな理由は、便利であるがゆえに思考が浅くなり、ついつい「売り手目線」でキーワードを探してしまいがちになるからです。

たとえば「スキンケア」でSEO対策する場合、あなたならどんなキーワードから手をつけるでしょうか？

おそらく「スキンケア」とか「化粧水」とか、パッと思いつくものから…　と考えたのではないでしょうか？

実はほとんどの人はそんな感じで、ツールの便利さに依存して選定の切り口が甘くなるのです。

そうなればいくらツールの機能がよかったとしても、吐き出されるリストは似通ったものとなるため、ライバルだらけの中で戦う羽目になるわけです。

キーワード選定は買い手の思考から逆算して見つけ出す

キーワード選定ツールを効果的に使うには、「成果の出るキーワードを見つける」というモチベーションではなく、「こんな悩みを抱えている人は、どんなキーワードで検索するだろう？」という切り口から深掘りしていくことがポイントです。

先ほどの「スキンケア」にしても、「悩み」を起点に考えると、必ずしも購買前提のキーワードで検索をかけるとは限らないことが見えてきます。

なぜなら肌の調子を改善する方法は、商品購入だけではないからです。

食べ物を変えるとか、生活習慣を見直すとか、そういうところからゴール（肌質改善）へアプローチすることだってできるわけです。

でも「売り手目線」で考えてしまうと、そういう悩み起点のキーワードに辿り着くのが難しくなります。

悩みを商品によって解決しようとする人と、それ以外の方法で解決する人では、後者の方は母数は大きくなります。

そこを取りこぼしてしまうのは、あまりにもったいないですよね。

もちろん売り手目線で考えたキーワードの方が購買意欲は高いので、少し導線を整えれば成約できるでしょう。

でもそういうキーワードは得てして競合が多く、SEOの難易度は高い傾向にあります。

対して悩み系キーワードは、すぐには購入につながらないかもしれないけど、SEOの難易度は比較的低いと言えます。

「悩みはあるけど、その商品の存在を知らない」という人なら、順を追って情報を提供していくことで、商品に関心を持ってもらえるかもしれません。

SEOは「急がば回れ」が大事

遠回りに思えるかもしれませんが、競合ひしめく難易度の高いキーワードを狙うより、実際には成果につながりやすいケースが少なくありません。

また何と言っても「売り手目線」ではツールを使ったとしても見つけられないキーワードで攻めていくので、競合が少なく、成果を安定的に積み上げていくこともできるわけです。

悩み起点でキーワードを掘り下げ、ごく基本的なSEO対策で小さな成果を積み上げていく。

この方法なら、時間はかかりますが、将来的には売上を安定させやすく、Googleのアルゴリズム変更にも影響を受けづらいホームページに育てることができるでしょう。

中小企業や個人事業主の中にも、取り組んでいる方は大勢いるのではと思います。

しかし残念ながら、成果を出せているのはほんの一握りといった印象。

その原因の多くは、キーワード選定にあります。

今回は中小企業・個人事業主がSEOに取り組む上でありがちな間違いと、それを踏まえてのキーワード選定の方法についてお伝えしたいと思います。

PVが増えれば売上があがる、とは限らない

そもそもの話になってしまいますが、事業者がSEOに取り組むのは、突き詰めて言えば売上アップのためです。

売上アップのためには、できるだけたくさんのお客様がいた方がいい、だからホームページのPVを増やそう。

というわけでSEOに取り組むわけですが、実はここに落とし穴が潜んでいます。

たとえばあなたが女性向け基礎化粧品を販売している会社のSEO担当だったとして、どのようなキーワードで記事を書くでしょうか？

できるだけPVを増やしたければ、「スキンケア」とか「基礎化粧品」のような、月間検索ボリュームが大きいキーワード（ビッグキーワード）を狙おうと考えるかもしれません。

でもビッグキーワードの検索意図は、以下のようにバラバラです。

• 効果的なスキンケアの方法を知りたい
• 自分に合った基礎化粧品を見つけたい
• 健康な肌を手に入れるための栄養素を知りたい
• 男性向けスキンケア用品を探している
• スキンケアの手間を省きたい
• スキンケア用品を収納するアイテムがほしい
• 目立つ毛穴をどうにかしたい

女性向け基礎化粧品を販売したい場合、男性向け商品や収納アイテムを探している人を集めても、成果にはつながりづらいですよね。

キーワードが抽象的であるほど検索意図がぼやけるので、購買につなげるのは難しくなりますし、ものによってはどう頑張っても無理な場合もあります。

つまり闇雲にPVを増やせば売上があがる、というわけではないわけですね。

SEOテクニックで勝とうとしない

また、ビッグキーワードは狙っている競合サイトが多いため、上位を獲る難易度は高くなる傾向にあります。

しかもビッグキーワードで上位を獲るようなサイトにはSEOの専門家が関わっていたりするので、そういう人たちに真っ向勝負を挑むことになります。

X（旧Twitter）とかで検索してみると分かりますが、SEOの専門家って、本当に細部にまで気を配ってコンテンツを作ったり、サイト全体の設計をしたりしています。

それが仕事だから当たり前と言えばそれまでですが、問題はそのレベルの人に自分が勝てるのか？　ということです。

本来の仕事に加えて、プロレベルのSEOノウハウを身につけるなんて、現実的に考えて、まず無理じゃないでしょうか？

だったら、どうすればいいか？

答えは簡単で、そこで勝負をしなければいいわけです。

つまりSEOの専門家が、わざわざパイを取りに来ないキーワード（スモールキーワード）を狙うのです。

スモールキーワードは一般的に、検索ボリュームが小さい傾向にあります。

ですが複数の単語でキーワードが構成されるため、検索意図が把握しやすいという特徴があります。

スモールキーワードを狙ってコンテンツ（記事）を積み上げることで、結果的にPVを大きくすることもできますし、自社商品に検索意図がフィットしたキーワードを狙うことで、売上アップにもつなげられるわけです。

実際、僕が以前に運用支援していたサイト（スピリチュアル・占い系）では、上位表示できたのはスモールキーワードのみでしたが、月間PVは15万あり、月間の申し込み件数は平均20件ほどありました。

また定期的に、広告掲載の依頼が来たりもしていました（このサイトでは導線の邪魔になるので断ってましたが）。

わざわざ難易度の高いキーワードを獲りに行かなくても、スモールキーワードで十分、売上につなげられます。

お客様のことだけ考えれば、お宝キーワードが見えてくる

とはいえ、スモールキーワードなら何でもいいわけではありません。

やはり商品購買につながる検索意図のキーワードを中心に狙っていくわけですが、ここで問題になるのは、どんな検索意図なら購買につながりやすいのか？　ということです。

先に挙げたように明らかにズレた検索意図であれば分かりやすいのですが、実際にはそう単純なものばかりではありません。

攻めるべきスモールキーワードかを判断するには、購買する人＝お客様の気持ちをイメージできる必要があります。

お客様がどんなことに困っていて、どんな気持ちでいているのか？

それが分かるようになれば、お客様がどんなワードで検索するかを想像する精度が高くなっていきます。

実際、検索ユーザーは自分の気持ちや感情、悩みをそのまま検索窓に入力する傾向があります。

たとえばスキンケアであれば、「肌　汚い」とか「スキンケア　うまくいかない」などですね。

「スキンケア　おすすめ」などのすぐ思いつくキーワードは競合が多くなってしまいがちですが、お客様の気持ちを想像してたどり着いたキーワードは、ツールを使ったとしてもなかなか見つけることはできません。

お客様の気持ちをより深く理解できれば、そういう「お宝キーワード」に出会える確率が高くなるのです。

SEOは基本かつ王道ノウハウさえあればいい

お宝キーワードさえ見つかれば、高度なSEOテクニックを駆使しなくても、上位を獲得しやすくなります。

タイトルや見出しにキーワードを盛り込むとか、記事を検索意図に沿った内容にするなど、ごく基本的なSEOさえできれば大丈夫です。

なぜならお宝キーワードって、SEOのプロは狙っていないし、競合も多くない、成果は出やすいのに誰にも気づかれていないキーワードだからです。

中小企業・個人事業主がSEOで成果を出すには、このお宝キーワードをいかに見つけて、地道にコンテンツ（記事）を積み上げていくかにかかっています。

100万PVとか、大きな数字を目指す必要はありません。

もちろん業種にもよりますが、数万PVレベルでも十分な売上が出せることもあるので、ぜひお客様の気持ちからキーワードを見つけ出すアプローチを試してみていただければと思います。

この騒動を受けて「WordPressが使えなくなるのでは？」「ACF（WP Engineは運営するWPプラグイン）が使えなくなるのでは？」などWordPressユーザーの間で不安の声が広がっている。

WordPress騒動の時系列

今回の騒動の時系列は、以下のような流れらしい。

• 2024年9月21日にマット氏がWP Engineのやり方を批判する内容のポスト（WP Engine is not WordPress）を公開。
• 2024年9月23日、WP Engineはポストの公開を中止するよう差し止め通知書を送付。
• 2024年9月25日、WordPress Foundationは商標ポリシーの内容を変更し、WP Engineを名指しして批判。マット氏はWP EngineによるWordPress.orgリソースへのアクセスを禁止（WP Engine is banned from WordPress.org）。これによりWP Engineの主要サービスの一つであるAdvanced Custom Fields（ACF）がWordPress公式ディレクトリから削除。WordPress管理画面からACFをアップデートできない事態に。
• 2024年9月27日、多くのユーザーから批判を受けたのか、WordPress.orgが10月1日までの一時措置としてWP Engineのアクセス禁止を解除（WP Engine Reprieve）。
• 2024年10月1日、WP EngineがXにて自社提供のプラグインやテーマについて、独自の解決策を展開したとポスト。
• 2024年10月2日、WP EngineがAutomatticとマット氏を恐喝と権力乱用で告発。
• 2024年10月9日、マット氏はWordPress.orgのコントリビューターログイン画面にWP Engineの関係者でないことを確認するチェックボックスを設置（踏み絵）。これに多くのコントリビューターが反発。
• 2024年10月13日、WordPress.orgはACFをフォークして新しいプラグイン「Secure Custom Fields（SCF）」を作成したと発表。ACF乗っ取り完了（Secure Custom Fields）。

マット氏の主張

• WP EngineがWordPressで得ている収益はAutomatticと同規模であるにもかかわらず、その貢献度はAutomatticと比べて1/100程度である。
• WordPressはCMSであり、コンテンツは神聖なものである。そのため、すべてのコンテンツのリビジョン（更新履歴）は保存されるべき。しかしWP Engineは自社の利益のため、ユーザーのリビジョン機能を無効にしている。これによってWP Engineユーザー150万以上のWordPressでリビジョンが保存されないようになっている。
• WP Engineが提供しているものはWordPressとは言えない。彼らが提供しているものはWordPressに似た安っぽい模造品であり、しかも本物より高額で提供している。これがWP EngineがWordPressにとっての「がん」である理由の一つで、放置しておくと「がん」と同じく転移する（追従する他社も現れる）ことを危惧している。
• WP Engineとの訴訟問題が解決するまで、WP EngineがWordPress.orgのリソースにアクセスすることを禁止する。
• WordPressはさまざまな機能を無料で提供しているが、WordPress.orgリソースにアクセスできないWP Engineは独自にそれらを用意しなければならない。またWordPressサイトが以前ほどハッキングされなくなったのは、ホスティング会社と協力して継続的にセキュリティを高める努力をしているからである。WP Engineに利益を貪られながら、これらのサービスを無料で彼らに提供する義理はない。
• 「WP」はWordPressの商標によってカバーされていないが、ユーザーを混乱させるような使い方をするべきではない。多くの人がWP Engineを「WordPress Engine」と勘違いし、WordPressと正式に提携していると誤解しているが、実際には何ら関係はない。彼らはWordPressによって数十億ドルの収益を上げているにもかかわらず、一度もWordPress Foundationに寄付したこともない。
• WP Engineが今後もWordPressを利用した事業を継続したいなら、商標ライセンスを取得しなくてはいけない。

僕はわりとマット氏を支持

ACFの公式ディレクトリからの削除＆乗っ取りという過激な対応をしたことでネガティブな反応が大きくなってしまったわけだが、個人的にはマット氏の主張は筋が通っているというか、心情が理解できる部分が多いと感じた。

自分たちが力を注いで開発してきたサービスにタダ乗りして、自分たち以上の利益を手にする奴がいれば面白くはないのは自然な感情だろうし、傍から見ていてもWP EngineのやっていることにWordPressへのリスペクトは感じられないように思う。

WordPressはGPLライセンスで公開されていて、商用利用や改変、再配布などが認められているものではある。

それを踏まえればWP Engineのやり方は誠意はなくともライセンスで認められている範囲内とも見れるし、だからこそマット氏は商標ライセンスを更新して、WP Engineの所業を「アウト」にしたかったんだと思う。

また、そもそもなぜWordPressがGPLライセンスで公開されているのかという話だが、もちろんそうすることでWordPressの発展が加速することを狙っている面もあると思う。

でもそれと同時に、WordPressというプラットフォームがあることで、「エンジニアやデザイナーの活躍の場が広がるように」というマット氏をはじめWordPress創業者たちの想いもあってのことだ。

だからWordPressを利用して仕事をしている世界中のデザイナーやエンジニアは、この素晴らしいソフトウェアが無償で公開されていることに感謝するべきだし、リスペクトをもって節度のある利用を心がけるべきだと思う。

だからもしWP Engineの振る舞いにWordPressへのリスペクトが感じられていたら、仮にWP Engineの収益がAutomatticのそれを上回っていたとしても、今回のような騒動には発展しなかったかもしれない。

X上ではどちらかと言うとマット氏への批判の声の方が大きいように感じるし、中にはマット氏の人格を否定するようなポストまであるが、調べるほどマット氏の抱えていたフラストレーションや今回の行動に至った経緯など（すべてに賛同するわけではないが）理解はできた。

ACFは今後どうなるのか？

マット氏がX上で燃え気味なのは、WP Engineと揉めていることよりも、ACFを公式ディレクトリから削除したことと、Automattic社員の多数退職、コントリビューターへの踏み絵が大きいように思う。

実際にこれから、ある程度の期間はACF周りでゴタゴタすることもあるだろうし、社員やコントリビューターが離れたことでWordPressのアップデートが鈍化する可能性もある。

でもインターネット上で40％以上のシェアを誇るWordPressが近い未来に廃れていく姿は想像できないし、ACFに関しても個人的にはあまり心配していない。

ちなみに少し話は逸れるが、有料版のACF PROであれば、今回の公式ディレクトリ削除の影響はまったく受けない。

またACFは有料版でしか使えない機能こそ仕事でWeb制作する場合には便利なものが多いので、もし無料版で今後のアップデートに不安がある人はACF PROの利用を検討してみるのもいいかもしれない。

現時点ではACFからSCFに切り替わった直後のため、いろいろと軽微なバグはどうしても出ると思う。

でもこれについても、アップデートを繰り返すうちに改善されていくと予想している。

ちなみにマット氏は「今回の件とは無関係だけど」としつつ、『Secure Custom Fields』というポストの最後で以下のような発言をしている。

There is separate, but not directly related news that Jason Bahl has left WP Engine to work for Automattic and will be making WPGraphQL a canonical community plugin. We expect others will follow as well.

以前WP Engineで働いていたJason Bahl（ジェイソン・バール）氏がAutomatticに移籍し、WPGraphQL を公式コミュニティプラグインにすることになった。他にも同じような動きがあるかもしれない。

明言はしていないが、今後SCFにテコ入れしていくことを匂わせている、と見えなくもない。希望的観測だが。

そうなれば案外、ACFよりも充実した機能を有したプラグインになる可能性もなきにしもあらずである。

• カテゴリーページ
• タグページ
• 月別アーカイブページ
• 作成者ページ
• タームページ
• 検索結果ページ

archive.phpとかでタイトル表示する共通の関数とかありそうなもんですが、探してみても見つからなかった記憶があります。

なので、個別に出力する必要があります。

カテゴリータイトルを表示する方法

<h1 class="archive_ttl"><?php single_cat_title(); ?></h1>

以下のテンプレートファイルの、任意の箇所に記述してください。

• category.php
• category-[カテゴリースラッグ].php
• category-[カテゴリーID].php

タグタイトルを表示する方法

<h1 class="archive_ttl"><?php single_tag_title(); ?></h1>

以下のテンプレートファイルの、任意の箇所に記述してください。

• tag.php
• tag-[タグスラッグ].php
• tag-[タグID].php

月別アーカイブタイトルを表示する方法

<h1 class="archive_ttl"><?php echo get_the_date('Y年n月'); ?>の記事一覧</h1>

date.phpの任意の箇所に記述してください。

上記の例みたいに「〜の記事一覧」と付けておくと分かりやすいかもです。

作成者ページタイトルを表示する方法

<h1 class="archive_ttl"><?php the_author(); ?>が書いた記事一覧</h1>

以下のテンプレートファイルの、任意の箇所に記述してください。

• author.php
• author-[ユーザー名].php
• author-[ユーザーID].php

こちらも例のように「〜が書いた記事一覧」などと書いておいた方が自然です。

タームタイトルを表示する方法

<h1 class="archive_ttl"><?php single_term_title(); ?></h1>

以下のテンプレートファイルの、任意の箇所に記述してください。

• taxonomy.php
• taxonomy-[タクソノミースラッグ].php
• taxonomy-[タクソノミースラッグ]-[タームスラッグ].php

タクソノミーとタームについて

タクソノミーとタームの関係は若干とっつきにくいかもしれませんが、これはWordPress標準の「カテゴリー」に置き換えて考えると分かりやすくなります。

標準のカテゴリーという仕組みは、まず「カテゴリー」という記事を区分するための大きな枠組みがありますよね。

そしてそのカテゴリーの中に、たとえば「Webデザイン」「コーディング」「ライティング」みたいな項目がある、みたいな構造になっています。

タクソノミーはここで言うところの「カテゴリー」、タームは「Webデザイン」「コーディング」「ライティング」などの各項目のことを指します。

検索結果ページタイトルを表示する方法

<h1 class="archive_ttl">"<?php echo get_search_query(); ?>"の検索結果</h1>

search.phpの任意の箇所に記述してください。

こちらも「”〜”の検索結果」と付けておいた方が分かりやすいと思います。

archive.phpで条件分岐させる方法

ここまではアーカイブページの種類によってテンプレートファイルを分ける使い方を紹介しましたが、archive.phpにまとめることもできます。

各アーカイブページでデザインやレイアウトに大きな差異がない場合は、こちらの方法で実装した方が管理が楽だと思います。

<h1 class="archive_ttl">
	<?php if(is_category()): //カテゴリーページ ?>
		<?php single_cat_title(); ?>
	<?php elseif(is_tag()): //タグページ ?>
		<?php single_tag_title(); ?>
	<?php elseif(is_date()): //月別アーカイブページ ?>
		<?php echo get_the_date('Y年n月'); ?>の記事一覧
	<?php elseif(is_author()): //作成者ページ ?>
		<?php the_author(); ?>が書いた記事一覧
	<?php elseif(is_tax('news')): //タクソノミー「news」ページ ?>
		<?php single_term_title(); ?>
	<?php endif; ?>
</h1>

なお、検索結果ページにはarchive.phpは適用されません。

そのためアーカイブページのテンプレートファイルをまとめたい場合でも、search.phpは別個に用意する必要があります。

もしくはタイトル部分のソースコードだけ別パーツにしておき、archive.phpとsearch.phpのそれぞれからget_template_part()関数で呼び出す形にしておくと多少管理しやすくなるかと思います。

その場合は、以下のような感じで一緒くたに書いてしまって大丈夫（なはず）です。

<h1 class="archive_ttl">
	<?php if(is_category()): //カテゴリーページ ?>
		<?php single_cat_title(); ?>
	<?php elseif(is_tag()): //タグページ ?>
		<?php single_tag_title(); ?>
	<?php elseif(is_date()): //月別アーカイブページ ?>
		<?php echo get_the_date('Y年n月'); ?>の記事一覧
	<?php elseif(is_author()): //作成者ページ ?>
		<?php the_author(); ?>が書いた記事一覧
	<?php elseif(is_tax('news')): //タクソノミー「news」ページ ?>
		<?php single_term_title(); ?>
	<?php elseif(is_search()): //検索結果ページ ?>
		"<?php echo get_search_query(); ?>"の検索結果
	<?php endif; ?>
</h1>

そのため、初回アクセス時だけアニメーションを表示させ、2回目以降は省略するようにするのがおすすめです。

今回はsessionStorageを利用して2回目以降のアクセス時にはアニメーションを省略する方法のメモ。

//2回目以降のアクセスではローディングアニメーションを省略
jQuery(function($) {
	let webStorage = function () {
		if (sessionStorage.getItem('access')) {
			//2回目以降のアクセス（sessionStorageにデータがある場合）
			$('#body').addClass('onwards');
		} else {
			//初回アクセス（sessionStorageにデータを保存する）
			sessionStorage.setItem('access', 'true');
		}
	}
	webStorage();
});

sessionStorageはブラウザにデータを保存しておける仕組みです。

上記ソースコードでは初回アクセス時にsessionStorageにデータを保存し、データの有無で初回か否かを判別しています。

• sessionStorageにデータがない＝初回アクセス
• sessionStorageにデータがある＝2回目以降のアクセス

データの保存期間はブラウザを閉じるまでなので、ブラウザを一旦閉じて再度アクセスすれば、またローディングアニメーションが再生されます。

目線を誘導したりするのに便利なので僕もたまに使うのですが、今回はその階段状レイアウトを簡単に実装する方法についてご紹介します。

段組みしたコンテンツを階段状にずらして並べる方法

3段で並べる場合は、以下のようにします。

HTML

<div id="container">
	<div class"box"></div>
	<div class"box"></div>
	<div class"box"></div>
</div>

CSS

#container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 5%;
}

.box {
	width: 30%;
}

.box:nth-child(3n+2) {
	margin-top: 50px;
}

.box:nth-child(3n+3) {
	margin-top: 100px;
}

左から順に、50pxずつズレて階段状に並びます。

ポイントはnth-childの指定で、3段に並べた2段目なら3n+2、3段目なら3n+3と指定します。

4段で階段状に並べてみる

4段に並べたい場合も、同じ要領で以下のようにします。

HTML

<div id="container">
	<div class"box"></div>
	<div class"box"></div>
	<div class"box"></div>
	<div class"box"></div>
</div>

CSS

#container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4%;
}

.box {
	width: 22%;
}

.box:nth-child(4n+2) {
	margin-top: 50px;
}

.box:nth-child(4n+3) {
	margin-top: 100px;
}

.box:nth-child(4n+4) {
	margin-top: 150px;
}

まとめ

以上、段組みしたコンテンツを階段状にずらして並べる方法でした。

この方法であれば、コンテンツの件数が不特定でも自動で回り込んで階段状に並んでくれるので便利です。

使える場面は結構あると思うので、応用しつついろいろ試してみてください。

WordPressでは条件分岐タグを利用することで、ページごとに読み込ませるファイルを切り替えることができます。

今回はCSS/JSを切り替える際によくある条件分岐パターンについてまとめてみました。

WordPressでページごとに読み込むCSS・JSファイルを切り替える方法

前提として、今回の記述例ではWordPressの設定が以下のようになっています。

ダッシュボード「設定→表示設定→ホームページの表示」で「固定ページ」を選択
カスタム投稿タイプ「custom」を作成し、「custom」のカテゴリー管理のためカスタムタクソノミー「custom_tax」を作成・使用

	<!-- ここからCSSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のCSSを読み込んでおく -->
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/common.css" rel="stylesheet" />
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/front.css" rel="stylesheet" />
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/about.css" rel="stylesheet" />
<?php elseif( is_page('contact') ): //スラッグが「contact」の固定ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/contact.css" rel="stylesheet" />
<?php elseif( is_post_type_archive('custom') || is_tax('custom_tax') ): //カスタム投稿タイプ「custom」のアーカイブページ＆カスタムタクソノミー「custom_tax」ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css" rel="stylesheet" />
<?php elseif( is_singular('custom') ): //カスタム投稿タイプ「custom」のシングルページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom-single.css" rel="stylesheet" />
<?php elseif( is_home() || is_post_type_archive('post') || is_category() || is_tag() || is_date() || is_search() ): //投稿アーカイブページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/archive.css" rel="stylesheet" />
<?php elseif( is_singular('post') || is_404() ): //投稿シングルページ＆404ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/single.css" rel="stylesheet" />
<?php endif; ?>

	<!-- ここからJSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のJSを読み込んでおく -->
	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	<script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js"></script>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/common.js"></script>
	
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/front.js"></script>
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/about.js"></script>
<?php elseif( is_page('contact') ): //スラッグが「contact」の固定ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/contact.js"></script>
<?php elseif( is_post_type_archive('custom') || is_tax('custom_tax') ): //カスタム投稿タイプ「custom」のアーカイブページ＆カスタムタクソノミー「custom_tax」ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
<?php elseif( is_singular('custom') ): //カスタム投稿タイプ「custom」のシングルページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom-single.js"></script>
<?php elseif( is_home() || is_post_type_archive('post') || is_category() || is_tag() || is_date() || is_search() ): //投稿アーカイブページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/archive.js"></script>
<?php elseif( is_singular('post') || is_404() ): //投稿シングルページ＆404ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/single.js"></script>
<?php endif; ?>

ダッシュボード「設定→表示設定→ホームページの表示」で「最新の投稿」を選択した場合は、4・5行目は以下のように記述しても大丈夫です。

<?php if( is_front_page() || is_home() ): //フロントページまたはブログ投稿インデックスページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/front.css" rel="stylesheet" />

WordPressデフォルトのjQueryを利用する場合の注意点

上記の記述例ではWordPressデフォルトのjQueryは使用せず、別途CDNで読み込んでいます。

デフォルトjQueryを使用する場合は、上記の記述例よりも先にwp_head()関数を記述するようにしてください。

<?php wp_head(); //先にデフォルトのjQueryとプラグイン用CSSを読み込んでおく ?>

	<!-- ここからCSSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のCSSを読み込んでおく -->
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/common.css" rel="stylesheet" />
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/front.css" rel="stylesheet" />
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<link href="<?php echo get_template_directory_uri(); ?>/assets/css/about.css" rel="stylesheet" />

...

	<!-- ここからJSの読み込み -->
	<!-- 条件分岐の前に全ページ共有のJSを読み込んでおく -->
	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	<script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js"></script>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/common.js"></script>
	
<?php if( is_front_page() && is_page() ): //フロントページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/front.js"></script>
<?php elseif( is_page('about') ): //スラッグが「about」の固定ページ ?>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/about.js"></script>

...

wp_head()関数とは？

WordPressサイトで、header要素内で使用するタグを出力するものです。
WordPress本体に同梱されているjQueryのほか、各種プラグインで使用するCSS/JSもこの関数で読み込まれます。
そのため自作のJSでjQueryに依存したソースコードがある場合、wp_head()関数より後で読み込まないと動作しません。

固定ページスラッグを取得して自動でCSS/JSを読み込ませる方法

上記の記述例では、固定ページのスラッグを個別に指定してCSS/JSを読み込んでいますが、固定ページの件数が増えてくると個別に分岐させるのが手間になってきます。

その場合は固定ページのスラッグを取得して、自動でCSS/JSが読み込まれるようにしておくと便利です。

<?php if( is_page() ): //固定ページのスラッグ取得 ?>
	<?php $page = get_post( get_the_ID() ); $slug = $page->post_name; ?>
<?php endif; ?>

<link href="<?php echo get_template_directory_uri(); ?>/assets/css/<?php echo $slug; ?>.css" rel="stylesheet" />
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/<?php echo $slug; ?>.js"></script>

公式テーマに登録する場合は使えません

以上、条件分岐タグを使ってページごとに読み込むCSS・JSファイルを切り替える方法でした。

ちなみにこの方法は公式テーマでは使用できません（審査で落とされます）。

公式テーマに登録したい場合は、functions.phpの方で読み込むCSS/JSを管理するようにしましょう。

とはいえクライアント案件などではfunctions.phpより条件分岐タグで切り替えた方が使い勝手はいいと思います。

制作内容によって適切な方法を選択して実装してみてください。

ここの設定次第でトップページにfront-page.phpかhome.php、どちらのテンプレートファイルが適用されるか変わるわけですが、今回はどう設定すればどちらのテンプレートファイルが適用されるのかについてまとめてみました。

テンプレートファイルの優先順位

WordPressサイトのトップページには、最新の記事一覧か、任意の固定ページを設定することができます。

どちらの場合でも、使っているWordPressテーマにfront-page.phpというテンプレートファイルがあれば、それが適用されます。

もしテーマにfront-page.phpがない場合には、以下のような優先度で代わりのテンプレートファイルが適用されるようになっています。

ホームページの表示で「最新の投稿」を設定している場合

1. front-page.php
2. home.php
3. index.php

ホームページの表示で「固定ページ」を設定している場合

1. front-page.php
2. page-（固定ページのスラッグ）.php
3. page-（固定ページのID）.php
4. page.php
5. singular.php
6. index.php

以下に「設定→表示設定→ホームページの表示」での設定によって、適用されるテンプレートファイルがどう変わるのかについてまとめます。

なおWordpressの表示設定では、サイトのトップページを「ホームページ」、ブログなどの記事一覧ページのことを「投稿ページ」と表現しています。

ここではそれに倣って記載するので、以下の認識でお願いします。

• 「ホームページ」はサイト全体のことではなく、「投稿ページ」は記事ページ（シングルページ）のことではない
• 「ホームページ」はサイトのトップページ、「投稿ページ」はブログトップ（最新の記事一覧ページ）のことである

「表示設定→ホームページの表示」と適用されるテンプレートファイル

1.ホームページの表示で「最新の投稿」を選択した場合

ホームページにはfront-page.phpが適用されます。

テーマ内にfront-page.phpがない場合は、home.php → index.phpの順で適用されます。

2.ホームページの表示で「固定ページ」を選択し、ホームページ・投稿ページともに未設定の場合

これはどうなるのか知りたくて試してみたのですが、結果、設定できませんでした。

未設定の状態で保存しようとすると、ホームページの表示が「最新の投稿」に変更されて保存されます。

3.ホームページの表示で「固定ページ」を選択し、ホームページに任意の固定ページを設定、投稿ページを未設定の場合

ホームページにはfront-page.phpが適用されます。

また投稿ページは出力されません。

コーポレートサイトなどで固定ページのみで管理できる場合は、この設定にしておくといいかもしれません。

4.ホームページの表示で「固定ページ」を選択し、ホームページを未設定、投稿ページに任意の固定ページを設定の場合

ホームページにはhome.phpが適用されます。

ホームページに最新の投稿が表示されるので、ホームページの表示で「最新の投稿」を選択した場合とサイト構造としては同じです。

でもホームページの表示が「最新の投稿」の場合はfront-page.phpでが適用されるので、何らかの理由でhome.phpを適用させたい場合はこの設定にするとよさそうです。

5.ホームページの表示で「固定ページ」を選択し、ホームページ・投稿ページともに任意の固定ページを設定の場合

ホームページにはfront-page.phpが適用されます。

テーマ内にfront-page.phpがない場合は、page-（固定ページのスラッグ）.php → page-（固定ページのID）.php → page.php → singular.php → index.phpの順で適用されます。

まとめ

以上、WordPress表示設定と、適用されるテンプレートファイルについてでした。

ちょっと大雑把な言い方になってしまいますが、そのWordPressサイトを「ブログ」として構築したいのか「ホームページ」として構築したいのかによって、適切な表示設定が変わります。

ブログの場合は基本的に「最新の投稿（上記の1）」、ホームページの場合は「固定ページ（上記の3・5）」で、ブログだけどトップページを固定ページとして管理したい場合は上記4の設定にしておくといいのではと思います。

HTML

<div id="icon_box">
	<div id="upload_img">
		<div class="img"></div>
	</div>
	<div id="upload_btn">
		<label>
			<input type="file" accept=".png, .jpg, .jpeg, .gif" onchange="uploadImage(this);"/>
		</label>
	</div>
</div>

今回はアップロードされた画像が #upload_img > .img の背景画像として表示されるようにします。

CSS

#icon_box {
	background: #eee;
	padding: 32px 24px 24px;
	border-radius: 8px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#upload_img {
	width: 120px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #fff;
	margin-bottom: 16px;
}

#upload_img > .img {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url(../images/avatar.png) no-repeat center center / cover;
}

#upload_img > .imgには画像が未アップロード状態のときに表示される画像を設定しておくとよいと思います。

JavaScript

function uploadImage(target) {
	let reader = new FileReader();
	reader.onload = function () {
		$upload_img = $("#upload_img > .img");
		img = new Image();
		img.src = this.result;
		$upload_img.css("background-image", "url(" + this.result + ")");
	}
	reader.readAsDataURL(target.files[0]);
}

1行目で、input[type=”file”]のonchange属性（uploadImage）を関数に設定します。

4行目にはアップロードした画像を背景として表示する要素を指定してください。

でもWordPressでコーポレートサイトなどを構築している場合は、「トップページ > ブログ > 検索結果ページ」という感じで、トップページと検索結果ページの間に投稿ページ（記事一覧ページ、ブログトップページ）が入る方が構造的に自然かと思います。

パンくずリスト系のプラグイン（Breadcrumb NavXT）とかであれば設定画面からいじれそうだなと思っていましたが、案外できなかったのでfunctions.phpでカスタマイズしました。

検索結果ページのパンくずリストに投稿ページ（記事一覧）の階層を追加する方法

テーマのfunctuons.phpに以下を追記してください。

/* 検索結果ページのパンくずリストにブログ（投稿ページ）という階層を追加
---------------------------------------------------------- */
function bcn_add($bcnObj) {
	if (is_search()) { //検索結果ページ
		$bcnObj->add(new bcn_breadcrumb('ブログ', null, array('archive'), home_url('/blog/'), null, true));
		$trail_tmp = clone $bcnObj->trail[1];
		$bcnObj->trail[1] = clone $bcnObj->trail[2];
		$bcnObj->trail[2] = $trail_tmp;    
	} 
	return $bcnObj;    
}
add_action('bcn_after_fill', 'bcn_add');

4行目の「ブログ」はパンくずリストの階層として表示させたいテキスト、「/blog/」はそこからリンクさせたいURLのスラッグを指定します。

検索結果ページのパンくずリストに投稿ページが表示されない理由

ここからは余談ですが、WordPressサイトの検索結果ページで、なぜパンくずリストが「トップページ > 検索結果ページ」という構造になるのかについて。

これはしっかりリサーチした訳じゃなくて、僕の中で「おそらくこういうことだろう」と思っているという話なのですが、WordPressのデフォルトの構造が最新の投稿から一覧表示されるものになっているからではないかと思います。

つまりWordPressサイトのトップ＝ブログトップページ（最新の投稿が一覧表示されるページ）として運用するのが標準とされているため、パンくずリストも「トップページ > 検索結果ページ」となるわけです。

またWordPressサイトで記事検索をかけると投稿だけでなく固定ページも検索対象となりますが、これもWordPressをデフォルトの構造で運用するケースを想定しているからではないかと思われます。

ただ、WordPressを使ってコーポレートサイトのような設計のサイトを構築する場合は、トップページとブログトップは別個になっていて、検索結果から固定ページ（コーポレートサイトの下層ページ）は除外した方が都合がいいケースも少なくないです。

本来であればダッシュボードの「設定」→「表示設定」にある「ホームページの表示」で「固定ページ」を選択した場合は、階層構造も「トップページ > ブログ > 検索結果ページ」というようにトップページ（ホームページ）とブログ（投稿ページ）も階層化してくれればいいのですが、現状そうはなっていないので都度調整するしかなさそうです。

ちなみに検索対象から固定ページを除外する方法は、こちらの『WordPressの検索で投稿のみを検索対象にする』という記事で紹介していますので、合わせてどうぞ。

functions.phpに以下を追加します。

//未来の日付の投稿を公開にする
function bw_wp_insert_post_data( $data ) {
	if ( $data['post_type'] == 'guide' && $data['post_status'] == 'future' ){
		$data['post_status'] = 'publish';
	}
	return $data;
};
add_filter( 'wp_insert_post_data', 'my_wp_insert_post_data' );

上記ソースコード追加以降、未来の日付で作成した投稿を公開状態にできるようになります。

すでに作成済みの投稿については、手動で公開にする必要があるので、そこだけ注意でお願いします。