WordPressのテーマをパーソナライズしてブランドに合わせる方法
公開: 2017-07-14WordPressのテーマにはさまざまな形式とサイズがありますが、テーマのカスタマイズ手法は同じです。 あるテーマをカスタマイズする方法を知っていれば、別のテーマを扱う方がはるかに簡単です。
この記事では、医療WebサイトのCloe Brooks WordPressテーマについて説明し、そのデザイン、レイアウトをカスタマイズして、基本的に独自のものにする方法を示します。
空のテーマとデモコンテンツ
テーマをインストールすると、ページとレイアウトを最初から作成するか、ページを埋めて最初からサイトを美しくする、事前に作成されたダミーデータをインストールするかの2つのオプションがあります。
それぞれの方法には長所と短所があります。たとえば、デモデータをインポートする場合は、後でサイトをクリアし、不要なページ、投稿、カテゴリなどを削除する必要があります。ただし、クリーンインストールでは時間がかかりすぎる可能性があります。元のページレイアウトと設定を再作成するために消費します。
デモコンテンツオプションを使用して、サイト全体のデモデータをインストールすることをお勧めします。 すべてを最初から作成するよりも、テキストと画像を独自のものに置き換えて残りのデータを削除する方がはるかに簡単です。 結局のところ、コンテンツの削除は作成よりも簡単です。
サイトのロゴとファビコン
デモコンテンツのインストール後、サイトのパーソナライズを開始できます。 そのための最も簡単な方法は、ロゴとファビコンをアップロードすることです。
これらの2つのコンポーネントは、サイトを他のサイトから分離し、特徴的なものにします。
ファビコンは、ここで設定できるもう1つのブランドアイデンティティ要素です。 ブラウザのタブの先頭に表示されます。 ファビコンをアップロードするには、512ピクセル幅の.png画像を使用します。
ロゴをアップロードするには、 [外観]> [テーマオプション]> [カスタマイズ]に移動し、[メインロゴ]セクションでロゴ画像を選択します。 ロゴが大きすぎたり小さすぎたりする場合は、「ロゴの高さ」の値を調整して変更できます。
カラースキーム
配色はあらゆるデザインの不可欠な部分であり、それを変更する機能により、サイトを大幅にパーソナライズする自由が得られます。
デフォルトでは、Cloe Brooksテーマは、温かみのあるパステルカラーとブルーのパステルカラーの組み合わせを特徴としています。 これらの色相は、医療Webサイトに適しています。 ただし、ブランドの色と一致しない場合、または単に配色を少し変えたい場合は、テーマオプションパネルで調整できます。
[外観]> [フォントと色]に移動し、[配色]を選択します。 Cloe Brooksには、明るい配色と暗い配色の2つのデフォルトの配色が付属していることがわかります。 サイトの外観をすばやく変更し、デザイナーの元の色の選択を維持したい場合に便利です。
ただし、元の色を変更したり、配色を完全に再設計したりすることもできます。 おそらく最も時間のかからない解決策は、テーマのアクセントカラーを変更することです。 このようにして、サイトのカラーパレットの大幅な変更を即座に確認できます。 より根本的な変更については、入力フィールド、メインと代替の背景色、境界線のアクセント色など、他のサイト要素の色を調整することもできます。これらは微妙な変更ですが、デザインを完全に変更する場合は必要です。 。
もう1つの優れた点は、色の変更をプレビューして、色設定パネルで他のWebサイト要素と組み合わせて表示できることです。
場合によっては、テーマデモの一部の要素に、新しく割り当てられた色がないように見えることがあります。 これは、これらの要素の色がVisualComposerを介して割り当てられることを意味します。 これらの要素を含む対応するページを開いて修正するか、コンテンツのアップロードを開始するまで無視することができます。
便利なオプションは、現在の配色設定を新しい配色として保存するか、テーマの元の色に切り替えたい場合に備えて、既存の配色を複製して保存することです。
配色のカスタマイズが完了したら、[外観] > [テーマオプション]> [カスタマイズ]の[ボディスタイル]タブで配色を割り当てます。
タイポグラフィ
タイポグラフィはサイトの配色や画像ほど重要ではないように思われるかもしれませんが、実際にはフォントは視聴者にさらに大きな影響を与えます。 コンテンツのスタイルが不適切でない場合、読者はメッセージを理解するのに苦労するでしょう。
Cloe Brooksは、エレガントなカスタムsans-serif書体を備えていますが、必要に応じて、他の任意のフォントに変更できます。 Google Fontsコレクションから利用可能なフォントを選択するか、独自のフォントをアップロードできます。
テーマのフォント設定は、[外観]> [フォントと色]> [フォント]にあります。 設定は用途が広く、サイトのテキストスタイルを細かく制御できます。 見出し、本文、リンク、入力フィールド、ボタン、メニュー項目などの要素のフォントを調整します。 フォントのスタイル、太さ、線の高さ、装飾を選択したり、要素の上下の余白を指定したりすることもできます。
タイポグラフィは微妙な分野であり、初心者の場合、物事を台無しにするのは簡単です。 これまでタイポグラフィを扱ったことがなくても、テーマの外観を変えたい場合は、元のテーマのフォントの選択に注意を払い、同じスタイルのフォントに置き換えることをお勧めします。 たとえば、元のテーマでサンセリフフォントを使用している場合は、別のサンセリフフォントに置き換えることをお勧めします。
もう1つのヒントは、見出しや本文のフォントなど、異なるフォントグループ間のコントラストを維持することです。 コントラストは、サイズ、色、フォントの太さ、およびフォントスタイルを使用して実現できます。
ソーシャルアカウントと連絡先情報
次のステップは、連絡先情報を入力し、ソーシャルメディアアカウントをWebサイトに追加することです。
ソーシャルメディアの設定は、 [外観]> [テーマオプション]> [ソーシャル]に移動して見つけることができます。
ソーシャルネットワークのアドレスリンクとアイコンを指定することで、必要な数のアカウントを自由に追加できます。
Twitterフィードをサイトに統合するには、ここで、コンシューマーキー、コンシューマーシークレットなどのTwitterAPIの詳細を入力する必要があります。
連絡先情報は、[外観]> [テーマオプション]> [連絡先情報]に入力できます。 そこで、メールアドレス、会社の住所、営業時間、電話番号などを指定できます。 この情報は、Webサイトのヘッダーセクションとフッターセクションで使用されます。
まとめ
Cloe Brooksテーマでカスタマイズできるものは他にもたくさんありますが、ここでは最も重要なものについて説明しました。
デモデータをインストールする必要があるかどうか、ロゴとファビコンをアップロードする方法などの手順について説明しました。 また、サイトの配色とタイポグラフィを微調整する方法も学びました。 最後に、テーマのどこで連絡先情報とソーシャルメディアアカウントへのリンクを指定できるかを学びました。
ご覧のとおり、テーマのカスタマイズは、一見したほど気が遠くなるようなものではありません。 少し時間と忍耐が必要ですが、テーマが適切に作成されていれば、プロセスは簡単で直感的になります。 WordPressテーマのカスタマイズについてどのような経験がありますか？ コメントであなたの考えを私たちと共有してください。