テーマ機能によるカスタマイズ方法
テーマ機能によるカスタマイズ方法
テーマで用意された部品と設定を組み合わせてカスタマイズします。
コーディング知識不要で出来ます。
写真の重要性について
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/
カスタマイズの実例
子テーマは必要ありません。
管理画面 / お問い合わせ / コンタクトフォーム
書き換え前
お名前
[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; }
}
子テーマの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"
- 子テーマの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でコードを取得して、以下のように子テーマに追記します。
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 -->