お問い合わせ
  • WordPressテーマ「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カラムのメガメニューで表示されます。
別の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' );
カスタム投稿タイプとカスタムタクソノミーを追加したい

カスタム投稿タイプはプラグインテリトリーに分類されているので、プラグインで管理するのが理想的ですが、ここでは簡易的な方法として子テーマを使用した例を紹介しています。子テーマの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ファイルに以下のコードを追加します。
その他のページは背景画像の設定が必要になります。

#header .navbar .container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	margin: auto;
	display: block;
	background: #fff;
}
パンくずリストをヘッダー画像の上にかぶせて表示したい

子テーマの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
以下のコードをコピペして数字を調整します。

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

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

}
/* 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;
	}

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

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

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

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

.site-header-cart .cart-contents:before {
	content: "\f291" !important;
}
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テーマを使用する場合

  • Silentテーマを使用する場合は、保守契約を含めるなどしてサポートはご自身でしてください。

一般的な注意事項

  • トラブル予防に契約書が必須です。
  • クライアントが法人で5万円以上のデザイン案件の場合は、源泉徴収でクライアントへマイナンバー等の提供が必要です。
オリジナルデザインで制作したい

1ページだけオリジナルデザインで制作したい
既成テーマの子テーマにカスタムページテンプレートを追加して、表示したい固定ページに適用すれば可能です。

全ページをオリジナルデザインで制作したい
一般的に以下のような大変な作業(ちゃんと制作すると数か月かかると思います)が必要になってきます。
ブログやプラグインの機能等が不要な場合は、HTML/CSS/ JavaScript(コンタクトフォームだけPHP)で制作するのが無難かもしれません。
ブログやプラグインの機能等が必要な場合は、WordPressテーマとプラグインの自作(メンテナンス必須)が選択肢に入ってきます。

WordPressで制作する手順例

  1. ヒアリング・・・クライアントのご要望を聞く。
  2. Photoshop等・・・オリジナルデザインで描きます。クライアントからOKを貰います。
  3. HTML / CSS / JavaScript・・・オリジナルデザイン画像の完全再現をします。
  4. WordPress(ブログ機能等が必要な場合)・・・WordPressテーマとプラグインの自作。メンテナンスも必要です。
  5. WooCommerce(本格的なお店をする場合)・・・セキュリティ関係により配慮。

WordPressで独自部品を編集可能にする方法
Gutenbergカスタムブロック、カスタムフィールド、カスタマイザー、ショートコード、ウィジェット、カスタム投稿タイプ・カスタムページテンプレート利用等ありますが、それぞれ一長一短があり、ページ構成や予算等でも制作方法が違ってくると思います。

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

海外のテーマ市場では、有料ページビルダーと有料スライダーをバンドルした多目的タイプのWordPressテーマが人気です。殆どのテーマがWooCommerceプラグインに対応しています。
日本語で綺麗に表示させるためにはCSSの調整が必要になります。

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

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