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

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

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

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

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

目次

独自カスタマイズ編

PHPファイルの修正が増えるので、phpのエラーチェックができるテキストエディタを使うのがオススメです。
PHPのサンプルソース内の1行目はPHPファイルの開始宣言なので、2行目からコピーして使用してくださいね。

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

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

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

正直な話をすると、当時、自分が納得のいくように調べていたときも、このあたりは解釈が人によって異なる部分だったので、SWELLのやり方が間違っているとは思っていません。
仕事として自分がメインで使うサイトであり、自分のサイトくらいは自分で面倒が見れると思ったので、対応することにした次第です。(自分のメインサイト以外ではこのあたりのカスタマイズはしていません)

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

トップページ・(トップページ以外の)固定ページ・投稿ページ共通
用途・目的HTMLタグ名
サイト全体のヘッダーheader
文章の主要な内容main
内容が単体で完結するセクションarticle
ページのヘッダー(h1)header
セクション(h2)section
ページのフッターfooter
サイト全体のフッターfooter

(注)sectionは入れ子ができるので、自由に作成可能な部分はheader以下の全体をsectionで囲っておき、中身は「sectionがあってもなくても構わないとする」で対応するようにしていました。(自分自身で運用する場合は「h2はsectionを利用して囲むルールで対応する」で基本的には対応しています。分かりにくいときだけh3を入れ子で対応)

(注)実はheaderとfooterはページ内に複数回使用可能ですが、これなら分かりやすいと思い、使っています。

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

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

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

トップページ
トップページ(用途・目的)HTMLタグ名
サイト全体のヘッダーheader
(注)ロゴ(サイト名)がh1の役割を担っている。headerで囲まれていることからこの部分は問題がないと考えている
文章の主要な内容main
内容が単体で完結するセクションなし
(注)「内容が単体で完結するわけではない」と解釈したため、articleを使わなかったと考えられる
ページのヘッダー(h1)なし
(注)サイト全体のヘッダーの中にh1があり、「内容が単体で完結するセクションがない」以上、ここにh1はない方が分かりやすいと考えています。(h1があるなら、articleタグとページのフッターもあった方が良いが、無理に対応することで逆に分かりづらくなる懸念がある)
トップページとトップページ以外で切り分けても問題はないので、ここはSWELL基準で良いと判断しました。
セクション(h2)なし
(注)SWELLの場合は自由記述の領域のため、特に指定はない
(注)他のサイト・ページでは、この部分は自由にできる領域のためにsectionタグがないこともある。また、使わなくても問題はない。同じく、他のサイト・ページでは、この部分が自由にできる領域のために、h1・h3~h6が使われることもある
ページのフッターなし
(注)「内容が単体で完結するセクションがない」以上、ここにページのフッターはない方が分かりやすいと考えています。
サイト全体のフッターfooter
トップページ以外の固定ページ
トップページ以外の固定ページ(用途・目的)HTMLタグ名
サイト全体のヘッダーheader
文章の主要な内容main
内容が単体で完結するセクションなし
⇒(注)「内容が単体で完結するわけではない」と解釈したため、articleを使わなかったと考えられるが、サイト全体のヘッダーにh1がないのであれば、articleで囲んで「内容が単体で完結するセクション」として扱った方が良いと個人的には考えています。
(注)ただし、これは夜空きりの個人的な解釈のため、解釈次第ではSWELLの標準仕様で何も問題はない(ただ、内容が単体で完結しないことがあるとは考えにくいので、基本的にはarticleで囲んだ方が適切のように思う)
ページのヘッダー(h1)なし(h1の出力はある)
⇒デフォルトの状態で出力されるh1は「h1(ページの主要な内容を示し、タイトルタグの次に重要度が高い見出しタグの最上位)はページのヘッダーに位置する要素だと考えるため、h1をテーマ側で出力するなら、ページのヘッダーとしてheaderで囲んだ方が良いと考える」ことから、個人的にSWELLとの考え方と相違がある。
(注)ただし、これは夜空きりの個人的な解釈のため、解釈次第ではSWELLの標準仕様で何も問題はない(例えば、ページのヘッダーとページのフッターを用意しないケースでは、h1もh2以下も何も囲まずに使用しても問題はない)
セクション(h2)なし
(注)SWELLの場合は自由記述の領域のため、特に指定はない
(注)他のサイト・ページでは、この部分は自由にできる領域のためにsectionタグがないこともある。また、使わなくても問題はない。同じく、他のサイト・ページでは、この部分が自由にできる領域のために、h1・h3~h6が使われることもある
ページのフッターなし
⇒グループブロックを使ってページのフッター(footer)を追加することはできること、必須項目ではないので、このままで良いと考えている(著者情報をページのフッター(footer)として載せた方が良いと考えているが、自分で追加できるので不要)
サイト全体のフッターfooter
投稿ページ
投稿ページ(用途・目的)HTMLタグ名
サイト全体のヘッダーheader
文章の主要な内容main
内容が単体で完結するセクションarticle
ページのヘッダー(h1)なし(h1の出力はある)
⇒デフォルトの状態で出力されるh1は「h1(ページの主要な内容を示し、タイトルタグの次に重要度が高い見出しタグの最上位)はページのヘッダーに位置する要素だと考えるため、h1をテーマ側で出力するなら、ページのヘッダーとしてheaderで囲んだ方が良いと考える」ことから、個人的にSWELLとの考え方と相違がある。
(注)ただし、これは夜空きりの個人的な解釈のため、解釈次第ではSWELLの標準仕様で何も問題はない(例えば、ページのヘッダーとページのフッターを用意しないケースでは、h1もh2以下も何も囲まずに使用しても問題はない)
セクション(h2)不明
(注)SWELLの場合は自由記述の領域のため、特に指定はない
(注)他のサイト・ページでは、この部分は自由にできる領域のためにsectionタグがないこともある。また、使わなくても問題はない。同じく、他のサイト・ページでは、この部分が自由にできる領域のために、h1・h3~h6が使われることもある
ページのフッターなし
⇒グループブロックを使ってページのフッター(footer)を追加することはできること、必須項目ではないので、このままで良いと考えている(著者情報をページのフッター(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でコピーしたブログパーツの呼び出し処理を貼り付ける。

【2024年1月31日追記】
元々「最終更新日がかなり前のプラグインの使用」「パンくずリスト生成プラグイン及びSWELLのテーマのカスタマイズ(子テーマ)」の組み合わせで無理矢理対応していたこともあり、SWELLをできる限り標準にした上で不足機能だけをプラグインでフォローとしたく、構造化データのドキュメントを今一度振り返ってみたところ、SWELL標準で問題がないと判断できたため、構造化データをSWELL標準にしました。
本来は見た目と中身(構造化データ)を合わせたいところでしたが、パンくずリストに関して言えば、そもそもが分かるような構造になっていれば設置が必須というわけではなく、「長時間に及ぶ調査と問い合わせと改修作業を行うよりも優先度の高い作業をした方が良い」「SWELLの他の構造化データの方が優先度が高いので出力をこれ以上停止するのは効率と効果を考えても良策とは思えない」と判断したことから、『見た目のパンくずリストでは現在地までの道筋を現在地(現在のページ)も含めて示す』『データ上のパンくずリストは現在地までのカテゴリを示す(トップページと現在のページは含まない)』という形で仕様を統一することとしました。

実際にSEOに関係のある有名なサイトをいくつかピックアップして構造化データを確認したところ、「トップページを含む・含まない」「現在のページを含む・含まない」は、サイトごとにバラバラでした。
未来のことは分かりませんが、少なくとも最後のアイテムでitemにURLが含まれない場合は必須ではないとGoogle検索セントラルの必須プロパティの項目説明欄に載っていたことと「リッチリザルト テスト」「スキーマ マークアップ検証ツール」のどちらでもエラー・警告ともになかったことから、書き方には問題はありません。

Google検索セントラルの例では「ホーム」は含まれていないことと、パンくずリストの設置意図(該当するページがサイト内のどの階層に位置しているのかを示すため)を考えても、ドメイン部分でトップページが分かり、現在のページの位置は参照しているページから分かるので、これらは必須ではない」と判断しても良さそうです。

ただ、Schema.orgの説明(英語)を日本語に翻訳しても「URLと名前を使用して記述」「現在のページで終わります」と明記があっても、「通常は」「少なくとも」という形で書かれており、断言を避けていることから【例外がある】ことを示していると見ることができ、明確な根拠と共に断言という形で説明しているページはGoogleのドキュメントを含めて見つけることができなかったため、「トップページ」と「現在のページ」については含められるようにしていただけるとすごく嬉しいなと思うのです……。

SWELL制作者に要望を出すほどではないんだけどね……。
どちらかというと、構造化データのルールが統一および断言できる形でまとまってくれるか、もしくはGoogle検索セントラルのページが更新されて「必須」「任意」が分かりやすくなるといいなと思うところ。(実は、調べたり結論を出すのに数時間かかっています……っ!! 泣きたい……)
そしたら、我々制作者(開発者)は対応せざるを得なくなるはずだし、「エビデンスを出せー!」って面倒なやり取りもいらないからスッキリするもの……。

「header.php」の修正箇所

最初に

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

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

  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)とセクションは自分で対応します。
やり方は、前述「固定ページ(トップページ)のメインビジュアル(トップビジュアル)の作成」と同じように必要なセクションの範囲をグループで囲んで、必要な要素に設定するだけです。

アイキャッチ画像をmetaサムネイルとして設定する

「Google検索結果ページにサムネイル画像を表示させる」リッチスニペットですが、表示されれば視認性が高くなり、クリックされやすくなると考えられるので、気にする人はぜひとも設定しておきたいですね。
正直、必須じゃないので無理に設定する必要もないですし、「それ、サムネイルにしない方が良いのでは……」と思うものがサムネイルとして設定されることもあり得ないとは言い切れず、お客様のサイトに設定するかは要検討事項ではないかと思います。(こちらで記事投稿代行をしているケースなら設定しても問題はないと思いますが……)

ただ、設定したとしても、必ず表示されるものではないことはご留意いただけましたら幸いです。

やり方は色々あるのですが、SWELLとSEO SIMPLE PACKで対応していなかったので、今回はfunctions.php(子テーマ)に付け加える形で追加しました。
(優先順は「7」にして、自分で都合の良い場所に出力していますが、特に指定しなくてもOKです)

// この上は親テーマのfunctions.phpのあとで読み込みたいコード


// meta thumbnail
// meta thumbnailにアイキャッチ(thumbnailサイズ)を使用
add_action('wp_head', function () {
    $thumbnail_img_data = array();
    $thumbnail_img_url = '';
    $thumbnail_img_data = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');
    if (isset($thumbnail_img_data) && $thumbnail_img_data != '') {
        $thumbnail_img_url = $thumbnail_img_data[0];
        if (isset($thumbnail_img_url) && $thumbnail_img_url != '') {
            echo '<meta name="thumbnail" content="' . esc_url($thumbnail_img_url) . '" />' . "\n";
        }
    }
}, 7);


// 以下、子テーマでのファイルの読み込み

ソースコードの紹介編

ソースコードを載せることはないと思っていたのですが、最終的にカスタマイズ記事を書いていたら必要になったので、WordPressの既存のコードブロックを使ったところ、罫線等の装飾がなく、ソースコードのベタ書き(一色で文章と同じ)で分かりにくいと感じたため、「Highlighting Code Block」プラグインを導入しました。

独自カスタマイズをするときの注意事項

親テーマに直接編集しないように注意してください。
テーマのバージョンアップデートで変更した内容が消えてしまいます。

子テーマでカスタマイズした場合、親テーマのファイルの変更点が受け継がれません。
必ず親テーマを更新してから、子テーマを再カスタマイズしてください。

(注)カスタマイズするとき、以前のカスタマイズが結構前になると何をカスタマイズしたのか忘れていることがあるので、コメントを残すことをオススメします。

(注)functions.phpは子テーマ用に最適化されているので、再カスタマイズは原則不要です。

「毎回だと大変でやりたくないかも…PHPは結構分かるよ!」という人は、テキスト比較ツールを使って変更点があれば反映するやり方でもOKです!
機密情報ではないことから、私は「テキスト比較ツール difff《デュフフ》」をよく利用していましたが、機密情報でネットツールは使わない方が良いでしょう。

必要なときはテーマ作者からアナウンスがあるはずなので、テーマのアップデートの前に、テーマのWebサイト・テーマ作者のTwitter等で確認することが望ましいです。

なるべくならカスタマイズしないで使うことをオススメしますが、希望通りにならないときはカスタマイズできるのがWordPressの強みでもあると考えているので、必要以上に恐れずにチャレンジしてみてくださいね!

困ったときは、クリエイトアコード(夜空きり)にご相談ください。「Web技術サポート・Webコンテンツサポート」サービスで皆様のカスタマイズをサポートします!

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

サイト運営者

クリエイトアコード

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

ソフトウェア&ゲーム開発会社でプランナーとして従事しながら、ディレクション・マネージメント、資料作成の知識を実践形式で学ぶ。その後はリサイクルショップのWebサイト担当者として従事しつつ、SEOやWordPressの実践形式での研究を深めた。転職をした会社や兼業(副業)としての活動でも今までに学んだ知識と技術を活用しながらも更なる向上に努めていたが、様々な人のお悩み解決をしていきたいという思いが強くなったため、転職から二年後に独立。2022年5月10日に開業して個人事業主になった。
現在は、今までに得た知識や技術(SEO・WordPress・Webマーケティング・Web集客)を活かしながら「人と人を調和し、創造を支援する」「自分で色々動きたいので技術面をサポートしてほしい人や自分も考えたいが技術面については知見がないのでフォローしてもらいたい人を応援する」ことを目的に「訪問者に届けるコンテンツを作る」お手伝いをするための活動をしている。

事業の他、ソフトウェア&ゲーム開発会社時代に無理をした働き方をしたために自律神経のバランスが乱れやすいことや精神的にもダメージを負ったことから「抑うつ状態」と診断されて数年かけて寛解した経験から、同じような人が苦しまずに働くことができるように自身を実験台に「スキルを活用した生活に困らないかつ無理をしない働き方」の確立を目指している。


ご相談・お問い合わせ

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

資料ダウンロード

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

目次