サイト制作のポイント・まとめ(4)事業用サイトのWPカスタマイズ編
事業用サイト制作「CREATE ACCORDウェブサイト&ブログサイト(PURPOSE/パーパス)」時に参考にしたページなどをまとめました。
これを見ながらWebサイトが作れる…とまでは言いませんが、困ったときはここを見れば答えやヒントが見つかると思います。参考になりましたら幸いです。
今回は、WordPressおよびWordPressテーマ「SWELL(制作者:株式会社LOOS)」で事業用サイトを作るときに独自でカスタマイズした内容についてです。備忘録目的で作成したページですが、参考になりましたら幸いです。



独自カスタマイズ編
PHPファイルの修正が増えるので、phpのエラーチェックができるテキストエディタを使うのがオススメです。
PHPのサンプルソース内の1行目はPHPファイルの開始宣言なので、2行目からコピーして使用してくださいね。
セクショニングコンテンツ(セクション関連)のカスタマイズ
まず、使い方と、どうしてカスタマイズすることにしたかの比較が必要だと考えたのでまとめました。
私は基本的に以下で統一してセクショニングコンテンツ(セクション関連)を使用しています。
クリエイトアコード(夜空きり)のセクショニングコンテンツ(セクション関連)の使用について
用途・目的 | HTMLタグ名 |
---|---|
サイト全体のヘッダー | header |
文章の主要な内容 | main |
内容が単体で完結するセクション | article |
ページのヘッダー(h1) | header |
セクション(h2) | section |
ページのフッター | footer |
サイト全体のフッター | footer |
(注)sectionは入れ子ができるので、自由に作成可能な部分はheader以下の全体をsectionで囲っておき、中身は「sectionがあってもなくても構わないとする」「見出しはh2から利用するルールで対応してほしい、とお願いする」で対応するようにしていました。
(注)headerとfooterはページ内に複数回使用可能です。
SWELLのセクショニングコンテンツ(セクション関連)の使用について
SWELLは私の使用方法とは異なっていました。
セクショニングコンテンツ(セクション関連)の使用については、それぞれ解釈が異なる部分なので、解釈が異なっている事自体は問題なかったのですが、個人的にトップページ以外で許容できないことがあったため、カスタマイズすることにしました。
(注)トップページは分かりやすいので無理に合わせないことにしたため、何もしていません。
トップページ(用途・目的) | HTMLタグ名 |
---|---|
サイト全体のヘッダー | header (注)ロゴ(サイト名)がh1の役割を担っている。 |
文章の主要な内容 | main |
内容が単体で完結するセクション | なし (注)内容が単体で完結するわけではないと解釈したと考えられる。 |
ページのヘッダー(h1) | なし (注)サイト全体のヘッダーの中にh1があるので、文章構造上、ここにh1はない方が分かりやすいと思います。(h1があるなら、articleタグとページのフッターもあった方が良いが、この構造でそれをすることで逆に分かりづらくなる懸念がある) |
セクション(h2) | 不明 (注)自由にできる領域なので、sectionタグがないこともある (注)同じく、自由にできる領域なので、h1・h3~h6が使われることもある |
ページのフッター | なし |
サイト全体のフッター | footer |
トップページ以外の固定ページ(用途・目的) | HTMLタグ名 |
---|---|
サイト全体のヘッダー | header |
文章の主要な内容 | main |
内容が単体で完結するセクション | なし (注)内容が単体で完結するわけではないと解釈したと考えられる。 |
ページのヘッダー(h1) | 不明 (注)自由にできる領域なので、h1がないこともある ⇒デフォルトの状態では「h1はheaderで囲まれていない」ので、問題と考えている。 |
セクション(h2) | 不明 (注)自由にできる領域なので、sectionタグがないこともある (注)同じく、自由にできる領域なので、h1・h3~h6が使われることもある |
ページのフッター | なし ⇒著者情報をページのフッター(footer)として載せた方が良いが、グループ機能で追加することはできるので問題とは考えていない。 |
サイト全体のフッター | footer |
トップページ以外の固定ページ(用途・目的) | HTMLタグ名 |
---|---|
サイト全体のヘッダー | header |
文章の主要な内容 | main |
内容が単体で完結するセクション | article |
ページのヘッダー(h1) | なし (注)h1はあるが、headerで囲まれているわけではない。 ⇒デフォルトの状態では「h1はheaderで囲まれていない」ので、問題と考えている。 |
セクション(h2) | 不明 (注)自由にできる領域なので、sectionタグがないこともある (注)同じく、自由にできる領域なので、h1・h3~h6が使われることもある |
ページのフッター | なし ⇒著者情報をページのフッター(footer)として載せた方が良いが、グループ機能で追加することはできるので問題とは考えていない。 (注)余談:SWELLの著者情報はsectionタグで囲まれている。 |
サイト全体のフッター | footer |
テーマをカスタマイズしてセクショニングコンテンツ(セクション関連)をクリエイトアコード(夜空きり)仕様に合わせる
カスタマイズする場合は、後ほどCSSで調整すると良いと思います。
特にSWELLの要素がなくなって独自仕様になったものは、SWELLのデザインに寄せる形で余白(スペース)等を調整したり、色等を変えるだけでも唐突感や違和感は軽減されます。
カスタマイズ方法(下準備)
- 子テーマを用意します。
- 「archive-term.php」「page.php」「search.php」「single.php」のファイルをコピーして子テーマにアップロードします。
「archive-term.php」「page.php」「search.php」の修正箇所(articleタグ追加)
- mainタグと最初のdivタグの間にarticleタグ(開始)を追加する
- mainの閉じタグの上にarticle閉じタグを追加する
「archive-term.php」「search.php」の修正箇所(headerタグ追加)
- 最初のdivタグの下にheader(開始)タグを追加する
- CSSクラスの「~Content」のdivタグの上にheader閉じタグを追加する
「parts/single/post_head.php」の修正箇所(h1削除)【旧:「single.php」の修正箇所(h1削除)】
コンテンツ内にheaderとh1を追加するので、タイトル周り(h1とタイトル横に表示する日付)をコメントアウトするだけです。
<?php
// PHPコメントアウト方法
//「/*」がコメント開始、「*/」がコメント終了です。
/*
(ここにコメントアウトする要素がある)
*/
【2023年9月21日追記】
PR表記が必要になったので、single.php内で「parts/single/post_head」の呼び出しをコメントアウトで表示しないようにするとPR表記も表示されなくなってしまいます。
「parts/single/post_head」の呼び出しはそのままに、「parts/single/post_head.php」内でh1とタイトル横の日付をコメントアウトで非表示にするやり方の方が良いです。
今回のように、修正が入ることも考慮して、大きな変更点や追加点があるときは特に気をつけて確認しましょう。
(記事一覧では出ていたこともあり、今まで特に気にしていなかったのですが、single.php内で「parts/single/post_head」の呼び出しをコメントアウトで表示しないようにしていたので、カテゴリ・投稿日・更新日の表示が出なくなっていました。表示させた方が良いと思うので、今回を機に修正しています)
「page.php」の修正箇所(h1削除)
コンテンツ内にheaderとh1を追加するので、タイトル周り(「parts/page_head」)をコメントアウトするだけです。
「page.php」「search.php」「single.php」の修正箇所(footerタグ追加)
(注)ブログパーツのショートコードを呼び出ししてブログパーツ内でfooterタグ含めてコンテンツを用意した方が管理画面上で修正ができるようになるので、ブログパーツを推奨します。
article閉じタグの上にページフッターのコンテンツを追記する(echo do_shortcodeでショートコードを呼び出せる。分からない人は「do_shortcode」で検索してみよう)
「archive-term.php」の修正箇所(footerタグ追加)
上の方に説明文・アイキャッチの表示領域があるので、独自コンテンツとしては意識せず、footerの追加だけを意識する。
- ブログパーツの呼び出し領域があるが、ページの上の方にあるため、上のブログパーツの呼び出し領域(処理部分)をコピーしてコメントアウトする。
- CSSクラスの「~Content」のdiv閉じタグの上に1でコピーしたブログパーツの呼び出し処理を貼り付ける。
パンくずリストの差し替え
SWELLと見た目の仕様を合わせるため、予めSWELLで作っておいて、HTMLソースをコピーしておくとCSSクラスの設定がしやすいです。
「header.php」の修正箇所
最初に
本来は見た目と構造化データは同じであることが望ましいが、パンくずリストは見た目のパンくずリストが非表示なトップページも構造化データが表示される。見た目を表示する必要がないことと構造化データ側で非表示することができないので、この一点については妥協している。(カスタマイズ方法があるなら知りたいが、無理に修正しても保守管理の都合で支障が出るなら無理に対応しない方が良いという考えです)
- 「ぱんくず」というコメントまたは「parts/breadcrumb」があれば、その部分をコメントアウトする
- 以下のソースをその下に貼り付ける
<?php
/* breadcrumb Edit */
if (!is_front_page()) {
echo '<div id="breadcrumb" class="p-breadcrumb -bg-on">';
echo '<ol class="p-breadcrumb__list l-container">';
if(function_exists('bcn_display')) {
$breadcrumb_list_data = bcn_display();
}
echo '</ol>';
echo '</div>';
}
/* breadcrumb Edit */
SEO周りのカスタマイズ
SIMPLE SEO PACKを使っていて、インデックスさせないようにしている場合、HOMEにリダイレクトするので、私にとって残る要らないものは「日付別一覧ページ」です。

ただし、以下のようにしないとXMLサイトマップもトップページにリダイレクトされてしまうので注意してください。(サンプルソース参照)
<?php
// WordPress 日付別一覧ページを生成させない(プラグイン同様、HOMEにリダイレクトする)
add_action('template_redirect', function () {
$xml_file_check = $_SERVER['REQUEST_URI'];
if (is_date() && strstr($xml_file_check, '.xml')==false) {
nocache_headers();
wp_safe_redirect(home_url());
exit;
}
});
【後日(2023年6月20日)追記】
その後、「生成させない=ページがない」のだから、ステータスコード含めて404エラーで返した方が良いのでは?と判断して、404エラーで返すようにソースコードを書き換えました。
<?php
// WordPress 日付別一覧ページを生成させない(404エラーで返す)
add_action('template_redirect', function () {
$xml_file_check = $_SERVER['REQUEST_URI'];
if (
is_date() && strstr($xml_file_check, '.xml') == false
) {
nocache_headers();
header('HTTP/1.0 404 Not Found');
include(TEMPLATEPATH . '/404.php');
exit;
}
});
ブログサイトの作成
SWELLと見た目の仕様を合わせるため、必要なパーツのHTMLソースをコピーしておくと追加がしやすいです。
準備
- 親カテゴリーと同じスラッグの固定ページを用意する
- 通常のブログは1の子カテゴリーとして作成する
「parts/header/header_contents.php」のカスタマイズ
「URLにブログサイトとして扱う親カテゴリーのスラッグが入っているか否か」で判別します。
対応手順は以下の通りです。
- 表示を切り替えたい要素の手前でIFで囲む
- 1と同じ要領で切り替えたいものをIFで囲む
- elseifで「URLがブログサイトだったら」のところにブログサイト用のコンテンツを設置する
<?php
/* Not Blog Style */
$blog_style_check = $_SERVER['REQUEST_URI'];
if (strstr($blog_style_check, 'blog-purpose')==false) {
?>
<?php echo SWELL_PARTS::head_logo(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped?>
<?php
} elseif (strstr($blog_style_check, 'blog-purpose') !==false) {
/* Blog Style */
echo do_shortcode('');
}
「parts/header/header_contents.php」のカスタマイズ
準備
- 親カテゴリーと同じスラッグの固定ページを用意する
- 通常のブログは1の子カテゴリーとして作成する
「URLにブログサイトとして扱う親カテゴリーのスラッグが入っているか否か」で判別します。
対応手順は以下の通りです。
- 表示を切り替えたい要素の手前でIFで囲む
- 1と同じ要領で切り替えたいものをIFで囲む
- elseifで「URLがブログサイトだったら」のところにブログサイト用のコンテンツを設置する
<?php
/* Not Blog Style */
$blog_style_check = $_SERVER['REQUEST_URI'];
if (strstr($blog_style_check, 'blog-purpose')==false) {
?>
<?php echo SWELL_PARTS::head_logo(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped?>
<?php
} elseif (strstr($blog_style_check, 'blog-purpose') !==false) {
/* Blog Style */
echo do_shortcode('');
}
フッターレイアウト編
ブログパーツで作成。
作り方としては、リスト形式でメニューを作っています。
私の場合はメニュー数が多いこともあり。SWELLのリッチカラムを使用して並べてスマートフォンを1列にしようと考えたのですが、
- 縦にものすごく長くなってしまうこと
- あえて表示を少なくする必要もないと考えたこと
- サイトマップに誘導する程の信用が得られていないと考えたため、フッターは「可能な限り全メニューを掲載した方が良い」と考えたこと
から、スマートフォンでも2列にしています。
幸いにも、2列で許容できない程ではなかったです。
固定ページ(トップページ)のメインビジュアル(トップビジュアル)の作成(夜空きり仕様編)編
SWELLのデフォルトの仕様の場合、メインビジュアル(トップビジュアル)はmainの上に設置されます。
mainの中に設置してsectionにしたかったので、以下のように対応しました。
- フルワイドを設置(コンテンツサイズの横幅はフルワイドに設定)
- 1の中にカバーを設置(背景となる画像は適当に設定)
- 2の中にフルワイドを設置(コンテンツサイズの横幅はサイト幅に設定)
- カラム・見出し・段落等のコンテンツを設置(見出しはH2から)
- 見出し・段落をグループで囲む
- 5のグループの設定「高度な設定」のHTML要素をsectionを指定する
【2022年10月13日追記】
ただし、この方法で実装すると、コアウェブバイタル(Core Web Vitals)のCLSの数値が下がるので、特に気にならない人は、このカスタマイズで対応しない方が良いです。
回避方法は、テキスト中央配置+区切り線のように、フルワイドを使わないで対応すること。
画像も全幅にすると横幅が大きくなるので、ファイルサイズも増えやすくなる上に文字も見づらくなりやすいので、どうしても画像を設置したいとき以外は背景画像を使わない方が無難です。
カバーの「幅広」であれば、画像を使っても問題はないのですが、カッコ良くできないときは同じく避ける方が無難です……。
制作事例ページにCLSのことについて追記しました。
固定ページ(トップページ)・投稿ページの作成編
WordPress投稿画面のリスト表示(パソコンで言う、左上の方にある三本の横線が縦に斜めに並んでいるアイコン)が便利すぎて。
度重なるバージョンアップにより、グループの挙動が改善されたこともあり、グループ機能の「高度な設定」のHTML要素でsection等の指定と変更等の対応が楽になりました。
スマートフォンだと改行(brタグ)しづらいのでブログを書くときはPC(または外付けキーボードで対応)の方が楽ですが、以前よりも書きやすくなった印象です。その後、スマートフォンでの改行の仕方を見つけたので、スマートフォンでも書きやすいと思います(が、長文を書きたいとは思わないかなぁ…苦笑)
スマートフォンでの改行の仕方を見つけたはずなんだけど、試してできなかったはず。やり方が分かったときにやり方も載せるため、一旦削除。(2023/09/21)
ページのフッター(footer)は自動挿入されるようにしたので、ページのヘッダー(header)とセクションは自分で対応します。
やり方は、前述「固定ページ(トップページ)のメインビジュアル(トップビジュアル)の作成」と同じように必要なセクションの範囲をグループで囲んで、必要な要素に設定するだけです。
ソースコードの紹介編
ソースコードを載せることはないと思っていたのですが、最終的にカスタマイズ記事を書いていたら必要になったので、WordPressの既存のコードブロックを使ったところ、罫線等の装飾がなく、ソースコードのベタ書き(一色で文章と同じ)で分かりにくいと感じたため、「Highlighting Code Block」プラグインを導入しました。

独自カスタマイズをするときの注意事項
親テーマに直接編集しないように注意してください。
テーマのバージョンアップデートで変更した内容が消えてしまいます。
子テーマでカスタマイズした場合、親テーマのファイルの変更点が受け継がれません。
必ず親テーマを更新してから、子テーマを再カスタマイズしてください。
(注)カスタマイズするとき、以前のカスタマイズが結構前になると何をカスタマイズしたのか忘れていることがあるので、コメントを残すことをオススメします。
(注)functions.phpは子テーマ用に最適化されているので、再カスタマイズは原則不要です。
「毎回だと大変でやりたくないかも…PHPは結構分かるよ!」という人は、テキスト比較ツールを使って変更点があれば反映するやり方でもOKです!
私は「テキスト比較ツール difff《デュフフ》」をよく利用しています。
必要なときはテーマ作者からアナウンスがあるはずなので、テーマのアップデートの前に、テーマのWebサイト・テーマ作者のTwitter等で確認することが望ましいです。
なるべくならカスタマイズしないで使うことをオススメしますが、希望通りにならないときはカスタマイズできるのがWordPressの強みでもあると考えているので、必要以上に恐れずにチャレンジしてみてくださいね!
困ったときは、クリエイトアコード(夜空きり)にご相談ください。「Web技術サポート・Webコンテンツサポート」サービスで皆様のカスタマイズをサポートします!

ご相談・お問い合わせ
ホームページ制作・リニューアル・運用・SEO・Web集客、Webマーケティング・Webサイト制作技術・タスク・スケジュール・プロジェクト管理や業務改善のお悩みなどを遠慮なくご相談ください。

資料ダウンロード
サービスのご利用を社内で検討したい方のために、実績やサービス概要、料金表などのクリエイトアコードの案内資料をPDFでダウンロードすることができます。ご自由にダウンロードください。