テーマ機能によるカスタマイズ方法

テーマで用意された部品と設定を組み合わせてカスタマイズします。
コーディング知識不要で出来ます。

写真の重要性について

Webサイトの印象を良くしたり、オリジナリティ感を高めるには、写真はとても重要な要素です。
子テーマでコードを書き換えるよりも、使用する写真やイラストを工夫する方が、目に見える変化が出しやすく効果的です。
メンテナンスも必要ありません。

子テーマを使用したカスタマイズ方法

子テーマについて

テーマファイルのコードを上書きする方法です。
HTML/CSS/JS/PHPなどの専門的な知識が必要です。サポート範囲外なので自己責任で行ってください。

「親テーマ」のファイルを直接書き換えると、アップデートのときにすべて消えてしまいます。
「子テーマ」を使用すれば、アップデートでも消えることはありません。

子テーマのインストール方法

管理画面 / 外観 / テーマ

「親テーマ（silent.zip）」と「子テーマ（silent-child.zip）」の両方をインストールします。
「子テーマ」を有効化すると、「親テーマ」も読み込んでくれます。

本格的にテーマをカスタマイズする場合

「Local by Flywheel」を使用してローカル環境で行うことをお勧めします。
https://bazubu.com/how-to-create-local-environment-23801.html

子テーマへのコードの書き方

子テーマへのコードの書き方については、以下ページで紹介しています。
https://colors-themes.com/clock/child-theme/

カスタマイズの実例

Contact Form 7に赤で(必須)の文字をつけたい

子テーマは必要ありません。
管理画面 / お問い合わせ / コンタクトフォーム

書き換え前
 お名前
[text* your-name] 

書き換え後
 お名前 <span class="text-red">(必須)</span>
[text* your-name]

スライダーセクションのキャプション（文字）色を一部だけ変更したい

子テーマは必要ありません。
テーマカスタマイザーの入力欄でHTMLが使用できます。

テキストカラー
<span class="text-gray">いろはにほへと</span>
<span class="text-black">いろはにほへと</span>
<span class="text-pink">いろはにほへと</span>
<span class="text-blue">いろはにほへと</span>
<span class="text-aqua">いろはにほへと</span>
<span class="text-green">いろはにほへと</span>
<span class="text-olive">いろはにほへと</span>
<span class="text-yellow">いろはにほへと</span>
<span class="text-orange">いろはにほへと</span>
<span class="text-red">いろはにほへと</span>
<span class="text-theme">いろはにほへと</span>

いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと

ハイライトカラー
<span class="highlight-pink">いろはにほへと</span>
<span class="highlight-blue">いろはにほへと</span>
<span class="highlight-olive">いろはにほへと</span>
<span class="highlight-yellow">いろはにほへと</span>
<span class="highlight-orange">いろはにほへと</span>
<span class="highlight-red">いろはにほへと</span>
<span class="highlight-theme">いろはにほへと</span>

いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと
いろはにほへと

メインメニューのホバーに背景色を付けたい

子テーマのstyle.cssに以下のコードを追加します。
CSSの色を変更します。

@media (min-width: 992px) {
.navbar-nav > li:not(:last-child):before { display: none; }
.navbar-nav > li.show, 
.navbar-nav > li.active,
.navbar-nav > li:focus, 
.navbar-nav > li:hover, 
.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover, 
.navbar-nav .show > .nav-link, 
.navbar-nav .active > .nav-link, 
.navbar-nav .nav-link.show, 
.navbar-nav .nav-link.active {
	background: #22a4e5;
	color: #ffffff !important;
}
.navbar-nav > li:hover .dropdown-toggle.nav-link:after, 
.active .dropdown-toggle.nav-link:after { color: #ffffff !important; }
}

WooCommerceのヘッダーカートのアイコンを変更したい

子テーマのstyle.cssに以下のコードを追加します。

.site-header-cart .cart-contents:before {
	content: "\f291" !important;
}

スライダーセクションのヒーロー動画に「アップロードした動画」を使いたい

テーマカスタマイザーのURL記入欄にyoutubeやvimeoのURLは入力可能ですが、メディアにアップロードした動画は特別なURLが必要なため、子テーマを使用します。

自作の動画ファイル「ファイル名.mp4」をメディアにアップロードします。URLをメモしておきます。
子テーマに、フォルダ階層を同じにして、template-parts/slider/main-hero-video.phpファイルをコピペします。
該当箇所を以下のように書き換えます。

　書き換え前：data-video-src="<?php echo esc_url( get_option( 'main_hero_video_url' ) ); ?>"
　書き換え後：data-video-src="mp4:./wp-content/uploads/ファイル名.mp4"

WooCommerceのショップページのカラム数を変更したい

子テーマのfunctions.phpに以下のコードを追加します。
数値を変更します。

function silent_woocommerce_loop_columns() {
	$change_shop_sidebar = get_option( 'change_shop_sidebar' );
	if ( $change_shop_sidebar == 'sidebar-none' ) {
		return 4; // サイドバーなしのとき商品を4カラムにする。
	} else {
		return 2; // サイドバーありのとき商品を2カラムにする。
	}
}
add_filter( 'loop_shop_columns', 'silent_woocommerce_loop_columns' );

別のGoogle Fontsを使用したい

Google Fontsでコードを取得して、以下のように子テーマに追記します。
https://fonts.google.com/?subset=japanese

子テーマのstyle.css

body,
.yuu-gothic,
.noto-gothic,
.hiragino-mincho,
.yuu-mincho,
.noto-mincho {
	font-family: 'New Tegomin', serif;
}

子テーマのfunctions.php

function silent_google_fonts() {
	wp_enqueue_style( 'silent-tegomin', 'https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'silent_google_fonts' );

スクロール時のアニメーションを所定の場所に付けたい

例）アイコンボックス1にアニメーションを付けたい場合

子テーマに、フォルダ階層を同じにして、template-parts/biz/biz-iconbox1.phpファイルをコピペします。
アニメーションを付けたい部分に赤色のコードを追加します。
遅延時間「1.0s」、アニメーション「bounceIn」箇所を変更します。アニメーションの種類はAnimate.cssを参考にしてください。

　<div class="animated delay" data-delay="1.0s" data-animation="bounceIn"></div>

スライダーセクションに、複数のアイテム画像を表示したい

子テーマにimagesフォルダを作りitem.png画像を置きます。
子テーマに、フォルダ階層を同じにして、template-parts/slider/main-hero-image.phpファイルをコピペします。
該当箇所に以下のコードを追加します。

例）中央下部に画像をフェイドインさせます
アニメーション名はCSSファイル内で探します。重なり順序は「data-zindex="3"」を変更します。

　<div class="flkty-position-item" data-bottom="0" data-left="0" data-right="0" data-zindex="3">
　　<div class="flkty-fadeInUp delay" data-delay="1.5s">
　　　　<img src="images/item.png" alt="" />
　　</div>
　</div>
　<!-- end .flkty-position-item -->

テーマ機能によるカスタマイズ方法