カスタマイズ

HOME
WordPress
カスタマイズ
SiteOrigin Unwindのカスタマイズ – WordPressテーマ

2023年9月27日 / 最終更新日時 : 2025年12月10日エス・ティ・セブンカスタマイズ

SiteOrigin Unwindのカスタマイズ – WordPressテーマ

SiteOrigin Unwindのカスタマイズ

SiteOrigin Unwindは、SiteOrigin Page Builderとの連携に優れており、柔軟なカスタマイズが可能です。

以下に、主なカスタマイズ方法とポイントをまとめました。

1. WordPressのカスタマイザーを使用する

WordPressの管理画面から「外観」→「カスタマイズ」に進むと、テーマの基本的な設定を変更できます。SiteOrigin Unwindの場合、以下の項目などがカスタマイザーで設定可能です。

ブランディング: サイトのタイトル、キャッチフレーズ、ロゴ、ファビコンの設定。
ヘッダー: ヘッダーのレイアウト（4種類）、背景色、テキスト色、ナビゲーションメニューの設定。
ナビゲーション: メインメニュー、フッターメニューの設定。
色: 全体的な配色、リンク色、ボタン色など。
レイアウト: ページのサイドバーの位置、幅など。
ブログ: ブログのレイアウト（5種類）、投稿表示設定。
フッター: フッターのテキスト、ウィジェットエリア。
WooCommerce: WooCommerce関連の設定（もし利用している場合）。
追加CSS: カスタムCSSコードを追加する場所。

まずは、これらのオプションを試して、希望のデザインに近づけるのがおすすめです。

2. SiteOrigin Page Builderを活用する

SiteOrigin Unwindは、SiteOrigin Page Builderと密接に連携しています。ページや投稿のコンテンツ部分を自由にレイアウトしたい場合は、Page Builderを使うのが非常に効果的です。

ページビルダータブ: 編集画面で「ページビルダー」タブに切り替えることで、ドラッグ＆ドロップでレイアウトを作成できます。
ウィジェットの追加: SiteOrigin Widgets Bundleと連携することで、多彩なウィジェット（スライダー、ボタン、アイコン、カスタム投稿ループなど）を追加してコンテンツを構築できます。
レイアウトテンプレート: 既存のレイアウトテンプレートを利用したり、自分で作成したレイアウトを保存して再利用したりすることも可能です。

3. 子テーマを作成する (推奨)

テーマファイルを直接編集すると、テーマを更新した際に変更が失われてしまいます。これを避けるためにも、子テーマを作成してカスタマイズすることをお勧めします。

子テーマを作成するメリット：

テーマ更新の影響を受けない: 親テーマが更新されても、子テーマの変更は維持されます。
安全なカスタマイズ: オリジナルのテーマファイルを壊す心配がありません。

子テーマの作成方法はいくつかありますが、一般的には以下の手順です。

子テーマフォルダの作成: wp-content/themes ディレクトリ内に新しいフォルダ（例: unwind-child）を作成します。
style.css の作成: 作成したフォルダ内に style.css ファイルを作成し、以下のようなコードを記述します。

/*
 Theme Name: SiteOrigin Unwind Child
 Theme URI: http://example.com/
 Description: My custom child theme for SiteOrigin Unwind.
 Author: Your Name
 Author URI: http://example.com/
 Template: siteorigin-unwind
 Version: 1.0.0
 Text Domain: unwind-child
*/Code language: CSS (css)

Template の行に親テーマのディレクトリ名（siteorigin-unwind）を記述することが重要です。

functions.php の作成: 同様に functions.php ファイルを作成し、親テーマのスタイルシートを読み込むためのコードを記述します。

<?php
add_action( 'wp_enqueue_scripts', 'unwind_child_enqueue_styles' );
function unwind_child_enqueue_styles() {
    wp_enqueue_style( 'siteorigin-unwind-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'unwind-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('siteorigin-unwind-style'),
        wp_get_theme()->get('Version')
    );
}
?>Code language: HTML, XML (xml)

子テーマの有効化: WordPressの管理画面「外観」→「テーマ」で、作成した子テーマを有効化します。

子テーマを作成した後、unwind-child/style.css にカスタムCSSを追加したり、親テーマのテンプレートファイルを子テーマにコピーして修正したりすることで、より詳細なカスタマイズが可能になります。

4. カスタムCSSでデザインを調整する

カスタマイザーの「追加CSS」セクション、または子テーマの style.css ファイルにCSSコードを追加することで、デザインの細部を調整できます。

例：

特定の要素のフォントサイズや色を変更する
余白やパディングを調整する
レスポンシブデザインの微調整

開発者ツール（ChromeのDevToolsなど）を使って、変更したい要素のCSSセレクタを特定し、それに合わせてCSSを記述すると効率的です。

5. フック（Hooks）を利用して機能を追加・変更する

より高度なカスタマイズや機能の追加を行う場合は、WordPressやSiteOrigin Unwindが提供するフック（アクションフック、フィルターフック）を利用します。これはPHPの知識が必要になりますが、テーマの特定の場所や機能にコードを挿入したり、既存の機能を変更したりできます。

フックの例（SiteOrigin Unwind固有のものや一般的なWordPressのフック）：

siteorigin_unwind_before_header: ヘッダーの前にコンテンツを追加
siteorigin_unwind_after_footer: フッターの後にコンテンツを追加
wp_head: <head>タグ内にスクリプトを追加
wp_footer: </body>タグの直前にスクリプトを追加

これらのフックは、子テーマの functions.php ファイルに記述します。

参考資料

SiteOrigin Unwind公式ドキュメント: SiteOriginのウェブサイトで、Unwindテーマのドキュメントが提供されている場合があります。テーマの各設定項目や、利用可能なフックに関する情報が掲載されている可能性が高いです。
SiteOriginサポートフォーラム: 困った際には、公式のサポートフォーラムで質問を検索したり、質問したりすることができます。
WordPress Codex (子テーマについて): WordPressの公式ドキュメントで、子テーマの作成方法について詳しく解説されています。

これらの方法を組み合わせることで、SiteOrigin Unwindテーマをあなたのサイトに合わせて柔軟にカスタマイズできるはずです。まずはカスタマイザーから始め、必要に応じて子テーマやカスタムCSS、フックへと進めていくことをお勧めします。

SiteOrigin Unwindのテーマカスタマイザー

WordPressテーマ「SiteOrigin Unwind」のカスタマイザーは、WordPressの標準機能である「テーマカスタマイザー」を利用して行います。

カスタマイザーへのアクセス方法

管理画面からアクセスする:
- WordPressの管理画面にログインします。
- 左側のメニューから「外観」→「カスタマイズ」を選択します。
Webサイトからアクセスする (ログイン中の場合):
- WordPressサイトにログインしている状態で、サイト上部に表示される「管理バー」にある「カスタマイズ」ボタンをクリックします。

SiteOrigin Unwindでカスタマイズできる主な項目

SiteOrigin Unwindは、クリエイター向けのモダンなテーマであり、ブログやWooCommerceを利用したECサイトに適しています。カスタマイザーでは、以下のような項目を調整できます。

ブランディング (Branding): サイトのロゴやサイトのタイトル、キャッチフレーズなどを設定します。サイトアイコン (ファビコン) の設定もここで行えます。
フォント (Fonts): サイト全体のフォントやタイポグラフィを調整します。
ヘッダー (Header): ヘッダーのレイアウト（4種類のレイアウトが利用可能）や背景、色などを設定します。
ナビゲーション (Navigation): メニューの配置やスタイルを調整します。
アイコン (Icons): ソーシャルアイコンなどの設定を行います。
レイアウト (Layout): サイト全体のレイアウト（幅、サイドバーの有無など）を調整します。
ブログ (Blog): ブログ記事の表示レイアウト（5種類のレイアウトが利用可能）や抜粋の表示方法などを設定します。
フッター (Footer): フッターの表示内容やスタイルを調整します。
WooCommerce (WooCommerce): WooCommerceと完全に統合されており、ECサイトの様々な表示設定が可能です。
追加CSS (Additional CSS): テーマに用意されていない独自のCSSを追加して、さらに詳細なデザイン変更を行うことができます。

SiteOrigin Unwindと相性の良いプラグイン

SiteOrigin Unwindは、以下のSiteOrigin製のプラグインと組み合わせて利用することで、さらに柔軟なカスタマイズが可能です。

Page Builder by SiteOrigin: ドラッグ＆ドロップでカスタムページレイアウトを作成できるプラグインです。トップページやお問い合わせページなどを自由にデザインできます。
SiteOrigin Widgets Bundle: さまざまな便利なウィジェット（お問い合わせフォーム、価格表、行動喚起ボタンなど）を追加できるプラグインです。
SiteOrigin CSS: リアルタイムでサイトのデザインを視覚的に編集できるCSSエディターです。

カスタマイザーの利用のヒント

カスタマイザーで変更した内容は、リアルタイムでプレビュー画面に反映されます。
変更を確定させるには、必ず「公開」ボタンをクリックしてください。
多くのWordPressテーマと同様に、SiteOrigin Unwindも推奨プラグインを導入することで、テーマのイメージ画像に近いサイトを比較的簡単に作成できます。
より高度なカスタマイズを行う場合は、「追加CSS」を利用するか、子テーマを作成してテーマファイルを直接編集する方法もありますが、初心者には「追加CSS」から試すのがおすすめです。

SiteOrigin Unwindのカスタマイズの注意点

WordPressテーマ「SiteOrigin Unwind」をカスタマイズする際の注意点は以下の通りです。

1. 子テーマ (Child Theme) の利用は必須

SiteOrigin Unwindに限らず、WordPressテーマをカスタマイズする際の最も重要な注意点です。

親テーマのアップデートで変更が消える: 親テーマ（SiteOrigin Unwind）を直接編集してカスタマイズすると、テーマがアップデートされた際に、あなたの行った変更がすべて上書きされ、消えてしまいます。
安全なカスタマイズ: 子テーマを作成し、子テーマ内でカスタマイズを行うことで、親テーマのアップデートの影響を受けずに、あなたの変更を保持できます。
子テーマの作成方法:
- 手動で作成する（style.cssとfunctions.phpを含むフォルダを作成）
- プラグイン（例: Child Theme Configurator）を利用する
- SiteOriginが提供するUnwindのスターター子テーマをダウンロードする（SiteOriginのドキュメントに記載あり）

2. SiteOrigin Page BuilderとWidgets Bundleの活用

SiteOrigin Unwindは、SiteOrigin社の提供するプラグインと組み合わせて使うことで、その真価を発揮します。

Page Builder: 直感的なドラッグ＆ドロップでページのレイアウトを構築できます。複雑なCSSを記述しなくても、デザイン性の高いページを作成可能です。
Widgets Bundle: Page Builderと連携して使用する様々なウィジェット（コンテンツ要素）を提供します。
カスタマイザーの限界: Unwindテーマ自体のカスタマイザーでは設定できる項目が限られている場合があるので、より詳細なデザイン調整やレイアウトの変更にはこれらのプラグインの利用が推奨されます。

3. カスタムCSSの利用

デザインを細かく調整したい場合は、追加CSSを活用しましょう。

WordPressカスタマイザーの「追加CSS」: WordPressの「外観」→「カスタマイズ」→「追加CSS」からCSSコードを追加できます。子テーマを使っていれば、ここに追加したCSSはテーマのアップデートで消えることはありません。
SiteOrigin CSSプラグイン: SiteOriginから提供されているSiteOrigin CSSプラグインを利用すると、視覚的にCSSを編集できる機能もあります。

4. テーマの構造を理解する

カスタマイズを行う前に、SiteOrigin Unwindのドキュメントを確認し、テーマの構造や各機能がどのように動作するのかを理解しておくと、スムーズに作業を進められます。

Unwind Documentation: SiteOriginの公式サイトにはUnwindの詳しいドキュメントが用意されています。レイアウトオプション、設定、ウィジェットエリア、メニューなどの情報が記載されています。

5. パフォーマンスへの配慮

カスタマイズの際には、サイトのパフォーマンスにも注意を払いましょう。

画像サイズの最適化: 大きすぎる画像はページの読み込み速度を低下させます。適切なサイズにリサイズし、圧縮してからアップロードしましょう。
不必要なプラグインの削減: 多数のプラグインを導入すると、サイトの動作が重くなる場合があります。本当に必要なものだけを選びましょう。
キャッシュプラグインの利用: キャッシュプラグインを導入することで、ページの表示速度を向上させることができます。

6. バックアップの取得

カスタマイズを始める前、特にPHPファイルなどを直接編集する場合は、必ずサイト全体のバックアップを取っておきましょう。万が一、不具合が発生した場合でも、すぐに元の状態に戻すことができます。

CSSカスタマイズ: 「見出しのデザインを変えたい」「ボタンの色をグラデーションにしたい」といった要望をAIに伝えると、テーマの構造に合わせたCSSコードを生成してくれます。これを「追加CSS」欄に貼り付けるだけで反映できます。
レイアウト相談: 「GOLD MEDIAでニュースサイト風にするためのブロック配置を教えて」と聞けば、具体的な設定手順をステップバイステップで解説してくれます。
画像・ロゴ作成: DALL-E 3やMidjourneyなどの画像生成AIを使い、テーマの「ゴールド」という高級感のある世界観にマッチした素材を作成して配置できます。

テーマ名	特徴	AI活用のおすすめ度
RE:DIVER	AI特化型・多機能	★★★★★（内蔵AIが強力）
GOLD BLOG	ブロガー向け・シンプル	★★★★☆（デザイン調整にAIが便利）
GOLD MEDIA	大規模メディア向け・高機能	★★★★☆（構成案やSEO対策にAIを活用）