テンプレートカスタマイズ:BizVector編

BizVector(ビズベクトル)は、企業向けのテンプレートですが管理画面が非常に強力なのでワードプレス初心者にも簡単に導入できるテンプレートです。今日は、このBizVectorの導入およびカスタマイズについて紹介しましょう。

Initializing...

概要

BizVectorは基本的に無料で商用利用も可能なワードプレス向けのテンプレートです。最新のワードプレス4.3には若干問題があるらしく公式にはまだ対応していないそう。ただちょっと試しましが現時点で動作もそんなにおかしくはなさそうです。とにかく新しいテンプレートを利用しようとした場合は、やはりそれなりの使い方をマスターする必要があるので、導入時におけるノウハウと簡単なカスタマイズ法についてお教えしましょう。

  • レイアウトは1カラムおよび2カラムが選択可能。
  • SNSボタンの貼り付けも管理画面から簡単導入
  • テンプレートの配色を変えるスキン対応

ダウンロード

ワードプレスにテンプレートを新規に導入する場合は、まずBizVectorのサイトより本体をダウンロードしなければなりません。

執筆時点のバージョンは1.8.9となっています。

インストール

ダウンロードしたファイルはZIPファイルなので解凍し、出てきたBiz-Vectorというフォルダーを、ワードプレスのテーマフォルダー(/wp-content/themes/)にFTPでアップロードしましょう。これは他のテンプレートファイルの導入にしかたと一緒ですね。これで管理画面のメニューから外観>テーマでBizVectorを選択するとテンプレートファイルの適用が完了し、すぐにサイトを表示させることが出来ます。

BizVectorは何もしない状態だとこのような赤色のサイトとなります

BizVectorは何もしない状態だとこのような赤色のサイトとなります

カスタムメニュー

BizVectorを有効にした場合のカスタムメニュー(外観)について説明します。

bizvector_custom-menu

 

 項目 カスタムできる内容
テーマ 他のテンプレートを適用する場合に使用します
ウィジット

サイドバーに新着リストを表示するような場合にウィジットを配置します。BizVectorの場合、トップページ、投稿ページ、固定ページ別々に指定することができます。

メニュー 画面上部などにナビゲーションメニューを表示します
背景 全体の背景色を指定します
CSSカスタマイズ BizVector特有のメニューで、スタイルを変更する場合にStyle.cssを編集しますが、BizVectorの場合この管理画面からCSSスタイルを編集できます
高度な設定 カスタマイズ項目についてさらに詳細に設定する場合に使用します

 これから本格的なカスタマイズ作業をおこなう前に、高度な設定メニューをのぞいてみてどんな項目が管理画面でできるかのぞいてみると後々作業が楽になります。

カスタマイズ前の知識

テンプレートを適用するとすぐにサイトの表示が可能になり、変更したい事柄が頭に思い描くとおもいますが、これからカスタマイズ作業の前提となる知識を覚えておきましょう。

 

  • BizVectorは企業向けを意識したテンプレートなので頻性にバージョンアップがなされます。できればいつも最新のバージョンを使いたいところですが、テーマファイルを直接編集するとバージョンアップすると消えて無くなってしまいますので、いつでもバージョンアップできるようにワードプレスの子テーマというものにカスタマイズをおこなっていく事になります。まだワードプレスの子テーマとはなんぞやという方は、Google検索で「ワードプレス  子テーマ 作成」というようなキーワードで探してみてください。
  • BizVectorのstyle.cssの中身は空っぽな事に注目。これは後から説明するCSSを動的に生成してスキンを適用できるようにするからです。
  • BizVectorのカスタマイズは基本的に管理画面からできるものにすると作業が捗ります。これまでのようにテーマファイルの編集を中心にかんがえるととんでもないことになりますので、初心者は、なるべくテーマファイルの編集を考えずにおこなうことをおすすめします。
  • BizVectorをさらにカスタマイズする場合は、有料となりますが専用のプラグインを導入するという方法もあります。例えば、レイアウトの基本は2カラムまでですが、BizVectorのサイトに行くと有料で3カラム対応するプラグインなどがあります。
  • せめてカラーをオリジナルにしたいという場合は、適用されるクラスやIDは自分で探さなければなりません。

以上

カスタマイズの参考になるそうなサイトを列挙します。

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る