2023年9月27日 / 最終更新日時 : 2025年10月2日 エス・ティ・セブン テーマ

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

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. 子テーマを作成する (推奨)

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

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

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

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

  1. 子テーマフォルダの作成: wp-content/themes ディレクトリ内に新しいフォルダ（例: unwind-child）を作成します。
  2. 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
*/

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')
    );
}
?>
  1. 子テーマの有効化: 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の標準機能である「テーマカスタマイザー」を利用して行います。

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

  1. 管理画面からアクセスする:
    • WordPressの管理画面にログインします。
    • 左側のメニューから「外観」→「カスタマイズ」を選択します。
  2. 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ファイルなどを直接編集する場合は、必ずサイト全体のバックアップを取っておきましょう。万が一、不具合が発生した場合でも、すぐに元の状態に戻すことができます。

公式テーマと有料テーマを比較

WordPressの公式テーマ（無料）と有料テーマを比較すると、主に費用、機能・カスタマイズ性、サポート、デザインなどの点で違いがあります。

以下に主な比較ポイントをまとめます。

比較項目WordPress公式テーマ（無料）有料テーマ
費用無料1万円〜3万円程度の買い切り型、または月額/年額のサブスクリプション型が多い
機能・カスタマイズ性シンプルで基本的な機能に限定されることが多い。高度な機能はプラグインで補う必要がある。多機能で、ドラッグ＆ドロップビルダーや豊富なレイアウトオプションなど、高度なカスタマイズ機能が組み込まれていることが多い。
デザインシンプルで、他のサイトとデザインが似る可能性がある。プロフェッショナルで高品質なデザインが多く、独自性を出しやすい。特定の業種に特化したテーマもある。
サポート公式フォーラムなど、コミュニティベースのサポートが中心で、個別対応は期待できないことが多い。テーマ開発者による専門的なサポート（メール、チャットなど）が提供されることが多く、初心者には安心。
アップデート公式ディレクトリに登録されているため、セキュリティや互換性のチェックはされているが、機能追加の頻度はテーマによる。定期的なアップデートがあり、最新のWordPressやプラグインとの互換性、セキュリティ対策がより迅速に行われる傾向がある。
コードの品質・安全性公式テーマは厳格な審査基準をクリアしているため、一定の品質・安全性は担保されている。評判の良いテーマは高品質だが、中にはコードが複雑すぎたり、セキュリティに問題があるものも存在する可能性があるため、選定に注意が必要。
SEO対応基本的なSEO対策はされているが、高度な最適化はプラグインに依存することが多い。内部SEOが最適化されているテーマが多い。

まとめと推奨

あなたの状況推奨されるテーマ
予算をかけたくない、個人ブログ、シンプルなサイトで十分、自分でカスタマイズできる知識がある公式テーマ（無料）
ビジネスサイトや本格的なサイトを構築したい、デザインの独自性を出したい、豊富な機能やカスタマイズ性が欲しい、初心者でサポートが必要、時間と労力を節約したい有料テーマ

最終的には、あなたのサイトの目的、予算、求める機能、そしてウェブサイト構築のスキルレベルに応じて、最適なテーマを選択することが重要です。有料テーマを選ぶ場合は、評判やサポート体制、アップデートの頻度をしっかり確認することをお勧めします。

テーマ名主な特徴・強み適したサイト
ザ・トール (THE THOR)国内最高クラスのSEO最適化と高速表示
プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり）
アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援		アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)Web集客・ビジネス利用に特化した機能が豊富
CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成
企業サイト、オウンドメディアに適したデザイン
WooCommerce対応でネットショップにも利用可能（Premium）		コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)「誰が使っても美しいデザイン」を追求したモバイルファースト設計
シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い
ブロックエディタに最適化され、直感的な操作が可能
シンプルかつ洗練されたデザインで、汎用性が高い		商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている
高いSEO対策と構造化データ対応
多言語対応機能（LIQUID CORPORATEなど）
カスタマイザーでの直感的な編集が可能		メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト
有料WordPressテーマ

補足情報

  • ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
  • エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
  • ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
  • リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。

関連投稿:

  1. Lightningにコールツーアクションを設置 – WordPressテーマ
  2. Twenty Twentyのカスタマイズ – WordPressテーマ
  3. Twenty Tenのカスタマイズ – WordPressテーマ
  4. Shopayのカスタマイズ – WordPressテーマ
  5. Twenty Twelveのカスタマイズ – WordPressテーマ
カテゴリー
テーマ
タグ
テーマ

前の記事

Fukasawa（WordPressテーマ）のSEO
2023年9月22日
テーマ

次の記事

Twenty Twelveのカスタマイズ – WordPressテーマ
2023年9月30日