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

セクショニングコンテンツ（セクション関連）のカスタマイズ

まず、使い方と、どうしてカスタマイズすることにしたかの比較が必要だと考えたのでまとめました。

私は基本的に以下で統一してセクショニングコンテンツ（セクション関連）を使用しています。

クリエイトアコード（夜空きり）のセクショニングコンテンツ（セクション関連）の使用について

(注)sectionは入れ子ができるので、自由に作成可能な部分はheader以下の全体をsectionで囲っておき、中身は「sectionがあってもなくても構わないとする」「見出しはh2から利用するルールで対応してほしい、とお願いする」で対応するようにしていました。

(注)headerとfooterはページ内に複数回使用可能です。

SWELLのセクショニングコンテンツ（セクション関連）の使用について

SWELLは私の使用方法とは異なっていました。
セクショニングコンテンツ（セクション関連）の使用については、それぞれ解釈が異なる部分なので、解釈が異なっている事自体は問題なかったのですが、個人的にトップページ以外で許容できないことがあったため、カスタマイズすることにしました。

(注)トップページは分かりやすいので無理に合わせないことにしたため、何もしていません。

テーマをカスタマイズしてセクショニングコンテンツ（セクション関連）をクリエイトアコード（夜空きり）仕様に合わせる

カスタマイズする場合は、後ほどCSSで調整すると良いと思います。
特にSWELLの要素がなくなって独自仕様になったものは、SWELLのデザインに寄せる形で余白（スペース）等を調整したり、色等を変えるだけでも唐突感や違和感は軽減されます。

「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 */

ブログサイトの作成

SWELLと見た目の仕様を合わせるため、必要なパーツのHTMLソースをコピーしておくと追加がしやすいです。

「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」のカスタマイズ

「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('
');
}