カスタマイズ方法
Silentテーマのカスタマイズ方法について紹介しています。
1. Silentテーマの部品と設定を組み合わせる
SilentテーマとSilentプラグインには沢山の部品や設定が用意されています。これらを組み合わせることで色々なレイアウトや配色に変更できます。
2. ロゴ画像、写真、イラスト、背景画像等を工夫する
Webサイトの印象を良くするには写真や画像に力を入れるのが効果的です。コードを書き換えるよりも変化を出しやすくメンテナンスも必要ありません。
3. 子テーマを使用する
通常は使用しません。取扱説明書で基本的な使い方を解説してあります。コードの内容や書き方によってはメンテナンスが必要になることがあります。
カスタマイズ実例
子テーマのstyle.cssファイルに以下のコードを追加します。
html,
body {
line-height: 2;
}子テーマのstyle.cssファイルに以下のコードを追加します。
.dropdown-submenu ul.dropdown-menu {
right: 100%;
left: auto;
}
- [ 管理画面 / 外観 / メニュー ]ページを開きます。
- [ カスタムリンク ]からメニューを5個追加して、4個をサブメニューに配置します。
- 親メニューの[ CSS class (オプション) ]に、『 mega-menu 』と記入します。
※[ CSS class (オプション) ]が表示されない場合は、画面右上の[ 表示オプション ]を開いて[ CSSクラス ]にチェックを入れます。 - 子テーマのstyle.cssファイルに以下のコードを追加します。
@media (min-width: 992px) {
.mega-menu {
position: static;
}
.mega-menu .dropdown-menu {
left: 0;
right: 0;
max-width: 1100px;
margin: auto;
top: 100%;
}
.mega-menu .dropdown-menu li {
float: left;
padding: 20px 30px;
}
.mega-menu .dropdown-menu::after {
border-bottom: 7px solid rgba(255, 255, 255, 0) !important;
}
}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' );投稿一覧ページを親テーマと同じレイアウトに変更したい場合
- 親テーマの「home.php」ファイルを子テーマにコピペします。
- 子テーマの「home.php」のファイル名を「archive-item.php」に変更します。
子テーマのstyle.css
子テーマのstyle.cssファイルに以下のコードを追加します。
@media (max-width: 991px) {
.wp-block-silent-blocks-block-26 .owl-slider-block-position-item.no-item-mobile img {
display: block;
}
}子テーマの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;
}管理画面 / お問い合わせ / コンタクトフォーム
子テーマは必要ありません。設定画面で以下のように記入します。
お名前 <span class="text-red">(必須)</span>
[text* your-name] 子テーマのstyle.cssに以下のコードを追加します。
.site-header-cart .cart-contents:before {
content: "\f291" !important;
}子テーマの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
本テーマをカスタマイズしてもある程度ご希望のデザインに近づけることは可能ですが限界があります。
1ページだけを完全なオリジナルデザインで制作したい
集客用のLPなど1ページだけを完全なオリジナルデザインで制作したい場合は、子テーマにカスタムページテンプレートを追加すれば実現可能です。ヘッダーとフッターも読み込まないようにもできます。完成したら固定ページに適用します。
全ページを完全なオリジナルデザインで制作したい
全ページをオリジナルデザインで制作したい場合は、以下のような手順が必要になります。WordPressテーマとプラグインを自作、メンテナンスしていくのはとても大変（費用もかかる）なので、ブログ機能等が必要ないのであればHTMLサイト（＋PHPコンタクトフォーム）で制作するのが無難かもしれません。
- ヒアリング・・・クライアントの希望等を聞く。
- Photoshop等・・・オリジナルデザインで描きます。クライアントからOKを貰います。
- HTML5 / CSS3 / JS・・・デザイン画像の（完全）再現をします。
- WordPress（ブログ等が必要な場合）・・・WordPressテーマとプラグインの自作（要メンテナンス）。
- WooCommerce（本格的なお店をする場合）・・・セキュリティ関係により配慮。
コーポレートサイト対応のWordPressテーマを制作する場合は、投稿ページで使用する（主に記事を書くための）部品に加えて、主要な固定ページで使用する（トップページ等を構成する）部品の制作も必要になってきます。Gutenbergエディタの登場で、現在は両方ともGutenbergカスタムブロックで制作するのが主流になりつつあります。
主要な固定ページで使用する部品の作り方
- Gutenbergカスタムブロック・・・仕組みとして最適ですが、開発中のため仕様変更があるかもしれません。
- ページビルダー・・・仕組みとして最適ですが、ライセンスの問題があります。
- ショートコード・・・仕組みとして最適ですが、複雑な部品は入力欄が多く向かなさそうです。
- 各プラグイン化・・・スライダーのような複雑な部品に最適ですが、数十個バンドルするのは無理そうです。
- ウィジェット・・・部品の追加や並び替えができますが、設置場所の指定が必要で制作難易度も高そうです。
- カスタムページテンプレート利用・・・ヘッダー等と同様に編集できますが、特定ページでしか使えません。
- カスタムフィールド利用・・・複数ページに対応できますが、編集画面がわかりにくいかもしれません。
- HTMLをコピペ・・・固定表示はできますが、部品の使いまわしやカスタマイズが困難です。
海外のテーマ市場では、有料ページビルダーと有料スライダーをバンドルした多目的タイプのWordPressテーマが人気です。日本語で綺麗に表示させるためにはCSSの調整が必要になります。
有料ページビルダーの特徴
- 管理画面、取扱説明書、サポートが英語です。
- 多機能すぎて複雑に感じるかもしれません。
- ブロックテーマ（FSEテーマ）のように表示画面で編集できます。
カスタマイザーのコードで、「theme_mod / get_theme_mod()」を使用した箇所は再設定が必要です。「option / get_option()」を使用した箇所は再設定が必要ありません。公式ディレクトリのテーマでは「theme_mod / get_theme_mod()」の使用が推奨されているので、意図的なことで不具合ではありません。