サイト制作のポイント・まとめ(4)事業用サイトのWPカスタマイズ編

事業用サイト制作「CREATE ACCORDウェブサイト&ブログサイト(PURPOSE/パーパス)」時に参考にしたページなどをまとめました。
これを見ながらWebサイトが作れる…とまでは言いませんが、困ったときはここを見れば答えやヒントが見つかると思います。参考になりましたら幸いです。

今回は、WordPressおよびWordPressテーマ「SWELL(制作者:株式会社LOOS)」で事業用サイトを作るときに独自でカスタマイズした内容についてです。備忘録目的で作成したページですが、参考になりましたら幸いです。

当サイトは、アフィリエイトプログラム(もしもアフィリエイト、A8.net)とアフィリエイトプログラムサービス(EaseUSアフィリエイトプログラム)に参加しており、アフィリエイト広告(Amazonアソシエイト、楽天アフィリエイトを含む)を掲載しています。そのため、当記事内で広告リンク(アフィリエイト広告リンク)を貼っていますが、記事内容は公平さを心がけております。

ここで紹介している方法は、実際にクリエイトアコードが検討して問題ないと判断したものを取り扱っていますが、このページにある内容を試す際は環境の差異を了承の上で、なるべく自身でも「これは本当に必要なのか?」「シンプルな機能を持ったプラグインで対応できないか?」「このソースは問題なく使えるのか?(脆弱性がないか、バージョンアップ時に自身で対応できるか)」をご検討いただいた上でご利用いただくことを強く推奨します。特に親テーマのテンプレートを直接カスタマイズすることは上書きされてしまうことや正しい状態が分からなくなることから非推奨です。また、なるべくなら子テーマを作ることも避けた方が良く、WordPressのfunctions.phpはカスタマイズのためのファイルですが自身で適切に管理できることが前提であることをご留意ください。(同様にソースファイル管理用のプラグインを使ったカスタマイズも、自身で適切に管理できることが前提です)

目次

独自カスタマイズ編

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のデザインに寄せる形で余白(スペース)等を調整したり、色等を変えるだけでも唐突感や違和感は軽減されます。

カスタマイズ方法(下準備)
  1. 子テーマを用意します。
  2. 「archive-term.php」「page.php」「search.php」「single.php」のファイルをコピーして子テーマにアップロードします。
「archive-term.php」「page.php」「search.php」の修正箇所(articleタグ追加)
  1. mainタグと最初のdivタグの間にarticleタグ(開始)を追加する
  2. mainの閉じタグの上にarticle閉じタグを追加する

【2023年9月21日追記】
PR表記が必要になったので、page.phpも更新されています。
今回のように、修正が入ることも考慮して、大きな変更点や追加点があるときは特に気をつけて確認しましょう。

「archive-term.php」「search.php」の修正箇所(headerタグ追加)
  1. 最初のdivタグの下にheader(開始)タグを追加する
  2. 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」)をコメントアウトするだけです。

【2023年9月21日追記】
PR表記が必要になったので、page.phpも更新されています。
今回のように、修正が入ることも考慮して、大きな変更点や追加点があるときは特に気をつけて確認しましょう。

「page.php」「search.php」「single.php」の修正箇所(footerタグ追加)

(注)ブログパーツのショートコードを呼び出ししてブログパーツ内でfooterタグ含めてコンテンツを用意した方が管理画面上で修正ができるようになるので、ブログパーツを推奨します。

article閉じタグの上にページフッターのコンテンツを追記する(echo do_shortcodeでショートコードを呼び出せる。分からない人は「do_shortcode」で検索してみよう)

【2023年9月21日追記】
PR表記が必要になったので、page.phpも更新されています。
今回のように、修正が入ることも考慮して、大きな変更点や追加点があるときは特に気をつけて確認しましょう。

「archive-term.php」の修正箇所(footerタグ追加)

上の方に説明文・アイキャッチの表示領域があるので、独自コンテンツとしては意識せず、footerの追加だけを意識する。

  1. ブログパーツの呼び出し領域があるが、ページの上の方にあるため、上のブログパーツの呼び出し領域(処理部分)をコピーしてコメントアウトする。
  2. CSSクラスの「~Content」のdiv閉じタグの上に1でコピーしたブログパーツの呼び出し処理を貼り付ける。

パンくずリストの差し替え

SWELLと見た目の仕様を合わせるため、予めSWELLで作っておいて、HTMLソースをコピーしておくとCSSクラスの設定がしやすいです。

「header.php」の修正箇所

最初に

本来は見た目と構造化データは同じであることが望ましいが、パンくずリストは見た目のパンくずリストが非表示なトップページも構造化データが表示される。見た目を表示する必要がないことと構造化データ側で非表示することができないので、この一点については妥協している。(カスタマイズ方法があるなら知りたいが、無理に修正しても保守管理の都合で支障が出るなら無理に対応しない方が良いという考えです)

  1. 「ぱんくず」というコメントまたは「parts/breadcrumb」があれば、その部分をコメントアウトする
  2. 以下のソースをその下に貼り付ける
<?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. 親カテゴリーと同じスラッグの固定ページを用意する
  2. 通常のブログは1の子カテゴリーとして作成する

「parts/header/header_contents.php」のカスタマイズ

「URLにブログサイトとして扱う親カテゴリーのスラッグが入っているか否か」で判別します。
対応手順は以下の通りです。

  1. 表示を切り替えたい要素の手前でIFで囲む
  2. 1と同じ要領で切り替えたいものをIFで囲む
  3. 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. 親カテゴリーと同じスラッグの固定ページを用意する
  2. 通常のブログは1の子カテゴリーとして作成する

「URLにブログサイトとして扱う親カテゴリーのスラッグが入っているか否か」で判別します。
対応手順は以下の通りです。

  1. 表示を切り替えたい要素の手前でIFで囲む
  2. 1と同じ要領で切り替えたいものをIFで囲む
  3. 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. 1の中にカバーを設置(背景となる画像は適当に設定)
  3. 2の中にフルワイドを設置(コンテンツサイズの横幅はサイト幅に設定)
  4. カラム・見出し・段落等のコンテンツを設置(見出しはH2から)
  5. 見出し・段落をグループで囲む
  6. 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コンテンツサポート」サービスで皆様のカスタマイズをサポートします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

サイト運営者

クリエイトアコード

ホームページリニューアル・制作・改善+SEO・Web集客のお手伝い屋さん【Web技術サポーター&Webコンテンツサポーター】

ソフトウェア&ゲーム開発会社でプランナーとして従事しながら、ディレクション・マネージメント、資料作成の知識を6年かけて実践形式で学ぶ。その後はリサイクルショップのWebサイト担当者として従事しつつ、5年半かけてSEOやWordPressの実践形式での研究を深めた。2020年に転職をした会社でも、兼業フリーランスとしての活動でも、SEOやWordPressとディレクションやマネージメントの知識を活用し続け、知識と技術の向上に努めていたが、様々な人のお悩み解決をしていきたいという思いが強くなったため、2022年5月に専業フリーランスになり、累計で9年以上実践し続けたSEOとWebサイト制作の知識・経験・技術を活かし、サービス向上に奮闘しながら「人と人を調和し、創造を支援する」ことを目的に「訪問者に届けるコンテンツを作る」お手伝いをするための活動をしている。

ソフトウェア&ゲーム開発会社時代に「抑うつ状態」と診断され、数年かけて寛解。寛解後の体力向上と独自の認知療法は今も続けている。無理をした働き方をしたために自律神経のバランスが乱れやすいこと、精神的にダメージを負ったこともあり、同じような人が苦しまずに働くことができるよう、自身を実験台に無理をしない働き方の確立を目指している。


ご相談・お問い合わせ

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

資料ダウンロード

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

目次