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

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ファイルなどを直接編集する場合は、必ずサイト全体のバックアップを取っておきましょう。万が一、不具合が発生した場合でも、すぐに元の状態に戻すことができます。

これらの点に注意してSiteOrigin Unwindのカスタマイズを進めてください。

Information

「Emanon」は、ブログや企業サイトの作成に特化したテーマであり、非常に高いカスタマイズ性を持っているのが特徴です。特に、ウェブ集客に力を入れたい個人事業主や企業におすすめです。

個人事業主・中小企業向けWordPress 有料テーマ Emanon は、Web集客やビジネスの成果を重視する企業サイトにとって、非常に強力なツールとなり得ます。シンプルで信頼感のあるデザインと、充実した集客機能がその大きな魅力です。ただし、デザインの好みやWordPressの習熟度によっては、使い始めに少し学習が必要になるかもしれません。

WordPressテーマ「Emanon」は、ブログや企業サイトの作成に特化したテーマであり、非常に高いカスタマイズ性を持っているのが特徴です。特に、ウェブ集客に力を入れたい個人事業主や企業におすすめです。

主なカスタマイズ機能

  • 豊富な設定項目: WordPressの**「外観」＞「カスタマイズ」や独自の「Emanon設定」**メニューから、サイト全体のレイアウトや配色、フォントなどを細かく変更できます。
  • カスタム投稿タイプ: ブログ記事だけでなく、お知らせや製品情報、ランディングページ（LP）など、目的に応じたカスタム投稿ページを簡単に作成できます。これにより、ウェブサイトの多様性と専門性を高めることができます。
  • オリジナルブロック: 「Emanon Blocks」という独自のプラグイン（有料版に付属）を使用することで、読者の目を引く多様なコンテンツブロックを利用でき、記事作成やページデザインの自由度が格段に上がります。
  • レイアウトの変更: ヘッダーやサイドバー、カラム数などを簡単に設定できます。サイト全体だけでなく、個別のページごとに異なるレイアウトを設定することも可能です。
  • CTA（Call to Action）機能: 顧客獲得のためのCTAを複数作成し、ページごとに詳細な設定ができます。さらに、計測機能を使って効果を検証することも可能です。

Emanonのシリーズごとの違い

Emanonにはいくつかのシリーズがあり、それぞれカスタマイズ性に違いがあります。

  • Emanon Pro: ブログ向けの多機能テーマ。
  • Emanon Business: 企業サイトの作成に特化しており、シンプルな操作でサイトを構築できます。しかし、カスタマイズの自由度は「Premium」に比べて限定的です。
  • Emanon Premium: 最もカスタマイズ性が高く、豊富な機能とデザインの自由度を求める人におすすめです。独自のブロックプラグインも付属しています。

総合的に見て、Emanonは初心者でも扱いやすい直感的な設定項目を持ちながら、上級者がさらに作り込むこともできる、柔軟性の高いテーマと言えます。特に「Emanon Premium」は、他のテーマではなかなか実現できないような、本格的なウェブサイトを構築するのに適しています。

WordPress運用のポイント

WordPressは非常に人気のあるコンテンツ管理システム（CMS）で、ブログやウェブサイトの作成・運営に広く利用されています。そんなWordPressの運用にあたっては考慮すべきポイントがいくつかあります。

【テーマの選定とカスタマイズ】適切なテーマを選び、必要に応じてカスタマイズすることで、サイトのデザインやユーザビリティを向上させることができます。

【プラグインの管理】必要な機能を追加するためにプラグインを使用しますが、不要なプラグインは削除し、定期的に更新することが推奨されます。これにより、セキュリティリスクを軽減できます。

※有料WordPressテーマはカスタマイズが容易で、豊富な機能が装備されているのでおすすめといえるでしょう。

【定期的なバックアップ】データの損失を防ぐために、定期的にバックアップを取ることが重要です。プラグインを利用することやレンタルサーバーのバックアップを活用しましょう。

【セキュリティ対策】WordPressは人気があるため、攻撃の対象になりやすいです。セキュリティプラグインの導入や、定期的なパスワード変更、SSL証明書の導入などが推奨されます。

【パフォーマンスの最適化】サイトの表示速度を向上させるために、キャッシュプラグインの利用や画像の最適化を行うことが重要です。

※定期的なバックアップやセキュリティ対策はレンタルサーバーの選定も重要になります。

【SEO対策】検索エンジン最適化（SEO）を意識したコンテンツ作成や、SEOプラグインの活用が重要です。これにより、検索結果での表示順位を向上させることができます。

【ユーザーエンゲージメント】コメント機能やSNSとの連携を活用し、訪問者とのコミュニケーションを促進することも大切です。

※SEO対策やSNSとの連携は専門知識も要求されます、外部サービスの利用を検討されてはいかがでしょう。

カテゴリー
テーマ
テーマ

前の記事

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

次の記事

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