テンプレート

【WooCommerce専用テーマ】KAKINAの設定方法を解説!

WooCommerceとは自身のワードプレスブログにクレジットカード決済機能などを搭載し、ブログ上で商品販売を可能にしてくれるプラグイン。

そのWooCommerce専用のテンプレートがいくつかありますが、どれも英語の説明で分かりにくい。

そこでここではWooCommerce専用テーマの無料版の代表格であるKAKINAの基本的な設定方法について説明していきたいと思います!

カツオのメルマガ

KAKINAの設定方法1 インストールして有効化し、必要なプラグインを入れる。

KAKINAの設定方法についてまずはKAKINAをインストールしましょう。

「外観」→「テーマ」→「新規追加」からKAKINAをインストールしてください。

 

KAKINAをインストールして有効化するとダッシュボード上に

This theme recommends the following plugins: CMB2, Kirki Toolkit (Theme options toolkit), WooCommerce Shortcodes, YITH WooCommerce Compare, YITH WooCommerce Quick View and YITH WooCommerce Wishlist.

Begin installing plugins | Dismiss this notice

というメッセージが出ますので「Begin installing plugins」の部分をクリックします。

下記画像で赤い部分をクリック↓

KAKINAの設定方法1

 

すると「Install Required Plugins」という画面に飛びますので、そこで推奨されているプラグインにチェックを入れてインストールし、有効化しましょう。

KAKINAの設定方法2

ちなみにここで推奨されているプラグインは以下の6つ。

  1. CMB2
    メタボックスやフォームなど入力欄をカスタマイズする。
  2. Kirki Toolkit (Theme options toolkit)
    「外観」→「カスタマイズ」の部分をグレードアップしてくれる。
  3. WooCommerce Shortcodes
    WooCommerceのショートコードを記事編集画面にドロップダウン形式で表示する。
  4. YITH WooCommerce Compare
    サイト訪問者に商品の比較が出来る機能を提供する。
  5. YITH WooCommerce Quick View
    商品のサムネイル画像のクイックビューが見れる機能を提供する。
  6. YITH WooCommerce Wishlist
    サイト訪問者が商品のお気に入りリストを作れるようにする。

必要ないと思ったプラグインはインストールしなくてもOKです。

カッパ君
カッパ君
沢山あるね…

プラグインをインストールしている途中で下記のような画面になる事がありますが、とりあえず下の「Return to Required Plugins Installer」をクリックして前の画面に戻ります。

KAKINAの設定方法3

 

ダッシュボード画面の左側のメニュー一覧から「プラグイン」を選択し、今インストールしたプラグインを有効化していきます。

これでKAKINAの最初の設定が出来ました。

KAKINAの設定方法2 固定ページを作る。

次に固定ページで記事タイトル「ホーム」というページと、記事タイトル「ブログ」というページを作ります。

これはブログのトップページとなる固定ページとブログ記事の一覧ページとなる固定ページページです。

ここでは「ホーム」と「ブログ」で説明していますが、名前は何でもOK。

カツオ
カツオ
自分で分かればOKだよー

「固定ページ」→「新規追加」で「ホーム」という固定ページと「ブログ」という固定ページを作りましょう。

なお、「ホーム」を作る際は「ページ属性」で「Homepage」を選択しておきましょう。(「ブログ」を作る際は必要なし)

KAKINAの設定方法を解説

 

2つの固定ページを作り終えたら「設定」→「表示設定」→「ホームページの表示」で

ホームページでは「ホーム」を

投稿ページでは「ブログ」を選択しておきましょう↓

最後に一番下まで進んで保存ボタンを押すのを忘れずに!

KAKINAの設定方法3 カスタマイズ

ではKAKINAのカスタマイズをしていきましょう!

基本的には「外観」→「カスタマイズ」の部分をいじっていくと主なところはカスタマイズ出来てしまうのですが、主なポイントを絞って取り上げていきたいと思います。

Sidebars

商品購入ページのサイドバーを表示・非表示や大きさを設定します。

「Right Sidebar」と「Left Sidebar」があり、下記画像は「Right Sidebar」のみONにしている形です↓

(赤く囲った部分がRight Sidebar)

KAKINAの設定方法 サイドバー

左右両方のサイドバーをONにしても良いし、片方だけでも良いでしょう。

サイドバーのサイズは1から4までの4段階で変更する事が出来ます。

Main Styling ロゴ画像を設定する。

まず、ロゴ画像を設定して第一印象を整えましょう。

下記画像で赤く囲った部分がロゴ画像です。

KAKINAのロゴ画像

ここはデフォルトではサイト名が文字で表示されているので、見栄えがいまいち…

カッパ君
カッパ君
文字じゃなくてロゴ画像が良いよねー。

「外観」→「カスタマイズ」→「Main Styling」でロゴ画像を設定できます。

推奨サイズは他とのバランスもあるのですが、デモサイトでは255×64pxが使用されていたので、そのくらいのサイズのロゴ画像を設定しましょう。

Top Bar

Top Barではブログの一番上の部分のテキストを設定できます。

画像で言うと左側が「Top bar left」で、右側が「Top bar center」。

KAKINAの設定方法 Top Barの設定

お店の電話番号やメールアドレスを入れるのが一般的ですが、他にもアイデア次第で色々なテキストが入るでしょう。

Search Bar & Social

ここではサーチバーとソーシャルボタンの表示・非表示が選択出来ます。

サーチバーはデモサイトで言うと、赤く囲った部分。

KAKINAの設定方法 サーチバー

サーチバーの右側の部分にFacebookやTwitterのマークが見えますが、そこがソーシャルボタンです。

サーチバーを非表示にするとソーシャルボタンも非表示になり、サーチバーを表示するとソーシャルボタンも表示されるようになります。

カツオ
カツオ
運命共同体なんです。

Site Background

ここでは背景色や画像を選択する事が出来ます。

デモサイトの画像で言うと両サイドの黒い部分が背景で、その色を変えたり、画像に変更出来たりする訳です。

KAKINAの設定方法 背景の設定

背景が変わるとサイト全体の印象がガラッと変わるので、地味に重要な設定となります。

WooCommerce

ここでは商品の購入ページに関わる設定を行う事が出来ます。

色々といじる部分があるので、箇条書きにて端的に説明していきます。

  1. Header Wishlist icon
    お気に入りリストの表示・非表示を切り替えます。
    (上記画像の①)
  2. My Account/Login link
    マイアカウントページへのログインリンクの表示・非表示を切り替えます。
    (上記画像の②)
  3. Header Cart
    カートページへのリンクの表示・非表示を切り替えます。
    (上記画像の③)
  4. Breadcrumbs
    パンくずリストの表示・非表示を切り替えます。
    (上記画像の④)
  5. Gallery zoom
    商品の画像にカーソルを合わせると画像が拡大される機能。
  6. Gallery lightbox
    商品の画像をクリックすると拡大された画像が表示される機能。
  7. Gallery slider
    商品の画像のスライダー機能。
  8. Number of products
    1ページに表示される商品の数を2から60の間で指定します。
  9. Number of products per row
    1列に表示される商品の数を2から5の間で指定します。

①から⑦はとりあえずONにしておいて、必要ないと思えたら後からOFFにすればOKだと思います。

その他の部分

その他の部分はKAKINA以外のテンプレートでも共通ですので、説明は割愛します。

KAKINAの設定方法4 ちょっと難しいカスタマイズ

ページ下部に表示されるクレジットを消したい。

KAKINAではページ下部に

PROUDLY POWERED BY WORDPRESS | THEME: KAKINA BY THEMES4WP

というクレジットが表示されてしまいます。

これを消したいという場合は「外観」→「テーマエディター」と進み、「footer.php」の下記の部分を削除します。

カツオ
カツオ
ブログが重くなるのでコードハイライトのプラグインを入れて無いので、画像で失礼します(汗)

※カスタマイズする時は子テーマを使用し、バックアップを取っておく事を強くお勧めします。

KAKINAの設定方法 まとめ

WooCommerce専用テーマであるKAKINAの設定方法について述べてきました。

色々と便利な機能がついているKAKINAではありますが、説明の大部分が英語である事から中々とっつきにくい部分もあろうかと思います。

しかし、基本的な部分を設定してしまえば、機能としては商品販売ページが動いていきますし、後は習うより慣れろでやってみるしかない部分もあります。

ぜひやってみて下さい!

会社だけの人生を送りたい人は絶対読まないで下さい↓

カツオ
カツオ
参加無料のオンライン講座やってます。

副業で収入UPしたい!会社に依存したくない!スキルを身に付けたい!

そんな貴方は参加しなきゃ損!

カッパ君
カッパ君
参加者限定特典初心者でも月5万円稼げるブログノウハウをプレゼント!

参加者しか見れない秘密のコンテンツも盛りだくさん!

カツオのメルマガ
 

※携帯電話のメールアドレスでは登録出来ませんのでご注意下さい。

GmailやYahooメールなどがオススメ。

ABOUT ME
カツオ
大学卒業後に就職した会社では会社人間となることを余儀なくされるが、「会社に魂を売っても仕方ないな」と気が付いて退社。 ネットで検索していたらブログから始めて初心者でも個人ビジネスが出来る事を知り、実践してみたところ、月収10万→30万→100万とどんどんステップアップ。 今はやりたくない事はやらない、魂に正直なライフスタイルを送っている。本業は坊主です。