パントレ開発部

【WordPress】テーマを自作する上での注意点

雑記
更新日
Programming

　当サイトは WordPress で作成しており、自作テーマを使っています。自作テーマを使う上での注意点について、まとめたいと思います。（いわゆる内部 SEO 対策ですが、随時加筆予定です）

テーマの作り方

　まずはテーマの作り方についてです。WordPress は PHP で構成されているので、PHP の勉強が必須になります。それに加えて、WordPress 独自の関数が大量にあるので、それを色々と触ってみるのが良いかと思います。

　このページをご覧になっているということは、テーマの自作に至っているので、フロントエンドの知識などお持ちの方が多いかと思いますが、以下の順番で勉強していくと良いかと思います。

HTML → CSS → JavaScript → (jQuery) → PHP

　jQuery は WordPress との親和性も良いので、軽く触ってみるといいかもしれません。上記の言語はテーマを自作する上ですべて必須なので、触った経験がない方は一冊参考書をさらっと写経してみることをおすすめします。WordPress の便利な関数がたくさんあるので、そこまで深い知識は必要ありません。データベース上で自作テーブルなどを作成したりしない場合は、PHP も if / for / while ぐらいが使えれば問題ないです。

　上記の言語の勉強が一通り終わったら、WordPress の作法を勉強します。私は以下の３冊を写経しました。

　個人的なオススメは三冊目の「WordPressオリジナルテーマ制作入門」です。当サイトの自作テーマも、この本で作ったテーマをベースにしています（跡形もありませんが）。

　あと当然ですが、ある程度 WordPress での執筆経験があることが望ましいです。プラグインや子テーマなど、独特な仕組みがありますので。

　上記の勉強が終わったあとは、ひたすらネット検索しながらテーマ制作を進めていく感じになると思います。WordPress はネット上に情報が多いので、調べれば大体のことは解決します。
　

自作テーマの注意点

　次に、自作テーマの注意点です。一番大事なことは、自作テーマを導入した WordPress サイトを Google Search Console と、Bing Webmaster Tools に登録しておくことです。検索エンジンにとって良くないことがある場合（内部 SEO 対策が不十分である場合）、注意が表示されるので、ソースコードを直していく上での参考になります。Google Search Console の場合は「ページのインデックス登録」を、Bing Webmaster Tools の場合は「URL検査」を定期的に確認すると良いです。

　以下、私の自作テーマについて検索エンジンから指摘された内容を列挙しておきます。

h1タグは1ページ1つ

　基礎的な内容になりますが、h1 タグは 1 ページにつき 1 つです。ヘッダーを共通化していると、フロントページで h1 タグが無かったり、逆に投稿ページで複数の h1 タグが出力されたりすることがあります。適宜条件分岐をおこない、例えばフロントページではサイト名を h1 タグで囲むなどして、どのページも h1 タグが 1 つになるようにします。
　また、PHP でヘッダーやサイドバーを共通化していると忘れがちになるのですが、全ての h タグの中で、h1 が先頭に来るようにします（基本的に h タグは入れ子構造なので）。

meta description を適切な長さに

　検索エンジンのクローラーは、記述の最初の 150-160 文字しか検索結果ページに表示しません。長すぎると検索ユーザーはテキストをすべて見ることができない場合があり、逆に短すぎると検索エンジンはページにある他のテキストを追加する場合もあります。ページソース（head 内）の meta description タグの説明を 25 文字から 160 文字に設定します。
　他にもページタイトルは適切な長さにすべき、などもありますが、タグ一覧ページやフロントページでは実現が難しいため割愛します。

<meta name="description" content="25~160文字">

適切な canonical タグをおく

　これは場合によりますが、タグ一覧ページや、カテゴリ一覧ページ、著者ページなどのアーカイブページは複数ページに及ぶことがあります。ページソース（head 内）に canonical タグを設置し、1ページ目以外は重複コンテンツと明示することで、2ページ目以降をインデックスさせにくくできます。（私の自作テーマの場合、アーカイブにソート機能があるので（参考）、より重複コンテンツとみなされるページが増えてしまっていました。）

<link rel="canonical" href="アーカイブ1ページ目のURL"/>

適切な noindex を使用する

　上記の canonical タグと似ていますが、インデックスさせたくない記事がある場合は、noindex 属性を設定するようにしておくとよいかと思います。（そもそも、noindex 属性が要求される状況があまり望ましくないかと思いますが。）

<meta name="robots" content="noindex">

　検索エンジンに、ページ内のリンクも辿らせたくないよう指示する場合は、以下のように記述します。（こう記述するケースのほうが多いかもしれません。）

<meta name="robots" content="noindex, nofollow">

パンくずリストは作法に従う

　パンくずリストは内部 SEO 的にも重要ですが、JSON-LD 形式、あるいは microdata 形式で記述しないと、検索エンジンは認識してくれません。後者が HTML だけで済むため導入しやすいかと思いますが、決められた HTML 階層、プロパティのもとコードを書く必要があります。

画像の alt 属性は可能な限り書く

　img タグ の alt 属性はテーマ内で可能な限り出力しておくようにしておいたほうが良いです。


　その他、特に検索エンジンからは指摘されませんでしたが、テーマを作成した後に気づいたこともまとめておきます。

OGP を設定する

　OGPとは「Open Graph Protcol」の略で、Facebook や Twitter、Line などの SNS でシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを伝えるための HTML 要素です。SEO とは少し違いますが、サイトの URL が SNS で共有されることも多い現代、設定しておくべき項目の一つかと思います。
　例えば、当サイトフロントページでは OGP のために以下のHTMLを出力しています。

<meta property="og:url" content="https://pancake-trail.site"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="パントレ"/>
<meta property="og:description" content="海外旅行のための情報サイト（ 旅ブログ/YouTube のまとめサイト）"/>
<meta property="og:site_name" content="パントレ"/>
<meta property="og:image" content="https://pancake-trail.site/wp-content/uploads/2024/04/DSC_2418_00001-1-scaled-e1713623139631.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta property="twitter:description" content="海外旅行のための情報サイト（ 旅ブログ/YouTube のまとめサイト）"/>
<meta property="twitter:title" content="パントレ"/>
<meta property="twitter:url" content="https://pancake-trail.site"/>
<meta name="twitter:image" content="https://pancake-trail.site/wp-content/uploads/2024/04/DSC_2418_00001-1-scaled-e1713623139631.jpg"/>
<meta name="twitter:domain" content="パントレ"/>
<meta name="twitter:creator" content="@pantredeveloper"/>
<meta name="twitter:site" content="@pantredeveloper"/>

time タグをつける

　検索エンジンに記事の鮮度を伝えたほうが有利なため、time タグ（投稿日と更新日）を出力するようにします。ここで datetime 属性は基本的に Y-m-d じゃないと検索エンジンが認識してくれないので要注意です。

投稿日 <time datetime="2024-04-10" itemprop="datepublished">2024年4月10日</time>
更新日 <time datetime="2024-04-20" itemprop="modified">2024年4月20日</time>

CSS/JS を外部ファイルにする

　CSS/JavaScript は外部ファイルにしないと管理が大変なので言うまでもないですが、ページの表示速度向上という意味でも外部ファイル化したほうが良いです。外部ファイル化するとブラウザキャッシュされるようになるので、次に読み込まれる HTML が実質的に短くなり、表示速度が向上します。HTTP リクエストの回数を減らすために、外部ファイルはまとめたほうが良いです。


　ほかにも色々ありましたが忘れました…

　自作テーマはバグとの戦いです。よほどデータベースを触らない限り、自作テーマは使わないほうがいいと思います（Cocoonで良いです）。これが最大の注意点です！（Cocoon 作者のわいひらさんの記事を読んでみてください）
　

少し宣伝

　当サイトは WordPress 自作テーマを用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
　当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！　また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。


　このページが皆様のプログラミングの一助となりますことをお祈りいたします

パントレ開発部

この投稿者の記事一覧をみる