• SiLENT WordPressテーマ by Colors Themes
販売サイト

日本語ワードプレステーマ

  1. Home
  2. サポート情報  /  
  3. 子テーマの使い方

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

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

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

写真の重要性について

Webサイトの印象を良くしたり、オリジナリティ感を高めるには、写真はとても重要な要素です。
子テーマでコードを書き換えるよりも、使用する写真やイラストを工夫する方が、目に見える変化が出しやすく効果的です。
本テーマの場合は、スライダー下部、ヘッダー画像下部、トップページの各コンテンツ下部の区切り画像を自作することでも、大きな特徴が出せます。

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

子テーマについて

テーマファイルのコードを上書きする方法です。
専門的な知識がない場合はお勧めしていません。サポート範囲外なので自己責任で行ってください。

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

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

管理画面 / 外観 / テーマ

  • 「親テーマ（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-about/

if ( ! function_exists() ) :
endif;
殆どの関数を囲ってあります。
get_theme_file_uri関数の利用。

CSS（CSSファイル）の場合

子テーマのstyle.cssに追記することで、テーマのCSSを上書きできます。

関数（PHP ファイル ）の場合 

子テーマのfunctions.phpに追記することで、変更できます。

テンプレート（PHP ファイル ）の場合 

1. 親テーマのテンプレートファイル（PHP）を、同じフォルダ階層にして、子テーマにコピペします。
2. 子テーマのPHPテンプレートファイル（PHP）をカスタマイズします。

jQueryオプション（JSファイル）の場合 

1. 親テーマのjs/custom.jsファイルを、同じフォルダ階層にして、子テーマにコピペします。
2. 子テーマのjs/custom.jsファイルをカスタマイズします。

翻訳（POファイル）の場合 

1. 翻訳ファイルを編集するには、Poeditをインストールしている必要があります。
2. 親テーマの「languagesフォルダ」を子テーマにコピペします。
3. 子テーマの「ja.poファイル」を起動します。※POTファイルは他言語ファイル作成用です。MOファイルは触りません。
4. 翻訳を書き換えて「保存」を押します。※「コードから更新」ボタンは使いません。

カスタマイズの実例

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;
}
特定箇所にスクロール時のアニメーションを付けたい

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

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

例）全ページのフッターにトップページBizコンテンツのカルーセルを表示したい

  • 子テーマに、親テーマのfooter.phpファイルをコピペします。
  • 子テーマのfooter.phpに以下のコードコピペします。
<?php get_template_part( 'template-parts/biz/biz-carousel' ); ?>
スライダーセクションのヒーロー動画に「アップロードした動画」を使いたい

テーマカスタマイザーの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' );
スライダーセクションに、複数のアイテム画像を表示したい
  • 子テーマに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 -->