お問い合わせ
  • WordPressテーマ「Silent」の公式サイト

Silentテーマのカスタマイズ方法

Silentテーマのカスタマイズ方法について紹介しています。
※ Silentテーマ以外を想定した内容ではありません。

STEP1. Silentテーマの部品と設定を組み合わせる

SilentテーマとSilentプラグインには沢山の部品や設定が用意されています。
これらを組み合わせることで色々なレイアウトや配色に変更できます。

STEP2. ロゴ画像、写真、イラスト、背景画像等を工夫する

Webサイトの印象を良くするには写真や画像に力を入れるのが効果的です。
コードを編集するよりも変化を出しやすくメンテナンスも必要ありません。

STEP3. 子テーマを使用する

テーマのコードをカスタマイズするときに使用します。
取扱説明書で、メンテナンス性を考慮した基本的な書き方を紹介しています。

カスタマイズ実例

フォントのline-heightを変更したい

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

html,
body {
	line-height: 2;
}
メニューのドロップダウンの2ndレベルを左展開したい

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

.dropdown-submenu ul.dropdown-menu {
	right: 100%;
	left: auto;
}
メガメニューを追加したい
  1. [ 管理画面 / 外観 / メニュー ]ページを開きます。
  2. 画面右上の[ 表示オプション ]を開いて[ CSSクラス ]にチェックを入れます。
  3. [カスタムリンク]で『#』『メガメニュー』と入力してメニューを追加します。
  4. メガメニューの[ CSS class (オプション) ]に、『mega-menu』と入力します。
  5. サブメニューを配置すると、4カラムのメガメニューで表示されます。
    ※ 『mega-menu mega-menu3』と入力すると3カラムに変更できます。
    ※ 『mega-menu mega-menu5』と入力すると5カラムに変更できます。
別の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' );

function silent_wp_head() {
	echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . PHP_EOL;
	echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">' . PHP_EOL;
}
add_action( 'wp_head', 'silent_wp_head' );
カスタム投稿タイプとカスタムタクソノミーを追加したい

カスタム投稿タイプはプラグインテリトリーに分類されているので、プラグインで管理するのが理想的ですが、ここでは簡易的な方法として子テーマを使用した例を紹介しています。子テーマのfunctions.phpに以下のコードをコピペします。

カスタム投稿タイプを追加

function silent_child_custom_post_type() {
	register_post_type(
		'item', // カスタム投稿タイプ名
		array(
			'label'         => 'ブログ2',
			'public'        => true,
			'show_ui'       => true,
			'hierarchicla'  => false,
			'menu_position' => 5,
			'has_archive'   => true,
			'taxonomies'    => array(
				'item-category', // カスタムタクソノミー
				'item-tag', // カスタムタクソノミー
			),
			'show_in_rest'   => true,
			'supports'       => array(
				'title',
				'editor',
				'thumbnail',
				'custom-fields',
				'excerpt',
				'revisions',
			),
		)
	);
}
add_action( 'init', 'silent_child_custom_post_type' );

カスタムタクソノミーを追加

function silent_child_custom_taxonomy() {
	register_taxonomy(
		'item-category', // カスタムタクソノミー
		'item', // カスタム投稿タイプ名
		array(
			'label'        => 'カテゴリ',
			'public'       => true,
			'show_ui'      => true,
			'hierarchical' => true,
			'show_in_rest' => true,
		),
	);
	register_taxonomy(
		'item-tag', // カスタムタクソノミー
		'item', // カスタム投稿タイプ名
		array(
			'label'        => 'タグ',
			'public'       => true,
			'show_ui'      => true,
			'hierarchical' => false,
			'show_in_rest' => true,
		),
	);
}
add_action( 'init', 'silent_child_custom_taxonomy' );

投稿一覧ページを親テーマと同じレイアウトに変更したい場合

  1. 親テーマの「home.php」ファイルを子テーマにコピペします。
  2. 子テーマの「home.php」のファイル名を「archive-item.php」に変更します。
パンくずリストをヘッダー画像の上にかぶせて表示したい

子テーマのstyle.css
子テーマのstyle.cssファイルに以下のコードを追加します。
ヘッダー画像が必要になります。

.pagetitle {
	background: rgba(255, 255, 255, 0) !important;
	margin-top: -100px;
}
ボックスブロックのタイトルの背景色を変えたい

ボックスブロックのスタイル5とスタイル6のタイトルの背景色を変更する方法です。

子テーマのstyle.css
以下のコードをコピペして青色部分を変更します。

.wp-block-silent-blocks-block-02.box-style5 .box-title {
	background: #fff;
}
.wp-block-silent-blocks-block-02.box-style6 .box-title {
	background: #fff;
}
スライダーブロックのモバイル時のキャプション位置を微調整したい

ヒーロー画像ブロック・ヒーロー動画ブロック・スライダーブロック
モバイル時のキャプション位置を微調整したい場合は子テーマを使用します。

子テーマのstyle.css
以下のコードをコピペして数字を調整します。

/* Hero Image */
@media (max-width: 767px) {

	.wp-block-silent-blocks-block-23 .hero-image-block-position {
		top: 200px !important;
	}

}
/* Hero Video */
@media (max-width: 767px) {

	.wp-block-silent-blocks-block-24 .hero-video-block-position {
		top: 200px !important;
	}

}
/* Slider */
@media (max-width: 767px) {

	.wp-block-silent-blocks-block-26 .owl-slider-position {
		top: 200px !important;
	}

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

管理画面 / お問い合わせ / コンタクトフォーム
子テーマは必要ありません。設定画面で以下のように記入します。

お名前 <span class="text-red">(必須)</span>
[text* your-name] 
WooCommerceのヘッダーカートのアイコンを変更したい

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

.site-header-cart .cart-contents::before {
	content: "\f07a";
	content: "\f290";
}
WooCommerceのショップページのカラム数を変更したい

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

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

カスタマイズ関連FAQ

全ページをオリジナルデザインで制作したい

Silentテーマをカスタマイズしても可能ですか?
ユニークなオリジナルデザインだと難しいと思います。
一般的なデザインであれば、ある程度ご希望のデザインに近づけることは可能だと思います。

HTMLサイト(静的サイト)として制作するのは?
オリジナルデザインにこだわりがあり、WordPressの必要性がないのであれば、HTMLサイト(一部PHP)として制作するのが無難だと思います。更新時にHTML/CSS等の知識が必要ですが、自分でも管理が可能で、セキュリティ面の問題が発生する可能性も低いです。

WordPressサイトとして制作するには?
オリジナルデザインにこだわりがあり、WordPressも必要な場合は、WordPressテーマを自作(依頼)することになると思います。作り方(カスタマイズ性を持たせる方法等)にもよりますが、中規模サイトであれば数人で数か月かかるような大仕事になり、完成後もメンテナンス(費用)が必要になります。

海外のWordPressテーマの特徴は?

海外のテーマ市場では、有料ページビルダーと有料スライダーをバンドルした多目的タイプのWordPressテーマが人気です。
有料ページビルダーは、コーポレートサイト等の固定ページの制作で便利です。

有料ページビルダーの特徴

  • ビジュアルを確認しながら編集できます。
  • 多機能すぎて複雑に感じるかもしれません。
  • 取扱説明書、サポート等が英語です。