• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / WordPressを自作テーマで作ることで発生する様々な問題

WordPressを自作テーマで作ることで発生する様々な問題

池田祐太郎 | 2021年11月5日 公開 コメントを書く

以前、WordPressのテーマ作成の際の種類について書きました。

WordPressのテーマはオリジナル、無料、有料どれがいいのか

その中で、自作テーマ(オリジナルテーマ)は色々な理由からあまりおすすめできないと書きました。今回はもう少し掘り下げて、自作テーマで作ることでどんな問題があるのか具体例を上げてご紹介します。

目次

  • 1 WordPress初心者にはハードルが高い自作テーマ作り
  • 2 wp_headとwp_footerの書き忘れ
  • 3 必要なテンプレートファイルが用意されていない
  • 4 PC/スマホだけではなくあらゆるデバイスに対応した完全レスポンシブ対応
  • 5 WordPressテーマの自作は慎重に

WordPress初心者にはハードルが高い自作テーマ作り

WordPressでウェブサイトを作る方法としては用意されているテーマを使う方がメジャーですが、「完全オリジナルデザインで作りたい」「作成したHTMLをそのままWordPress化したい」という場合は、テーマを自作してオリジナルテーマとして設定して作る方法が一般的です。

この方法はウェブで検索すればたくさん出てきますが、必要最低限のテンプレートファイルがあるか、正しいテンプレートタグを使えているか、ブロックエディタにどこまで対応するのか等、ケアしなければいけないことがたくさんあるため、WordPressにまだ慣れ親しんでいない人には簡単ではありません。

いくつか例を挙げます。

wp_headとwp_footerの書き忘れ

WordPressを使う上でこのテンプレートタグが入っていないと正常に動作しないため実質不可欠です。「こんな重要なタグ書き忘れるなんてありえない」と思いますよね。しかし、今までにwp_headとwp_footerが入っていなかったオリジナルテーマのサイトというのがいくつかありました。公式テーマや有料テーマを使わずに(使えずに)オリジナルテーマでの制作の判断となったケースに多いように思えます。デザインにこだわっていたり、ウェブ担当者が独学で構築した場合等が想定されます。

これらを書いていないWordPressはプラグインが正しく動作しなかったり、必要なコードが生成されなかったり、ログイン時に上部に表示されるアドミンバーが表示されない等、様々な不具合を引き起こします。

ログイン時にページ上部に表示されるアドミンバー(管理バー)

「WordPress オリジナルテーマ 作り方」のようなキーワードで検索すると作成方法を丁寧に紹介してくれている記事が出てきて、たいていその中にwp_headとwp_footerを追加するよう解説されているはずです。

必要なテンプレートファイルが用意されていない

WordPressの最小構成ファイルは index.php と style.css の2つのファイルです。これがあればテーマとして認識できます。しかし、これだけではテーマとして機能しないことがほとんどなので、その他に主要な必要ファイルを用意します。例えば以下のようなテンプレートファイルです。

  • single.php: 記事詳細ページ用
  • archive.php: 一覧ページ用(カテゴリー、タグ、ユーザー毎、日付といったアーカイブページ)
  • page.php: 固定ページ用
  • 404.php: 目的のページがなかったときページ用
  • search.php: 検索結果一覧ページ用

WordPressがどのテンプレートファイルを呼び出すかについては階層の概観図がわかりやすいです。

ファイル:wp-template-hierarchy.jpg – WordPress Codex 日本語版

概観図を見てもらえれば分かる通り、どのページも該当するテンプレートファイルがなければ最終的には index.php を読みに行きます。404エラーでも検索結果でも index.php 内に条件分岐の記述がされていればテンプレートファイルとしての機能は果たしますが、一つのファイルでいくつも条件分岐があるのはわかりづらいですし、運用もしづらいです。

記事詳細ページ用の single.php 、固定ページ用の page.php 等は用意されていても、一覧ページ用としてはカテゴリーページ用のテンプレートファイル category.php しかないためタグや日付一覧ページ用のテンプレートファイルがなかったり、404エラーや検索結果ページ用のテンプレートファイルがなく、ページ自体表示ができないで公開・運用されているウェブサイトも少なからず見てきました。

これはスターターテンプレートを使って構築することでクリアできる問題です。冒頭で紹介した記事にも書きましたのでご参照ください。

PC/スマホだけではなくあらゆるデバイスに対応した完全レスポンシブ対応

自作テーマの場合、ウェブデザインを作成し、HTMLコーディングし、WordPress化するというフローになることが特にクライアント向けにWordPressを構築している場合は多くなると思います。この場合はデザイン上、デスクトップとモバイルは作成してもタブレットデザインまでは作成する余裕がないということがよくあります。そうすると、コーディング時にタブレットに相当する横幅の見た目が定義されていないために予期しない崩れが発生する可能性が高まります。

また、モバイル用のデザインをCSSで定義しても、例えば iPhone SEの小さめのデバイス(第一世代は4.0インチ)や、Max系の特定のデバイス(iPhone 13 Pro Maxは6.7インチ)でも大きく異なるため、崩れる、または同じモバイル用デザインが再現できないという問題も往々にして発生します。

左: iPhone SE(320px) / 右: iPhone 13 Pro Max (428px)

例を挙げます。これは当サイトの各モバイルデバイスでの見た目を比較した画像ですが、大きな崩れはないものの、トップの説明文章の左右の余白が詰まっているのと余裕があるので違いがあるのがわかります。これは横幅ピッタリに合うようにデザインしていて、デバイス幅の違いによりデザインが再現できない場合に崩れたり、予期しない改行が発生する可能性があることを指します。

多くのテーマは完全レスポンシブに対応しています。素晴らしい技術者が作成してくればテーマを使わない手はありません。「デザインを作成してからコーディング&WordPress化」という制作フローではなくなりますが、そういったテーマを選択した上で(ページビルダーを利用も有り)、必要なデザインカスタマイズを行うという方法を採用することで、崩れ等が発生するリスクを極限まで少なくでき、工数を少なくしてレスポンシブ対応できるという大きなメリットがあります。

WordPressテーマの自作は慎重に

  • WordPress 5.0から有効になったブロックエディタや、WordPress 5.8から有効になったウィジェットのブロック化への対応
  • PHPのアップデートやWordPressのアップデートに合わせて、エラーや非推奨となるコードを変更
  • 構造化データのHTMLマークアップへの対応(Googleの検索結果への最適化)

など、他にも対応すべき箇所・気をつけるべき点があります。

ウェブは時間とともに進化をしていて、それに合わせてサイト側も進化しないと取り残されてしまいます。すべてに人員を割いて対応できる体力がある場合はいいですが、現実はそうもいかないため、優秀なテーマに乗っかりつつ、必要なデザインを対応する、という方法が10年以上WordPressに関わり長年テーマを作成してきた現時点の見解です。

この先手法は変わるかもしれませんが、その時その時に合った最適なやり方を選択し、変化して時代に対応していくのが懸命だと考えています。

WordPressのオリジナルテーマ作成は構造や出力がどうなっているのかがよくわかるいい方法です。これからWordPressを学んでいきたいという場合は練習に是非お勧めします。一方、公開サイトでの判断は今回ご紹介したデメリットや注意点を踏まえた上で、自作テーマにするのかどうかを慎重に考えていただければと思います。テーマ変更は簡単にできませんし、少なくとも数年単位での運用になりますからね。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:WordPressテーマ

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

WordPress 5.9から始まるフルサイト編集はサイト制作のワークフローを大きく変える可能性
2021年12月10日
タグ: Gutenberg, WordPressテーマ, フルサイト編集
カテゴリー: WordPress
WordPressのテーマはオリジナル、無料、有料どれがいいのか
2021年9月17日
タグ: WordPressテーマ
カテゴリー: WordPress
システム会社向けのWordPressテーマ国内海外6サイト(無料・有料)
2017年6月12日
タグ: WordPressテーマ
カテゴリー: システム会社

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.