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

SiteOrigin Unwind

WordPress.org	SiteOrigin Unwind
有効インストール	3,000+
WordPressバージョン	4.7
PHPバージョン	5.6.20

カスタマイズ

プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート（PHP）ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

SiteOrigin Unwindはカスタマイズが充実しているのでオリジナル性にこだわりたいアフィリエイターにおすすめのテーマです。ディフォルトにはない Theme Settings や Page Template Setting がカスタマイズとして装備されています。

テーマカスタマイザー

SiteOrigin Unwind のテーマカスタマイザーの内容です。

Theme Settings （テーマ設定）	Branding（ブランディング） 　- ヘッダーにロゴを表示 　- Retina（高解像度・ハイコントラスト）用ロゴ Fonts（フォント） 　- 詳細フォント（細部に使用） 　- メインフォント（本文に使用） 　- 見出しフォント（見出しに使用） 　- 明るい文字色（細部に使用） 　- 中間の文字色（本文に使用） 　- ダークな文字色（見出しに使用） Header（ヘッダー） 　ヘッダーデザイン 　　- ヘッダー上部メニュー 　　- ヘッダー下部メニュー 　　- メニューをヘッダー中央に表示 　　- メニューとロゴのインライン化 Navigation（ナビゲーション） 　- メニュー検索（メニューに検索を表示） 　- 固定メニュー（メニューを画面上部に貼りつける） Icons（アイコン） 　- モバイルメニューアイコン 　- フルスクリーン検索アイコン 　- メニュー検索アイコン 　- メニューを閉じる検索アイコン Layout（レイアウト） 　メインサイドバーの位置（左・右） Blog（ブログ） 　- ブログホームページの Jetpack アイキャッチコンテンツスライダー。 　- Jetpack のアイキャッチコンテンツスライダー画像オーバーレイ。また、ポストループウィジェットのスライダーにも適用されます。 　- アーカイブ投稿のアイキャッチ画像 　- 個別投稿のアイキャッチ画像 　- 投稿コンテンツ 　　ブログやアーカイブページでの投稿内容の表示方法を選択 　- 抜粋の長さ 　　手動で記事の抜粋が追加されていない場合は、記事の抜粋が生成されます。抜粋の文字数を選択 　- 記事の抜粋 続きを読む リンク 　- 個別投稿とアーカイブ投稿の日付 　- 個別投稿とアーカイブ投稿のカテゴリ Footer（フッター） 　フッターテキスト 　- プライバシーポリシーリンク 　- フッターの幅を制限
Page Template Setting （ページテンプレート）	Blog page（ブログページ） 　固定ページレーアウト 　- ページタイトル 　- ヘッダー下マージン 　- ヘッダー上マージン 　- ヘッダー 　- フッターウィジェット Searc Results（検索結果） 　固定ページレイアウト 　- ページタイトル 　- ヘッダー下マージン 　- フッター上マージン 　- ヘッダー 　- フッターウィジェット Not Found（見つかりません） 　固定ページレイアウト 　- ページタイトル 　- ヘッダー下マージン 　- フッター上マージン 　- ヘッダー 　- フッターウィジェット
サイト基本情報	サイトのタイトルとキャッチフレーズを設定
色	色を選択
背景画像	メディアライブラリから背景画像を選択
メニュー	Primary Menuで対応
ウィジェット	Sidebar Footer Mashead

css（スタイルシート）でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss（スタイルシート）を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css（スタイルシート）を追加するには、ダッシュボードの　外観　→　カスタマイズ　→　追加css　と進みコードを追加します。スタイルシートを適用させるには編集ブロックに　高度な設定で　「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル（PHP）でカスタマイズ

テンプレートファイル（テーマファイル）のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

• スタイル（style.css）
• テーマの関数
• 404テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

子テーマを作成する

テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

WordPressのカスタマイズ手順

WordPressをカスタマイズするには下記の手順で行うとよいでしょう。

1. WEBサイトの構成を考える　（※注１）
2. 不要な機能を削除する
3. 必要な拡張機能（プラグイン）を追加する
4. グローバルナビゲーションやサイドメニューを作る
5. TOPページを作る
6. 企業サイトなどは、会社案内や事業内容などを作る
7. お知らせや、ブログ（製品やサービスをカテゴリーに構成する）を設置する

※　注１）固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。

テーマの選び方

WordPressテーマを選ぶ際、ビジネスサイトでは、自社のイメージと近いデザインを選びましょう。中小企業や個人事業主の場合、高度なカスタマイズは負担が大きすぎ、デフォルトのデザインでサイトを作成し運用していくことが多いようです。このため、ビジネスサイトにおすすめな有料WordPressテーマを利用されるとデザインのカスタマイズが容易だったり、必要な機能がプラグインによって提供されているので、サイト運用開始時や運用中の負担を軽減できます。

テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に１つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。

• レスポンシブデザインなのか
• デザインをカスタマイズしやすいか
• ダウンロード数（利用されている数）が多いのか
• ブロックエディタに対応しているのか
• 日本語に対応しているのか
• テーマは安全なのか