Virtue やっぱりスゴイ! デモサイトが自サイトに変身

virtue_t_w

8月の終わりから今月にかけて、Virtueで別サイトをつくった。
これ以上管理サイトを増やしたくはないのだが、別のハマり物件(時々復活する)があって、
それ用のサイトがあったほうがいいだろうとの判断である。

MH Magazineとで少しだけ迷ったものの、デフォルトで設定されているある機能のためにVirtueにした。今のところは不要だけれど、将来必要になるかもしれないので。

Virtueでは三つ目のサイトである。少し前にList Category Posts を使って、最近の投稿を取得させるようカスタマイズしたサイトがあって、そちらの子テーマをそのままベースとして利用することにした。サイト構築&カスタマイズの大枠に問題はなく、エネルギーを新しい視点にそそぐことができた。おかげであらためてVirtueのスゴサを再認識した。そのあたりのメモ。

 

デモサイトを丸ごとインストール

知らなかったのだが、Virtueはデモサイトを丸ごと自サイトにインポート出来る。このテーマでどういうことができるのか、どういう使い方がいいのか、設定の最適解は何か、それらを知るために自サイト(をカスタマイズする前)に取り込んでみることをおすすめする。

方法はとっても簡単。Virtueをインストール>外観>Getting Started にある以下のリンクから[Kadence Importer]をダウンロードする。

Demo Content

ダウンロードしたZIPフォルダを、プラグインを追加>プラグインのアップロード からアップロードし、有効化する。これに先立ち、Virtue必須プラグイン、推奨プラグイン(Contact Form 7など)や、Woocommerceを利用する場合はそれも事前にダウンロード-有効化しておく。なお、子テーマでは機能しないので、親テーマを適用させておくこと。

ツール>Kadence Importer で希望のSite Style(1or2)を選択し、[Import demo content]をクリック。待つことしばし。Style1であれば、以下とまったく同じサイトが一発で立ち上がる。

Virtue Free WordPress Theme

なお、ダウンロードが完了したら、Kadence Importer プラグインは無効化しておく。

 

Theme Options の設定をチェック

画像も全て入ってしまうのであとから消していくのは大変だけれど、どこをどう設定すればいいのかを見るには、チュートリアルや英語マニュアルを読むよりはるかにわかりやすい。主にチェックするのはTheme Optionsの設定だろう。なお、この設定を > Import / Export でエクスポートしておけば、あとからインポートすることも可能で、他サイトの設定を持ってくることも出来るし、とっても便利。

ここでの設定の仕方は以前書いているのでアウトラインは繰り返さないけれど、今回あらたに気が付いたことをいくつか指摘しておきたい。小さな項目だけれど、とても大事なこともある。

●Page/Post Settings > Show Author Icon with posts?

⇒ OFF にする
デフォルトはオンだけれど、書き手が一人の場合不要であることと、管理画面サインインのアカウント名を知られないためにも、オフにしておくと良い。セキュリティー向上のためにfunctions.phpにオーサー名を調べられないようにするタグを追記したうえで、以前はこの部分をテーマファイルから削除していたのだが、それが不要になる。

functions.phpへの追記は以前こちらに書いた⇒

●Misc Settings > Custom Favicon +α

⇒ 16×16ピクセル、もしくは32×32ピクセルとマルチ化したファビコンをメディアにアップし、URLを指定するだけ。
ファビコンはPNGで作成し、以下で.ico ファイルに変換するのが楽。

https://ao-system.net/favicon/

Misc Settings では、コンタクトフォーム用のメルアド設定や、フッターのコピーライトも要チェック。コピーライトをテーマファイルを触らずに(特にフリーテーマで)修正できるというのは、結構スゴイんじゃないだろうか。

●Menu Settings > Mobile Menu Options

モバイルメニューは、色によっては表示されているかどうかわからなかったりするので、しっかりチェックが必要。また、そのままだとメニュー項目が縦にリストアップされ、ページのトップの文字とかぶってしまって(たぶんヘッダーをカスタマイズしているからだとも思うが)見にくい為、CSSを編集した。

たとえば、メニューナビのボタン部分の背景色と文字色を修正し、メニューオンの場合の項目の表示を横並びにし、行間などを調整する場合は、同じくTheme Options>Advanced Settingsに以下のように追記する。
(Theme Options >Advanced Styling でも色などは変えられるのだが)

.nav-trigger-case {  background: #740913;  color: #fff !important;  }
.kad-mobile-nav li {  float: left;  } 
.kad-mobile-nav li a {  background:#740913;  color: #fff !important;  padding: 4px 8px !important;  }

●Home Layout >Home Icon Menu

カテゴリーページやコンタクトページなど、任意のページにリンクさせることができるボタンメニュー。通常はアイコンリストから選択するが、自作のアイコンを表示させることも可能。また、アイコンではなく画像でもOK。いずれもメディアに画像をアップし、選択するだけ。

 

コンタクトフォーム

デモサイトで設定しているのではないのかもしれないが、固定ページでテンプレートにContactを選ぶと、Contactform7などで設定しなくても、コンタクトページが出来てしまう。Google地図の埋め込みやその他の情報が入るようになっているため左にスペースが空いてしまうが、適当な画像を置くか、メッセージを打ち込むなどすれば良い。

感心したのは、編集オプションのUse Simple Math Questionをyesにすれば、数式認証が表示されること。キャプチャ用プラグインを入れる必要がないというのもスゴイ。

 

Portfolio

どういう使い方をするのが良いのかイマイチわからないPortfolioだが、デモではプロジェクトとしている。固定ページテンプレートでPortofolio Gridを選べば、Portfolio用インデックスページが作成される。デモでは各Portfolioページ右上の前後のPortfolioへのリンクの真ん中、タイル模様アイコンがこのインデックスページに飛ぶのだが、なぜかうまくいかない。

どこかで設定できるのかもしれないがよくわからなかったので、子テーマtemplates/content-singleportfolio.php の以下の相対URLを直接修正した。

<a href="../"> → <a href="../projects">

 

自サイトに変身

ThemeOptionsでテーマカラーやフォントを選択し直し、ヘッダーやスライド画像をオリジナルに変え、ロゴやファビコンもオリジナルと差し替え、コンタクトフォームやカテゴリをメニューに加え、プロフィールやオープン宣言など何本かの記事を書けば(投稿ページの設定も色々で、ギャラリーやビデオの見せ方なども参考に)、いつのまにかデモサイトが自サイトに変身しているはず。

最後に、不用な記事や画像を削除、もしくは下書きに変更すれば作業完了!

 

  • トップへ戻る
  • カテゴリアーカイブ
  • HOME

コメント

メールアドレスが公開されることはありません。* は必須項目です。


*