Genesis子テーマStudio Proの設定方法

今回は Genesis 子テーマの Studio Pro を使って、Genesisサイトを設定する方法を紹介したいと思います。

制作するサイトによって表示する画像や文章など全く変わってくると思うので、まずはデモサイトと同じような表示にしてみましょう。

ウィジェットの設定

1 メインビジュアル

トップページのメインビジュアル部分は、カスタマイザーの『ヘッダーメディア』というセクションから変更することができます。
動画は、1920x1080px（8MB以下）でアップロードするよう推奨されています。

もし動画ではなく画像を表示したい場合には、ヘッダー画像という部分からヘッダー画像を追加することができます。

2 Front Page 1

Front Page 1は、メインビジュアルの上に表示する文字を追加することができます。

下のコードをカスタムHTMLウィジェットの中に書き込みます。

※ テキストウィジェットでも同じような表示になりますが、おかしな表示になることがあるので、テキストウィジェットではなくカスタムHTMLウィジェットを使う方がオススメです。

<h1>Hi, we're Studio Pro.<br>A digital agency.</h1>
<p>We transform great ideas into amazing digital products.</p>
<a href="#" class="button">See our work</a>

上のコードを追加すると、下のような表示になります。

3 Front Page 2

Front Page 2についても、カスタムHTMLウィジェットを使って、以下のコードを追加します。下は3つにコードが分かれていますが、それぞれ1つずつカスタムHTMLウィジェットを使って、コードを記入します。

<i class="icon-tools"></i>
<h6>Branding</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum Proin gravida niauctor aliquet.</p>

<i class="icon-mobile"></i>
<h6>Web</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum Proin gravida niauctor aliquet.</p>

<i class="icon-genius"></i>
<h6>Strategy</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum Proin gravida niauctor aliquet.</p>

コード追加後

アイコンについては、テーマ制作会社のサイトにアイコン一覧が用意されています。こちらから使いたいアイコンを選び、上のコード中にある <i> タグに、 icon-mobile や icon-phone のようにクラス名をつければ、それに応じたアイコンが表示されます。

4 Front Page 3

Front Page 3はショートコードを使ってポートフォリオを表示しているウィジェットエリアです。

コード中の posts_per_page="6" の数字を変更すれば、お好みの数だけポートフォリオをトップページに表示させることができます。

※ 画像サイズや投稿タイプについても、ショートコード内の引数を変えれば、別の内容に変更することができます。

[display-posts post_type="portfolio" image_size="portfolio" posts_per_page="6"]

ポートフォリオのアイテムについては、管理画面の Portfolio Items というメニューの中の Add New から追加することができます。アイキャッチ画像として設定した画像が、トップページやポートフォリオ一覧に表示されます。

5 Front Page 4

デモサイトでは、Front Page 4 のウィジェットエリアは、お問い合わせボタンを表示しています。カスタムHTMLウィジェットを使って、下のコードを入力すれば、デモサイトと同じような表示にすることができます。

<h2>This is a call to action</h2>
<a href="#" class="button gradient">Get Studio Pro</a>

6 Front Page 5

Front Page 5 では、Genesis Featured Postsプラグインを使って下のように設定します。Continue reading などの文章は、『もっと読む』などお好みで変更して下さい。

7 Before Header

Before Headerは、サイトの最上部に文字などを表示することができるウィジェットエリアです。ユーザーが×ボタンをクリックすると消えるようになっているので、メッセージのような文章を入れるのが良いかもしれません。
こちらについてもカスタムHTMLウィジェットで、HTMLコードを記入します。

<b>Get the Studio Pro theme today!</b>

8 Before Footer

Before Footerは、デモサイトでSNSアイコンを表示しているウィジェットエリアです。

こちらについても、カスタムHTMLウィジェットを使って、以下のコードを記入します。icon-... の…部分については、テーマ制作会社のアイコン一覧から、お好みのものに変更して下さい。

<ul class="aligncenter">
  <li class="ssi-dribbble"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-email"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-github"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-instagram"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-medium"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-snapchat"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
</ul>

配色の設定

Studio Pro では、管理画面のカスタマイザーから配色を変更することができます。

下の画像のように『色』というセクションから、カラーピッカーで配色を選択します。Gradient Left (Right) Color では、メインビジュアル部分やボタンで使われるグラデーションの色を設定することができます。

フッターのコピーライトを変更する

管理画面から簡単に変更できそうなオプションも見当たらなかったので、テーマファイルから変更しましょう。

テーマファイル（studio-proフォルダ）の中に includes フォルダがあるので、この中の helpers.php の240目付近のコードを変更します。

変更前

function studio_footer_creds_filter( $creds ) {
    $creds = '© 2020 <a href="' . CHILD_THEME_URL . '">Studio Pro</a> by <img src="' . get_stylesheet_directory_uri() . '/assets/images/favicon.png" width="10"> <a href="https://seothemes.com" title="Seo Themes">Seo Themes</a>. Built on the Genesis Framework.';
    return $creds;
}

変更後

function studio_footer_creds_filter( $creds ) {
    $creds = '© 2020 ' . get_bloginfo('name') . ' All Rights Reserved.';
    return $creds;
}

これでフッターのコピーライトから、テーマ制作会社へのリンクなどが消えて、自分のサイト名が入りました。コピーライトの編集方法は以前書いた記事もあるので、こちらも参考にして下さい。