テーマのカスタマイズ方法
Silentテーマのカスタマイズ方法について紹介しています。
1. Silentテーマの部品と設定を組み合わせる
SilentテーマとSilentプラグインには沢山の部品や設定が用意されています。これらを組み合わせることで色々なレイアウトや配色に変更できます。
2. ロゴ画像、写真、イラスト、背景画像等を工夫する
Webサイトの印象を良くするには写真や画像に力を入れるのが効果的です。コードを書き換えるよりも変化を出しやすくメンテナンスも必要ありません。
3. 子テーマを使用する
通常は使用しません。テーマのコードを上書きする時に使用します。コードの書き方によってはメンテナンスが必要になります。取扱説明書で基本的な使い方を解説しています(CSSの上書き、アクションフック、フィルターフックなど)。
カスタマイズ実例
子テーマのstyle.cssファイルに以下のコードを追加します。
html,
body {
line-height: 2;
}
子テーマのstyle.cssファイルに以下のコードを追加します。
.dropdown-submenu ul.dropdown-menu {
right: 100%;
left: auto;
}
![](https://colors-themes.com/wp/wp-content/uploads/2024/11/mega-menu1.png)
![](https://colors-themes.com/wp/wp-content/uploads/2024/11/mega-menu2.png)
- [ 管理画面 / 外観 / メニュー ]ページを開きます。
- 画面右上の[ 表示オプション ]を開いて[ CSSクラス ]にチェックを入れます。
- [カスタムリンク]で『#』『メガメニュー』と入力してメニューを追加します。
- メガメニューの[ CSS class (オプション) ]に、『mega-menu』と入力します。
- サブメニューを配置すると、4カラムのメガメニューで表示されます。
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ファイルに以下のコードを追加します。
その他のページは背景画像の設定が必要になります。
#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;
}
管理画面 / お問い合わせ / コンタクトフォーム
子テーマは必要ありません。設定画面で以下のように記入します。
お名前 <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
本テーマをカスタマイズしてもある程度ご希望のデザインに近づけることは可能ですが限界があります。WordPressで全ページを完全なオリジナルデザインで制作したい場合は以下のような大変な作業が必要になってきます。
- ヒアリング・・・クライアントの要望を聞く。
- Photoshop等・・・オリジナルデザインで描きます。クライアントからOKを貰います。
- HTML5 / CSS3 / JS・・・デザイン画像の(完全)再現をします。
- WordPress(ブログ等が必要な場合)・・・WordPressテーマとプラグインの自作(要メンテナンス)。
- WooCommerce(本格的なお店をする場合)・・・セキュリティ関係により配慮。
コーポレートサイト対応のWordPressテーマを制作する場合は、投稿ページで使用する(主に記事を書くための)部品に加えて、主要な固定ページで使用する(トップページ等を構成する)部品の制作も必要になってきます。Gutenbergブロックエディタの登場で、現在は両方ともGutenbergカスタムブロックで制作するのが主流になりつつあります。
主要な固定ページで使用する部品の作り方
- Gutenbergカスタムブロック・・・仕組みとして最適ですが、開発中のため仕様変更がまだあるかもしれません。
- ページビルダー・・・仕組みとして最適ですが、ライセンスの問題があります。
- ショートコード・・・仕組みとして最適ですが、複雑な部品は入力欄が多く向かなさそうです。
- 各プラグイン化・・・スライダーのような複雑な部品に最適ですが、数十個バンドルするのは無理そうです。
- ウィジェット・・・部品の追加や並び替えができますが、設置場所の指定が必要で制作難易度も高そうです。
- カスタムページテンプレート利用・・・ヘッダー等と同様にカスタマイザーで編集できますが、特定ページでしか使えません。
- カスタムフィールド利用・・・複数ページに対応できますが、編集画面がわかりにくいかもしれません。
- HTMLをコピペ・・・固定表示はできますが、更新作業・カスタマイズ・使いまわし等が困難です。
海外のテーマ市場では、有料ページビルダーと有料スライダーをバンドルした多目的タイプのWordPressテーマが人気です。日本語で綺麗に表示させるためにはCSSの調整が必要になります。
有料ページビルダーの特徴
- 管理画面、取扱説明書、サポートが英語です。
- 多機能すぎて複雑に感じるかもしれません。
- 表示画面で編集できます。